[자바스크립트 프로젝트] 영화 추천 웹 사이트 (NodeConnect)

안녕하세요~ 자바스립트를 마치면서 자바스크립트와 HTML,CSS를 활용한 영화 추천 웹 사이트 프로젝트를 제작하였습니다. 

📑목차
1. 프로젝트 소개
1-1. 프로젝트 구조
1-2. 프로젝트 코드
1-2. 구동 화면

서론 

프로젝트를 개발하기 전 로그인페이지, 회원가입 페이지, 메인페이지, 상세 페이지, 문의 페이지, 마이페이지로 나눠서 개발하게 되었습니다. 저는 로그인, 회원가입, 마이페이지 담당을 맡게 되었습니다. 회원가입을 할 때 저장되는 데이터들은 로컬스토리지에 저장을 하였고, 로그인 할때는 로컬 스토리지에 저장된 데이터들을 불러와서 쿠키의 로그인 정보 즉, 사용자이름, 아이디만 저장을 하는 방식으로 구조화 하였습니다.  본론으로 넘어가시죠

본론

1. 프로젝트 소개

• 저희 NodeConncet 팀은  사용자에게 영화를 추천하는 서비스 개발 목표로 개발하게 되었습니다.
• 사용자는 회원가입을 통해 로그인을 할 수 있고, 로그인을 하게 되면 메인페이지로 이동하여 메인페이지 헤더바에 로그인한 사용자의 닉네임이 나타나게 됩니다. 
• 메인 페이지에서는 메뉴 버튼을 클릭하면 마이페이지, 문의, 컨텐츠 추가, 로그아웃 기능이 있습니다.
• 메인페이지에서 영화 포스터 이미지를 클릭하면 상세 페이지로 이동할 수 있습니다.
• 마이페이지에서는 아이디와 닉네임을 수정할 수 있습니다. 
• 로그아웃을 클릭하면 쿠키의 저장된 사용자 정보가 제거됩니다.

 

1-1. 프로젝트 구조 

 

프로젝트 구조를  각각 폴더를 나눠서 개발을 진행하였습니다. 저는 여기서 login, signup, mypage (로그인, 회원가입, 마이페이지) 등을 작업하였습니다. 

 

1-2. 프로젝트 코드

https://github.com/susuholee/Node-Connect-Project-2/tree/susu

GitHub - susuholee/Node-Connect-Project-2

 

1-3. 구동 화면

 

로그인 페이지

회원가입 페이지

 

메인 페이지

쿠키에 저장된 사용자 이름을 가져와서 메인 페이지에 나타납니다. 

로컬 스토리지에 저장된 데이터

 

메뉴 버튼을 클릭할 시 나타나는 기능들

 

 

 

마이페이지 (회원 정보 수정)

 

문의 페이지

컨텐츠 추가

메인페이지에 컨텐츠 추가할 수 있는 페이지

 

 

메인페이지에서 영화 포스터 이미지를 클릭하면 상세페이지로 이동

결론

이렇게 자바스크립트에서 로컬 스토리지와 쿠키에 대한 개념으로 웹 페이지를 구현해보았습니다. 어려웠던 점은 쿠키의 저장된 값을 가져와서 메인페이지에 나타나게 했을 때 어려움을 겪었습니다. 자바스크립트를 통해 다양한 기능을 구현할 수 있고 앞으로 있을 Node.js 에서도 자바스크립트를 기반이 되어야 한다는 점을 알 수 있었습니다.