React 입문 | React 개발 준비 | create-react-app으로 어플리케이션 생성 및 실행

React 어플리케이션 생성

실제로 React 어플리케이션을 만들어 보겠다. 명령 프롬프트 또는 터미널을 열고 cd로 적당한 위치로 이동한다. 그리고 다음과 같이 명령을 실행한다.

$ create-react-app my-app

그러면 아래와 같이 출력이 된다.

Creating a new React app in /Users/kimkc/dev/react/my-app.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts...


> fsevents@1.1.2 install /Users/kimkc/dev/react/my-app/node_modules/fsevents
> node install

[fsevents] Success: "/Users/kimkc/dev/react/my-app/node_modules/fsevents/lib/binding/Release/node-v57-darwin-x64/fse.node" already installed
Pass --update-binary to reinstall or --build-from-source to recompile

> uglifyjs-webpack-plugin@0.4.6 postinstall /Users/kimkc/dev/react/my-app/node_modules/uglifyjs-webpack-plugin
> node lib/post_install.js

+ react-scripts@1.0.17
+ react@16.2.0
+ react-dom@16.2.0
added 1266 packages in 63.989s

Success! Created my-app at /Users/kimkc/dev/react/my-app
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd my-app
  npm start

Happy hacking!

에러 없이설치가 완료되었다면 my-app 라는 디렉토리가 만들어 진다. 그 안에 React 어플리케이션에 대한 파일이 설치된다. React 어플리케이션은 이렇게 간단히 생성할 수 있다.

$ create-react-app [응용 프로그램 이름]

React 구성

생성된 디렉토리를 확인해 보면 생각보다 파일 및 디렉토리가 많고 커서 놀랄지도 모른다. 정리해 보면 다음과 같다.

.
├── README.md
├── node_modules
├── package-lock.json
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── registerServiceWorker.js

파일

.gitignore

Git 관련 파일이다.

package.json

npm 패키지 관리를 위한 파일이다.

README

readme 파일이다.

※ 파일들은 어플리케이션 본체와는 직접적인 관계는 없다.

폴더

node_modules

Node.js 모듈 (프로그램) 관련된 파일들이 정리되어 있다. 크기가 제법 커서, “겨우 JavaScript 라이브러리를 동작하는데 왜 이렇게 많아!?“라고 놀랄 수도 있다. 하지만 대부분은 “Node.js로 서버 프로그램을 시작하고 운영하기 위하여 필요한 것"이므로 걱정하지 않아도 된다. 별도로 여기에 있는 것 전부를 업로드하지 않으면 사용할 수 없는 것은 아니다.

public

Web에서 공개되는 파일(직접 파일에 액세스할 수 있는 것)들이 정리되어 있다. 여기에는 디폴트 Web 페이지인 index.html과 favicon.ico 아이콘이 있다.

src

JavaScript 소스 코드 관련된 것들이 정리되어 있다. React 프로그램 관련된 것들은 이 안에 있다. 또한 React 컴포넌트에서 사용하는 CSS 파일 등도 여기에 저장되어 있다. 즉, “React 프로그램과 프로그램에서 사용하는 파일들’이 여기에 있다.

당분간 public과 src 폴더에 있는 파일들의 편집이 개발의 중심이 될 것이다. 그 이외의 것은 직접 편집하거나 이용하는 일은 거의 없다.

React 실행 및 배포

일단 프로그램의 내용은 나중에 확인하고 create-react-ap으로 만든 React 어플리케이션을 움직여 보자. 이도 npm 명령을 이용하여 실행한다.

명령 프롬프트/터미널에서 cd 명령으로 응용 프로그램 폴더로 이동한다. 그리고 다음과 같이 실행하자.

$ npm start

이 명령어로 Node.js 서버 프로그램이 시작되고, Web 브라우저에서 Web 페이지가 열린다. 응용 프로그램의 첫 페이지는 아래와 같다.

http://localhost:3000/

“Welcome to React"라고 표시된 페이지가 나타날 것이다. 이 샘플에서 제공되는 React 어플리케이션의 페이지이다.

React 어플리케이션 배포

그럼 React에서 만든 응용 프로그램을 실제로 서버 등에 배포하는 방법을 설명한다. 폴더 자체는 Node.js 모듈이 있기 때문에 60MB 이상이다. 샘플로써는 이렇게 커서는 사용하기 불편하다.

React 어플리케이션을 배포하려면 npm 빌드 기능을 사용한다. 명령 프롬프트/터미널에서 어플리케이션 디렉토리로 이동하여 다음과 같이 실행한다.

$ npm run build

그러면 어플리케이션이 빌드된다.어플리케이션 디렉토리에 build 라는 디렉토리가 생성된다. 이 디렉토리는 빌드하여 만들어진 어플리케이션 디렉토리에 있다. 이 디렉토리의 내용을 서버에 업로드하면 된다.

(※ 단, 생성된 코드를 보면, 프로그램 내에서 사용하는 파일들이 절대 경로로 지정되어 있기에, 서버의 하위 디렉토리 등에 배치하면 경로가 어긋나 잘 움직이지 않을 수 있다)

npm run build라고 명령은, 사실 npm 명령이 아니다. React 어플리케이션의 package.json에 설정되어 있는 스크립트으로 React 스크립트를 실행하여 빌드 프로세스를 실시하는 것이다.

 

우선은 이것으로 React 어플리케이션을 만들고 동작까지 할 수 있게 되었다. React의 사용법에 대해 다음에 설명하겠다.