JavaScript ES6-11 최신 문법 공부하기
- Shorthand property names
- Destructuring assignment
- Spread syntax (...)
- Default parameters
- Conditional (ternary) operator
- Template literals
- Optional chaining (?.)
- Nullish coalescing operator (??)
드림코딩, 자바스크립트 최신 문법 (ES6, ES11) | 모르면 후회 하는 최신 문법과 사용법 정리 🐶
DOM과 virtual DOM이란? (어려움)
DOM(Document Object Model)은 HTML 및 XML 문서의 프로그래밍 인터페이스를 말한다. HTML은 브라우저에서 실행될 수 있게 DOM tree로 파싱되고, 이를 바탕으로 렌더링된다. virtual DOM은 추상화된 DOM으로, 실제 DOM을 조작하고 렌더링하는 과정에서 소모되는 시간을 줄인다. DOM과 유사한 객체를 메모리에 올려놓고, 변경 사항이 생기면 virtual DOM을 변경한 뒤, 실제 DOM에는 변경 사항만을 반영하는 반응형 웹을 만들 수 있다. React도 virtual DOM을 통해 구현하는 라이브러리이다.
카버의 코딩일기, 브라우저가 그려지는 원리 및 virtual DOM
webpack과 Babel이란? (어려움)
Babel은 모든 실행 환경에서 JavaScript ES6 코드를 ES5 코드로 변환하고, React의 JSX와 TypeScript까지 변환해주는 JavaScript 컴파일러이다. 특정 버전 이상에만 실행되는 코드나 일부 브라우저에서 실행되지 않는 코드들을 정상 작동하게 만들어준다. webpack은 프로젝트 구조를 분석하고 JavaScript 모듈을 비롯한 관련 리소스들을 찾은 다음, 이를 브라우저에서 사용할 수 있는 번들로 묶고 패킹하는 모듈 번들러이다. 모듈 번들러는 여러 개로 나뉜 파일을 하나로 만드는 라이브러리이고, 그 파일들을 웹 페이지에서 보여주기 위해 서버에 개별적으로 요청하지 않고 하나로 압축한 뒤 요청해 코드를 최적화한다.
코딩애플, React 기초 2강 : 리액트에선 HTML대신 JSX 써야함 (JSX 사용법)
JWT 인증 방식이란 무엇이고 사용 이유는?
JWT(JSON Web Token)는 JSON으로 구성되어 있는 토큰을 말한다. 기존의 세션 인증 방식은 인증 관련 정보를 세션 스토리지에 저장했기 때문에 서버가 과부하되거나 서버를 확장하기 어려웠다. 이를 보완(서버 자원을 절약)하기 위해 사용자 인증에 필요한 정보를 토큰에 담아 별도 저장소에 정보를 저장할 필요가 없는 JWT를 사용하게 되었다. 토큰이란 로그인 이후 서버가 만들어주는 문자열이고, 문자열 안에는 사용자 로그인 정보와 서버의 서명이 들어있다. 사용자가 로그인하면 서버는 사용자에게 토큰을 발급하고, 사용자는 토큰과 함께 다른 API 작업을 요청한다. 서버는 토큰의 유효성 검사를 통해 요청한 것에 대해 응답한다. 그러나 한번 발급된 토큰은 수정 및 폐기가 불가능하다는 단점이 있고, 유효 기간을 짧게 지정하는 게 중요하다.
불타는 키보드, [인증/인가]Session(세션)과 Token(토큰)(JWT)의 차이점
Redux란 무엇이고 장단점은?
Redux란 최근 가장 많이 사용되는 상태 관리 라이브러리이다. 컴포넌트의 상태(state) 관련 로직을 따로 분리해 관리할 수 있고, 상태를 공유할 때에도 다른 컴포넌트를 경유하지 않고 store를 통해 전달할 수 있어 편리하다. 그리고 미들웨어 기능을 제공해 비동기 작업을 훨씬 효율적으로 할 수 있다. 프로젝트를 진행할 때 로그인 상태에서만 댓글 창을 활성화한다고 해보자. Redux를 쓰지 않으면 여러 컴포넌트를 거쳐 로그인 상태를 받아야 하는데, Redux를 사용하면 store에 연결만 하면 바로 로그인 상태를 알 수 있어서 편하게 진행할 수 있다. Redux에서 데이터를 가공하기 위해서는 action을 만들어야 한다. 그 action의 이름을 type이라 하고 dispatch해야 store 내부에 있는 데이터가 바뀐다. 또한 그 action들을 어떻게 동작시킬지 구현해 저장하는 장소를 reducer라고 한다. Redux의 단점은 데이터를 다룰 때마다 action을 하나씩 추가해야 하기 때문에 조금 번거롭고 상대적으로 코드가 길어진다는 것이다.
CORS란? 해결 방법은? (어려움)
CORS(Cross-Origin Resource Sharing)는 추가 HTTP 헤더를 사용해 어떤 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 자원에 접근할 수 있는 권한을 갖도록 브라우저에 알려준다. 간단히 설명하면 브라우저에서 교차 출처 리소스 요청을 안전하게 전달하는 메커니즘이다. CORS 접근 제어 시나리오는 총 세 가지(preflight requests, simple requests, credentialed requests)이다.
코딩애플, AJAX가 무엇인지 설명하는 영상 (+CORS, fetch 어쩌구)
REST API란?
REST(Representational State Transfer)란 효율적이고 안정적이며 확장 가능한 분산 시스템을 가져올 수 있는 소프트웨어 아키텍처 디자인 제약의 모음을 나타낸다. 그리고 그 제약들을 준수했을 때 그 시스템은 RESTful하다고 일컬어진다. 그러니까 REST는 HTTP URI를 통해 자원을 명시하고, HTTP 요청 메서드를 통해 해당 자원(이를 URI라고 하는데, 웹 자료의 id, 즉 내가 업로드한 블로그 글의 특정 id를 입력해야 글을 볼 수 있는 것처럼 URI는 인터넷 자원을 나타내는 고유 식별자)에 대한 CRUD를 적용하는 것이다. REST API는 RESTful하게 클라이언트와 서버 간에 데이터를 주고받는 방식이다. REST API의 특징에는 유니폼 인터페이스(HTTP 표준에만 따르면 IOS든 안드로이드든 특정 언어나 기술에 종속되지 않고 모든 플랫폼에 사용할 수 있으며, URI로 지정한 리소스를 조작 가능한 아키텍처 스타일), 무상태성(작업을 위한 상태 정보를 따로 저장하거나 관리하지 않음)이 있다.