[회고록] 20240401 개발 회고록

2024-04-01 개발 회고록

🎯 오늘의 목표

• 일반 로그인/회원가입 구현
• 카카오 소셜 로그인 구현
• 토큰 기반 인증 시스템 구축

🚨 발생한 문제점들

1. 토큰 관리 문제
   • 문제: 모든 사용자에게 동일한 토큰이 생성되는 문제 발생
   • 원인: tokenGenerator.js에서 사용자 고유 정보를 포함하지 않음
   • 영향: 보안 취약성 발생 및 사용자 식별 불가능
2. 인증 플로우 문제
   • 문제: URL 파라미터를 통한 토큰 전달 방식 사용
   • 원인: 프론트엔드와 백엔드 간 토큰 전달 방식 불일치
   • 영향: URL에 토큰 노출로 인한 보안 위험
3. 상태 관리 이슈
   • 문제: 전역 상태 관리 부재로 인한 사용자 정보 관리 어려움
   • 원인: 상태 관리 라이브러리 미사용
   • 영향: 컴포넌트 간 데이터 공유 비효율

💡 해결 방안

1. 토큰 생성 로직 개선

• 목적: 사용자별 고유 토큰 생성

const jwt = require('jsonwebtoken');
const generateTokens = (*userId*, *provider*) *=>* {

  // Access Token - 짧은 유효기간, 자주 갱신

  const accessToken = jwt.sign(
    { 
      userId,
      provider,
      tokenType: 'access',
      timestamp: Date.now() // 토큰 생성 시점 기록
    },
    process.env.JWT_SECRET,
    { expiresIn: '1h' } // 1시간 후 만료

  );
  // Refresh Token - 긴 유효기간, 보안 강화
  const refreshToken = jwt.sign(
    {
      userId,
      provider,
      tokenType: 'refresh',
      timestamp: Date.now()
    },
    process.env.JWT_SECRET,

  { expiresIn: '7d' } // 7일 후 만료

  );

  return { accessToken, refreshToken };

};

• 효과
  • 사용자별 고유 식별자 포함
  • 토큰 재사용 방지
  • 만료 시간 차등 적용

2. 토큰 저장소 구현

• 목적: 안전한 토큰 관리

export const tokenStorage = {

  // Access Token 관리

  setAccessToken: (token: string) => {
    sessionStorage.setItem('accessToken', token);
  },
  getAccessToken: () => sessionStorage.getItem('accessToken'),

  // Refresh Token 관리

  setRefreshToken: (token: string) => {
    sessionStorage.setItem('refreshToken', token);
  },

  getRefreshToken: () => sessionStorage.getItem('refreshToken'),

  // 토큰 초기화

  clearTokens: () => {
    sessionStorage.removeItem('accessToken');
    sessionStorage.removeItem('refreshToken');

  }

};

• 효과

  • 세션 기반 토큰 저장

• 브라우저 종료 시 자동 삭제

  • 중앙화된 토큰 관리

3. 상태 관리 시스템 구축

• 목적: 효율적인 사용자 정보 관리

import create from 'zustand';

interface User {
  id: number;
  email: string | null;
  nickname: string;
  provider: 'local' | 'kakao';

}

interface UserState {

  user: User | null;

  setUser: (user: User) => void;

  clearUser: () => void;

}

export const useStore = create<UserState>((set) => ({
  user: null,
  setUser: (user: User) => set({ user }),
  clearUser: () => set({ user: null })
}));

• 효과
  • 전역 상태 관리 가능
  • TypeScript 타입 안정성
  • 컴포넌트 간 데이터 공유 용이

📚 상세 구현 설명

1. 일반 로그인 프로세스

1. 사용자가 이메일/비밀번호 입력
2. 백엔드에서 비밀번호 검증 후 토큰 생성
3. 프론트엔드에서 토큰 저장 및 상태 업데이트
4. 메인 페이지로 리다이렉션

2. 카카오 로그인 프로세스

1. 카카오 인증 페이지로 리다이렉션
2. 인증 코드 수신 및 토큰 교환
3. 사용자 정보 조회 및 DB 저장
4. JWT 토큰 생성 및 프론트엔드로 전달

3. 온보딩 프로세스

1. 토큰 유효성 검증
2. 사용자 정보 입력 (닉네임 등)
3. 백엔드에 정보 업데이트
4. 메인 페이지로 이동

🌟 새로 배운 점

1. JWT 토큰 설계
   • AccessToken과 RefreshToken의 역할 구분
   • 토큰 내 클레임 설계 방법
   • 토큰 만료 시간 설정 전략
2. 소셜 로그인 구현
   • OAuth 2.0 프로토콜 이해
   • 카카오 API 연동 방법
   • 소셜 로그인과 일반 로그인 통합
3. 상태 관리
   • Zustand를 활용한 전역 상태 관리
   • TypeScript와 상태 관리의 통합
   • 컴포넌트 간 상태 공유 패턴

🔍 요약

• 목표달성: 로그인/회원가입 기능 완성
• 보안강화: 사용자별 고유 토큰, 안전한 저장소
• UX개선: 일관된 인증 플로우, 상태 관리
• 다음과제: 토큰 갱신 로직, 보안 강화

💭 회고

이번 개발을 통해 인증 시스템의 복잡성과 보안의 중요성을 깊이 이해하게 되었습니다. 특히 토큰 기반 인증에서는 사용자별 고유성 보장과 안전한 저장소 구현이 핵심임을 배웠습니다. 또한, 프론트엔드와 백엔드 간의 일관된 데이터 흐름 설계가 얼마나 중요한지 실감했습니다.