React 앱 설치 방법
npx create-react-app 폴더명이라는 명령어로 간단하게 설치할 수 있습니다.
npx ?
npx는 npm 5.2.0 버전 이상에서 포함된 도구로, npm 패키지를 실행할 수 있는 도구입니다. npx를 사용하면 로컬에 설치된 패키지 또는 원격 패키지를 간편하게 실행할 수 있습니다. 예를 들어,npx create-react-app my-app와 같이create-react-app패키지를 실행할 수 있습니다.
npx를 따로 설치할 필요가 없으며, npm을 통해 Node.js를 설치하면 npx도 함께 제공됩니다. 따라서 Node.js를 설치하면 npm과 npx를 사용할 수 있습니다.
-
터미널을 실행하여
npx create-react-app 폴더명을 입력한 뒤enter를 누릅니다.npx create-react-app my-app -
생성한 폴더로 들어가기 위해
cd 폴더명입력 후enter를 누릅니다.cd my-app -
npm start입력 후enter를 누릅니다.npm start -
브라우저에서 URL localhost:3000 을 열면 로컬 환경에서 실행 중인 React 앱을 확인할 수 있습니다.
자세한 내용은 참고 자료 Create-React-App: Docs 공식 사이트를 확인하시기 바랍니다.
Create React App 폴더와 기본구조
npx create-react-app으로 설치 시, 아래 구조와 같은 폴더와 파일이 기본적으로 생성됩니다.
my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│ ├── favicon.ico
│ ├── index.html
│ ├── logo192.png
│ ├── logo512.png
│ ├── manifest.json
│ └── robots.txt
└── src
├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
├── logo.svg
├── serviceWorker.js
└── setupTests.js
이름이 수정되면 안 되는 파일들
public/index.html
- public 폴더 내
**index.html**파일 - 페이지의 기본이 되는 html 파일입니다.
- public 폴더 내부에 존재하는 파일만
index.html****에서 사용할 수 있습니다.
src/index.js
- src 파일 내
**index.js**파일 - 자바스크립트의 시작점 파일입니다.
- src 폴더 내부에
.js,.css파일 생성
Package.json 파일
해당 프로젝트에 대한 정보들이 들어있는 파일입니다.
- 프로젝트 이름, 버전, 필요한 라이브러리가 명시되어 있습니다.
- 앱을 시작할 때 사용할 스크립트, 앱을 빌드할 때, 앱을 테스트할 때 사용할 스크립트 등이 명시되어 있습니다.
-
“dependencies"필요한 라이브러리와 해당 라이브러리들의 버전이 명시되어 있습니다.
현재react버전은 18.2.0이고,react-dom의 버전은 18.2.0이라는 것을 알 수 있습니다.
-
“script"React 앱 실행, 빌드, 테스트 등의 스크립트가 명시되어 있습니다.
→ 프로젝트에서 자주 실행하는 명령어를 scripts로 작성해 두면
npm명령어로 실행이 가능합니다.
| 명령어 | 실행작업 |
|---|---|
| npm (run) start | 개발모드 서버를 실행합니다. |
| npm (run) build | 배포 환경에서 사용할 파일을 생성합니다. |
| npm (run) test | 테스트 코드를 실행합니다. |
| npm (run) eject | 숨겨져 있던 create-react-app의 내부 설정이 밖으로 노출됩니다. |
| npm install (설치하고 싶은 패키지 명) | 추가적으로 필요한 패키지를 설치합니다. |
“eslintConfig”
소스 코드를 입력할 때 문법이나 코드 포맷을 체크해주는 것에 대한 설정을 명시해 줍니다.
참고 자료
