Team Project ⎮ 페스포트(FESSPORT) 회고

NOWANDHERE·2021년 2월 7일

back end express mongodb node.js project

0. Project Intro

4주간의 프로젝트가 끝났다. 시간이 정말 빠르게 지나갔다. 뮤직 페스티벌을 좋아하시는 팀원 분의 아이디어로 시작한 FESSPORT 프로젝트를 리뷰해보자. 그동안 팀원들과 열심히 달려온 프로젝트 기간을 되돌아보며 ✈️

프로젝트 소개

세계 뮤직 페스티벌 및 아티스트 정보를 한 곳에서 확인하는 서비스
티켓 구매 및 판매, 동행 찾기, 후기 커뮤니티
방문 횟수, 나라, 장르 별 사용자 뱃지 획득
Fessport는 Festival + Passport의 합성어로 여권 형태의 마이페이지 구성

프로젝트 기간

2021년 01월 07일 - 2021년 02월 02일 (4주)

팀 소개

팀 명 : Costival
Front-End : 박정환, 이종혁
Back-End : 강희석, 이재원(Team Leader)

기술 스택

Front-End : React, React Hooks, Redux, Redux-Saga, TypeScript
Back-End : Node.js, Express, MongoDB, Mongoose, TypeScript, Nginx
Deploy : AWS(CloudFront, EC2, Route53), Mongo Atlas, Docker

1. 프로젝트 기획(SR)

주제 선정

최대한 다양한 아이디어를 모으고 협의를 거쳤다. 그 중 평소 뮤직 페스티벌을 좋아하시는 팀원 분의 아이디어로 세계 뮤직 페스티벌을 한 곳에서 볼 수 있는 서비스를 선택했다. 정말 수많은 페스티벌들이 있지만 이러한 서비스를 찾기 힘들었고, 팀원 모두 해당 주제에 흥미로워했기 때문이다.

추가적으로 티켓을 사고 팔 수 있는 커뮤니티와 함께 동행할 사람을 찾는 커뮤니티, 후기를 공유하는 커뮤니티를 차별점으로 더하기로 했다.

시스템 아키텍처 설계

와이어 프레임

Wireframe은 figma를 사용했다.

기능 플로우

Flowchart는 miro를 사용했다.

스키마 작성

DB Schema는 dbdiagram을 사용하여 작성했고, 크게 페스티벌과 아티스트, 사용자, 커뮤니티 테이블로 구성하였다. 사용자는 뱃지 획득, 페스티벌 및 아티스트 좋아요(위시리스트)를 할 수 있게 연결했고, 커뮤니티쪽에서는 동행 참석, 댓글 등의 테이블도 작성하였다.

API 문서 작성

팀원들과 어떤 API가 필요할지 상의하는 과정에서 팀원 모두가 생각했던 것보다 상당히 많은 API가 필요한 것을 느꼈다. 하지만 이 과정에서 시간이 걸리더라도 엔드포인트와 입출력 관련 내용을 확실하게 정하고 넘어가기로 했고, 그 결과 API 문서를 보며 개발하는것이 프로젝트 내내 정말 편했다.

하나의 API 예시이고, gitbook을 사용하여 작성했다. gitbook 링크

2. Back-End 개발

TypeScript-Express-Starter

팀 규칙과 프로젝트 태스크 카드 작성 및 분배, 마일스톤 작성이 끝나고, 타입스크립트 기반의 Express 스타터 패키지(typescript-express-starter)를 사용하여 본격적인 서버 개발의 전체적 구조를 잡았다. 자세한 내용은 링크를 참고.

디렉토리 구조

디렉토리 구조는 다음과 같다.

