Skip to content

yeoniii20/movit

Repository files navigation

🎥Movit🖤

Movie + love it 두 단어가 결합되어 만들어진 Movit은 영화에 대한 애정의 의미를 담고 있습니다.

Movie: 단순한 영화가 아닌, 사용자가 사랑하고 즐기는 스토리와 감동을 의미합니다. Movit은 사람들이 좋아하는 영화, 새로운 영화, 다양한 영화 정보를 제공합니다.

Love it: 영화 감상의 매 순간을 사랑하고 즐기는 것을 의미합니다. Movit은 사용자들이 영화를 더욱 즐겁게 감상할 수 있도록 돕습니다.

Movit을 통해 영화에 대한 경험을 더욱 특별하고 즐겁게 경험했으면 좋겠습니다. 💟




🛠️기술 스택🛠️

Framework Vue.js
local DB IndexedDB (idb library)
Style Scoped CSS
API TMDB API
HTTP Client Axios


🔰Vue.js 프레임워크 이해 및 활용

  • Vue.js를 사용하여 SPA(Single Page Application)를 구축하고, 컴포넌트 기반 아키텍처의 장점을 경험합니다.
  • Vue Router를 활용하여 다중 페이지 내비게이션을 구현합니다.


🤖로컬 데이터베이스 (Indexed DB) 사용

⇒ IndexedDB는 클라이언트 측에서 대용량 구조화된 데이터를 저장할 수 있는 저수준 API입니다. db 라이브러리를 사용하여 IndexedDB의 비동기 API를 간소화 했습니다.

주요 기능

  • IndexedDB 데이터베이스 초기화 및 업그레이드
  • profile 데이터 저장 및 조회 기능 구현
  • 데이터베이스 스키마 설계 (스토어, 키, 인덱스 등)


🍿영화 정보 API 사용

⇒ TMDB API를 사용하여 영화 정보를 받아오고 Vue 컴포넌트에서 이를 표시합니다. Axios를 사용하여 HTTP 요청을 보내고 데이터를 받아옵니다.

주요기능

  • Axios를 사용한 TMDB API 호출
  • 영화 정보 파싱 및 저장
  • API 호출 에러 처리


🔧CI/CD 파이프라인 설정 (GitHub Actions 사용)

⇒ GitHub Actions를 사용하여 지속적인 통합 및 배포(CI/CD) 파이프라인을 설정했습니다. 이는 코드 변경 사항을 자동으로 테스트하고 배포하여, 개발 프로세스를 자동화하고 안정성을 높입니다.

주요기능

  • 코드 푸시 시 자동으로 실행
  • 빌드 및 배포 자동화



📌 프로젝트 목표

이 프로젝트는 Vue.js와 로컬 데이터베이스, Open API에 대한 이해와 사용 경험을 목표로 진행되었습니다. 또한, CI/CD 파이프라인을 통해 자동화된 배포 환경을 구축하여, 개발의 효율성과 안정성을 높이는 경험을 했습니다.



About

영화 후기를 공유하자🎥🍿

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published