📝 오늘 한 것

1. npm i / package-lock.json / express 사용하기 / Babel / Nodemon

📚 배운 것

4. 서버 만들기

npm 이용해 패키지 가져오기 ( 어제 공부에서 이어서 )

1) npm i

package.json 파일이 들어 있는 폴더에서 npm i express를 입력한 결과, 아래와 같이 package.json 파일에 express dependencies가 추가된 것을 확인할 수 있다. 이는 해당 프로젝트를 실행하기 위해서는 express가 필요함을 나타낸다.

"dependencies": {
  "express": "^4.17.1"
}

한편, VS code 터미널에 npm i express를 입력할 때 추가된 node_modules 폴더와 package-lock.json 파일을 일부러 삭제한 후, 터미널에서 npm i만을 입력해도 삭제했던 폴더들이 자동으로 다시 추가되는 것을 확인할 수 있다.

이는 이전에 npm i express를 입력했을 때 package.json 파일의 dependencies에 express가 추가되었기 때문이다. 그 후 npm i만을 입력해도, npm은 알아서 package.json 파일의 dependencies를 분석하여, 프로그램을 가동하는 데 필요한 모듈(패키지)들을 다운받는다.

이 때문에 협업을 할 때 용량이 큰 node_modules 폴더를 깃허브에 업로드 하지 않아도 된다. 터미널에 npm i만 입력하면 필요한 패키지들을 전부 설치할 수 있기 때문이다. 따라서, 프로젝트를 공유하고 싶다면, package.json과 index.js 파일만을 공유하면 된다.

이를 위해서는 node_modules 폴더가 깃허브에 올라가지 않도록 숨겨줘야 한다. 프로젝트 폴더에 .gitignore 폴더를 만든 후 /node_modules를 추가하도록 한다.

📌 주의 !

npm install [패키지 이름]를 수행할 때는 package.json 파일을 반드시 닫은 상태여야 한다. npm i는 해당 파일의 dependencies 부분을 수정하는데, package.json 파일을 수정한 후 변경사항을 '저장하지 않았다면' npm i가 해당 파일을 수정할 때 버전 충돌이 일어나기 때문이다.

2) package-lock.json

package-lock.json 파일은 패키지들을 안전하게 관리해준다. 패키지가 수정됐는지를 해시 값으로 체크해주며, 각 모듈들의 버전이 기록되어 있다.

위의 package.json, index.js 파일과 함께 package-lock.json 파일을 공유한 후, 다른 사람이 해당 package.json으로 express를 설치했다고 하자. ( npm i (o) / npm i express(x) )

이때 npm은 위에서 살펴봤듯이 package.json 파일의 dependencies를 참고해 필요한 모든 모듈들을 다운받는데, 동시에 package-lock.json 파일을 참고해 다른 사람에게도 나와 똑같은 버전의 모듈(express)을 설치해준다.

3) express 사용하기

express를 사용하는 법은 간단하다. index.js 파일에 아래와 같이 작성해주면 된다.

const express = require("express");

const app = express();

이 코드는 최신 자바스크립트 코드로 바꿔 쓸 수 있다. 다만, 바꿔쓰는 건 어렵지 않더라도 이를 Node.js가 이해할 수 있어야 한다. 그러기 위해선 Node.js가 그 최신 코드를 이해할 수 있도록 먼저 'Babel'을 설치해야 한다.

📌 Babel

Babel이란 자바스크립트 컴파일러를 말한다. Node.js는 기본적으로 자바스크립트 코드를 이해하지만, 이해하지 못하는 최신 자바스크립트 코드가 있다. Babel은 이러한 최신 코드를 모두가 이해할 수 있는 코드로 바꿔준다.

🔎 Babel 설치하기

• 먼저, Babel을 설치하기 위해 아래 코드를 터미널에 입력한다.
  이하의 모든 과정은 Babel 홈페이지 - Node를 참고해 진행할 수 있다.

npm install --save-dev @babel/core

이렇게 하면 package.json에 devDependencies가 추가된다. (위의 명령어에서 '--save-dev'를 빼고 입력하면 dependencies에 추가된다.) dependencies와 devDependencies는 개발자들을 위해 구분하여 추가되는 것일 뿐, 둘 다 node_modules에 설치되는 것은 동일하다.

