React설치 및 기본 구조

정처기 필기 시험이 끝났다~~
리액트로 하고싶은 프로젝트가 있는데 리액트 안한지도 오래되었고 사실 그때 제대로 알면서 했던 것도 아니어서 이번에 한번 다시 공부하고 프로젝트 하고 싶어서 인프런 강의를 다시 듣게 되었다.

Create React App으로 설치된 리액트 기본 구조

my-app/
  README.md
  node_modules/
  package.json
  public/
    index.html
    favicon.ico
  src/
    App.css
    App.js
    App.test.js
    index.css
    index.js
    logo.svg

// public폴더 안에 쓰인 파일들은 오직 public/index.html만 쓰일 수 있음
// src폴더 안에 js파일과 css파일을 넣으면 됨. webpack은 여기에 있는 파일만 봄
// 그래서 이 외에 넣는 것은 webpack에 의해서 처리 x

이름 수정되면 안되는 파일

• public/index.html → 페이지 템플릿
• src/index.js → 자바스크립트 시작점

scr폴더

• 대부분의 리액트 소스 코드들을 이곳에 작성

package.json파일

• 해당 프로젝트에 대한 정보들이 있음
• 프로젝트 이름, 버전, 필요한 라이브러리의 버전들이 명시
• 앱을 시작할 때 사용할 때, 앱을 빌드할 때, 테스트할 때 사용할 스크립트 명시

{
  "name": "react-todo-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "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"
    ]
  }
}

📂 참조

https://create-react-app.dev/docs/folder-structure/

react app 실행 명령어

npm run start

(package.json에서 바꿔서 사용 가능)