프론트엔드 개발에 Node.js가 필요한 이유
최신 스펙으로 개발할 수 있다
자바스크립트 스펙의 빠른 발전에 비해 브라우저의 지원 속도는 항상 뒤쳐진다.
아무리 편리한 스펙이 나오더라도 이것을 구현해 주는 징검다리 역할, 이를테면 바벨 같은 도구의 도움 없이는 부족하다. 더불어 웹팩, NPM 같은 노드 기술로 만들어진 환경에서 사용할 때 비로소 자동화된 프론트엔드 개발환경을 갖출 수 있다.
빌드 자동화
파일을 압축하고, 코드를 난독화하고, 폴리필을 추가하는 등 개발 이외의 작업을 거친 후 배포한다. Node.js는 이러한 일련의 빌드 과정을 이해하는데 적지 않은 역할을 한다.
개발 환경 커스터마이징
리액트의 CRA를 사용하면 간편하게 리액트 개발 환경을 갖출수 있다.
하지만 이 개발 환경을 커스터마이징 해야하는 경우도 있다. 커스터마이징을 하기 위해서는 Node.js 지식이 필요하다.
프로젝트 생성
프로젝트 폴더를 생성하고 npm init을 입력한다.
~ mkdir sample
~ cd sample
~ npm init soone ~/Desktop/공부/sample 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 init` 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: (sample)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to /Users/soone/Desktop/공부/sample/package.json:
{
"name": "sample",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
Is this OK? (yes)default 값으로 설정되도록 모두 엔터를 입력하고 마지막에 yes를 입력한다.
그러면 sample 폴더에는 package.json파일이 하나 생성된다.
sample/package.json
{
"name": "sample",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}프로젝트 명령어
package.json에 있는 scripts에 test라는 스크립트가 있다.
npm test를 입력하면 "echo \"Error: no test specified\" && exit 1"가 실행된다.
soone ~/Desktop/공부/sample npm test
> sample@1.0.0 test
> echo "Error: no test specified" && exit 1
Error: no test specified
✘ soone ~/Desktop/공부/sample npm에는 여러 커맨드가 있다. 터미널에 npm을 입력하면 모든 커맨드를 볼 수 있다.
npm <command>
Usage:
npm install install all the dependencies in your project
npm install <foo> add the <foo> dependency to your project
npm test run this project's tests
npm run <foo> run the script named <foo>
npm <command> -h quick help on <command>
npm -l display usage info for all commands
npm help <term> search for help on <term>
npm help npm more involved overview
All commands:
access, adduser, audit, bin, bugs, cache, ci, completion,
config, dedupe, deprecate, diff, dist-tag, docs, doctor,
edit, exec, explain, explore, find-dupes, fund, get, help,
hook, init, install, install-ci-test, install-test, link,
ll, login, logout, ls, org, outdated, owner, pack, ping,
pkg, prefix, profile, prune, publish, rebuild, repo,
restart, root, run-script, search, set, set-script,
shrinkwrap, star, stars, start, stop, team, test, token,
uninstall, unpublish, unstar, update, version, view, whoamitest, install, init 등 여러 커맨드가 있다.
기본으로 제공하는 커맨드 외에 커맨드를 추가하고 싶다면 package.json에 scripts 부분에 추가하면 된다.
sample/package.json
{
"name": "sample",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "echo \"여기에 빌드 스크립트를 추가합니다\""
},
"author": "",
"license": "ISC"
}
실행결과
soone ~/Desktop/공부/sample npm run build
> sample@1.0.0 build
> echo "여기에 빌드 스크립트를 추가합니다"
여기에 빌드 스크립트를 추가합니다
soone ~/Desktop/공부/sample 참고자료:
