<aside> 💡 Notion 팁: 페이지 소유자는 위의 인증 버튼을 클릭하여 페이지 내용을 인증할 수 있습니다. 인증 만료일을 지정하거나 무기한으로 설정하세요.

</aside>

1. 기본 옵션

• Node.js 버전 18.16.1
• CRA 사용
• 패키지 매니저 npm
• react-router: V6

  • v6 튜토리얼

    React Router v6 튜토리얼

코드로 작성!

1. React

   npm install -g create-react-app
   
   npm create-react-app my-app
   

   • npm이 그 프로그램을 설치하는 프로그램이라면, npx는 이 create-react-app이라는 프로그램을 임시로 설치해서 딱 한 번 설치해서 지우는 프로그램이다.

2. Redux Toolkit

   npm install redux react-redux @reduxjs/toolkit
   
   npm install react-redux @reduxjs/toolkit
   

   • 참고

     Getting Started | Redux Toolkit

3. Router

   npm i react-router-dom
   

• package.json

  {
    "name": "frontend",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
      "@reduxjs/toolkit": "^1.9.5",
      "@testing-library/jest-dom": "^5.17.0",
      "@testing-library/react": "^13.4.0",
      "@testing-library/user-event": "^13.5.0",
      "react": "^18.2.0",
      "react-dom": "^18.2.0",
      "react-redux": "^8.1.1",
      "react-router-dom": "^6.14.2",
      "react-scripts": "5.0.1",
      "web-vitals": "^2.1.4"
    },
    "scripts": {
      "start": "react-scripts start",
      "build": "react-scripts build",
      "test": "react-scripts test",
      "eject": "react-scripts eject"
    },
    "eslintConfig": {
      "extends": [
        "react-app",
        "react-app/jest"
      ]
    },
    "browserslist": {
      "production": [
        ">0.2%",
        "not dead",
        "not op_mini all"
      ],
      "development": [
        "last 1 chrome version",
        "last 1 firefox version",
        "last 1 safari version"
      ]
    }
  }
  

+)

$ npm install react-bootstrap bootstrap

$ npm install react-spinners --save

$ npm install react-cookie