로그인 구현하기 - 4. 프론트와 백엔드의 협력 포인트

로그인 구현하기의 마지막 파트로,
실무에 있어서 백엔드 개발자와 프론트엔드 개발자가 함께 협력하여 확인해야 하는 부분들을 정리했다.

1. API 엔드포인트 설계

• 로그인 엔드포인트: /login

  • 메서드: POST
  • 요청 본문: { "username": "example", "password": "example" }
  • 응답: { "token": "JWT_TOKEN_HERE" }

• 회원가입 엔드포인트: /register

  • 메서드: POST
  • 요청 본문: { "username": "example", "password": "example" }
  • 응답: { "message": "User registered successfully" }

• 보호된 리소스 엔드포인트: /protected

  • 메서드: GET
  • 헤더: Authorization: Bearer JWT_TOKEN_HERE
  • 응답: { "data": "Protected data" }

  API 명세서를 받고 작업하는 경우엔 맞추게 되지만 먼저 작업을 시작해야하는 경우엔 엔드포인트, 메서드, 헤더, 응답 네가지를 맞춰야 한다.
  의외로 로그인과 회원가입이 프로젝트마다 다 다르게 구현되고 천차만별로 다르기 때문에 맞출 때 주의해야한다.
  로그인이 login인 곳도 있지만 sign in인 곳도 있고 회원가입이 register인 곳도 있지만 sign up, join, enroll인 곳도 있다.

2. 요청 및 응답 형식

• 요청 클라이언트가 보내는 요청의 형식을 정의해둬야 한다.
  • 예시, JSON 형식으로 사용자 이름과 비밀번호를 전달.
• 응답 형식: 서버가 반환하는 응답의 형식을 정의해둬야 한다.
  • 성공 시 JWT 토큰을 포함한 JSON 응답.
  • 실패 시 에러 메시지를 포함한 JSON 응답.

3. 인증 및 인가

• JWT 토큰 생성 및 검증
  백엔드에서 JWT 토큰을 생성하고, 보호된 리소스에 접근할 때 토큰을 검증할 때, 토큰에 포함될 페이로드와 서명 비밀 키 정의를 맞춰야 한다.
• 토큰 만료 시간
• 토큰의 유효 기간을 정의와 만료 시 처리 방안*을 결정해야 한다.
  일반적으로 액세스 토큰은 짧은 유효 기간을 가지며, 리프레시 토큰을 사용해 갱신하는 방식을 택하는데 각각의 기간을 맞춰야 한다.

4. 보안 조치

• HTTPS 사용: 모든 통신이 HTTPS를 통해 암호화되도록 설정.
• 비밀번호 해싱: 백엔드에서 비밀번호를 해싱하여 저장.
  • 예: bcrypt 사용.
• CSRF 방지: 백엔드에서 CSRF 토큰을 사용하여 보호.
• CORS 설정: 백엔드 서버에서 CORS 정책을 설정하여 특정 도메인에서만 요청을 허용.

5. 에러 처리

• 에러 응답 형식: 백엔드에서 발생할 수 있는 에러에 대해 일관된 형식의 응답을 정의.
  • 예: { "error": "Invalid credentials" }, { "error": "User already exists" }
• 에러 코드: HTTP 상태 코드에 따라 적절한 에러 메시지 제공.
  • 400: 잘못된 요청 (Bad Request)
  • 401: 인증 실패 (Unauthorized)
  • 403: 권한 없음 (Forbidden)
  • 500: 서버 오류 (Internal Server Error)

6. 세션 및 상태 관리

• 로그인 상태 관리: 프론트엔드에서 사용자의 로그인 상태를 관리.
  • 예: JWT 토큰을 로컬 스토리지나 쿠키에 저장.
• 자동 로그아웃: 토큰 만료 시 사용자를 자동으로 로그아웃시키고 로그인 페이지로 리다이렉트.

7. 사용자 경험(UX)

• 로딩 상태 표시: 로그인 요청이 진행 중일 때 로딩 스피너 등을 표시.
• 오류 메시지 표시: 로그인 실패 시 사용자에게 명확한 오류 메시지를 표시.
• 리다이렉션: 로그인 성공 시 사용자에게 보호된 페이지로 리다이렉트.

8. 테스트 및 디버깅

• API 테스트: Postman 등의 도구를 사용하여 API 엔드포인트 테스트.
• 프론트엔드 테스트: 실제 로그인 폼을 통해 백엔드와의 통신 테스트.
• 로그 및 모니터링: 백엔드 서버의 로그를 모니터링하여 로그인 요청 및 오류를 추적.

예시 협업 시나리오

1. API 설계 논의

백엔드 개발자와 프론트엔드 개발자는 먼저 로그인, 회원가입, 보호된 리소스 접근 등을 위한 API 엔드포인트와 요청/응답 형식을 정의합니다.

2. 토큰 생성 및 검증

백엔드 개발자가 JWT 토큰 생성 및 검증 로직을 구현하면, 프론트엔드 개발자는 이 토큰을 저장하고, 보호된 리소스 접근 시 토큰을 포함하여 요청을 보내는 로직을 구현합니다.

3. 에러 처리

백엔드 개발자는 다양한 에러 상황(예: 사용자 인증 실패, 데이터베이스 오류 등)에 대해 적절한 HTTP 상태 코드와 에러 메시지를 반환하도록 구현합니다. 프론트엔드 개발자는 이러한 에러 메시지를 사용자에게 표시하고 적절한 조치를 취합니다.

4. 보안 검토

백엔드와 프론트엔드 개발자는 함께 HTTPS 설정, CORS 정책, CSRF 보호 등 보안 관련 설정을 검토하고, 필요 시 개선합니다.

5. 테스트 및 피드백

모든 기능이 구현되면, 백엔드와 프론트엔드 개발자는 각자의 부분을 테스트하고 피드백을 주고받으며 수정사항을 반영합니다.

이 과정을 통해 백엔드와 프론트엔드 개발자가 협력하여 안전하고 원활하게 작동하는 로그인 시스템을 구축할 수 있습니다.