Part 2 회원가입 & 로그인 구현

Part 2 회원가입 & 로그인 구현

Node.js로 DB 연동하고 사용자 세션 관리하기

👋 다시 시작해볼까요?

지난 포스팅(Part 1)에서는 Node.js와 FastAPI 서버를 연결하는 기초 공사를 마쳤습니다. 이제 이 튼튼한 기반 위에 사용자 관리 시스템을 올릴 차례입니다.

✅ 오늘 구현할 핵심 기능

• Database: 회원 정보를 저장할 테이블 생성
• Sign Up: 사용자 입력을 받아 DB에 저장 (INSERT)
• Login: 입력 정보 검증 (SELECT) 및 세션 처리

AI가 이미지를 분석해주려면, 먼저 "누가" 요청했는지 알아야겠죠? 그래서 회원 관리는 필수입니다. 이번 단계는 100% Node.js (Express) 영역입니다.

Welcome Back!

ID / Email

Password

LOGIN

Don't have an account? Sign Up

(▲ 이번 포스팅에서 구현할 로그인 페이지 디자인 예시)

💾 데이터베이스 설계 (MariaDB/MySQL)

가장 먼저 데이터를 담을 그릇을 만들어야 합니다. 복잡하게 갈 것 없이 딱 필요한 정보만 담았습니다.

1. 테이블 생성 쿼리 (SQL)

HeidiSQL이나 DBeaver 같은 툴을 열고 아래 쿼리를 실행했습니다.

SQLSchema.sql

CREATE TABLE content_user ( id VARCHAR(20) PRIMARY KEY, -- 아이디 (중복 불가) pw VARCHAR(255) NOT NULL, -- 비밀번호 nick VARCHAR(50) NOT NULL, -- 닉네임 joined_at DATETIME DEFAULT NOW() );

id는 고유해야 하므로 PRIMARY KEY로 설정했고, 비밀번호와 닉네임은 필수 입력값이라 NOT NULL을 주었습니다.

📝 회원가입 (Sign Up)

사용자가 HTML 폼에 정보를 입력하고 [가입하기] 버튼을 누르면 실행되는 로직입니다.

1. 라우터 설정 (routes/user.js)

express.Router()를 사용하여 사용자 관련 요청을 따로 관리합니다. 가입 요청은 데이터를 생성하는 것이므로 POST 방식을 사용합니다.

JSroutes/user.js

// 회원가입 처리 라우터 router.post('/join', async (req, res) => { const { id, pw, nick } = req.body; try { // DB에 사용자 정보 삽입 (INSERT) const sql = 'INSERT INTO content_user (id, pw, nick) VALUES (?, ?, ?)'; await conn.query(sql, [id, pw, nick]); console.log("회원가입 성공!"); res.redirect('/'); // 메인 페이지로 이동 } catch (err) { console.error(err); res.send('<script>alert("가입 실패! 아이디 중복을 확인하세요."); history.back();</script>'); } });

📌 Point: try-catch 문을 사용하여 아이디 중복 등으로 에러가 발생했을 때 서버가 멈추지 않고 알림창을 띄우도록 처리했습니다.

🔐 로그인 & 세션 (Login Logic)

로그인은 단순히 DB에 있는지만 확인하는 게 아니라, "이 사람이 로그인했다"는 상태를 유지시켜줘야 합니다. 여기서 세션(Session)이 등장합니다.

1. 로그인 로직 구현

DB에서 아이디와 비밀번호가 일치하는 행(row)이 있는지 찾습니다.

JSroutes/user.js

router.post('/login', async (req, res) => { const { id, pw } = req.body; // 1. 사용자 조회 (SELECT) const sql = 'SELECT * FROM content_user WHERE id=? AND pw=?'; const [rows] = await conn.query(sql, [id, pw]); if (rows.length > 0) { // 2. 로그인 성공 시 세션에 정보 저장 req.session.user = { id: rows[0].id, nick: rows[0].nick }; console.log("로그인 성공:", req.session.user); // 세션 저장 후 리다이렉트 (안전한 처리를 위해 save 권장) req.session.save(() => { res.redirect('/'); }); } else { // 3. 로그인 실패 res.send('<script>alert("아이디 또는 비번이 틀렸습니다."); location.href="/";</script>'); } });

2. app.js 세션 설정

이 코드가 동작하려면 메인 파일(`app.js`)에 세션 미들웨어가 설정되어 있어야 합니다.

JSapp.js

const session = require('express-session'); app.use(session({ httpOnly: true, // 자바스크립트로 세션 접근 불가 (보안) resave: false, secret: 'secretkey', // 암호화 키 store: new fileStore() // 세션 파일 저장소 }));

🔜 Next: 이미지 업로드 & AI 분석

드디어 회원가입과 로그인까지 완료했습니다! 이제 우리 서비스에 '사용자'라는 개념이 생겼네요.

다음 Part 3에서는 이 프로젝트의 하이라이트 기능을 구현할 예정입니다.

• 🖼️ 이미지 업로드 (Multer):
  로그인한 사용자가 자신의 사진을 서버로 전송합니다.
• 🤖 객체 인식 (YOLOv8):
  업로드된 사진을 FastAPI로 보내서 "이것은 사과입니다(99%)" 라는 결과를 받아옵니다.

기대해 주세요! 다음 포스팅에서 만나요 👋