"dependencies": { // ❗ 프로젝트를 실행하기 위해 필요한 것
  "express": "^4.17.1"
},
"devDependencies": { // ❗ 개발자가 코딩을 좀더 편하게 하기 위해 필요로 하는 것
  "@babel/core": "^7.16.0"
}

🔎 설정 파일 만들기

• 다음으로, 설정 파일을 만들기 위해 아래 코드를 터미널에 입력한다.

touch babel.config.json
// 윈도우에서는 notepad babel.config.json 입력 !

생성된 설정 파일에 아래 코드를 작성한다.

{
  "presets": ["@babel/preset-env"]
}

• 다시 터미널에 아래 코드를 입력한다. 항상 npm install 명령어는 package.json 파일을 저장하거나 닫은 상태에서 실행시켜야 한다.

npm install @babel/preset-env --save-dev

위 작업의 결과, package.json 파일에 한 줄의 코드가 더 추가된다.
설치된 Babel은 알아서 설정 파일(babel.config.json)을 찾아 그 파일의 내용을 참고한다.

"devDependencies": {
  "@babel/core": "^7.16.0",
  "@babel/preset-env": "^7.16.0"
}

위에서 설정 파일에 작성했던 코드를 살펴보면, presets라는 것이 있다. preset이란 babel을 위한 거대한 플러그인을 말한다. 그 가운데 preset-env가 가장 유명한데, 이는 최신 자바스크립트 구문을 사용할 수 있도록 해준다.

🔎 Babel 사용하기

index.js 파일에 아래 코드를 입력하면, Babel을 사용할 수 있다.

require("@babel/core").transform("code", {
  presets: ["@babel/preset-env"],
});

그러나 이렇게 직접 자바스크립트에서 Babel을 사용하는 대신에, package.json 파일에서 babel로 컴파일하는 script를 만들어 사용할 수도 있다. 이를 위해서는 Nodemon이란 것이 필요하다.

📌 Nodemon

Nodemon은 파일을 관찰하고 있다가 파일이 수정되면 알아서 서버를 재시작해준다.

🔎 babel/node 설치하기

• 먼저, Nodemon을 설치하기 전에 babel/node 설치하기 위해 아래 코드를 터미널에 입력한다.
  이하의 과정은 Babel 홈페이지 - Nodemon를 참고해 진행할 수 있다.

npm install @babel/core @babel/node --save-dev
// 이미 설치된 babel은 npm이 알아서 빼고 설치해준다

🔎 'Babel로 컴파일하는 script' 추가 및 실행

"scripts": {
  "dev": "babel-node index.js"
  // 이전에 만들었던 start script에서 앞에 'babel-'만 추가해준 것
}

해석: index.js라는 파일에 babel-node를 사용하고 싶다.

npm run dev

VS code 터미널에 위처럼 작성하면, dev script에 따라 Babel이 Node.js와 함께 실행된다.

// const express = require("express"); 를
// 최신 코드로 바꾸면 아래와 같다
import express from "express";

즉, Babel이 위와 같은 최신 자바스크립트 코드도 Node.js가 이해할 수 있는 코드로 바꿔줌으로써, 최신 코드도 문제없이 실행되도록 한다.

그러나, 이렇게 하면 index.js의 코드를 바꿀 때마다 터미널에 npm run dev를 입력해줘야 한다. 문제를 해결하기 위해 Nodemon을 사용할 수 있다. Nodemon을 사용하면 처음에 터미널에 명령어를 한 번만 입력해도 파일이 수정될 때마다 자동으로 재시작해준다.

🔎 Nodemon 설치

npm install nodemon --save-dev

🔎 Nodemon 실행

기존의 dev script 코드 앞에 nodemon --exec를 붙여준다

"scripts": {
  "dev": "nodemon --exec babel-node index.js"
  // nodemon이 babel-node index.js을 실행한다
}

이제 매번 명령어를 입력해주지 않아도 파일을 수정한 후 저장할 때마다 index.js 파일의 코드가 실행된다.

✨ 내일 할 것

1. 강의 계속 듣기

2. 오류 해결 - 마지막 babel-node와 nodemon 부분에서 에러가 났다..