json-server

아주 간단한 DB와 API 서버를 생성해주는 패키지
→ 실제 DB 구축전까지 임시적으로 사용할 mock data 생성

Axios

node.js와 브라우저를 위한 Promise 기반 http 클라이언트
→ http를 이용해서 서버와 통신하기 위해 사용하는 패키지

• 전체 정보나 상세 정보는 아래와 같이 path variable 로 url을 작성

GET /posts
GET /posts/1

• filter와 같은 기능을 위해서 GET 요청을 하고자할 때는 query로 작성

GET /posts?title=json-server&author=typicode
GET /posts?id=1&id=2

fetch vs Axios 비교

Axios

장점

• response timeout 처리 방법이 있다. (fetch에는 존재하지 않는 기능)
• promise 기반으로 다루기가 쉽다
• 크로스 브라우징에 신경을 많이썼기에 브라우저 호환성이 뛰어나다.

단점

• 모듈 설치를 해줘야한다.

fetch

장점

• 내장 라이브러리이기에 별도의 import를 해줄 필요가 없다.
• promise 기반으로 다루기가 쉽다.
• 내장 라이브러리이기에 사용하는 프레임워크가 안정적이지 않을 때 사용하기 좋다.

단점

• internet explorer의 경우에는 fetch를 지원하지 않는 버전도 존재한다. (브라우저 호환성이 상대적으로 떨어진다.)
• 기능이 부족하다.

env

API 서버의 IP 또는 URL을 숨겨서 처리

env 우선순위 (왼쪽에 있을수록 우선순위가 높다.)

• npm start : .env.development.local, .env.local, .env.development, .env
• npm run build : .env.production.local, .env.local, .env.production, .env
• npm test : .env.test.local, .env.test, .env (note .env.local is missing)

thunk

dispatch(함수) → 함수실행 → 함수안에서 dispatch(객체)

• dispatch부터 state를 반환하는 그 중간에 우리가 하고자 하는 작업을 함수를 통해 넣을 수 있고, 그것이 중간에 실행이 되는 것.
• 객체가 아닌 함수를 dispatch 하는 것을 thunk 함수라 한다.
• payload는 thunk함수에 넣어주면, 리덕스 모듈에서 args로 받을 수 있다.