yarn으로 React 초기 셋팅하기

• 세팅할 때마다 까먹는 나를 위한 페이지
• 이번에 최종 프로젝트를 진행하면서 계속 찾아봐야하는 React 초기 세팅 방법을 정리하기로 했다.

1. react 설치

yarn create reacte-app 폴더명

• typescript 함께 설치 시

yarn create react-app 폴더명 --template typescript

2. yarn install

• 만들어진 폴더로 들어가서 yarn install을 하여 node_modules 만들기

yarn install

3. 필요한 패키지 설치

styled-components (Css in Js)

yarn add styled-components

styled-components (TypeScript)

yarn add styled-components @types/styled-components

redux toolkit

yarn add @reduxjs/toolkit react-redux

uuid

yarn add @types/uuid

json-server

yarn add json-server

실행하기

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

• scripts 안에 json을 넣어 바로 실행할 수 있도록 지정(협업할 때 좋음)

// package.json
"scripts": {
    "json": "json-server --watch db.json --port 4001"
  },

• json 설정 후 실행

yarn run json

db.json 파일 만들어서 필요한 내용 넣기

• 예시

  "users": [
      "id": "1",
      "name": "이하빈",
      "nickname": "하빈",
      "coments": "잘 부탁드립니다!"
  ],
  "diary": [
    {
      "id": "1",
      "toiletNumber": "3",
      "condition": "😐",
      "meal": "피자",
      "date": "2023.12.08"
    },
  ]

Axios

yarn add axios

• 앞으로 계속 추가 예정!