Fetch API를 활용한 로그인/회원가입 기능 구현(JS 시큐어코딩)
비동기 통신의 핵심, Fetch API를 활용해 사용자 인증 시스템을 직접 구현해보세요!
안녕하세요, 개발자 여러분! ICT리더 리치입니다.
오늘은 웹 개발에서 가장 기본이자 중요한 기능인 로그인과 회원가입 시스템을 직접 구현해보는 시간을 갖겠습니다.
특히, 프론트엔드와 백엔드가 데이터를 주고받는 데 필수인 Fetch API를 활용하여 어떻게 실무에 가까운 인증 기능을 구현하는지 차근차근 알아보겠습니다.
JS 입문자부터 실무 개발자까지 모두에게 유익한 실전 가이드를 시작해볼까요?
📌 바로가기 목차
 |
| 로그인 기능 구현 집중 모습 – Fetch API 실습 썸네일 |
1. Fetch API란 무엇인가요?
Fetch API는 자바스크립트에서 네트워크 요청을 보내기 위해 사용하는 비동기 API입니다.
AJAX의 대체제로, 더 간결하고 유연한 문법으로 RESTful API와 통신할 수 있어, 모던 웹 개발에서 자주 활용됩니다.
fetch() 함수는 Promise 기반으로 작동하며, JSON 응답 처리에 매우 용이합니다.
2. 회원가입/로그인 폼의 데이터 흐름 이해
회원가입 및 로그인 로직을 구현할 때는 프론트엔드 → 백엔드 → DB로 이어지는 데이터 흐름을 정확히 이해해야 합니다.
HTML 폼의 입력 데이터를 자바스크립트로 수집한 후, fetch()를 통해 서버 API에 POST 요청을 보내며, 서버는 이 요청을 처리하고 응답을 반환합니다.
| 단계 | 설명 |
|---|---|
| 1. 폼 입력 | 사용자가 이름, 이메일, 비밀번호를 입력 |
| 2. JavaScript 처리 | 입력값을 자바스크립트로 수집 및 유효성 검사 |
| 3. Fetch 요청 | fetch()로 서버 API에 POST 요청 |
| 4. 서버 처리 | 입력값을 DB에 저장하거나 인증 확인 |
| 5. 응답 반환 | JSON 형태로 결과 응답 → UI 업데이트 |
3. 백엔드 API 설계 포인트
백엔드에서는 다음과 같은 API 엔드포인트 설계가 일반적입니다:
- POST /api/signup - 회원가입 처리
- POST /api/login - 로그인 처리
- GET /api/user - 로그인된 유저 정보 조회 (JWT 사용 시)
API의 보안성과 구조는 프론트와의 통신에서 매우 중요하며, JSON 응답 형식과 HTTP 상태코드를 명확히 정의해야 합니다.
 |
