Create React App: 손쉽게 프로젝트 만들기
이번 포스팅에서는 React 프로젝트를 쉽고 빠르게 만들 수 있도록 도와주는 Create React App에 대해서 알아보겠습니다.
Create React App
React로 개발 프로젝트를 맨땅에서 시작하려면 웹팩(Webpack), 바벨(Babel) 등 정말 미리 배워야하는 기술들이 한 두개가 아닙니다. 초보 개발자들이 이러한 선수 기술들을 일일이 학습하다보면 본래 목표했던 React 애플리케이션 개발이 아득하게 멀어지기 일수인데요…
React는 각종 개발 편의 도구가 함께 포함된 프레임워크(framework)라기 보다는 어느 프로젝트에서나 추가해서 쓸 수 있는 가벼운 라이브러리(library)에 가깝기 때문에 React를 기반으로 프로젝트를 시작하려고 하면 막막해지는 경우가 많은 것 같습니다.
과연 이러한 관련 기술을 신경쓰지 않고 React 애플케이션을 바로 개발할 수 있는 방법은 없을까요? 디행이도 React를 만든 페이스북(Facebook)에서는 Create React App이라는 CLI(커맨드 라인 인터페이스) 도구를 제공하고 있는데요. 이 도구를 사용하면 이러한 골치 아픈 문제없이 아주 간단하게 React 프로젝트를 구성할 수 있습니다!
프로젝트 생성
Create React App은 Node.js가 설치된 컴퓨터에서 npx 커맨드를 이용해서 부담없게 사용해볼 수 있습니다.
npx 커맨드를 포함한 자주 사용되는 npm 커맨드에 대한 자세한 설명은 관련 포스팅을 참고 바랍니다.
터미널을 열고 다음과 같이 our-app 디렉토리에 React 프로젝트를 생성해보겠습니다.
$ npx create-react-app our-app --use-npmCreate React App은 기본적으로 Yarn을 패키지 매니저로 사용하기 때문에 --use-npm 옵션을 사용하여 대신에 npm을 패키지 매니저로 사용하도록 해주었습니다.
패키지 매니저로 Yarn을 사용하는 것을 선호하시는 분은 --use-npm 옵션을 제거하고 위 명령어를 실행하시면 됩니다.
(Yarn이 설치되어 있지 않은 컴퓨터에서는 npm을 패키지로 사용하기 때문에 이 옵션을 있든 없든 무방합니다.)
생성된 React 프로젝트 디렉토리에 들어가보면 전형적인 자바스크립트 프로젝트의 디렉토리 구조가 잡혀있는 것을 확인할 수 있을 것입니다.
$ cd our-app
$ tree -L 2 -I node_modules
.
├── README.md
├── package-lock.json
├── package.json
├── 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
├── reportWebVitals.js
└── setupTests.js간단한 커맨드 하나를 통해서 React 애플리케이션 개발을 위한 프로젝트 구성을 모두 마쳤습니다! 🎉 정말 쉽고 빠르죠?
심지어 npm install 커맨드로 의존하는 패키지를 설치할 필요조차 없습니다.
node_modules 디렉토리에 모든 패키지가 이미 다운받아져있기 때문입니다.
애플리케이션 실행
애플리케이션을 로컬에서 개발 모드로 띄워보려면 터미널에서 npm start 커맨드를 실행하면 됩니다.
$ npm start
> our-app@0.1.0 start
> react-scripts start
Starting the development server...
Compiled successfully!
You can now view our-app in the browser.
Local: http://localhost:3000
On Your Network: http://192.168.2.33:3000
Note that the development build is not optimized.
To create a production build, use npm run build.이제 브라우저에서 http://localhost:3000를 열어보면 React 로고가 찬란하게 회전하고 있는 화면을 볼 수 있을 것입니다.
코드 에디터에서 src/App.js를 열고 소스 코드를 변경해보면 바로 브라우저 화면에 반영되는 것도 확인할 수 있을텐데요.
이는 Create React App으로 생성한 프로젝트는 기본적으로 live reloading을 지원하기 때문입니다.
테스트 실행
Create React App으로 프로젝트를 생성하면 기본적으로 Jest와 Testing Library가 세팅이 되어 있어서 바로 테스트 코드를 작성하고 실행해볼 수 있습니다.
테스트를 실행해보려면 npm test 커맨드를 실행하면 됩니다.
$ npm test
> our-app@0.1.0 test
> react-scripts test
No tests found related to files changed since last commit.
Press `a` to run all tests, or run Jest with `--watchAll`.
Watch Usage
› Press a to run all tests.
› Press f to run only failed tests.
› Press q to quit watch mode.
› Press p to filter by a filename regex pattern.
› Press t to filter by a test name regex pattern.
› Press Enter to trigger a test run.이 커맨드는 Jest를 관찰(watch) 모드로 실행하기 때문에 변경된 테스트만 실행하게 되어 있습니다.
전체 테스트를 실행하고 싶다면 위 상태에서 a 버튼을 누르면 됩니다.
PASS src/App.test.js
✓ renders learn react link (14 ms)
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 1.099 s
Ran all test suites.
Watch Usage: Press w to show more.프로젝트 빌드
애플리케이션을 상용 모드로 빌드를 하려면 npm run build 커맨드를 사용하면 됩니다.
$ npm run build
> our-app@0.1.0 build
> react-scripts build
Creating an optimized production build...
Compiled successfully.
File sizes after gzip:
41.34 KB build/static/js/2.ec78e7ef.chunk.js
1.63 KB build/static/js/3.05b4cfec.chunk.js
1.17 KB build/static/js/runtime-main.13c9fd9c.js
592 B build/static/js/main.a3a2f303.chunk.js
556 B build/static/css/main.a617e044.chunk.css
The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.
The build folder is ready to be deployed.
You may serve it with a static server:
npm install -g serve
serve -s build
Find out more about deployment here:
https://cra.link/deployment프로젝트 빌드가 완료되면 build 디렉토리에 빌드 결과물들이 저장됩니다.
serve CLI 도구를 이용해서 로컬에서 애플리케이션을 상용 모드로 띄워볼 수도 있습니다.
$ npx serve -s build
┌──────────────────────────────────────────────────┐
│ │
│ Serving! │
│ │
│ - Local: http://localhost:5000 │
│ - On Your Network: http://192.168.2.33:5000 │
│ │
│ Copied local address to clipboard! │
│ │
└──────────────────────────────────────────────────┘브라우저에서 http://localhost:5000를 열어보면 동일한 React 로고가 회전하고 있는 것을 볼 수 있을 것입니다.
이러한 상용 빌드를 Netlify와 같은 호스팅 플래폼에 배포하게 되면 인터넷에서 누구나 접근이 가능하게 됩니다.
마치면서
Create React App이 빠르게 React 프로젝트를 만드는데는 최적화된 도구이지만 분명 큰 규모의 프로젝트에서 사용하기에는 제약사항도 많은 것이 사실입니다. 그래서 상용 프로젝트를 시작할 때는 Gatsby.js나 Next.js처럼 좀 더 복잡하지만 많은 기능을 제공하는 React 프레임워크를 사용하는 것을 고려하셔야 합니다.
본 포스팅에서 다루지 않은 Create React App에 대한 좀 더 상세한 내용은 공식 사이트를 참고바랍니다.
This work is licensed under CC BY 4.0
