[NodeJS] 프로젝트 초기 설정

Node.js 설치

일단, Node.js 프로젝트를 설정하기 위해서 Node.js 설치를 해야 한다.

아래 링크에서 Node.js를 설치한 후 진행하면 된다.

Node.js — Run JavaScript Everywhere

 

설치가 완료되었다면, 터미널에서 아래의 명령어를 통해 정상적으로 설치가 잘되었는지 확인할 수 있다,

node -v
npm -v

위처럼 터미널에 결과가 잘 보이면, 성공한 것이다 ~ !!

 

 

VSCode 설정

자 이제 VSCode에서 Node.js 설정을 해보도록 하자.

Node.js 프로젝트를 만들고 싶은 곳에 아래의 명령어를 입력해보자.

npm init

 

해당 명령어를 입력하게 되면 작성해야 하는 부분들이 많이 뜨는데 하나 하나 확인해가면서 엔터를 입력하며 작성해 나가면 된다.

 

나는 이런식으로 작성했다. 이렇게 마지막에 yes 까지 치고 나면,

이렇게 package.json 파일이 생성된 것을 확인할 수 있다.

 

 

Express 프레임워크 설치

아래 명령어를 이용하여 express 프레임워크를 설치한다.

npm install express@^5.0.0

^5.0.0 버전으로 설치하지 않으면 구버전인 ^4.x.x 버전이 설치되니 꼭! ^5.0.0 버전임을 명시해줘야 한다.
구버전의 경우 비동기 핸들러의 오류 핸들링이 정상적으로 작동하지 않을 수 있으니 .. 버전 잘 명시해주길 ~

 

설치가 완료되면, 아래의 사진처럼 node_modules 폴더가 생성됐고, package.json 파일에`"express": "^5.0.1"` 가 추가됨을 확인할 수 있다.

 

이렇게 라이브러리를 설치하게 되면, node_modules 안에 추가가 되면서 package.json 파일에 추가가 된다.
즉, node_modules에 있는 모든 라이브러리들을 나중에 협업할 때 깃허브에 넣지 않아도 package.json 파일만 있으면 따로 추가가 가능하다는 것이다 !

 

 

프로젝트 설정

이제 본격적으로 프로젝트 설정을 할텐데, 위 사진에 보면 `"main": "index.js"` 로 되어있는 것을 확인할 수 있다. 이 말은 즉슨 Index.js 파일이 서버를 실행할 메인 파일이라는 말이다. 현재는 index.js 가 메인 파일이지만, package.json 파일을 수정하면 메인 파일도 변경할 수 있다.

 

나는 `src/index.js`를 만들도록 하겠다. 일반적으로, src는 코드들을 모아놓는 폴더라고 할 수 있다.

아래에 있는 코드는 Express 페이지의 공식 예제인데, 이를 이용하여 테스트 해보도록 하겠다.

// const express = require('express')  // -> CommonJS
import express from 'express'          // -> ES Module

const app = express()
const port = 3000

app.get('/', (req, res) => {
  res.send('Hello World!')
})

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})

 

이때, `package.json` 파일에서 `"type": "module"`을 지정해줘야 ES Module을 실행할 수 있다.

 

기본 예제에는 CommonJS 로 코드가 작성되어있는데, 나는 ES Module을 사용할 것이라 해당 부분은 주석처리 하고, ES Module의 형태로 express 를 불러왔다. 둘은 어떤 차이일까 ?

CommonJS vs ES Module
CommonJS는 Node.js 초기에 표준 모듈 시스템이 없어서 임시로 만든 방식이고, ES Module은 자바스크립트가 정식으로 제공하는 표준 모델 방식이다.

코드 상에서의 차이를 살펴보자.
CommonJS

// 내보내기
module.exports = { sayHello };

// 불러오기
const { sayHello } = require('./greeting.js');

`require` 은 실행중 (runtime)에 모듈을 불러온다.
즉 , 동기적으로 실행되며, 한 줄씩 코드 읽으면서 필요한 순간에 모듈을 불러온다.

ES Module

// 내보내기
export function sayHello() { ... }

// 불러오기
import { sayHello } from './greeting.js';

`import` 는 실행 전에 미리 (compile 단계에서) 모듈을 불러온다. 즉, 비동기적으로 실행된다.

동기와 비동기 에 대해서 알고 싶다면, 아래 글을 참고하면 된다.

[JavaScript] Synchronous / Asynchronous

 

이렇게 ES Module 설정까지 다 했으면

`.vscode`폴더를 생성하고, 아래 `settings.josn`파일을 생성해주고, 아래 코드를 작성해준다.

 

해당 설정은 VSCode에서 import하는 모듈들을 `.js` 확장자와 함께 import 하도록 하는 설정이다.

이렇게하면 프로젝트 설정은 거의 다 끝났다.

 

 

Express 서버 실행

터미널에 아래와 같이 명령어를 작성하면 실행되기는 하지만, 이렇게 실행할 때 마다 폴더명/파일명을 작성하기에는 번거롭다.

node src/index.js

 

그래서 이제부터 좀 더 쉽게 서버를 실행하기 위해서 설정을 해줄 것이다.

 

이렇게 `"start": "node src/index"`를 `package.json`파일에 작성해준다.

 

이후, 아래 명령어를 터미널에 입력해주면

npm run start

 

이렇게 서버가 실행되는 것을 확인할 수 있다.

 

 

(선택 ) Nodemon 설치

`npm run start`를 하면 파일이 변경될 때 마다 해당 명령어를 계속 쳐야한다는 번거로움이 있다.

이를 해결하기 위해 사용하는 게 Nodemon이다.

npm install -save-dev nodemon

위 명령어를 Nodemon을 설치하고,

 

`"dev": "nodemon --exec node src/index.js` 를 추가해주고 ,

npm run dev

 

위 명령어를 입력했을 때 파일이 수정되면 자동으로 서버를 재시작해주는 것을 볼 수 있다.

 

짜잔 -!! 성공 ~