3월에 시작한 패스트 캠퍼스 프론트 엔드 과정이 9월부로 끝이 났다. 기간동안 해커톤과 1주일 기간의 프로젝트를 진행했지만, 뭔가 포트폴리오로 남기기엔 너무 작은 프로젝트여서 스킵하고 1달 짜리 프로젝트의 후기를 남기려 한다.
프로젝트의 시작 / 주제 정하기
우리 조는 3명으로 구성되어서 프로젝트에 들어갔다. 너무나 부족한 실력임에도 내가 조장의 역할을 맡게 되어 팀원들과 프로젝트의 주제를 찾아보았다. 처음에는 팀원들이 만화도 좋아하고 애니도 좋아해서 라프텔을 클론코딩하려고 했지만, 유효한 api를 찾지 못해서 포기했다.
그때 그중 눈에 띄던 프로젝트는 학원 앞 기수의 프로젝트였다. 메가박스 페이지의 클론 코딩인 오메가 박스라는 프로젝트 였다. 그렇다고 대놓고 따라가기는 싫어서 경쟁사인 롯데시네마 페이지를 클론 코딩하기로 했다. 영화 관련 데이터는 한국영화데이터베이스의 openAPI를 사용하기로 했다.
프로젝트 준비 / 팀 컨벤션
약소하게 우리는 module.scss를 사용하고, 자신이 만드는 기능이나 페이지의 이름을 따와서 사용할 수 있도록 컨벤션을 만들었다.
프로젝트 준비 / 구현기능 정하기
이제 주제도 정해졌겠다. 롯데시네마 페이지를 꼼꼼히 분석하면서 1달이라는 기간 동안 구현할 기능을 정하기로 했다. 말이 1달이지 페이지 기획 시간을 제외하면 3주라는 짧은 시간이 남아있었다. 하지만 어쩌겠는가 실무가서도 시간은 맞춰야하지 않겠는가. 안그럼 호오오온날 텐데..
분석결과 롯데시네마는 딱히 유려한 애니메이션도 없고 기능에 집중된 페이지라는 느낌을 받았다. 또한 로그인 부분에서는 페이지 이동이 일어나 요즘 사람들이 경험할 UX에 맞지 않는다는 느낌이었다. 보통 요즘은 회원가입이 아니고서야 모달창이 뜨는 게 대부분 혹은 로그인 section이 있으니까. 그래서 이 부분은 모달창으로 처리하자 팀원들과 이야기했다.
어느 정도 페이지 분석과 UX,UI관점에서의 분석을 마무리하고나서 팀원들과 기능 분담을 시작했다. 우리의 구현 기능은 크게 메인페이지,로그인,영화 예매,영화 상세정보 로 구분되었다. 이 중에서 나는 영화 예매 기능을 담당하게 되었다. 쉽지 않을 것 같았다. 그리고 큰 문제에 부딫혔다. 바로 백엔드가 없다는 것이다.
영화를 예매하려면 영화 정보, 영화관 정보, 시간정보가 필요하고 그 정보들을 모아둘 DB도 필요했다. 결국 팀 중에 유일하게 서버와 DB가 되는 내가 백엔드까지 하게 되었다. 그럴수 있지, 할 수 있는 사람이 하는 것이 맞다. 조금 할게 많아지는 것 뿐이지. 그렇게 나는 프로젝트의 back-end와 front-end를 동시에 맡게 되었다.
프로젝트 준비 / 서버와 DB
팀원들에게 DB는 mysql, 서버는 express로 제작한다고 알려주었다. 사실 할줄 아는 서버는 이게 다이긴 하다. 나중에 더 많은 걸 해봐야지. 서버를 만들기 전에 이 서버는 나 혼자 사용할 서버가 아니니 배포해서 팀원들도 사용할 수 있게 해줘야 했다. aws의 ec2를 사용할 수는 있지만, 아직은 미숙하다 생각되어서 heroku의 배포 서비스를 사용하기로 했다.
github를 이용하는 식이어서 사용도 편했고, heroku내부의 clearDB라는 서비스가 있어서 DB도 서버와 같이 돌릴 수 있었다. 그렇게 heroku를 사용하여 서버를 개설해 놓고 mysql에 DB를 구상하기 시작했다.
우리는 영화예매 기능 뿐 아니라, 영화 조회, 로그인 유저정보, 영화토론 게시판 정보도 필요했다. 내가 뭐 컴공과도 아니고 DB를 많이 배운건 아니지만 그래도 논리적으로 알맞는 RDBMS를 구축하려 노력했다. 누군가에게 조언을 얻고 하면 더 좋았겠지만 상황이 상황이니만큼 스스로 해야했다.
나는 먼저 영화를 예매할 때 우리가 어떻게 하는가 생각해봤다. 우리가 영화를 보려하면 먼저 지점 > 영화 > 상영시간 > 예매 정보 이런 정보의 흐름으로 예매를 한다. 그러니 DB도 그에 맞게 만들기로 했다.
location은 지역 데이터, theater는 지점 데이터의 각 영화 예매 정보, moviesInfo는 영화의 정보, bookTable은 사용자가 예매한 예매 정보가 들어가고, 로그인에 필요한 user테이블 이 테이블과 평점 테이블을 연결시켰다.
테이블을 구상했으니 이제 정보를 넣어야겠다. 하지만 대한민국.. 아니 서울만 해도 영화관이 수십개고 상영중인 영화도 수십개, 예매 정보는 수백개가 된다. 눈앞이 깜깜해진다. 하지만 어쩌겠는가. 대략 350개 가량의 예매정보를 수작업으로 넣기 시작했다. 뭔가 더 좋은 방법이 있었을 텐데 왜 그랬을까. 영화 상영날짜, 상영 지점, 시작 및 종료 시간 등 많은 데이터를 넣어주고 express와 mysql을 연동하여 RESTAPI로 팀원들이 사용할 수 있게 만들어줬다. 서버 설명문은 여기에 있다.
특히 로그인할 때 UX를 위해서 방문할 때마다 로그인 하지 않도록 JWT를 이용하여 토큰을 발급하고 토큰으로 자동 로그인하게 만들어줘야겠다.
프로젝트 준비 / 컴포넌트 분리
이제 백엔드는 마무리 되었으니 내 본업으로 돌아갈 시간이다. 나도 ! 이제! 페이지! 만든다!
정말 너무 너무 js가 그리웠다. 이쁘게 만들어줘야지.. 하지만 무작정 만들려고 하면 안된다. react를 이용한 프로젝트이기 때문에 컴포넌트의 구조와 데이터 흐름을 잘 파악하고 만들지 않으면 다시 처음부터 만들어야할 수 있기 때문이다. 우리는 기본적으로 페이지를 담을 page.jsx, 데이터 처리 기능이 들어있는 container.jsx 마지막으로 뷰가 들어있는 component.jsx이렇게 구분하여 진행하기로 합의 했다.
내가 맞을 예매 페이지 또한 그런식으로 분리하고 쪼개서 제작해야했다. 그래서 일단 예매 페이지를 구분하기 시작했다. 가장 왼쪽의 현재 진행을 보여주는 바, 영화관 선택 섹션, 영화선택, 마지막으로 날짜와 예매를 선택하는 섹션으로 구분하여 프로젝트를 진행했다.
그래서 컴포넌트의 구성이 복잡해지기 시작했다. 사실 이거보다 더 복잡한데 큰 그림은 이렇다
-bookPage
-bookContainer (예매 검색화면)
-bookcomponent
-theaterContainer - theaterComponent
-movieContainer - movieComponent
-bookTimemoviesContainer - bookTimeMoviesComponent
-selectSeatContainer(좌석 선택 화면)
-PayContainer (결제화면)
-CheckContainer(결제확인화면)대략적인 폴더구분이 나왔다. 이안에서 주소 변경이 일어나지 않고 해당 섹션을 끄고 키는 것만 하는 식으로 진행하려고 한다. 이제 진짜 마지막으로 상태관리를 어떻게 할 것인가 고민하면 페이지제작에 들어갈 수 있다. 저기 보이는 영화관, 영화 데이터들 모두 서버에서 받아와야하는데, 이걸 어떻게 처리하는가 고민을 하기 시작했다.
프로젝트 준비 / 상태관리
우리 팀은 학원에서 배운 redux를 이용하여 상태관리를 하기로 했다. 또한 비동기 처리를 위해서 redux-saga를 이용하여 redux의 http비동기 처리를 관리하기로 했다. 단일 스토어를 가지는 redux의 특징을 생각하여 store생성을 react의 index.js에서 만들어줌으로 생성타이밍을 예측할 수 있게 해줬다. 또한 http비동기 통신의 경우 해당 기능들을 service라는 폴더에 모아둠으로 구조화에 노력했다.
-redux
-modules
-상태관리 모듈들
-middleware
-모듈을 saga로 묶어주는 saga.js
-create.js
-service
-http비동기 통신이런식의 폴더 구조로 상태관리가 진행되었다.
나는 이제 여기서 내가 필요한 정보를 서버로 보낸 후 받고 뷰로 보여줘야한다.. 그러면 내가 보낼 정보가 우리 홈페이지에 최초로 들어올때도 필요한데, 그때 가져온 데이터를 사용하면 되지 않을까 라는 생각이 들었다.
그래서 메인 홈페이지를 담당하는 예린님한테 제작하신 redux-module를 사용한다 알려주고 영화관, 영화 정보는 먼저 redux에 저장한 상태로 예매 페이지에 접근하게 만들었다. 그러면 최초에 보여질 영화관과 영화데이터는 존재하게 된다. 사용자가 백지 상태에서 보게 될 일은 없을 것이다.
이제 미리 정해둔 지역 지점들과 영화들의 데이터를 가지고 있는 상태로 시작할 수 있게 되었다. 이 재료들로 맛있는 볶음밥을 만들어야할텐데.. 걱정만 하면 코드가 짜이나 일단 해보기로 한다.
프로젝트 시작 / 영화정보 선택페이지
이제 내가 만들어야하는 페이지에 대해서 고민해보기 시작했다. 이 페이지는 영화관과 영화, 그리고 날짜 데이터를 가지고 예매정보를 가져오는 페이지이다. 그럼 UX/UI에 입각해서 생각해본다면 예매 버튼들이 있어야할 칸이 비어있으면 좋을까? 아니라고 본다. 뭔가가 보여야한다. 그렇다고 가데이터를 보여줄 수도 없는 일.
그럼 이 페이지에 들어올 때, 특정 영화관과 영화, 날짜를 기본값으로 선택되게 하자. 그 정보들로 서버에서 예매 정보를 가지고 와서 보여주는 식으로 하면 아무것도 안보여지는 것 보단 좋겠다. 일단 redux에 선택된 데이터를 저장할 모듈을 하나 만들어주고
날짜는 오늘 편의상08/24일 부터 2주간, 데이터는 1주치만 가지고 있다. 지점은 서울의 첫 지점, 영화도 예매율이 제일 높은 영화를 선택되게 보여주면 유저의 입장에서 더 좋은 경험일 것이다.
또한 영화를 기준으로 정렬을 해야했기 때문에 {영화제목:[예매데이터]}이렇게 상태구조를 만들어서 보여줬다.
이 데이터를 가지고 드디어 예매 정보 버튼을 보여주는 페이지를 완성할 수 있었다. 이때 DB에 저장한 시간을 한국 시간이 아닌 미국시간으로 저장하는 에러가 존재했다. 검색에 검색으로 서버쪽에서 해결하려 했으나, clearDB는 이런 정보를 변경할 수 없다고 해서 moment를 이용하여 해결했다. 사진속 날짜가 23인건 이런 비하인드가..
이렇게 선택된 데이터를 상단에 보여주고 최초 페이지 입장이더라도 예매 데이터 버튼이 보이게 구현했다. 가장 큰 기능은 일단 이렇게 마무리 했고, 영화관 선택 디자인, 영화를 예매, 관람객, 평점순으로 sort하는 기능, 또 영화 제목만 보는게 아니라 포스터 밑 다른 세부정보와 같이 보는 기능 등을 구현했다.
시간 선택 컴포넌트에서 스페셜관 같은 특수 관은 구현하지 않아서 시간상으로만 sort가능했다.
이제 마지막으로 예매 버튼을 클릭하면 좌석 정보와, 예매 정보를 보여주는 모달창을 띄울 것이다. 흐린 점이 예매 가능한 좌석이고 진한 점은 예매되거나 코로나 거리두기로 인해서 선택하지 못하는 좌석이다. 취소를 누르면 모달창이 꺼지고 좌석 선택 버튼을 누르면 좌석 선택 페이지로 이동하는 중간 다리 역할을 하는 모달창이다.
react의 potal이라는 기능을 사용하여 모달을 제작하고 특히 이 좌석을 그리는 로직은 뒤에 좌석 선택에도 써먹을 심산으로 props에 따라 다른 모양으로 랜더링되게 제작하였다.
{bookingData.stage === '1' ? (
<FirstSeat bookedSeat={bookingData.bookedSeat} type="miniMap" />
) : bookingData.stage === '6' ? (
<SixthSeat bookedSeat={bookingData.bookedSeat} type="miniMap" />
) : (
<SecondSeat bookedSeat={bookingData.bookedSeat} type="miniMap" />
)}영화관을 3개만 구현해서 1,2,6관을 구분하고 type에 의해서 모양이 변경된다. 또 페이지 이동이 일어나는게 아니라 현제 섹션을 닫고 다음 섹션을 보여주는 식으로 진행하여 페이지가 새로고침 되는 느낌 없이 흐르게 될 것이다. 이 페이지 하나 만드는데 2일이 걸렸다. 내가 더 열시미 해서 팀원들도 도와주고 할게 많은데 시간은 항상 없다..
- 다음에 계속
