[프로젝트] MovieBox

실제 완성된 클라이언트 메인 화면

 

• 개발 계획과 내용

https://github.com/seonghyeon-Chi/MovieBox

• 나의 구현 내용

1. React를 사용하여 웹 클라이언트 구현 (회원가입, 로그인, 로그아웃, 검색, 정렬, 외부API연동, 이미지업로드 등) 
2. Node.js와 Express를 사용하여 서버 구현 (JWT인증, express-router)
3. Sequelize와 MySql을 사용하여 DB와 컨트롤러구현 (로그인, 로그아웃, 회원가입, 댓글정보저장, 회원관리 등)

 

• 사용 스택

 

• 프로젝트 소개

MovieBox

최근 국내에 상영했던 영화를 소개하고

그 영화에 대한 소감이나 평점을 자유롭게 남기고

공유하는 웹 애플리케이션

 

• 스키마

 

 

• 프로젝트 회고

처음으로 진행했던 프로젝트에 팀장 역할을 맡아 대략 한 달 정도 진행했다.

우리 팀은 영화를 소개하고 유저가 원하는 영화를 택해 코멘트를 남길 수 있는 서비스를 제공하는 웹 앱을 만들기로 계획했다.

팀원 한분은 프론트엔드 그리고 또 한분은 백엔드를 맡아 진행하기로 하고 나는 풀 스택을 선택했다.

다른 팀원들이 개발에 대한 자신감이 떨어져 계셔서 그것을 보안하기 위한 선택이었다. 

 우리 팀은 첫 프로젝트이다 보니 지금껏 부트캠프를 통해 학습한 내용을 최대한 복습하는 방향으로 개발을 진행하고자 했다.

그래서 우리는 기본적인 CRUD인 자체적인 유저에 대한 회원가입, 로그인, 로그아웃, 회원정보수정, 회원탈퇴을 구현했고, aws-sdk 라이브러리를 사용하여 S3에 이미지를 업로드하고 그 주소 값을 받아와 회원이미지를 보여주고 수정하는 조금은 더 심화적인 기능까지 구현해봤다.

 또 코멘트의 경우에도 기본적인 CRUD를 구현했다. 그리고 유저와 관계를 형성해서 연결했다.

그것을 보여주기 위해 해당 유저가 해당 영화에 코멘트를 남기면 유저의 마이페이지에 그 기록이 남도록 구현했다.

 영화 데이터를 렌더링하는 페이지의 경우 가장 머리를 아프게 했는데, 우리 팀은 처음부터 영화 데이터를 API로 빌려와서 페이지를 구현하기로 결정했다.

그래서 선택한 API는 국내 영화를 가장 많이 보유하고 거의 유일하게 제공하는 네이버 API였다.

우리 팀은 이 API를 통해 모든 영화를 대상으로 서치 모달에서 영화의 제목을 통해 서치하는 기능과 메인 페이지에서는 지금 상영 중인 최신 영화를 보여주고자 했다.

그래서 내가 원했던 방향은 네이버 API의 모든 영화 데이터를 AWS RDS에 저장하고 그 데이터를 Query 하여 데이터를 요청/응답으로 주고받기를 원했다.

그러나 문제는 네이버 API에서는 모든 영화 데이터를 주지 않는다는 것에 있었다.

네이버 영화 API는 API query에 있어서 검색어를 반드시 포함해야 하는 제약이 있었고 거기에 제공하는 데이터의 개수에도 제한이 있었다.

그래서 우리 팀은 회의 결과로 서치 모달에서 검색어를 서버에서 곧바로 네이버 영화 API query의 검색어로 보내고, 그 결과 데이터를 클라이언트에 보내 서치 페이지에 렌더링 하도록 계획을 수정했다.

즉, 영화 데이터 자체를 우리 자체 DB에서 관리하지는 않는 것이다.

그리고 메인 페이지의 최신 영화의 경우 더미 데이터를 우리가 직접 제작하는 방향으로 구현했다. 

 팀 프로젝트를 진행하면서 힘들었던 점은 첫 프로젝트이다 보니 기록을 남기고 공유하는 툴을 사용하는 것부터 어려웠다.

익숙하지 않아서 잘 사용하지 못했고 그러다 보니 Notion 등과 같은 툴보단 대부분 zoom을 통한 화상으로 빈번히 만나 현재 진행상황이나 문제를 공유하고 해결했다.

또 state를 관리하는 것이 생각했던 것보다 더 힘들었다.

redux와 같은 state 관리 라이브러리를 전혀 사용하지 않고 프로젝트를 진행했는데 이것이 예상했던 결과대로 움직여주지 않아 골머리가 많이 아팠다.

결국 개발 끝에 내린 결론은 다음에는 redux를 사용하자는 것과 '한 요청에는 한 응답만'이라는 법칙을 다시 한번 각인했다.

또 배포하는 과정에서 http로 배포하는 것까진 성공했지만 https로 전환하는 것은 결국 실패했다.

인증서를 발급받는 것이라던지 도메인을 로드 밸런서에 등록하고 그것을 ec2로 연결하는 부분이 잘 되지 않던 부분 때문에 실패했다. 

 또 다른 팀원들의 개발에 대한 숙련도 이슈가 조금 있어서 대부분 개념을 학습하는 것과 개발을 같이 하다 보니 개발을 진행하는 속도가 많이 느렸다.

심지어 백엔드를 담당하신 팀원이 프로젝트 기간 중 코로나에 걸리시고, 조부모님의 상을 겪는 안타까운 상황이 연속해서 발생함으로 대부분 개발을 2명이서 진행할 수밖에 없었다.

그러다 보니 더더욱 기한을 맞추는 게 어려워졌다.

다행인 것은 우리 팀원들이 처음 스택을 나누면서 결정했던 부분이 이 부분을 많이 해결해주었다는 것이다.

내가 풀 스택을 담당하게 되어 백엔드 개발과 프론트엔드 개발에 많이 참여했고 다행히 기한안에 계획했던 프로젝트를 완성시킬 수 있었다.

사실 지금 봐도 많이 부족한 프로젝트 결과이지만, 처음 시도했던 프로젝트이고, 계획했던 프로젝트의 결과를 그래도 빠짐없이 완성했다는 점에서 많은 의미를 남겼다.