회원가입 & 로그인 기능 구현 흐름 완전 정복｜프론트엔드 개발자를 위한 인증 시스템 기초

🔐 회원가입 & 로그인 기능 구현 흐름 완전 정복｜프론트엔드 개발자가 알아야 할 인증 시스템의 기본

안녕하세요, 퍼블리셔 노미입니다!
지금까지 우리는 HTML, CSS, JavaScript를 통해 다양한 웹 기능을 구현해왔고, API와 JSON Server까지 활용해 가짜 데이터를 다루는 연습도 해보았죠.

이제 진짜 웹 서비스처럼 보이려면 반드시 들어가야 할 기능, 바로 회원가입과 로그인입니다.
이 글에서는 프론트엔드 개발자가 꼭 알아야 할 인증 흐름을 회원가입 & 로그인 로직 + 토큰 관리 + fetch 실습 중심으로 정리해드릴게요.

---

📌 인증(Authentication)이란?

인증이란 사용자가 누구인지 확인하는 과정입니다.
회원가입을 통해 유저 정보를 저장하고, 로그인 시 입력된 정보가 맞는지를 서버에서 확인하죠.

회원가입: 사용자 정보를 DB에 저장
로그인: 사용자 정보 확인 후 토큰 발급 (세션 or JWT)

---

🧩 인증의 핵심 흐름

1. 사용자가 폼에 이메일/비밀번호 입력
2. 서버에 POST 요청으로 전송
3. 서버가 정보 확인 후 JWT 토큰 반환
4. 클라이언트는 토큰을 localStorage나 cookie에 저장
5. 이후 API 요청 시 헤더에 토큰을 함께 보내 인증 처리

---

📝 회원가입 폼 만들기

<form id="signupForm">
  <input type="email" id="email" placeholder="이메일">
  <input type="password" id="password" placeholder="비밀번호">
  <button type="submit">회원가입</button>
</form>

회원가입 요청 예시 (fetch)

document.getElementById("signupForm").addEventListener("submit", function(e) {
  e.preventDefault();

  const email = document.getElementById("email").value;
  const password = document.getElementById("password").value;

  fetch("http://localhost:3001/register", {
    method: "POST",
    headers: {
      "Content-Type": "application/json"
    },
    body: JSON.stringify({ email, password })
  })
  .then(res => res.json())
  .then(data => {
    alert("회원가입 완료!");
  });
});

json-server-auth를 함께 사용하면 쉽게 테스트 가능해요.

---

🔑 로그인 폼 만들기

<form id="loginForm">
  <input type="email" id="loginEmail" placeholder="이메일">
  <input type="password" id="loginPassword" placeholder="비밀번호">
  <button type="submit">로그인</button>
</form>

로그인 요청 및 토큰 저장

document.getElementById("loginForm").addEventListener("submit", function(e) {
  e.preventDefault();

  const email = document.getElementById("loginEmail").value;
  const password = document.getElementById("loginPassword").value;

  fetch("http://localhost:3001/login", {
    method: "POST",
    headers: {
      "Content-Type": "application/json"
    },
    body: JSON.stringify({ email, password })
  })
  .then(res => res.json())
  .then(data => {
    localStorage.setItem("token", data.accessToken);
    alert("로그인 성공!");
  });
});

→ accessToken이 로그인 상태를 유지하는 열쇠!

---

📡 토큰을 포함해 API 요청하기

const token = localStorage.getItem("token");

fetch("http://localhost:3001/profile", {
  headers: {
    "Authorization": "Bearer " + token
  }
})
.then(res => res.json())
.then(data => {
  console.log("회원정보:", data);
});

→ 백엔드는 토큰을 확인하고, 올바르면 데이터를 돌려줍니다.

---

🧪 로그인 여부에 따른 UI 처리

if (localStorage.getItem("token")) {
  document.body.classList.add("logged-in");
} else {
  document.body.classList.remove("logged-in");
}

→ 로그인된 상태에서만 보이는 메뉴 등을 구현할 수 있어요.

---

📁 로그아웃 구현

document.getElementById("logoutBtn").addEventListener("click", function() {
  localStorage.removeItem("token");
  alert("로그아웃 되었습니다.");
  location.reload();
});

→ 토큰 삭제로 인증 해제

---

🔒 인증 방식 간단 정리

방식	설명	보관 위치
Session	서버에서 세션ID 생성 & 관리	쿠키
JWT	토큰 자체에 인증 정보 포함	localStorage / sessionStorage / 쿠키

---

🛡 보안 고려사항

• HTTPS에서만 토큰 저장
• XSS 대비 → localStorage 대신 httpOnly 쿠키 사용 추천
• 토큰 만료시간 관리 필요

---

📚 마무리하며

회원가입과 로그인 기능은 모든 웹 서비스의 기본입니다.
오늘 배운 내용을 기반으로 실제 서비스에서 인증 기능을 어떻게 다루는지 익혀보세요.

다음 글에서는 json-server-auth로 실제 로그인 백엔드를 구성하고 관리자/사용자 권한 분리까지 확장해볼게요!

---

#회원가입 #로그인기능 #JWT토큰 #프론트엔드인증 #fetch인증 #웹보안기초 #웹개발흐름 #퍼블리셔노미 #jsonserverauth