Node.js 설치

Node.js란 무엇인가?

Node.js는 Chrome V8 JavaScript Engine으로 빌드된 JavaScript Runtime Environment입니다. 기존에는 JavaScript 코드를 브라우저 위에서만 실행할 수 있었습니다. 브라우저 외의 환경에서 JavaScript를 실행하기 위한 여러 시도가 있었습니다만 실행 속도 문제 때문에 크게 주목받진 못했습니다.

하지만 2008년 구글이 V8 Engine을 사용한 Chrome 브라우저를 출시했고, V8은 기존 JavaScript Engine과 달리 실행 속도가 매우 빨랐습니다. V8 Engine을 통해 속도 문제가 해결된 후 2009년 Ryan Dhal이 Node.js를 공개한 이후 JavaScript는 브라우저 밖의 환경에서도 활발히 쓰이는 언어로 재탄생했습니다.

• Node.js 공식 문서 - Node.js에 대해서

Node.js 설치하기

Node.js 다운로드

위의 링크에서 왼쪽의 버튼을 눌러 LTS 버전 설치 파일(macOS: ~.pkg, Windows: ~.msi)을 받고 실행하여 Node.js를 설치합니다. LTS(Long Term Supported) 버전은 장기적으로 안정적인 지원이 보장됩니다.

정상적인 설치가 완료됐다면 macOS Terminal, Windows Power shell에서 아래와 같은 결과를 확인할 수 있습니다.

node -v # Node.js version 확인
> 12.17.0

NPM 프로젝트 만들기

NPM이란 무엇인가

NPM(Node Package Manager)은 Node.js에서 사용할 수 있는 모듈들을 패키지화하여 모아둔 저장소 역할과 패키지 설치 및 관리를 위한 CLI(Command line interface)를 제공합니다.

• NPM이란? - 공식 문서
• NPM의 이해 - 김정환님 블로그

NPM 프로젝트를 생성하여 package.json을 생성하기 위해 아래 명령어를 입력합니다.

npm init
npm init -y  # 개별 설정 없이 package.json 생성

NPM 의존성 추가

npm install <name>
# 또는
npm i <name>

devDependencies에는 개발 시에만 사용하는 개발용 의존 패키지를 기록합니다. 예를 들어, ESLint는 개발 단계에서만 필요하고 실제 사용자가 쓰는 제품에서는 필요 없으므로 devDependencies에만 포함시킵니다. npm install 명령어에 --save-dev(축약형 -D) 옵션을 사용하면 패키지 설치와 함께 package.json의 devDependencies에 설치된 패키지와 버전이 기록됩니다.

npm i --save-dev
# 또는
npm i -D 

• devDependencies에 대한 공식 문서

Webpack Dev Server 설치

Webpack이란 무엇인가

왜 Webpack을 사용하는가?

• Webpack Handbook

JavaScript modules와 그 표준에 대하여 좀 더 자세히 알고 싶은 분들은 아래 문서를 참고하세요.

• A background on modules - MDN
• JavaScript 표준을 위한 움직임: CommonJS와 AMD

아래는 언젠가 Webpack을 직접 설정하고 복잡한 환경 설정이 필요할 때 학습하면 좋은 문서.

• 프론트엔드 개발환경의 이해: 웹팩(기본)
• 프론트엔드 개발환경의 이해: 웹팩(심화)

Webpack Dev Server

Webpack Dev Server GitHub README

Use webpack with a development server that provides live reloading. This should be used for development only.

Webpack Dev Server는 개발 환경에서 사용됩니다. 또한 코드만 변경하고 저장하면 Webpack으로 빌드한 결과를 브라우저에서 자동으로 새로고침하여 반영해줍니다.

설치 및 실행

npm i -D webpack webpack-cli webpack-dev-server
npx webpack-dev-server

package.json을 아래와 같이 수정하면 npm start를 통해 webpack-dev-server를 실행할 수 있습니다. 실행 후 http://localhost:8080 을 통해 Webpack 빌드 결과를 확인할 수 있습니다.

// ...
"scripts": {
    "start": "webpack-dev-server",
  },

ESLint 설치 및 설정

ESLint란 무엇인가

ESLint는 코팅 스타일 가이드를 따르지 않거나 문제가 있는 코드나 안티 패턴을 찾기 위해 사용하는 Javascript linter입니다.

• ESLint - 공식 문서

아래 문서에서 Prettier는 꼭 필수적으로 사용하실 필요는 없습니다. ESLint와 포매팅이 겹치는 경우가 있어서 굳이 사용하진 않습니다. 물론 좋아하시는 분들도 계신 걸로 압니다. 만약 VSCode를 쓰신다면 4.2 에디터 확장도구를 참고하여 설정하시면 저장할 때마다 ESLint가 자동으로 코드를 고쳐줍니다.

• 프론트엔드 개발환경의 이해: 린트

설치 및 설정

npm i -D eslint
npx eslint --init