React 개발 준비

우선, React을 사용할 수 있도록 한다. 간단한 프로그램을 작성하여 실제로 동작시켜 보고, 배포하는 빌드 작업까지의 React의 기본적인 사용법을 설명한다.
Tags:

React 준비

React은 JavaScript의 프론트 엔드(클라이언트 측에 표시되는 부분)를 개발을 위해 만들어진 프레임워크이다.

많은 사람들은 Web 어플리케이션 프레임워크라고 하면, Spring 같은 MVC 응용 프로그램 프레임워크를 생각할 것이다. JavaScript으로 프런트 엔드를 위한 프레임워크라고 하면, “그런 것이 있나? 일반적으로 HTML 및 JavaScript로 쓰면 되 잖아"라고 생각할지도 모른다.

그런데, 최근의 Web을 보면 알 수 있듯이 더 이상 Web 페이지의 표시라는 것은 “텍스트와 이미지를 HTML로 조합하여 완성하지만은 않는다. Web 화면에서 자유 자재로 콘텐츠가 배치되어 움직이고 돌아간다. 무언가를 조작하면 실시간으로 디스플레이가 변경되어 업데이트 된다. 이것은 전부 수작업으로 코드를 넣어 만든다면 상당히 어러울 것이라고 생각되지 않는가?

고급 프론트 엔드 표현은 이제 수작업으로 작성하는 시대가 아니다. 그런 프론트 엔드 개발을 위해 만들어진 것이 React이다. React은 Facebook 의해 개발되고 있으며, 실제로 Facebook에서 사용되고 있는 것이므로, 그 품질은 보증되었다고 할 수 있다.

React 설치

React 설치에는 여러 가지 방법이 있지만 가장 알기 쉬운 것은 npm을 사용하는 방법이다.

npm이란 것은 “Node Package Manager"이다. 이것은 원래 Node.js (JavaScript 런타임 환경) 패키지 관리를 위해 만들어진 것이지만, JavaScript의 라이브러리 관리에 안성맞춤으로, JavaScript의 라이브러리와 프레임워크로 사용되는 것이다. Node.js를 설치하면 자동으로 npm도 들어가기 때문에, 사용한 적이 없는 사람은 이것을 설치한다.

https://nodejs.org

React 설치는 명령 프롬프트 또는 터미널에서 한다. React 자체는 단순한 스크립트 파일이므로 사실 설치하는 작업은 필요 없지만, React 응용 프로그램 환경을 갖추는 것이 귀찮은 작업이기에 “React 사용하는 응용 프로그램을 만드는 도구"라는 것을 준비하기 위해 이것을 설치한다.

$ npm install -g create-react-app

이와 같이 실행한다. 이 “create-react-app"라는 것은 그 패키지이다.

$ sudo npm install -g create-react-app
/usr/local/bin/create-react-app -> /usr/local/lib/node_modules/create-react-app/index.js
+ create-react-app@1.4.3
added 106 packages in 6.226s

이것으로 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의 사용법에 대해 다음에 설명하겠다.

npm init으로 어플리케이션 생성

앞에서는 create-react-app을 사용했지만, 이것을 이용하지 않고 React 응용 프로그램을 만드는 방법도 있다.

처음부터 응용 프로그램을 만들기

수동으로 npm을 초기화하고, 필요한 라이브러리를 설치하는 방법을 설명한다.

아래과 같은 순서로 명령을 실행하는 것입니다. (“어플리케이션 이름"은 만들 어플리케이션의 이름이다)

$ mkdir [어플리케이션 이름]
$ cd [어플리케이션 이름]
$ npm init
$ npm install --save react react-dom

React 어플리케이션은 react와 react-dom이라는 두 가지 패키지가 설치되면 그것으로 동작한다. 다만, 이 방법으로 만든 것은 구체적인 Web 어플리케이션의 파일들은 일절 제공되지 않는다. 필요한 라이브러리만 준비된 이른바 ‘빈 어플리케이션"이다. 따라서 어플리케이션의 파일은 직접 수작업으로 만들어 나가야 한다.

아래는 npm init를 실행했을 때 출력이다. 패키지명, 버전, 설명 등을 입력받게 되어 있다.

$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (my-app2) 
version: (1.0.0) 
description: 
entry point: (index.js) 
test command: 
git repository: 
keywords: 
author: 
license: (ISC) 
About to write to /Users/kimkc/dev/react/my-app2/package.json:

{
  "name": "my-app2",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this ok? (yes) y

아래는 npm install --save react react-dom 명령어를 실행해서 나욘 출력 내용이다.

$ npm install --save react react-dom
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN my-app2@1.0.0 No description
npm WARN my-app2@1.0.0 No repository field.

+ react@16.2.0
+ react-dom@16.2.0
added 18 packages in 5.472s

생성된 파일 및 디렉터리 구성

이 방식으로 생성된 파일이나 디렉터리는 다음과 같다.

.
├── node_modules
├── package-lock.json
└── package.json
  • node_modules : Node.js 관련 패키지들이 저장되어 있다.
  • package.json : npm 패키지 관리 파일이다.

주요 파일 및 폴더는 2개뿐이다. 이것들은 create-react-app에서 만들어진 같은 이름의 폴더/파일과 동일하다.

npm으로 패키지가 관리되는 어플리케이션은 기본적으로 폴더의 구성이 정해져 있다. 응용 프로그램을 개발하려면, 이 어플리케이션 폴더 안에 src 폴더를 만들고, 이 안에 실행하는 메인 프로그램(JavaScript 스크립트 파일)으로 ‘index.js’라는 파일을 만든다. 이것이 React 어플리케이션의 메인 프로그램인 셈이다.

어느 방식으로도 만들어지는 응용 프로그램의 형태는 대체로 동일하다. 다른 것은, “샘플 응용 프로그램 파일이 처음부터 준비되어 있는가"라고 뿐이다. 따라서 특별한 이유가 없다면 create-react-app에서 작성하는 것이 편할 것이다.




최종 수정 : 2021-08-29