controllers - services에서 만든 함수들의 응답을 클라이언트에게 전달하는 역할을 하는 컨트롤러들을 모아놓은 폴더, 파일들은 기능별 정리
interfaces - 타입스크립트 적용을 위한 인터페이스들을 모아 놓은 폴더
models - 데이터베이스 스키마 모델들
routes - 라우터들과 엔드포인트들을 정의해 놓은 폴더
services - 실제 데이터베이스와 상호작용하는 로직을 담은 파일들

server.ts

app.ts

위 코드는 app.ts의 일부분이며 express 서버 클래스가 정의되어 있고, server.ts에서는 router 클래스를 모두 import하여 인스턴스를 생성하고, app의 인스턴스에 자식으로 넘겨주어 서버를 실행한다.

3. Project Review

좋았던 점 🌻

My React Client 😁

나만의 클라이언트 코드를 작성하여 API를 테스트 하면서 백엔드를 개발했다. 팀원 분들도 열정을 칭찬해주셔서 기분이 좋았다. 이렇게 하면 내가 만든 API가 잘 동작하는지 편하게 확인할 수 있을거 같아서 만들어봤는데 역시 편했다.

Deploy with Docker, Nginx !

배포 이야기를 하지 아니하지 않을 수 없다. Typescript-Express-Starter 덕분에 다양한 것을 경험했다. 특히, 도커를 경험한 것이 너무 좋았다. 도커의 장점을 직접 사용하면서 알게 되었다. 이미지를 만들어 빌드하고 컨테이너를 생성하여 도커 허브에 올려 서버를 실행하기까지의 일련의 과정 자체가 그 장점이었다.

Nginx가 외부의 요청을 받아 뒷단 서버로 요청을 전달하는 행위를 리버스 프록시라고 한다. 이런 리버스 프록시 서버(Nginx)는 요청을 전달하고, 실제 요청에 대한 처리는 뒷단의 웹서버들이 처리한다. Nginx가 실제 https 요청을 처리하는 작업은 함께 백엔드 개발을 맡은 팀원 분이 하셨지만 정말 많이 배웠다.

MongoDB

mongoDB를 공부하게 된 것도 좋았다. 기획 단계에서 DB Schema를 작성할 때 팀원 분과 join이 많이 발생하는 구조여서 SQL을 사용해야하나 고민을 많이 했지만 결국 mongoDB를 사용하기로 했었다. 함께 백엔드 개발을 맡은 팀원 분과 정말 즐겁게 model, schema, interface 설계 및 디자인을 했던 기억이 생생하다. 새로운 것을 배우는 것은 역시 설레고 재밌다.

아쉬웠던 점

기능구현이 먼저? NO!

기획의 중요성은 첫 번째 프로젝트에서 깨달은 바가 있다. 기획을 다 같이 정말 꼼꼼히 했다. 그럼에도 중간 중간 수정이 필요한 API, 기능 등은 생겨나기 마련이었다. 마음이 급하니 코드를 짜면서도 리팩토링이 필요하다고 느꼈다.

하지만 개발해야 할 내용이 많은 터라 코드를 효율적으로 작성하는 것의 중요성을 알고 있음에도 우선 기능을 모두 구현해야한다는 생각이 자꾸 들었다. 아직 구현하지 못한 후순위 기능도 있다. 앞으로는 코드 리팩토링에 신경을 쓰고 싶다.

마치며

프로젝트는 전체적으로 매우 만족스럽다. 결과물도 만족스럽고, 그 과정에 충분히 몰입한 나 자신도 만족한다. 팀원들과도 정말 매일매일 즐겁게 소통하며 개발한 것 같다. 힘든게 있으면 공유하고, 기능 하나도 구현에 성공하면 자랑하고 😂

이번 프로젝트 내내 정말 많이 배웠고, 많이 성장했다. 기분이 좋다. 난 역시 프론트엔드 개발이 아주 미세하게 조금 더 재밌는 것 같다. 이것을 몸소 느낀것만으로도 엄청난 수확이라고 생각한다. React 공부하러 가야겠다.

NOWANDHERE

🌻

이전 포스트