반응형

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


React 준비

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에서 작성하는 것이 편할 것이다.



반응형

'React' 카테고리의 다른 글

[React] 컨포넌트 생성  (0) 2017.12.31
[React] React 기본적인 구조  (0) 2017.12.31
[React] 개발 준비  (0) 2017.12.31

+ Recent posts