오늘의 잔디
✨ JWT 기반 로그인/회원가입/로그아웃 기능 완성!
이번 작업에서는 JWT 인증 기능을 프론트엔드와 백엔드에 완전히 연동하고, 사용자 인증 흐름을 실제로 테스트하여 완성했습니다.
✅ 작업 내용 요약
1. JWT 인증 기능 연동 완료
-
백엔드에서 로그인 시 JWT 토큰 발급
-
클라이언트에서
localStorage에 저장 후 인증 필요 API에Bearer토큰으로 전달 -
토큰 만료 시 자동 로그아웃 기능 추가
2. 회원가입 기능 구현
-
signup.html,signup.js,signup.css작성 -
유효성 검사(빈값) → 빨간 메시지 출력
-
중복된 ID → 빨간 메시지 출력
-
회원가입 성공 시 → 초록 메시지 & 자동 로그인 페이지 이동
3. 로그인 기능 개선
-
login.html,login.js,login.cssUI 깔끔하게 재작성 -
로그인 성공 시 토큰 저장 및 index 페이지 이동
-
실패 시 에러 메시지 출력
4. 로그아웃 기능 구현
-
logout.html+logout.js구성 -
로그아웃 버튼 클릭 시 토큰 삭제 및 로그인 페이지 이동
-
index.html등 어디든<a href="logout.html">로그아웃</a>추가만 하면 연결 가능
5. index.js에 JWT 인증 연동
-
일정 추가/삭제/조회 요청 시 JWT 토큰 포함
-
인증 실패(401, 403) 시 자동 로그아웃 처리
🔐 인증 흐름 요약
회원가입 → 로그인 → 토큰 저장 → 일정 관리(API 요청 시 토큰 포함) → 토큰 만료 시 자동 로그아웃
💡 배운 점
-
JWT 토큰은 단순 저장이 아니라 인증 흐름을 관리하는 중요한 수단이라는 점
-
토큰 만료 시 UI 측에서 자동 처리가 꼭 필요하다는 점
-
프론트 fetch 요청에 토큰 포함시키는 패턴 익힘
-
localStorage, fetch error handling (.catch) 사용법 익숙해짐
⏭️ 다음 목표
-
✅ 사용자별 일정만 조회되도록 필터링
-
✅ JWT 토큰에서 사용자 정보 추출하여 개인 일정 관리 기능 추가
-
➕ 사용자 정보 표시(UI) 등 기능 확장 예정
