프로젝트-Watcha Classic

SNS와 평점 데이터를 활용한 클래식 영화 백과사전 사이트

프론트와 백의 언어는 다르다. 프로젝트를 바라보는 시각도 다르다. 그 다름의 차이를 좁혀주는 협업 툴 3가지를 소개한다.

📌 매일 아침 10시 팀원들끼리 모여서 30분 동안 프로젝트 진행 상황을 공유한다.

2주라는 짧은 시간동안 하나의 서비스를 완성해야 하는 상황에서 가장 빨리 해야하는 것은 우선순위를 정하여 필수로 구현할 기능과 추가로 구현할 기능을 나누는 것이다.

프론트 개발자가 3명이라 각각 하나의 페이지를 담당하기로 했다. 나는 메인 페이지를 구현한다.

Main Page의 component 정하기 Main Page에서 반복되는 UI를 가지는 요소들을 모두 component로 만들면 재사용의 이점과 함께 유지보수도 편리하다. 실제 Watch Pedia 사이트에는 여러개의 테마를 가지고 목록을 구성하고 있지만 이번 프로

실제 통신시 백엔드에서 넘어오는 API를 모방하여 미리 프런트에서 작성하는 데이터를 MockData라고 한다.

추후 서버에서 데이터를 받아오면 해당 데이터를 Main에서 받고 자식인 MainBox와 Film에게 넘겨줘야 한다. 이때 useState와 구조분해할당, map함수를 사용하게 된다.

이미지 슬라이드를 구현하면서 만났던 에러들, 새롭게 배운 개념을 정리해보자!

영화마다 상세페이지 주소 또한 다르다. 만약 영화가 10000개가 있다면, Router.js에 10000줄을 작성해야 할까

Query Parameter는 리.터.럴.리 질의문을 통해 데이터를 받아오는 형식이다.

생각보다 MainPage가 빨리 구현되어 다른 팀원들이 각자의 페이지를 진행하고 있을 때 간단한 Footer를 구현하기로 했다.

실제 Watcha Pedia 페이지에서 로그인을 하면 상단의 프로필을 클릭하여 위의 페이지로 이동할 수 있다.

보고싶어요 페이지 구현 완료

1차 프로젝트 Watcha Classic 회고록