Vue3와 OMDb API를 사용해서 구현한 영화 검색 사이트입니다.
배포는 Netlify로 배포하였습니다.
배포주소 : portfolio
- Bootstrap+Scss
- Vue3
- Vuex
- Vue-Router
- Webpack
- Axios
- ESLint
- Bootstrap 프레임워크를 이용하여 main.scss에서 커스터마이징해서 사용함으로써 보다 손쉽게 퍼블리싱을 할 수 있었고 손쉽게 반응형웹을 구현했습니다.
- 컴포넌트 간의 데이터 전달을 좀 더 효율적으로 관리 하기 위해 Vuex를 사용하였고 vuex로 중앙 집중식 데이터를 처리하고 관리 하였습니다.
- Single Page Application(SPA)를 위한 Vue-Router를 구성해 Hash 기반의 페이지 단위로 개발을 하였습니다.
- OMDb API를 활용해 실제 영화정보를 검색하고 출력된 결과를 axios로 OMDb API를 호출해서 데이터를 가져왔습니다.
- ESLint를 사용해서 오류를 자동으로 분석 해주는 기능을 활용 했고 자동줄바꿈 기능을 활용해서 가독성 좋은 코드를 만들었습니다.
header영역과footer영역은 페이지가 바뀌어도 계속 출력이 됩니다.header영역을 통해서 원하는 페이지로 이동 할 수 있습니다.- 가로너비를 줄이면 해당 뷰포트에 맞게 검색창의 너비가 변합니다.
- 사이트 접속시 Search페이지에서 시작합니다.
- 검색페이지에는 헤드라인영역,검색탭,검색결과영역이 노출됩니다.
- 검색 하기전 드롭다운으로 된 검색필터를 활용 해서 연도별,출력할 영화 갯수,에피소드명 or 시리즈명 or 영화이름 등을 조정해서 검색을 하면 영화포스터와,영화이름,개봉일이 출력됩니다.
- 검색 탭은 Apply버튼을 클릭하거나 'enter'키를 누르면 영화정보가 검색필터에 따라서 하단에 출력됩니다.
- 검색을 하지 않은 검색결과 영역은 "영화 제목 및 시리즈를 영어로 검색하세요!"가 노출됩니다.
header영역의 로고 또는footer영역의 로고를 클릭시 Search페이지로 이동합니다.
header영역에 Movie 버튼을 클릭을 하면 "검색 된 영화정보가 없습니다! 영화를 검색하세요!"가 노출됩니다.- Search페이지에서 원하는 영화를 검색 후 해당 영화포스터를 클릭하면 Movie페이지로 이동되며 영화상세정보가 출력됩니다.
- 영화상세정보가 출력되기전 스켈레톤UI와 로딩화면이 먼저 출력 되며 그 이후에 영화상세정보들이 출력됩니다.
header영역에 About 버튼이나 우측상단에 프로필을 클릭 시 About페이지로 이동 됩니다.- About페이지에는 개인프로필사진,이름,이메일주소 등 개인정보가 노출됩니다.