🐭 사전 프로젝트 뭐 했어??
WATCHING
왓챠 사이트를 참고해서 만든 영화 시청 사이트를 제작했다 회원가입을 하고 개인 회원마다 원하는 영화를 즐겨찾기하고 즐겨찾기 한 영화를 따로 모아서 시청할 수 있는 사이트를 만들었다 그 외 프로필 변경 비밀번호 변경 즐겨찾기 추가, 삭제 등 데이터베이스 연결을 하고 풀스택으로 기능 구현을 우선으로 제작되었다
🐭 너는 프로젝트에서 뭐 했어??
JavaScript (jQuery)
백엔드에서 구축한 MongoDB 데이터와 Request , HTML 기본 틀에 애니메이션 추가 Open API fetch를 담당했다 이번 포스팅에서는 각 페이지마다 어떤 식으로 코드를 작성해 기능을 구현하고 사용자 편의에 어떤 부분을 신경 썼는지 설명하겠습니다
1. 회원가입
- ID foucs
사용자가 이 페이지에 들어오는 이유는 당연히 회원가입을 하기 위해 들어왔을 것이다 이때 사용자들은 굳이 마우스를 아이디 input에 클릭해 다시 키보드로 입력하는 딜레이 시간을 줄이기 위해 document가 준비 완료되면 id 태그에 focus 되도록 했습니다
- 가입 유효성 검사
/^[a-zA-z0-9]{4,12}$/ 정규식 표현을 사용해 해당 input 값에 값이 들어오고 이후에 POST 할 때 사전에 유효성 검사를 해 조건에 맞지 않지만 회원가입을 막고 다시 입력하도록 했습니다
- 회원가입 후 DB에 User 저장
앞에 유효성 검사를 통과한 id와 password 값을 백엔드에서 구축한 id_give , password_give에 해당 값을 넣어주는 작업입니다 해당 유저가 있으면 reload후 다시 회원가입 해당 유저가 없다면 DB에 저장하고 login 페이지로 이동합니다
2. 로그인
- 간단한 로그인 유효성 검사
앞에 회원가입에서 유효성 검사를 하고 DB에 저장했기 때문에 로그인 페이지에서는 아이디 비밀번호 값에 값이 들어있는지만 검사했습니다 둘 중 하나라도 값을 입력하지 않았다면 POST를 막습니다
- 유저별 세션
로그인을 하고 main페이지로 넘어갈때 유저 세션을 넘겨줘 유저별로 데이터를 달리 해야 합니다 따라 세션을 넘기기 전 DB에서 넘겨주는 유저와 입력값이 동일하다면 해당 유저의 main 페이지가 나옵니다
3. 메인페이지
- 해당 유저의 프로필
처음 회원 가입할 때는 백엔드에서 저장한 기본 프로필이 나오도록 하고 이후에 프로필 변경을 하면 변경한 이미지 값을 수정해주는 기능을 만들었습니다
- 영화 즐겨찾기
TMDB Open API로 가지고 온 영화 리스트에서 사용자가 시청하고 싶은 영화를 즐겨찾기하는 과정까지 main 페이지에서 구현해야 했다 각 리스트에 index를 부여했기 때문에 인자로 num을 가져와 ⭐을 클릭했을 때 해당 영화의 index 값을 확인하고 백엔드에서 필요한 값을 전달해줍니다
- 즐겨찾기 유무
이후 영화 데이터를 가져오는 거와 앞으로 해당 영화 목록에⭐을 클릭하여 즐겨찾기 기능을 구현해야해 즐겨찾기 유무를 가지고 있는 백엔드까지 GET 했다 여기서 즐겨찾기한 영화의 ID 값을 배열에 담고 findIndex를 사용해 해당 위치에 동일한 ID가 존재한다면 즐겨찾기한 상태로 스타일을 변경해주었다
4. 즐겨찾기
- 즐겨찾기한 데이터 가져오기
이전에 즐겨찾기한 값을 백엔드에 전달을 해준 적이 있다 그리고 현 페이지에 DB에 저장한 값을 다시 GET하여 즐겨찾기 데이터를 보여줬습니다
- 즐겨찾기한 데이터 삭제하기
이전에 즐겨찾기를 하는 oder_flag_give: "add"가 있었다면 데이터를 삭제할 때는 동일하게 코드를 작성하는 대신 oder_flag_give: "delete"로 변경하여 해당 값이 존재한다면 그 데이터를 삭제하도록 했습니다
🐭 너무 길어
다음 포스팅에서
다음은 프로필 변경과, 비밀번호 변경 기능 구현 코드를 설명하겠습니다
