🌙 MOVIE
지난 프로젝트에서는 싱글 페이지 애플리케이션의 구조 파악이 미약했다.
이에 영화 검색, 검색 결과 조회, 영화 상세정보 조회 등 모든 기능을 하나의 페이지에 때려넣어야 했다.
하지만 라우터를 학습하면서 기존에 모달로 구현했던 영화 상세정보 조회 기능을 분리된 url에서 조회하도록 바꾸어보기로 했다.
더불어 글래스모피즘을 활용한 UI 수정도 곁들였다✨
Before
After
/contents/${id}를 통해 상세정보에 접근할 수 있도록 RESTful하게 만들어보았다.
Router
메인 페이지(검색창)과 상세정보 페이지를 분리하고 자유롭게 드나들기 위해 각각의 컴포넌트를 분리했다.
기존에는 최상위 root에 header, content, footer 등 여러 컴포넌트가 존재했다.
하지만 컴포넌트를 분리하면서 해당 컴포넌트들을 하위 컴포넌트에 추가했으며, 최상위에는 router-view 태그만 선언해 접근하게 만들었다.