[Dseok의 코딩스터디] Node.js + Express 서버 구축 및 Babel & Nodemon 설정 한방에 끝내기

html

📌 개요

Node.js를 이용하여 Express 서버를 구축하는 방법을 설명합니다. 또한, Babel을 사용하여 최신 JavaScript 문법을 활용하고, Nodemon을 설정하여 서버 자동 재시작 기능을 추가하는 방법까지 다룹니다.

이 글을 따라 하면 Node.js 서버를 효율적으로 구성하고 관리하는 방법을 익힐 수 있습니다.

 

📌 1. 프로젝트 생성 및 기본 설정

✅ 1) Node.js 프로젝트 생성 (package.json 만들기)

먼저, 프로젝트 폴더를 만들고 초기 설정을 진행합니다.

// 원하는 폴더 밑에서 아래 코드를 작동시킵니다.
npm init -y

✅ 설명: npm init -y를 실행하면 기본 package.json 파일이 생성됩니다.

 

📌 2. Express 설치

Express는 간단한 웹 서버를 만들 수 있는 Node.js 프레임워크입니다.

npm i express

✅ 설명: Express 패키지를 설치하면 서버를 쉽게 만들 수 있습니다.

 

📌 3. Babel 설치 및 설정

Babel을 설치하면 최신 JavaScript 문법을 사용할 수 있습니다.

Babel 링크

✅ 1) Babel 패키지 설치

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

✅ 2) Babel 설정 파일 만들기 (babel.config.json)

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

✅ 설명: Babel 설정을 통해 최신 ES6+ 문법을 변환할 수 있습니다.

 

📌 4. Nodemon 설정 (서버 자동 재시작)

Nodemon은 파일 변경 시 서버를 자동으로 재시작해주는 툴입니다.

npm install --save-dev nodemon @babel/register

✅ 1) package.json 스크립트 수정

"scripts": {
  "babel-node": "node --require @babel/register",
  "dev": "nodemon --exec npm run babel-node src/index.js"
}

/*
"dev": "nodemon --exec npm run babel-node src/index.js"
여기서 server코드가 들어갈 index.js파일을 src폴더 밑으로 넣어야합니다!!
*/

✅ 설명: npm run dev를 실행하면 Nodemon이 감지하여 서버가 자동 재시작됩니다.

 

📌 5. Express 서버 설정 (server.js)

이제 Express 서버를 생성합니다.

✅ 1) src/index.js 파일 생성 후 아래 코드 입력

import express from 'express';

const app = express();
const port = 4000; // 포트번호는 넣고 싶은 번호를 넣으시면 됩니다!!

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

app.listen(port, () => {
  console.log(`✅ 서버 실행 중: http://localhost:${port}`);
});

✅ 설명: / 경로로 요청이 들어오면 Hello World!를 응답하는 간단한 서버입니다.

 

📌 6. 서버 실행

npm run dev

✅ 설명: npm run dev 실행 시 Nodemon이 서버를 자동 감지하여 실행합니다.

 

📌 마무리 🎯

1. Node.js 프로젝트 생성 및 package.json 설정
2. Express 설치 및 서버 생성
3. Babel을 사용하여 최신 JavaScript 문법 적용
4. Nodemon으로 서버 자동 재시작 설정

🚀 아직은 보잘 것 없는 창이 띄워질겁니다! 이 프로젝트는 계속 진행됩니다!

 

svelte코드