로그인 만들기

로그인 만들기

이 강의에서는 웹 애플리케이션에서 사용자 로그인 기능을 구현하는 방법을 다룹니다. 회원가입 기능 구현에 이어, 사용자가 입력한 아이디와 비밀번호를 검증하고 서버로 전송하여 로그인을 처리하는 과정을 학습합니다.

학습 목표

• 비밀번호 일치 여부 확인 및 관련 UI 처리 방법을 이해합니다.
• 폼 제출 시 클라이언트 측 유효성 검사를 구현합니다.
• 로그인 폼을 생성하고 서버로 데이터를 전송하는 방법을 배웁니다.
• 서버 측에서 로그인 요청을 처리하고 사용자 인증을 수행하는 기본적인 흐름을 파악합니다.

핵심 개념

• 이벤트 리스너 (Event Listener): 사용자의 입력이나 동작에 반응하여 특정 함수를 실행시키는 기능입니다. input, keyup, submit 등의 이벤트를 활용합니다.
• 클라이언트 측 유효성 검사 (Client-side Validation): 사용자가 입력한 데이터가 서버로 전송되기 전에 브라우저에서 유효성을 검사하는 것으로, 사용자 경험을 향상시키고 서버 부하를 줄입니다.
• 폼 제출 (Form Submission): 사용자가 입력한 데이터를 서버로 전송하는 과정입니다. submit 이벤트를 사용하여 폼 제출을 제어하고 데이터를 전송할 수 있습니다.
• 서버 측 검증 (Server-side Validation): 클라이언트 측 검증만으로는 보안상 부족하므로, 서버에서도 반드시 데이터를 재검증하는 과정입니다. 이는 보안을 강화하고 데이터 무결성을 보장합니다.
• 비밀번호 암호화 및 검증: 비밀번호는 평문으로 저장하지 않고 암호화하여 저장하며, 로그인 시에는 암호화된 비밀번호를 검증하는 과정을 거칩니다. BCrypt와 같은 라이브러리를 활용합니다.

강의 흐름

1. 회원가입 폼에서 비밀번호 확인 기능 구현
2. 입력 값 실시간 검증 및 UI 피드백 제공
3. 폼 제출 이벤트 처리 및 클라이언트 측 유효성 검사 로직 추가
4. 로그인 폼 UI 생성 및 서버 전송 설정
5. 서버 측 컨트롤러에서 로그인 요청 처리 (GET/POST)
6. 비밀번호 검증 및 데이터베이스 조회 로직 구현