Backend 3강

최창서·2022년 6월 30일

깊이있는 구조분해 할당 SpreadOperator / RestParameter

얕은복사

const aaa = {
	name : "철수",
    age : "13"
}

====> 아래와 같이 얕은 복사 가능, 배열도 마찬가지

const bbb = {...aaa}

deepcopy 라이브러리 lodash

객체를 깊은 복사 할때 JSON.parse(JSON.stringify(object)) 하게되면 큰 데이터의 경우 성능저하가 올 수 있는데 lodash를 활용하면 이를 해결할 수 있다.

Rest Parameter

const child = {
	name : "철수",
    age : 8,
    school : "다람쥐초등학교",
    money : 2000,
    hobby: "수영"
}

===> 객체에서 원본을 건드리지 않고 데이터 삭제할때 유용하다.

const {money, hobby, ...rest} = child

데이터 전송 방법 HTTP / API / Graphql / Rest

HTTP

HTTP 통신은 데이터를 주고 받기위해 요청(텍스트,하이퍼텍스트)과 응답(API를 통해 받아서 DB에 저장 후)을 해야한다. 이때 응답에 상태코드를 사용하게 된다.
아래 예시
1xx (정보): 요청을 받았으며 프로세스를 계속한다
2xx (성공): 요청을 성공적으로 받았으며 인식했고 수용하였다
3xx (리다이렉션): 요청 완료를 위해 추가 작업 조치가 필요하다
4xx (클라이언트 오류): 요청의 문법이 잘못되었거나 요청을 처리할 수 없다
5xx (서버 오류): 서버가 명백히 유효한 요청에 대해 충족을 실패했다

요청과 응답에는 내용이 들어있는 body가 있고 header에 누가 보냈는지 보내는 내용의 형태 등 요약 정보가 들어가게 된다.

API

프론트엔드에서 요청하는 기능에 따라 API가 각각 하나씩 있어야한다.

REST VS GRAPHQL

둘다 HTTP를 통해 통신한다. 백엔드에서 다른 백엔드로 요청할 경우 마찬가지로 axios 사용

REST-API
https://naver.com/board/1 ex) 1번 게시물 요청
프론트엔드 : axios를 사용하여 요청

graphql-API
board(1) ex) 1번 게시물 요청
프론트엔드 : apollo client를 사용하여 요청

restAPI의 경우 프론트엔드에서 해당하는 주소에 데이터를 모두 받아가야하지만, graphql-API의 경우 원하는 데이터를 선택적으로 가져갈 수 있다.

graphql이 효율적이긴 하지만 restAPI를 알아야하는 이유
1. 모든 회사가 트래픽이 크지 않다
2. 기존에 restAPI를 사용하는 회사가 많다,
3. openAPI의 경우 일반적으로 restAPI 사용

JSON(자바스크립트 객체 표기법)

요청과 응답 모두 객체를 활용한다 엄밀히 말하면 객체의 모양을한 문자열(text)이다.

CRUD(create,read,update,delete)

일반적으로 어떤 기능을 만들게되면 최소 4개 이상의 기능에 해당하는 api를 만들어야한다.
rest API의 경우 create : POST , read : GET, update : PUT, delete : DELETE
graphql API의 경우 create,update,delete : MUTATION , read : QUERY