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