Project
https://github.com/leehyoungjoon/32-2nd-TerraBox-frontend
Project Overview
정신없이 지나가버린 첫 프로젝트가 끝난 후 주말 간 짧은 휴식과, 재정비를 한 후 대망의 두번째 프로젝트로 "메가박스"사이트를 만들게 되었다.
사이트가 정해지고 사이트를 둘러보니 딱 끌려서 하고 싶은 페이지를 발견했다
바로, 예약페이지다 프론트단에서도 데이터를 필터를 해야 할 부분이 많아서 까다로워 보여서 어려워 보였고 1차 프로젝트때 많이 경험하지 못한 벡앤드와의 긴밀한 소통이 필요해 보였다 그런 이유로 예약페이지를 구현하고 싶었고 하게 되었다
꽤 어려운 작업이였지만 끝까지 긴밀하게 옆에서 함께해준 팀원들 덕분에 멋지게 프로젝트를 마무리 할 수 있었다고 생각하고 감사하다
자세한 기술내용과 소통에 대한 부분은 아래에서 자세히 설명하려고 한다.
새로운 기술과 메가박스
이번 프로젝트에서는 React Hooks와 styled-component를 이용하여 클론사이트를 만들어 보았다. 저번 프로젝트에서는 리액트를 왜 사용하는가에 대해 느꼈다면 이번 프로젝트에서는 hooks에 편리함과 styled-component의 사용이유에 대해 느끼게 되었다. hooks를 사용함으로써 클래스형 컴포넌트와 비교하면 선언하기가 간편하였고, styled-component를 통해 props로 직접 스타일들에 관여할 수 있는 부분은 엄청나게 편리하였다.
작업기간
2022.05.09. ~ 2022.05.20.
기술스택
front-end(3명)
- HTML/CSS
- JavaScript
- React with Hooks
- React Router
- Styled-Component
- AWS
back-end(2명)
- Django
- Python
- Postman
- MySQL
- Amazon S3
- AWS
협업도구
- git
- github
- Trello
- Slack
- Notion
- Zoom
주요구현사항
- 메인페이지 구성 : 현재 상영하는 영화에 대한 Carousel을 통한 시각적인 정보제공
- 상세페이지 구성 : 댓글기능을 통한 실관람평, 영화에 대한 상세정보 (포스터, 예고편)
- 소셜로그인 기능 : 카카오계정을 통한 로그인 기능 구현
- 예약페이지 : 사용자가 선택한 영화, 지역, 상영관 데이터에 따른 시간 정보 제공
- 좌석페이지 : 사용자의 데이터에 따른 좌석정보 제공 및 예약기능
- footer 구현 : 영화관 지역에 대한 지도정보 제공
- Nav var 구현 : 동적 라우팅 구현
1. 메인페이지
: 메인화면에 carousel을 구성하여 영화에대한 정보를 제공하고있다.
2-1. 상세페이지
: 주요정보, 실관람평, 무비포스트, 예고편을 탭으로 구성하였고,
실관람평에는 사용자가 직접 영화에대한 리뷰를 작성할 수 있는 기능을 구현하였다.
2-2. 상세페이지2
: 영화에 대한 예고편 동영상을 업로드하였다.
3. 소셜로그인
: REST API를 활용한 카카오 소셜로그인 기능 구현하였다.
4. 예약페이지
: 백엔드에서 넘겨 받은 데이터를 가공하고 필요한 부분만 뽑아내는 작업을 처음 하다보니 꽤 어려움이 있었다 밑에 기억에 남는 코드에서 다시 다루겠다.
5. 좌석페이지
: 예약페이지에서 원하는 영화를 선택한 후 해당 시간에 맞는 영화관 좌석을 제공하고 좌석을 선택 할 수 있게 구현하였다.
기억하고 싶은 코드
당연 예약페이지에 대한 코드이다
백엔드에서 넘겨 받은 데이터를 사용자에 필요에 맞게 제공해야 했기때문에
가공하는 과정에서 꽤나 고생을 한 기억이 있다.
const selectRegion = id => {
const selectedObject = theatersData.find(
({ region_id }) => region_id === id
);
setRegionTheaters(selectedObject.theaters);
setSelectedRegion(selectedObject.region_id);
};
const selectTheater = id => {
const selectedObject = regionTheaters.find(
({ theater_id }) => theater_id === id
);
setSelectedTheater(selectedObject.theater_id);
};
const goToSeat = () => {
navigate('/seat', {
state: {
movie_theater_id: selectedTheater,
},
});
};
Project Review
1차 프로젝트 보다 성장한 소통
1차 프로젝트 당시에는 벡엔드와 소통할 부분이 크게는 없었고, 처음이다보니 서로 데이터를 주고 받아야 하는 부분과 무엇을 맞춰야 할지 경험이 전무했기때문에 소통하는 부분에 있어서 매끄럽지 못했으나 2차 프로젝트를 진행할 때에는 같은 팀 백엔드 개발자인 정욱님과 매끄러운 소통으로 프로젝트 진행을 잘 할 수 있었다.
git rebasse
이번 팀 프로젝트는 rebase을 사용하였다. 처음으로 rebase를 사용하여 보았는데 이번에는 두려움보다는 실수해도 지금 해보자는 마음이 커서 혼자 rebase merge도 시켜보고 팀원들과 함께 conflict도 잡으며 git에 대해 두려워하기보다는 자신감도 생겼고 git 지식 부분에서도 많이 성장한 것 같다.
팀 프로젝트 후기
프로젝트가 내부적으로 완성 되었을때 함께 호흡을 맞췄던 정욱님이 해주신 말씀이 기억에 남는다.
"형준님 2주동안 서버와 6000번 통신하셨네요"
그 말을 듣고 예약페이지 한 페이지를 구현하기 위한 2주동안의 노력이 수치로 나오니 뭔가 뭉클하고 뿌듯했다, 6000번의 시도와 실패, 그리고 작은 성공들로 구현해내고 싶은 페이지를 구현한 내 자신이 조금은 뿌듯했다
