Node.js + Express로 로그인 기능 만들기

기본 개념부터 POST 처리까지 간단 예제로 익히기

로그인 기능은 웹 애플리케이션의 핵심입니다. 이번 글에서는 Node.js와 Express를 활용해 아주 기본적인 로그인 처리 흐름을 만들어보겠습니다.

 

 

• 로그인 페이지 보여주기
• ID/PW 입력받기 (POST)
• 입력된 정보 확인 후 로그인 성공 or 실패 처리

1. 프로젝트 준비

mkdir express-login
cd express-login
npm init -y
npm install express body-parser

• express: 서버 프레임워크
• body-parser: POST 요청에서 form 데이터를 읽기 위함

 

2. 서버 코드 작성 (index.js)

• GET /login: 로그인 HTML 폼 출력
• POST /login: form에서 보낸 아이디/비번을 body-parser로 읽어서 비교
• 실제 로그인 정보는 하드코딩된 상수로 처리 (DB나 세션 없음)

const express = require('express');
const bodyParser = require('body-parser');
const app = express();
const PORT = 3000;

// 바디파서 설정 (x-www-form-urlencoded)
app.use(bodyParser.urlencoded({ extended: true }));

// 로그인 폼 페이지
app.get('/login', (req, res) => {
  res.send(`
    <h2>로그인 페이지</h2>
    <form action="/login" method="post">
      <input type="text" name="username" placeholder="아이디" required />
      <input type="password" name="password" placeholder="비밀번호" required />
      <button type="submit">로그인</button>
    </form>
  `);
});

// 로그인 처리
app.post('/login', (req, res) => {
  const { username, password } = req.body;

  // 간단한 유저 정보 (실제 환경에서는 DB 사용)
  const USER_ID = 'admin';
  const USER_PW = '1234';

  if (username === USER_ID && password === USER_PW) {
    res.send(`<h3>로그인 성공! 환영합니다, ${username}님.</h3>`);
  } else {
    res.send(`<h3>로그인 실패! 아이디 또는 비밀번호가 틀렸습니다.</h3>`);
  }
});

// 404 처리
app.use((req, res) => {
  res.status(404).send('페이지를 찾을 수 없습니다.');
});

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

 

 

3. 실행하기

node index.js

 

그 다음 브라우저에서 http://localhost:3000/login 에 접속해보세요!

• ID: admin
• PW: 1234

을 입력하면 로그인 성공!
틀리면 실패 메시지가 출력됩니다.