오늘 스터디에서는 회원 가입 페이지를 만들고 user-service.js 파일 내의 UserService 클래스에 signUp 함수를 만들어 로컬 스토리지에 회원 정보를 저장하는 것까지 진행했습니다.

회원 가입 후 로그인 페이지로 이동시키기 위해 비어있는 login.html 파일을 만들었는데, 아래와 같이 동작하도록 login.html 파일과 user-service.js 파일을 수정해 봅시다.

1. 로그인 페이지와 로그인 기능 만들기

  1. 아이디와 비밀번호를 입력할 수 있는 폼(Form)과 로그인 버튼 작성
    • sign-up.html 파일을 참고해서 만들어봅시다.
  2. 로그인 버튼을 클릭했을 때 동작하는 이벤트 핸들러를 작성합니다.
  3. UserService 클래스에 login(username, password) 함수를 추가합니다.
  4. login 함수에서 signUp 때와 동일한 key로 로컬 스토리지에서 사용자가 있는지 조회(load)합니다.
    1. 사용자가 없다면 예외를 발생합니다. (MDN throw 문서)
      • userService.login 함수를 호출한 login.html 페이지에서 이 예외를 try-catch 구문으로 처리할 수 있도록 합니다.
      • 화면에 메시지로 에러 메시지를 보여주거나, alert() 함수를 이용하거나, 자유롭게 편한 방법으로 표현해 주세요.
    2. 로그인 username input에 입력한 사용자가 있다면 비밀번호가 동일한지 비교합니다.
      • 비밀번호가 일치하지 않는다면 4.1.과 마찬가지로 예외를 발생시킵니다.
      • 비밀번호가 일치한다면 게시글 목록 페이지(post-list.html)로 이동합니다.

2. 더 해보고 싶다면

  1. json-local-storage.js는 LocalStorage를 사용하는 클래스 JsonLocalStorage가 작성되어 있습니다.
    SessionStorage를 사용하는 json-session-storage.js 파일을 작성해 봅시다.
  2. “1. 로그인 페이지와 로그인 기능 만들기”의 4.2.에서 로그인 성공 시 SessionStorage에 로그인 정보(User)를 저장하고, UserService의 getLoggedInUser 함수를 세션에 저장된 로그인 정보를 가져오도록 수정해 봅시다.