🧩 Vue 2로 배우는 프론트엔드 기초

사용자 회원가입과 로그인, 그리고 JWT 발급을 처리합니다.

✅ 아래처럼 server.js를 구성해보세요:

const express = require('express');
const cors = require('cors');
const todosRouter = require('./routes/todos');
const authRouter = require('./routes/auth');
const app = express();
const PORT = 3000;

app.use(cors());
app.use(express.json());

// ✅ RESTful router 등록
app.use('/todos', todosRouter);
app.use('/auth', authRouter); // /auth/register, /auth/login

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

✅ 그리고 routes/auth.js 라우터 파일을 생성하세요:

routes/auth.js

jwt 토큰 라이브러리를 설치합니다.

npm i jsonwebtoken

✅ routes/auth.js

const express = require('express');
const fs = require('fs');
const path = require('path');
const jwt = require('jsonwebtoken');

const router = express.Router();
const USERS_FILE = path.join(__dirname, '../data/users.json');
const SECRET = 'my-vue-jwt-secret'; // JWT 서명용 비밀 키

// 유저 목록 불러오기
function getUsers() {
  if (!fs.existsSync(USERS_FILE)) return [];
  const data = fs.readFileSync(USERS_FILE, 'utf-8');
  return JSON.parse(data);
}

// 🔐 회원가입
router.post('/register', (req, res) => {
  const { username, password } = req.body;
  const users = getUsers();

  const exists = users.find(u => u.username === username);
  if (exists) {
    return res.status(400).json({ message: '이미 존재하는 아이디입니다.' });
  }

  users.push({ username, password });
  fs.writeFileSync(USERS_FILE, JSON.stringify(users, null, 2));
  res.status(201).json({ message: '회원가입 완료' });
});

// 🔐 로그인 + JWT 발급
router.post('/login', (req, res) => {
  const { username, password } = req.body;
  const users = getUsers();

  const found = users.find(u => u.username === username && u.password === password);
  if (!found) {
    return res.status(401).json({ message: '아이디 또는 비밀번호가 올바르지 않습니다.' });
  }

  const token = jwt.sign({ username }, SECRET, { expiresIn: '1h' });
  res.json({ token, username });
});

module.exports = router;

✅ 같이 준비해야 할 파일

• data/users.json (초기에는 빈 배열):

[]

Postman으로 커스텀 로그인 API 테스트하기

이번 강좌에서는 Postman을 활용해 우리가 만든 회원가입과 로그인 API를 직접 호출하고, JWT가 발급되는 과정을 확인해봅니다.

🔧 1단계: Postman 설치 및 실행

• Postman 공식 사이트:

  👉 https://www.postman.com/downloads

• 설치 후 실행하면 다음과 같은 인터페이스가 뜹니다.

🧪 2단계: 회원가입 API 테스트

➤ 새 요청 생성

• Method: POST
• URL: http://localhost:3000/auth/register

➤ Body 설정

• 상단 탭에서 Body → raw 선택
• 우측 드롭다운에서 JSON 선택
• 아래 내용을 입력:

{
  "username": "testuser",
  "password": "1234"
}

➤ 전송 (Send 버튼 클릭)

• 응답 예시:

{
  "message": "회원가입 완료"
}

🧪 3단계: 로그인 API 테스트

➤ 새 요청 생성

• Method: POST
• URL: http://localhost:3000/auth/login

➤ Body 설정

{
  "username": "testuser",
  "password": "1234"
}

➤ 전송 결과

{
  "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6...",
  "username": "testuser"
}

이 token은 이후 요청 시 인증에 사용됩니다.

🧩 4단계: JWT 확인 및 저장 테스트

• 받은 token은 로컬 저장소(localStorage) 또는 쿠키에 저장해 사용자 인증에 사용할 수 있습니다.
• 이후 요청 시, 아래처럼 Authorization 헤더에 포함합니다:

Authorization: Bearer <JWT 토큰>

✅ Tip: Postman Authorization 탭 활용

• Headers 수동 입력 없이도, Authorization 탭 선택 → Bearer Token 옵션 선택
• 복사한 JWT 토큰을 붙여넣으면 헤더 자동 구성됨

BE 저장소

GitHub - heroyooi/vue2-api at ch14