빠른 create-react-app

create-react-app은 리액트 개발을 바로 시작할 수 있도록 프로젝트 구조 작업, 설정, 설정 작업 등을 자동으로 진행해주는 도구입니다.

 

create-react-app으로 리액트 앱 만들기

명령 프롬프트를 실행한 다음 리액트 앱을 만들고 싶은 곳으로 이동합니다. 그리고 나서 아래 명령어를 입력합니다.

npx create-react-app movie_app_2025

(movie_app_2025 <- 이 이름은 원하는 이름으로 변경 가능합니다.)

 

명령어를 실행한 위치에 movie_app_2025라는 이름의 폴더가 생길 것입니다.

 

프로젝트 폴더 선택하기

VSCode를 실행하여 [파일 -> 폴더 열기]를 누른 다음 movie_app_2025 폴더를 선택합니다.

 

README.md 파일 수정하기

루트 폴더에 있는 README.md 파일을 연 다음, 그 안에 작성되어 있던 내용을 모두 지운 다음, 아래와 같이 입력하고 Ctrl + S를 눌러 저장합니다.

 

package.json 파일 수정하기

package.json 파일을 열어서 scripts 키값을 수정할 것입니다.

script 키 값은 쉽게 말해서 명령을 말합니다. start, build, test, eject라는 명령어가 있습니다.

test, eject 명령어는 사용하지 않을 것이기 떄문에 삭제합니다.

{
  "name": "movie_app_2025",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "6.6.3",
    "@testing-library/react": "16.2.0",
    "@testing-library/user-event": "14.6.0",
    "cra-template": "1.2.0",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "react-scripts": "5.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build"
  },
  "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"
    ]
  },
  "devDependencies": {
    "web-vitals": "^4.2.4"
  }
}

 

리액트 앱 실행하기

명령 프롬프트에서 루트 폴더로 이동한 다음 npm start을 입력합니다.

 

명령 프롬프트에 'Compiled Successfully"와 같은 문장이 보인 다음, 크롬 브라우저가 켜지고, 다음 화면이 나타나면 됩니다.

 

리액트 앱 종료하기

이제 리액트 앱을 종료합니다. 명령 프롬프트로 돌아가서 Ctrl + C를 누르면 리액트 앱이 종료됩니다.