선형’s react 심화

Created: December 19, 2022 9:37 AM

Redux Toolkit

yarn add react-redux @reduxjs/toolkit

DevTool

redux dev tools 라는 기능이 있다. 디버깅 할 때 좋다.

구글 웹 스토어에서 다운 받는 기능이다.

우리가 toolKit 다운 받을 때 이미 devTools도 다운받았다

= toolKit 안 깔면 devTools 설정 따로 해줘야한다.

thunk

immer

프론트 엔드 만들 때 임시로 서버 역할을 하는 것

mock 데이터를 가지고 있다.

yarn add json-server

백 엔드 서버이기 때문에 리액트와 별개로 켜줘야 한다.

yarn json-server --watch db.json --port 3001

항상 이 서버에 접근하고 싶다면 리액트 프로젝트를 배포하는 것 처럼 배포해야한다.

브라우저와 node.js를 위한 promise 기반 HTTP 클라이언트 라이브러리..?

api 서버와 통신하는 방법을 필수로 알아야 한다.

axios method 4가지

yarn add axios

GET - read
POST - create

DELETE -delete

PATCH -update

요청하는 법은 라이브러리에서 정해준 대로 따라야 한다.

api 명세를 작성하는 법

path variable

정해져 있는 아이디 같은 것들을 사용해서 넘겨주는 경우

예시

GET /posts/1

query

키값이 있는 경우

예시

GET / posts?title=joson-server&author=typicode

await async를 써주었다. 이건 promise 객체에 쓰는 것이다. axios 로 만든 json 데이터를 받을 때 promise 객체인가 보다.

보통 백 엔드에서 post는 서버에 새로운 데이터를 넣어줄 때 쓰지만

여기서는 클라이언트의 데이터를 body 형태로 서버로 보내줄 때 쓴다.

네트워크의 헤더 텝

네트워크의 페이로드 탭 - 우리가 보낸 페이로드가 있는 경우만 뜬다.

네트워크의 응답 탭 - 우리의 요청에 대한 서버의 응답

json서버는 post 요청을 보냈을 때 클라이언트가 보낸 body를 그대로 응답해주도록 되어있다. (자동이 아니라 api 명세서에 설정되어 있는 내용)