[Project]영화를 보CINEMA(팀 프로젝트) 후기

📄프로젝트 소개

👉 영화를 보CINEMA는 영화 트레일러 오픈 API를 활용한 영화 목록 및 조회 사이트입니다.

- 현재상영작, 상영예정작, 인기영화 순위들을 볼 수 있으며

- 아이템 카드들을 클릭 시 디테일 페이지로 넘어가 영화에 대한 자세한 내용들과 미리보기 영상을 감상할 수 있습니다.

- 또한 검색 기능이 가능해서, 영화 제목을 검색 시 원하는 모든 영화 리스트들을 찾아볼 수 있습니다.

 

 

🐈‍⬛깃허브

https://github.com/seonyeong719/movie_toyProject

GitHub - seonyeong719/movie_toyProject

👉🏻 프로젝트 오거나이제이션에서 fork 해온 레포지토리 입니다. 

 

 

🗓️프로젝트 기간

2023년 3월 21일 ~ 3월 27일 

 

🤝🏻 협업

• Prettier , Eslint, Husky 로 코드 컨벤션 적용.
• Notion으로 칸반보드, 백로그를 작성하며 프로젝트 진행상황을 문서화로 진행.
• 대면, 온라인 (zoom,디스코드) 

 

👨‍👩‍👧‍👦 팀원 구성

• 프론트엔드 2명(본인 포함)

---

📧 배포 주소

http://movie-toy-project.vercel.app/

영화를 보CINEMA

---

🖥️ 프로젝트 화면 

---

 

🖐🏻 담당한 기능

• 전체 디자인 UI.UX 담당
• 페이지 Routing
• 상세페이지(Detail Page)
• 인기영화 Page
• 로딩 중 Skelton UI 구현

 

⚒️사용 기술 및 라이브러리

Stack

• React
• JavaScript
• HTML
• CSS

 

Library

• React-Query
• Styled-Components
• Axios
• React-Router
• mui

---

해당 라이브러리를 사용한 이유?

React-Query (리액트 쿼리)

•  React 어플리케이션 내에서 데이터 패칭, 캐싱, 동기적, 그리고 서버의 상태의 업데이트를 좀 더 용이하게 사용할 수 있어서.
• 쿼리에서 캐싱을 해주기 때문에 유지보수에도 효율적이다. 

 

 

Mui (Skeleton)

• 페이지 로딩 시 아무 화면이 보이지 않으면 사용자들 입장에서는 서비스를 이용하기 상당히 불편하다.
• 스켈레톤 ui는 기존 Spinner에 비해 훨씬 사용자 친화적이며, 이를 사용하면 사용자 이탈도 방지가 되기에 사용하였다.   

 

 

Styled-Components

• CSS-in-JS방식으로 스타일링 할수 있는 라이브러리이다.
• props를 활용한 조건부 스타일링이 가능해 선호하는 스타일링 방식이기도 하여 사용하였다.

---

 

✍🏻 후기 및 회고

이번 프로젝트는 첫 오픈 api 프로젝트 이며, 처음으로 해보는 리액트 프로젝트였다. 

또한 react-query(Tanstack React-Query) 를 사용하여 데이터를 캐싱하고 구현 해보는 좋은 기회가 되었다.

 

 

아쉬운점 및 회고

• 반응형 디자인

 - 첫 프로젝트이기도 하고 많이 미숙해서 처음부터 반응형을 생각하지 못하고 만들었었다. 

grid를 사용해서 처음부터 확실하게 틀을 잡고 구현을 했으면 괜찮았을텐데 아쉬웠다. 

그 다음 프로젝트에선 grid를 함께 사용해서 해볼 예정이다.