🖥 PROJECT 소개
Vue를 이용한 영화 정보 검색용 웹 사이트
🗓️ 작업기간 : 2022. 01 ~ 02 (1개월)
👨💻 투입인원 : 1명 (개인 프로젝트)
📒 주요업무
- Vue.js를 통해 체계적인 방식으로 페이지 제작
- Bootstrap 통해 반응형 웹 페이지 제작
- 외부 API(IMDb API, OMDb API)를 통한 데이터베이스 이용
- 영화 검색 API(omdb api)를 연동하고 Vue.js 프레임워크를 활용하여 검색 페이지, 카드형 영화 목록 페이지, 영화별 상세 페이지 등을 구현
- Netlify를 이용하여 배포 진행
- Jest와 Cypress를 활용해 테스트를 적용
- 사이트를 Nuxt.js로 마이그레이션 후 Heroku로 배포
🌱 스킬 및 사용 툴
HTML Vue.js JavaScript CSS Scss Bootstrap Webpack Babel Cypress Jest Express Netlify Heroku Git🖌️ UI
Search(메인) 페이지
- Bootstrap의 색상을 이용해 디자인
- 상단 네비게이션에서 페이지 이동 가능
Search(검색 화면) 페이지
- 검색란에서 원하는 영화 영어 제목 입력 시 영화 정보를 불러 옴 (OMDb API를 이용한 데이터베이스 사용)
- 필터 기능을 통해 한 번에 불러 올 영화 개수, 출시년도 선택 가능
- 검색 시간이 길어지면 로딩 애니메이션이 돌아가도록 함
- 원하는 영화 포스터 클릭 시 Movie 페이지로 이동
Movie 페이지
- OMDb API에서 불러 온 영화의 상세 정보를 띄움
- 로딩 시간이 길어질 경우 Skeleton UI가 표시되도록 함
About 페이지
- 제작자의 정보 확인 가능
