Node.js 기초 개발환경 셋업하기

먼저 Node를 설치하자.
Node는 공식 홈페이지를 통해서 설치할 수 있다.
나는 wsl2를 사용하기에 이곳 을 참고하여 설치했다.

노드 설치를 마쳤다면 node -v 를 통해 정상적으로 설치가 되었는지 확인할 수 있다.
다음 npm -v 명령을 통해 npm도 설치되었는지 확인해 보자. npm은 노드를 설치하기만 해도 자동적으로 설치가 된다.
yarn과 같은 다른 패키지관리 프로그램도 있으나 npm만 사용해도 대부분의 패키지들을 이용 가능하므로 npm을 사용하겠다.

다음으로 터미널에 npm init -y을 입력해보자. package.json이 생성되었을 것이다.
package.json은 우리의 프로젝트 역시 하나의 패키지로 보고 패키지이름, 버전 등 여러가지 정보를 기록한다.
그러나 우리가 주요하게 사용하는 기능은 여러 의존성 파일들을 관리할 수 있다는 점이다.
이곳에 버전 정보를 적어두고 npm install 명령을 통하여 이 프로젝트에 필요한 여러가지 모듈들을 한번에 설치할 수 있다.

이제 Node개발에 필요한 여러가지 기본적인 모듈들과 VScode 확장프로그램을 설치해 보자.

• Prettier
• ESLint
• TypeScript

위 세가지 기능들을 이용할 것이다.

---

Prettier

Prettier는 formatting을 해주는 프로그램이다.
npm install --save-dev prettier 명령을 통해 설치하자.
그리고 root폴더에 .prettierrc 라는 파일을 만들어 prettier관련 환경설정을 할 수 있다.
json 형태로 아래와 같이 작성해보자.

{
    "semi" : false,
    "singleQuote": false
}

여러가지 환경설정 옵션들을 추가할 수 있다. 일단은 세미콜론을 사용하지 않음과 작은 따옴표를 사용하겠다고 명시해줬다.

다음으로 이러한 포맷팅이 VScode에서 자동적으로 지원되게 하기 위하여 root폴더에 .vscode 라는 폴더를 만들자.
그리고 그 아래에 settings.json 이라는 파일을 만들어 아래와 같이 작성하자.

{
    "[javascript]": {
        "editor.formatOnSave": true,
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    }
}

자바스크립트 언어에 대해 formatOnSave와 defaultFormatter를 지정해 주었다.
이제 소스코드를 작성하고 저장하게 되면 prettier가 자동으로 코드를 포맷팅 해줄 것이다.
또한 사용을 위해 VScode에서 Prettier Extension을 설치해야 한다.

---

ESLint

다음은 Linting이다.
ESLint는 ES와 Lint를 합친 것이다.
즉 자바스크립트 문법에서 에러를 표시해주는 도구이다.

npm install --save-dev eslint 명령을 통해 설치해주자.
ESLint역시 prettier와 마찬가지로 설정파일이 필요하다.
root폴더위에 .eslintrc.js 라는 파일을 만들자.

여러가지 rule을 적용할 수 있는데, 훌륭한 개발자들에 의해 best-practice로 린팅해주는 플러그인을 사용할 것이다.
내가 사용할 플러그인은 에어비언비에서 제공하는 플러그인이다.
npm install --save-dev eslint-config-airbnb-base eslint-plugin-import 설치를 해주자.
그다음 .eslintrc.js 파일에

module.exports = {
  extends: ['airbnb-base', 'plugin:node/recommended', 'prettier'],
}

다음과 같이 설정하고, VScode내에서 ESLint 익스텐션을 설치해주자.
이렇게 ESLint 설정이 완료되었다.

---

TypeScript

포맷팅과 린팅만큼 중요한게 타입체킹이다.
자바스크립트는 동적 언어이기에 타입이 런타임에 결정된다.
이러한 특성은 편리함을 주기도 하지만 코드를 유지보수하는 측면에서는 매우 불편한 일이다.

타입스크립트는 다시 자바스크립트로 컴파일되는 언어이다.
즉, 타입스크립트라는 새로운 언어가 아닌 자바스크립트 위에서 타입체크를 위한 여러가지 규칙들이 존재한다.

const someString = 'Hello'
Math.log(someString)

만약 이러한 코드가 있을 때, 이것은 누가봐도 잘못된 코드이다. String에 log함수를 적용하고 있다.
하지만 자바스크립트에서는 이 코드가 문제되는 코드라는 것을 사전에 알아채기가 힘들다.
코드가 길어질수록, 프로그램이 복잡해질 수록 이러한 문제들은 개발자를 계속 괴롭힐 것이다.
타입스크립트를 사용하면 이러한 문제를 사전에 차단하고 해결할 수 있다.

npm install --save-dev typescript 명령을 통해 타입스크립트를 설치하자.
설치후에 사용하는 방법은 간단하다. main문 위에 // @ts-check 라는 주석을 달아주면 된다.
추가적으로 노드환경에서 타입스크립트를 동작하기 위해 npm install --save-dev @types/node명령을 사용하자.
노드에서 주로 사용하는 객체들에 대한 타입정보가 담겨있어, 여러가지 실수들을 바로잡아준다.

만약 타입스크립트를 사용하여 프로젝트를 진행하다면 마찬가지로 타입스크립트에 대한 환경설정이 필요하다.
tsconfig.json이라는 파일에 저장하지만, 이번엔 자바스크립트를 주로 사용하고 타입스크립트의 타입체크 도움만 받을 것 이므로 jsconfig.json 를 수정할 것이다.

{
    "compilerOptions": {
        "strict": true
    },
    "include": [
        "src/**/*"
    ]
}

이처럼 strict를 true로 설정하면 엄격한 검사를 하게 된다.

---

이렇게 Node개발을 위한 기본적인 셋업을 마쳤다.
이 외에도 여러가지 유용한 익스텐션과 패키지들이 많겠지만 가장 유용하고 필수적인 것들만 설치해보았다.