| Fetch API를 활용한 로그인 및 회원가입 구현 – 여성 개발자 인포그래픽 설명 |
4. 회원가입 Fetch API 구현 예시
회원가입 기능은 사용자의 이름, 이메일, 비밀번호와 같은 정보를 서버로 전송하고,
DB에 저장하여 계정을 생성하는 과정입니다.
이때 중요한 점은 데이터 유효성 검사와 에러 처리이며,
보안을 위해 반드시 https 환경과 해시 처리된 비밀번호 저장이 필요합니다.
아래 코드는 실전 환경에 가까운 흐름을 따르며, fetch()를 이용한 POST 방식으로 구현됩니다.
// 회원가입 버튼 클릭 시 실행되는 함수
const signup = async () => {
// 1. 사용자 입력값 가져오기
const username = document.getElementById("username").value.trim();
const email = document.getElementById("email").value.trim();
const password = document.getElementById("password").value.trim();
// 2. 유효성 검사 - 공백 체크
if (!username || !email || !password) {
alert("모든 입력값을 채워주세요.");
return;
}
// 3. 이메일 형식 검사 (기본 정규식)
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test(email)) {
alert("유효한 이메일 형식을 입력해주세요.");
return;
}
// 4. 회원가입에 필요한 데이터 객체 생성
const signupData = {
username: username,
email: email,
password: password,
};
try {
// 5. 서버에 회원가입 요청 전송
const response = await fetch("/api/signup", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(signupData), // JSON 문자열로 변환
});
// 6. 응답을 JSON으로 변환
const result = await response.json();
// 7. 응답 상태에 따라 분기 처리
if (response.ok) {
alert("회원가입이 완료되었습니다!");
// 성공 시 로그인 페이지로 이동하거나 초기화
} else {
alert(`회원가입 실패: ${result.error || "서버 오류 발생"}`);
}
} catch (error) {
// 8. 네트워크 에러 또는 예외 처리
console.error("회원가입 요청 오류:", error);
alert("요청 처리 중 오류가 발생했습니다.");
}
};
5. 로그인 Fetch API 구현 예시
로그인 기능은 사용자가 입력한 이메일과 비밀번호를 서버에 전송하고,
계정 정보가 일치하면 인증 토큰(JWT 등)을 발급받아 세션을 유지하는 역할을 합니다.
fetch()로 요청을 보내고, 응답으로 받은 토큰은 일반적으로 localStorage에 저장하여
다음 API 요청 시 인증 헤더에 포함시킵니다.
아래는 로그인 시 사용되는 전체 프로세스를 담은 예시 코드입니다.
// 로그인 버튼 클릭 시 실행되는 함수
const login = async () => {
// 1. 입력값 수집
const email = document.getElementById("loginEmail").value.trim();
const password = document.getElementById("loginPassword").value.trim();
// 2. 유효성 검사
if (!email || !password) {
alert("이메일과 비밀번호를 모두 입력해주세요.");
return;
}
// 3. 로그인 데이터 객체 생성
const loginData = {
email: email,
password: password,
};
try {
// 4. 로그인 요청 전송
const response = await fetch("/api/login", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(loginData),
});
// 5. 서버 응답 처리
const result = await response.json();
// 6. 로그인 성공 처리
if (response.ok) {
alert("로그인 성공!");
// 7. JWT 토큰 저장 (로컬 스토리지 활용)
localStorage.setItem("token", result.token);
// 8. 메인 페이지 또는 대시보드 이동
window.location.href = "/dashboard.html";
} else {
// 9. 로그인 실패 시 메시지 출력
alert(`로그인 실패: ${result.error || "계정 정보를 다시 확인하세요."}`);
}
} catch (error) {
// 10. 네트워크 에러 또는 예외 처리
console.error("로그인 오류 발생:", error);
alert("서버와 연결에 문제가 있습니다.");
}
};
6. 보안을 고려한 처리 방식
인증 시스템을 구축할 때는 반드시 보안을 고려해야 합니다. 아래 체크리스트는 기본적인 보안 수칙입니다.
- ✅ HTTPS만 사용하여 데이터 암호화 전송
- ✅ 비밀번호는 반드시 해시(SHA256, bcrypt 등) 저장
- ✅ CSRF 방지 토큰 적용 및 쿠키의 HttpOnly 속성 활용
- ✅ 응답 메시지에 민감 정보 포함 금지
- ✅ JWT 토큰 서명 검증 필수
 |
| 실무형 로그인 기능 구현을 설명하는 Fetch API 인포그래픽 – 남성 개발자 |
7. 자주 묻는 질문 (FAQ)
더 간결한 문법과 Promise 기반 구조로 비동기 처리를 더 유연하게 다룰 수 있습니다. JSON 데이터를 기본으로 다루기 편해 모던 웹 환경에 적합합니다.
서버에서 CORS 허용 설정이 되어 있지 않기 때문입니다. 백엔드에서 Access-Control-Allow-Origin 헤더를 설정해야 합니다.
비밀번호는 절대 평문으로 저장하지 않으며, bcrypt 같은 해시 알고리즘으로 암호화하여 저장합니다.
JWT 토큰을 로컬스토리지 또는 세션스토리지에 저장 후, 다음 요청에 Authorization 헤더로 함께 전송합니다.
UI 구성은 가능하지만, 실제 인증/인가 처리는 반드시 백엔드에서 수행되어야 합니다. 프론트엔드만으로는 보안상 큰 한계가 있습니다.
8. 마무리 요약
✅ Fetch API로 로그인/회원가입 기능을 실전처럼 구현하기
사용자 인증 기능은 웹 서비스의 핵심입니다. 오늘 다룬 Fetch API는 비동기 네트워크 요청을 손쉽게 구현할 수 있도록 도와주는 매우 강력한 도구입니다. 특히 POST 방식으로 JSON 데이터를 주고받는 방식은 대부분의 실무에 적용 가능합니다. 회원가입과 로그인 기능을 직접 구현해보며, 클라이언트와 서버 사이의 흐름을 체득해보세요. 다음에는 토큰 기반 인증, 소셜 로그인, 보안 심화 주제도 함께 다뤄보겠습니다. 프론트엔드와 백엔드를 잇는 첫걸음, 지금 실습으로 시작해보세요!
댓글
댓글 쓰기