Logo

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-npm

Create 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으로 프로젝트를 생성하면 기본적으로 JestTesting 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.jsNext.js처럼 좀 더 복잡하지만 많은 기능을 제공하는 React 프레임워크를 사용하는 것을 고려하셔야 합니다.

본 포스팅에서 다루지 않은 Create React App에 대한 좀 더 상세한 내용은 공식 사이트를 참고바랍니다.