2차 프로젝트 회고
프로젝트 소개 및 역할
우리 팀은 메가박스라는 영화 티켓팅 사이트를 클론 코딩하기로 정했다. 전체적인 기능은 백엔드쪽은 데이터 모델링 및 API 및 서버 구현하고 프론트 엔드 쪽은 메인 페이지, 로그인, 회원가입, 전체 영화 리스트, 영화 상세 페이지(댓글 기능 포함), 예매페이지, 상영시간표 페이지를 구현하였다.
프로젝트 기간은 9월 19일부터 9월 30일까지 2주이고 프론트 4명 백엔드 2명해서 6명이 한 팀이 되어 진행했고 1차 프로젝트와 동일하게 프론트엔드 쪽으로 참여를 하였다. 백엔드와의 통신은 API documentation을 보면서 VsCode에서 제공하는 LiveServer를 통하여 진행했다.
사용 기술
- Front-end : React.js(개발환경은 CRU), sass,styled-componets, fetch,axios,,ContextAPI,webpack(컴파일러는 babel)
- Common : RESTful API, PostMan, LiveServer
- Community Tools : Slack, Zoom, Notion, Zepp, Trello
- Version Control Tool : Git(flow는 github flow방식을 따름)
깃허브 링크
Front-end : https://github.com/cratuss/justcode-6-2nd-team2-front
Back-end : https://github.com/cratuss/justcode-6-2nd-team2-back
구현 기능
크게 예매페이지와 상영시간표 페이지의 UI와 기능 구현을 맡았다.
1. 먼저 예매페이지 첫화면에서는 먼저 레이아웃을 잡는데 꽤 고생을 했고 가장 키포인트였다. 중점을 둔 부분은 슬라이드였다. 날짜를 화살표버튼을 누르면 넘어가게 하는 형태로 구성했으며, react-swiper라는 라이브러리를 통해 구현하였고, date-picker로 구현한 달력에서도 날짜를 구현하면 슬라이드에서 해당날짜로 이동하게 구현하였다. 이외에는 3개 이상 선택을 할 경우 분기점을 두고, 모달로 막아두었고 시간표에도 슬라이드를 구성하여 해당 시간대를 클릭하면, 해당 시간대 이후에 상영시간만 나오도록 프론트에서 자체적으로 filter를 구성하였다.
두번째 화면에서는 좌석선택시 효과에 대해 중점을 두고 구현하였다. onMouseOver, onMouseLeave로 hover효과를 주었고 좌석 지정상태를 useState로 관리하여 오른쪽 결과창에 반영되도록 하였다.
마지막 세번째 화면에서는 실제로 결제 하는 부분으로서 iamport라는 외부 결제 라이브러리를 연동하여 카카오페이로 결제가 가능하도록 구현했다.
그리고 모든 컴포넌트에서 예매정보에 대해서 상태를 공유할 수 있도록 context로 관리하였다.
2. 위에 예매페이지와 겹치는 UI가 많았기에 비교적 수훨하였고 제일 중점을 두었던 부분은 백엔드에서 시간순서로 준 상영표를 관별로, 지역별로 다시 sort하여 구현하는 것이었다.
먼저 위에 네비게이션 박스는 받는 props로 렌더링되는 컴포넌트를 구분하였다. 또한 슬라이드는 동일하게 react-swiper를 사용하고, 실제 시간표를 hover하였을때, 영상시간과 현재 남은 좌석을 표시하고 클릭하면 해당 영화시간에 좌석페이지로 이동할 수 있도록 구현하였다.
다음으로 관별, 지역별로 sort하여 표시해주는 것은 백엔드에서 받은 데이터를 filter와 foreach함수를 통하여 다시 순서를 맞추고 map을 돌렸다.
아쉬웠던 점, 배운 점
아무래도 두번째 프로젝트였다 보니, 첫번재 프로젝트와는 달리 좀더 많은 react의 라이브러리나 api를 사용해보고 싶었으나 시간에 쫓겨서 사용하지 못했던게 아쉬웠다. 예를 들어 redux나 css 라이브러리인 boostrap을 들 수 있으며 다음 프로젝트에서는 꼭 쓸 수 있도록 해야겠다.
이외에 배운 점이라 한다면, 초기 세팅이 중요하다는 것을 많이 느꼈다. 첫 프로젝트는 초기 셋팅이나 컨벤션에 대해서 중구난방에 정확히 정해진게 많지 않았고, 그때 피드백으로 이번에는 처음부터 문법 규칙인 eslint, prettier파일을 설정하고 네이밍 규칙, 사용할 라이브러리를 정해놓고 시작하였다. 그러다보니 중간에 merge과정에서 꼬이거나 conflict가 나는 경우가 거의 없었다.
백엔드와의 통신
첫프로젝트의 피드백으로 이번에는 db 모델링부터 함께 참여하면서, 통신에 있어서 의견이 부딪치는 부분을 최소화 시킬려고 많이 노력했다. 일단 이전 프로젝트 보다는 통신이 수월했고 api documentation도 내가 생각했던 방향으로, 받는 데이터가 구성되었다. 하지만 문제점은 내가 생각했던 방향이 틀렸다는 것이다. 초기 모델링때 내가 생각했던 데이터 통신과 구현하면서 바뀐 생각의 데이터 통신은 차이가 있었다. 구현하면서 추가적으로 필요한 데이터가 생겼고, sort해서 보내주는 부분에 있어서도 차이가 있었다.\결국 느낀 점은 다음 프로젝트부터는 스스로 db 모델링이 아닌 프론트쪽으로 어떤 흐름으로 구현될 것인지에 대해서 구체적으로 모델링을 해야되지 않나는 생각이 들었다.
공유하고 싶은 코드
<Context.Provider value={{ scheduleId, setScheduleId }}>
<ThemeProvider theme={theme}>
<GlobalStyle />
<BrowserRouter>
<Header />
<Routes>
<Route path='/' element={<Main />} />
<Route path='/Booking/*' element={<Booking />} />
<Route path='/TimeTable/*' element={<TimeTable />} />
{/* 영화페이지 */}
<Route path='/movie' element={<Movie />}>
<Route index element={<MovieContent />} />
<Route path='now' element={<MovieContent />} />
<Route path='upcoming' element={<MovieContent />} />
<Route path='domestic' element={<MovieContent />} />
<Route path='abroad' element={<MovieContent />} />
</Route>
{/* 영화 상세페이지 */}
{/* <Route path='/moviedetail/1' end element={<MovieDetail />}> */}
<Route path='/moviedetail/:id' end element={<MovieDetail />}>
{/* <Route index element={<MovieInfo />} /> */}
<Route path='movieinfo' index element={<MovieInfo />} />
<Route path='comment' element={<MovieComment />} />
<Route path='moviepost' element={<MoviePost />} />
<Route path='trailers' element={<MovieTrailers />} />
</Route>
{/* <Route path='/theater' element={<ListTheater />} /> */}
<Route path='/user-find' element={<UserFind />} />
<Route path='/pass-find' element={<PassFind />} />
<Route path='/signup' element={<SignUp />}>
<Route path='consent' element={<Consent />} />
<Route path='info' element={<Info />} />
<Route path='complete' element={<Complete />} />
</Route>
<Route path='/cinema' element={<Cinema />} />
</Routes>
<Footer />
</BrowserRouter>
</ThemeProvider>
</Context.Provider>Context를 통해 팀원 모두가 공통 데이터와 Theme관련 색깔, 글씨 색깔, 크기, 등... css관련 룰을 정했던 부분이 이전 프로젝트와 가장 달라진 부분이였기에 공유하게 되었다.
마무리
개발자로서 두번째 프로젝트 였기에 좀 주니어 티를 벗어나서, 나름 컨벤션도 구체적으로 정하고, 다양한 라이브러리도 연동하여 사용했지만, 다시 돌아보면 아직도 부족한 부분 투성이였다.
그리고 무엇보다 느낀점은 기능적인 부분보다 UI나 특히 레이아웃 구성에 있어서 배운점이 많았다. 첫프로젝트는 비교적 레이아웃이 단순했기에 그닥 크게 생각안했지만, 이번에는 레이아웃이 거의 코딩시간의 절반을 차지할정도로 복잡했고 시간에 쫓겼다.
그렇기에 레이아웃에 대한 다양한 형태의 화면의 태그 구성에 대해서 좀 더 공부할 필요가 있다고 느끼면서, 어찌보면 프론트의 꽃은 다양한 반응형 웹, 화려함이라는 이면속에 기본을 구성하는 레이아웃이 아닐까 싶었다.
'프로젝트 회고' 카테고리의 다른 글
| 저스트 코드 1차 프로젝트 회고록 (8/29 ~ 9/8) (0) | 2022.09.15 |
|---|