Node.js로 간단한 웹 애플리케이션 만들기

Node.js로 간단한 웹 애플리케이션을 만드는 방법에 대하여 알아보겠습니다. Express.js를 활용한 서버 구축부터 REST API 개발, 프론트엔드 연동, 배포까지 단계별로 설명합니다.

1. Node.js란?

Node.js는 Chrome V8 JavaScript 엔진을 기반으로 만들어진 서버 사이드 JavaScript 실행 환경입니다. 비동기 이벤트 기반 아키텍처를 사용하여 확장성과 성능이 뛰어난 애플리케이션을 만들 수 있습니다.

Node.js의 주요 특징

비동기 및 이벤트 기반: 높은 성능과 확장성을 제공합니다.
빠른 실행 속도: V8 엔진을 사용하여 빠른 코드 실행이 가능합니다.
단일 프로그래밍 언어: 프론트엔드와 백엔드 모두 JavaScript 사용 가능합니다.
방대한 패키지 지원: NPM(Node Package Manager)으로 다양한 라이브러리 활용이 가능합니다.

2. Node.js 개발 환경 설정

1) Node.js 설치

Node.js 공식 웹사이트(https://nodejs.org)에서 LTS 버전을 다운로드하여 설치합니다. 설치가 완료되면 터미널에서 다음 명령어로 설치를 확인합니다.

node -v
npm -v

2) 프로젝트 생성 및 패키지 초기화

mkdir my-node-app
cd my-node-app
npm init -y

이제 package.json 파일이 생성됩니다.

3. 간단한 웹 애플리케이션 만들기

1) Express.js 설치 및 기본 설정

Express.js는 Node.js에서 가장 많이 사용되는 웹 프레임워크입니다. 먼저 설치합니다.

npm install express

이제 server.js 파일을 만들고, Express 서버를 설정합니다.

const express = require("express");
const app = express();
const PORT = 3000;

app.get("/", (req, res) => {
  res.send("Hello, Node.js Web Application!");
});

app.listen(PORT, () => {
  console.log(`서버가 http://localhost:${PORT} 에서 실행 중입니다.`);
});

2) 서버 실행 및 테스트

node server.js

웹 브라우저에서 http://localhost:3000에 접속하면 Hello, Node.js Web Application!이 표시됩니다.

4. REST API 추가하기

웹 애플리케이션에서 데이터를 주고받기 위해 REST API를 추가합니다.

1) JSON 데이터 반환 API 만들기

다음과 같이 users 데이터를 반환하는 API를 추가합니다.

const users = [
  { id: 1, name: "Alice" },
  { id: 2, name: "Bob" },
];

app.get("/api/users", (req, res) => {
  res.json(users);
});

서버를 실행한 후 http://localhost:3000/api/users로 접속하면 JSON 데이터를 확인할 수 있습니다.

5. 프론트엔드와 연동하기

간단한 HTML 파일을 만들어 데이터를 표시해 보겠습니다.

1) 정적 파일 서빙 설정

Express에서 정적 파일을 제공하려면 express.static()을 사용합니다.

app.use(express.static("public"));

2) HTML 및 JavaScript 파일 생성

public/index.html 파일을 만들고 다음 내용을 추가합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Node.js 웹 앱</title>
</head>
<body>
    <h1>사용자 목록</h1>
    <ul id="user-list"></ul>
    <script>
        fetch("/api/users")
            .then(response => response.json())
            .then(data => {
                const userList = document.getElementById("user-list");
                data.forEach(user => {
                    const li = document.createElement("li");
                    li.textContent = user.name;
                    userList.appendChild(li);
                });
            });
    </script>
</body>
</html>

서버를 실행하고 http://localhost:3000에 접속하면 사용자 목록이 표시됩니다.

6. 배포하기

Node.js 애플리케이션을 실제 서비스로 배포하려면 다음과 같은 방법을 사용할 수 있습니다.

1) 클라우드 서비스 사용

Heroku: 간편한 배포 가능
Vercel: 정적 파일 및 백엔드 배포 가능
AWS EC2: 직접 서버 관리 가능

2) GitHub와 연동하여 배포

GitHub에 프로젝트를 업로드하고, Heroku 또는 Vercel과 연동하여 배포할 수 있습니다.

git init
git add .
git commit -m "Initial commit"
git push origin main

7. 결론

Node.js를 활용하여 간단한 웹 애플리케이션을 개발하는 과정을 살펴보았습니다. Express를 사용하여 기본적인 웹 서버를 만들고, REST API를 추가하고, 프론트엔드와 데이터를 연동하는 방법까지 다뤘습니다.

✅ 추가 학습 추천

Express.js 심화 학습
데이터베이스(MySQL, MongoDB) 연동
JWT를 활용한 인증 구현

Node.js를 활용하여 더 복잡한 애플리케이션 개발에 도전해봅시다!

4차 산업 혁명