TIL | Node.js 개발 환경 설정하기

1. Visual Studio Code (VSCode) 설치

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

- 마이크로소프트가 후원하는 소스코드 편집기(에디터). (참고로 VSCode는 IDE가 아니므로 빌드를 하기 위해서는 별도의 컴파일 환경을 구축해야 함.)

- 노드를 코딩하는데 매우 유용함.

- 마이크로소프트 github에서 vscode의 인기(?)를 직접 확인해볼것.

https://github.com/microsoft/vscode

GitHub - microsoft/vscode: Visual Studio Code

 

2. 커스터마이징한 개발환경을 설정할 수 있음.

- 커맨드 팔레트에서 원하는 설정으로 이동할 수 있음.

* 커맨드 팔레트 접근을 위한 바인딩 키

  1) Windows : Ctrl + Shift + P

  2) MacOS : Cmd + Shift + P

 

- keybindings.json : 커스터마이징한 설정이 저장됨.

- keyboard shortcuts : 키보드에 바인딩된 명령어를 알 수 있음.

- settings.json을 찾은 후 defaultsettings.json에서 가져와서 변경하면됨.

   예) "workbench.colorTheme" : "Abyss"

 

2. Node.js 설치

https://nodejs.org/ko/

Node.js

- LTS(Long Term Support)는 장기 지원되는 버전으로 일반 버전과는 달리 안정성에 중점을 두었다.

- tj/N : Node version management tool은 binary CLI(Command Line Interface)로 노드 버전관리에 유리하다.

https://github.com/tj/n

GitHub - tj/n: Node version management

- Node Package Manager(npm) 버전 확인

$ npm -v

- TERMINAL(터미널)에서 package.json 설치 (-y로 옵션을 지정하면 to skip the questionnaire altogether을 의미하므로 default인 json파일을 생성함.)

- package.json 설치목적 : 본 프로젝트는 npm이 관리하는 패키지라는 것을 의미함. package.json은 패키지의 메타데이터를 포함.

$ npm init -y

https://docs.npmjs.com/cli/v8/commands/npm-init

npm-init | npm Docs

 

3. 컴파일 에러를 적게 만들기 위한 환경 세팅 

- Formatting : Prettier / 세미콜론의 개수, state의 수 등 미적인 것과 관련한 환경을 제공함.

- prettier 플러그인 설치 (esbenp.prettier-vscode)

$ npm install --save-dev prettier

https://prettier.io/docs/en/configuration.html

Prettier · Opinionated Code Formatter

- Linting : ESLint / 코드의 일관성을 높이고 버그를 방지하는 것을 목표로 코딩 컨벤션에 위배되는 코드나 문법적인 오류 패턴 실시간으로 찾아줌. 

$ npm install --save-dev eslint

https://eslint.org/docs/latest/user-guide/getting-started

Getting Started with ESLint - ESLint - Pluggable JavaScript Linter

- airbnb javascript style guide를 활용. (eslint 규칙으로 만들어져있음.)

https://github.com/airbnb/javascript

GitHub - airbnb/javascript: JavaScript Style Guide

$ npm install --save-dev eslint-config-airbnb-base

https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb-base

GitHub - airbnb/javascript: JavaScript Style Guide

$ npm install --save-dev eslint-plugin-import

https://github.com/import-js/eslint-plugin-import

GitHub - import-js/eslint-plugin-import: ESLint plugin with rules that help validate proper imports.

- prettier와 eslint의 충돌이 발생하는 경우를 해결하기 위한 패키지 설치

$ npm install --save-dev eslint-config-prettier

https://github.com/prettier/eslint-config-prettier

GitHub - prettier/eslint-config-prettier: Turns off all rules that are unnecessary or might conflict with Prettier.

- ".eslintrc.js"생성 후에는 다음 블로그를 참고할 것.

https://backend-intro.vlpt.us/1/01.html

1-1. 프로젝트 생성 및 ESLint 설정 · GitBook

-  module.exports = { extends: ['airbnb-base', ...]}

- ".vscode"폴더 생성, ".vscode/settings.json"을 만들면 본 프로젝트에만 적용되는 설정을 입력할 수 있음.

- type 에러를 잡기 위해서(type checking) typescript 설치 

$ npm install --save-dev typescript

- type 에러를 체크하기 위해 .js 상단에 "// @ts-check"를 적은 후 코드를 작성할 것.

- type checking의 엄격(?)한 설정을 지정하기 위해서는 jsconfig.json reference를 참고하여 수정한다. 

https://code.visualstudio.com/docs/languages/jsconfig

jsconfig.json Reference

 

 

 

 

*본 내용은 강의를 학습한 후 학습자의 관점에서 정리한 내용입니다. 문제시 댓글로 남겨주시면 감사드리겠습니다.