[Node.js] Javascript 기반 프로젝트 세팅하기(+express.js)

Node.js 로 프로젝트를 시작하기에 앞서 세팅하는 법에 대해 알아보자.

1. Node.js 설치

Node.js를 설치하는 방법에는 크게 두가지가 있는데 그냥 간단하게 공식 홈페이지에서 설치하는 방법이 있고 nvm을 이용하여 설치하는 방법이 있다. 이 두가지 모두 알아보자.

방법1) 공식 홈페이지에서 Node.js 설치

node -v 를 통해 node.js 의 버전을 확인해보자. 만약 설치가 되어있지 않으면
https://nodejs.org/en/download 이 링크로 들어가서 설치를 하자.

방법2) nvm을 이용하여 Node.js 설치

nvm을 이용하는 이유?

1. nvm은 여러 버전의 Node.js를 동시에 설치하고 관리할 수 있다.
2. 필요에 따라 다른 버전으로 쉽게 전환할 수 있다.
3. 프로젝트마다 다른 Node.js 버전을 사용할 수 있다.

1) nvm 설치

MacOs/Linux: 아래 내용을 치면 자동으로 설치가 된다.

 curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash 

Windows: https://github.com/coreybutler/nvm-windows/releases
로 이동하여 nvm-setup.zip 파일을 다운로드하여 압축을 푼 후에 nvm-setup.exe 파일을 실행하여 설치를 진행한다.

-> nvm -v 를 입력하여 버전이 나오면 설치완료. 버전이 나오지 않는다면

 export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" 

이거를 입력하면 이제 오류가 나지 않을 것이다.

2) node.js 설치

MacOs/Linux

nvm ls-remote --lts

Windows

nvm list available

위의 명령어를 입력하면 다양한 버전을 확인할 수 있으며 가장 최신의 node.js 버전도 확인할 수 있을 것이다.

nvm install {설치하고 싶은 버전}

다음은 위의 명령어를 입력하여 원하는 버전을 설치할 수 있는데 나는 가장 최신버전을 다운받기 위해 nvm install 20.15.0 을 해주었다.

3) Node.js 버전 선택

nvm 으로 노드를 처음 깔았다면 방금 설치한 버전이 선택되겠지만 그렇지 않다면 사용하고 싶은 버전을 설정해줘야한다.

nvm use {설치한 버전}

위의 명령어로 버전을 선택할 수 있는데 여기서 문제점이 선택한 버전은 “해당 쉘 세션” 동안만 유지된다는 것이다.
따라서 쉘을 끄고 다시 실행해도 버전이 유지가 되게 하려면 아래 코드를 입력하여 기본 노드 버전을 설정할 수 있다.

nvm alias default {기본 노드 버전}

이렇듯 nvm을 사용하게 되면 본 Node.js 버전을 nvm alias default로 설정해두고, 특정 상황에서 잠시 다른 버전이 필요할 때는 nvm use를 통해 현재 세션의 Node.js 버전을 변경할 수 있다.

2. 프로젝트를 생성하고 npm init을 입력

Node.js 설치를 완료했으니 프로젝트 폴더를 생성한 후 npm init을 입력하자.

뭔가 물어보는게 계속 뜰텐데 무시하고 enter를 쭉 누르면 package.json 파일이 하나 생긴다. 이는 프로젝트 정보와 의존성을 관리하는 문서이다.

3. express 프레임워크 설치

이번 포스트는 node.js의 프레임워크 중에 express라는 프레임워크를 설치할 것이다.

npm install express --save 를 입력하고나면 package.json파일에

"dependencies": {
    "express": "^4.19.2"
  }

이렇게 express가 추가된 것을 확인 할 수 있다.

하지만 이대로 index.js 파일을 생성하여 실행하면 모든 브라우저나 JavaScript 실행 환경이 최신 표준을 지원하지 않기 때문에 오류가 날 것이다.

4. Babel 설치

따라서 우리는 이 Babel이라는 것을 설치해줄 것이다.

Babel

ES6 이상의 최신 문법을 이전 문법으로 변경하여 원활히 동작할 수 있도록 하는 JavaScript 컴파일러

npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node

를 입력하여 설치를 해보자. 만약 설치중에 오류가 날경우 npm 앞에 sudo를 입력해서 다시 설치해보자.

"devDependencies": {
    "@babel/cli": "^7.24.7",
    "@babel/core": "^7.24.7",
    "@babel/node": "^7.24.7",
    "@babel/preset-env": "^7.24.7"
  }

마찬가지로 devDependencies에 babel이 추가된것을 확인할 수 있다.

5. Nodemon 설치

npm install --save-dev nodemon

저장하고 갱신이 될 때마다 노드를 갱신해주는 편리한 모듈인 nodemon도 설치해주자.

6. scripts 추가

package.json파일에 "scripts"부분이 있는데 여기는 명령어를 길게 치기 힘들때 단축어를 설정해주는 기능이라고 생각하면 된다. 즉, npm run ~~ 에서 뒤에부분에 들어갈 명령어를 그대로 넣어주면 된다.
예를 들어 우리는 이제 코드를 실행할때 npm run babel-node index.js 를 해줘야하는데 이를 간편하게 하기 위해 scripts를 이용해보자. (참고로 나는 index.js를 기본 실행 파일로 설정)

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "babel-node index.js"  
  }

이렇게 npm run 뒷부분을 start로 정의해주면 코드를 실행할때 npm run start만 입력해도 실행이 가능하게 된다!

아! 그리고 진짜 진짜 마지막으로 하나 해줘야할게 더 있다.

7. type 설정

지금 이상태로 코드를 실행하면 import 문이 ES 모듈에서만 사용할 수 있다는 오류가 날 것이다. 기본적으로 Node.js는 CommonJS 모듈을 사용하므로, ES 모듈을 사용하려면 약간의 설정이 필요하다.
package.json파일에 아래 코드를 입력해주면 찐으로 끝~!

  "type": "module"