[React] npm을 사용한 프로젝트 생성

프로젝트 생성하기 

1. 프로젝트를 생성할 디렉토리를 만들고 해당 디렉토리로 이동한다.

$ mkdir project_a $ cd project_a

2. npm으로 프로젝트를 생성한다.

$ npm init

npm init은 node project를 시작하는 명령어이다. 

npm init 명령어를 실행하면 프로젝트 이름, 버전, 설명 등의 정보를 입력하는 란이 나온다. 이 정보들을 일일히 입력하지 않고 엔터를 누르면 default값이 자동으로 들어간다. 그리고 이러한 프로젝트 정보들이 package.json 파일에 저장된다.

yunsoyeon-ui-MacBook-Air:project_a yunsoyeon$ 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: (project_a)  version: (1.0.0)  description:  entry point: (index.js)  test command:  git repository:  keywords:  author:  license: (ISC)  About to write to /Users/yunsoyeon/workspace/React_work/project_a/package.json: {   "name": "project_a",   "version": "1.0.0",   "description": "",   "main": "index.js",   "scripts": {     "test": "echo \"Error: no test specified\" && exit 1"   },   "author": "",   "license": "ISC" } Is this ok? (yes)

이제 colors라는 모듈을 사용하여 다양한 색의 문자열을 출력해보자.

index.js

const colors = require('colors');
 
const s1 = "A time to thorow stones away";
const s2 = "and a time to gather stones together";
const s3 = "A time to search and a time to give up as lost";
const s4 = "A time to keep and a time to throw away";
 
console.log(s1.underline.red);
console.log(s2.inverse.blue);
console.log(s3.rainbow);
console.log(s4.inverse.red);
 
~                                                                                                                                            
~                                  

프로그램 실행

$ node index.js

이 index.js 프로그램에서는 colors라는 모듈을 사용하였다. 그렇다면 해당 프로그램에서 사용되는 모듈들을 기록할 수는 없을까? 

package.json으로 모듈 설치 기록하기

"--save"옵션이나 "-S"옵션을 사용하여 package.json에 모듈 및 버전을 기록한다.

$ npm install colors --save

$  npm install colors -S

save옵션을 이용하여 모듈을 설치한 후 package.json을 열어보면 dependencies에 colors모듈 1.3.0version이 기록된다.

{   "name": "project_a",   "version": "1.0.0",   "description": "",   "main": "index.js",   "scripts": {     "test": "echo \"Error: no test specified\" && exit 1"   },   "author": "",   "license": "ISC",   "dependencies": {     "colors": "^1.3.0"   } }

"--save-dev" 옵션을 사용하면 개발 의존 모듈을 설치한다는 뜻인데, 개발 과정에서 필요한 패키지임을 나타내기 위해 설정해준다. 

패키지 관리를 위해 유용하게 사용된다.

"devDependencies": {     "babel-core": "^6.26.3",     "babel-loader": "^7.1.4",     "babel-preset-es2015": "^6.24.1",     "babel-preset-react": "^6.24.1"   }

이렇게 package.json에 해당 프로그램이 의존하고 있는 모듈을 기록해둠으로써 해당 의존 모듈들을 자동으로 설치할 수 있다. 

$ npm install

확인을 위해 해당 디렉토리에서 node_modules를 삭제하고 npm install 명령어를 실행하여 자동으로 모듈을 설치하는지 확인해볼 수 있다. 

이 포스팅은 '모던 자바스크립트 개발자를 위한 리액트 프로그래밍' 책을 참고하였습니다.