리액트 숙련

DOM

• 문서(document) : 컴포넌트로 구성된 웹페이지
• 엘리먼트(element) : 페이지를 이루는 컴포넌트
• Dom TREE : 엘리먼트들을 tree 형태로 표현한 것

가상 DOM

• 실제 DOM과 완벽히 동일한 복사본
  이를 객체의 형태로 메모리에 저장하여 실제 DOM보다 빠르게 조작가능

조작과정

• 리액트는 가상돔을 2개 가짐
  • 1.화면 갱신 전의 구조를 담은 가상DOM
  • 2.화면 갱신 후 보여질 가상DOM
• diffing : 가상DOM 1번과 2번을 비교하여 변경점을 파악
• 재조정(reconciliation) : 변경점만 DOM에 적용,
  이때 변경점을 '한번에 바꿈' => Batch Update

Batch Update

렌더링은 DOM에서 가장 비용이 많이 드는 작업
비용을 줄이기 위해 엘리먼트의 변경점을 한번에 반영
ex) 클릭 한 번에 5개의 엘리먼트 변경

• 실제 DOM : 5번의 화면 갱신
• 가상 DOM : Batch Update로 단 한번만 갱신

비동기 프로그래밍 입문

• 동기적 방식 : 앞선 코드가 끝나야 이후 코드 실행(일반적인 방식)
• 비동기적 방식 : 실행중인 코드의 완료여부와 별개로 다음 코드를 실행

비동기적 방식의 예

• setTimeout, addEventListner 등
• 별도의 요청,실행 대기,보류 등과 관련된 코드
• 대표적으로 서버 통신과 관련된 로직들을 포함

콜백지옥

• 비동기적 프로그래밍을 하다 마주치는 문제
• 콜백함수를 익명함수로 전달하는 과정이 반복되어 코드에 들여쓰기를 많이 하여 그 깊이가 지옥같음
• 주로 이벤트 처리 및 서버 통신과 같은 비동기적 작업 수행시 발생
• 문제점 : 가독성이 떨어지고 수정이 어려움

=> promise 객체 탄생!

Promise객체

왜 promise 인가?

비동기 작업은 작업 수행의 제어권을 제 3자에게 넘겨준 후 약속된 작업이 완료된 후 제어권을 돌려받음

promise 객체에 담긴 주요상태정보

• 대기(pending) : 데이터 요청 직후, 성공/실패가 되지 않은 상태
• 이행(fulfilled) : 성공적으로 데이터를 받은 경우
• 거부(rejected) : 데이터 전달을 못 받은 경우

promise 객체 핸들링 방법

then ~ catch (es6)

데이터 요청
.then((response)=>{}) //성공시 콜백함수
.catch((error)=>{}) //에러시 콜백함수
.finally(()=>{}) //성공,에러 상관없이 항상 실행하는 콜백함수

async ~ await (es7)

const getData = async()=>{
	try{
    	const response = await 데이터요청
        //성공시 콜백함수
    } catch(error){
    	//실패시 콜백함수
    }
} 

REST API

REpresentational State Transfer의 약자
어떤 자원에 대한 CRUD를 진행할 수 있게 HTTP Method를 사용하여 요청을 보내는 것

• 자원(Resource) : URI (URL)
• 행위(Verb) : HTTP Method
• 표현(Representations)
  get/users/3/pofile => 유저중 3번id의 프로필
  행위/자원~

규칙

• URI는 명사를 사용하여 소문자로 작성
• 명사는 복수형을 사용
• URI 마지막에는 ' / '를 포함하지 않는다.
• URI는 ' _ '가 아닌 ' - '를 사용한다
• URI에는 파일확장자를 표시하지 않는다.

RestFull하다

REST API의 저건을 만족시킨 통신설계

RestFull하지 못한 경우

• CRUD 기능을 모두 POST로 구현
• URI에 행위에 대한 부분이 들어간 경우(명사가 아닌 동사사용)

Path Variable vs Query Parameter

• Path Variable
  /users/10
  • 경로 자체에 변수(10)를 사용
  • 전체 데이터 또는 특정 하나의 데이터를 다룰 때 처럼, 리소스를 식별하기 위해 사용
• Query Parameter
  /users?user_id=10
  • 데이터를 정렬하거나 필터링 하는 경우에 적합

JSON

개념

JavaScript Object Notation
자바스크립트 객체 문법에 토대를 둔 문자기반의 데이터 교환 형식

구조

자바스크립트 객체 리터럴 작성법을 따름
원시자료형을 가질 수 있고 중첩된 계층구조 또한 가질 수 있음

Method

• stringify() : 자바스크립트 객체 -> JSON 문자열 반환

  JSON.stringify(자바스크립트 객체)

  undefined, 함수, stmbol => null로 들어감
• parse() : JSON 문자열 -> 자바스크립트 객체 반환

  JSON.parse(json파일)