로그인 만들기 (2)

로그인 만들기 (2): 마이페이지 및 회원 탈퇴 기능 구현

이 강의에서는 이전 시간에 이어 사용자 로그인 시스템 구축을 마무리합니다. 특히 사용자의 개인 정보를 보여주는 '마이페이지' 화면을 디자인하고, 사용자가 계정을 삭제할 수 있는 '회원 탈퇴' 기능을 구현하는 과정을 상세히 다룹니다.

학습 목표

• 사용자 프로필 이미지 표시 로직 구현 (이미지 존재 여부에 따른 분기 처리)
• 회원 정보를 구조화하여 표시하기 위한 HTML dl, dt, dd 태그 활용법 학습
• 마이페이지 화면의 UI/UX 개선을 위한 CSS 스타일링 적용
• 회원 탈퇴 기능 구현: POST 요청 사용 이유 및 보안 고려사항 이해
• 회원 탈퇴 시 세션 만료 처리 및 메인 페이지로 리다이렉트 구현
• 파일(프로필 이미지) 삭제 로직 구현 및 유틸리티 활용법

핵심 개념 및 정의

• dl, dt, dd 태그: 정의 목록(Definition List)을 만드는 데 사용되는 HTML 태그입니다. dl은 목록 전체, dt는 용어(제목), dd는 용어에 대한 설명(내용)을 나타냅니다. 회원 정보와 같이 이름-값 쌍으로 정보를 표시할 때 유용합니다.
• GET vs POST 요청: 웹 요청 방식 중 GET은 주로 데이터를 조회하거나 페이지를 이동할 때 사용되며 URL에 파라미터가 노출됩니다. POST는 데이터를 생성, 수정, 삭제할 때 사용되며 요청 본문에 데이터를 포함시켜 보안성을 높입니다. 회원 탈퇴와 같이 데이터를 변경하는 작업에는 POST 방식이 권장됩니다.
• 리다이렉트 vs 포워딩: 두 가지 모두 다른 페이지로 이동하는 방법입니다. 포워딩은 서버 내부에서 다른 페이지로 요청을 전달하는 방식으로, 클라이언트에게는 원래 요청한 URL이 그대로 보입니다. 리다이렉트는 클라이언트에게 새로운 URL로 다시 요청하라고 응답하는 방식으로, 클라이언트의 URL이 변경됩니다. 일반적으로 클라이언트의 URL을 변경해야 하는 경우(예: 회원 탈퇴 후 메인 페이지로 이동) 리다이렉트를 사용합니다.
• 소프트 삭제 (Soft Delete): 데이터베이스에서 데이터를 물리적으로 삭제하는 대신, 삭제 상태를 나타내는 컬럼(예: deleted_at 타임스탬프)을 추가하여 논리적으로 삭제하는 방식입니다. 데이터 복구 가능성을 높이고 중요한 데이터를 안전하게 관리하는 데 사용될 수 있습니다.

강의 흐름

1. 마이페이지 UI 구현: 기존 회원가입 페이지를 복사하여 마이페이지를 생성하고, 프로필 이미지 표시 로직 및 회원 정보 표시를 위한 HTML 구조를 작성합니다.
2. CSS 스타일링: 마이페이지의 레이아웃과 디자인을 개선하기 위해 CSS를 적용합니다.
3. 회원 탈퇴 기능 구현: 회원 탈퇴 폼을 생성하고, POST 요청을 사용하여 서버로 탈퇴 요청을 보냅니다. 이 과정에서 보안상의 이유로 GET 대신 POST를 사용하는 이유를 설명합니다.
4. 서버 측 로직: 컨트롤러에서 회원 탈퇴 요청을 받아 서비스 계층을 통해 데이터베이스에서 회원을 삭제하고, 세션을 만료시킨 후 메인 페이지로 리다이렉트합니다.
5. 파일 삭제 유틸리티: 프로필 이미지와 같은 관련 파일을 서버에서 안전하게 삭제하는 방법을 배우고, 이를 위한 유틸리티 함수를 구현합니다.

이 강의를 통해 사용자 정보 관리 및 계정 관리 기능을 완성하는 데 필요한 실질적인 기술을 습득할 수 있습니다.