- Published on
공유주차장(주차하카) 서비스 | 2차 프로젝트 후기
프로젝트 깃허브 주소 👉 https://github.com/fun1ty/letsPark
프로젝트 배포 ⚡ http://52.78.196.104/
Intro
어느덧 2차 프로젝트가 완료되었다. 이번에 프로젝트를 어떻게 준비하였고 어떤 방식으로 진행되었는지 이 포스팅에 기록하고자 한다. 주제로는 시간이 지나면서 '공유'에 대한 가치가 커지고 그것을 잘 활용할 수 있는 곳 중 하나인 공유 주차장을 생각하였다. 주제를 선정하고 찾아보니 이미 잘 만들어진 서비스가 여러 개 있어서 다른 주제를 생각할까 고민하다가 다른 서비스들에는 없는 차별화된 기능을 넣어서 개발하자!라는 팀 논의가 이루어져 '주차 하카' 서비스가 탄생되었다. (참고로 서비스명은 차를 좋아하는 동생이 지어줬다.)주차하카
- 수도권에 나날이 늘어가는 주차난과 불법주차를 해소하기 위해 만든 주차장 공유 서비스
- 단독주택이나 빌라 거주자가 주차공간이 비어있을 때 공간을 대여 가능
개발기간
2023.08.31 ~ 2023.09.15 (총 16일)주요기능
로그인,회원가입
주차장 등록,수정,삭제
주차장 예약
주차장 주인과 임대자의 채팅
기능정의서
모든 기능들은 구글 스프레드시트로 정리하였다.
CI/CD 아키텍쳐
AWS의 EC2, RDS, S3, Nginx를 이용하여 클라우드에 서버를 배포 및 관리하고 git이 커밋 되면 자동적으로 빌드를 수행하기 위해 젠킨스를 사용하였다.
ERD 설계
우선 대략적으로 설계를 하고 프로젝트 진행하면서 칼럼이 추가되거나 수정하자고 논의되었다.
화면설계
피그마로 진행되었다. 예전에 pixso를 써본 경험이 있어서 적응은 쉬웠고 피그마가 pixso보다 더 편한거 같다. 감사하게도 한 팀원분이 피그마에 능숙하고 화면 디자인틀을 어느 정도 잡아주어서 (글꼴이나 색상, 전체적인 화면 레이아웃 등) 한결 편하게 작업할 수 있었다.
앤드포인트
노션에 페이지를 만들고 앤드 포인트를 정의하여 기능별 URL을 쉽게 알아볼 수 있도록 하였다. REST API 설계 규칙을 지키려 노력하였다. (많아서 일부분만 발췌하였다.)| 분류 | 이름 | method | URL | Request Parameter |
|---|---|---|---|---|
| 메인 | 메인 | GET | / | - |
| 회원 | 로그인 | POST | /user/login | 요청데이터 |
| 회원 | 로그아웃 | POST | /user/logout | 요청데이터 |
요청 및 응답 데이터는 아래와 같은 형식으로 정의하였다.
본문 파라미터| 이름 | 유형 | 필수/선택 | 설명 |
|---|---|---|---|
| string | 선택 | 수정하려는 이메일 주소 | |
| password | string | 선택 | 수정하려는 비밀번호 |
| nickname | string | 선택 | 수정하려는 닉네임 |
| Name | 응답 본문 |
|---|---|
| 200 | { “message” : “회원 정보가 성공적으로 수정되었습니다. } |
| 400 | {”error”:”인증 실패”} |
요청
{"email" : "새로운 이메일 주소", "password" : "새로운 비밀번호", "nickname" : "새로운 닉네임" } |
기술스택
- Frontend : Node.js(ejs), ES6, Npm
- Backend : Node.js, AWS(EC2, RDS, S3), Sequelize, Visual Studio Code
- Database : MySQL
- DevOps : Nignx, Linux
협업관련
총 4명으로 구성된 우리 팀은 프런트/백을 나누지 않고 모두 풀 스틱으로 진행하였고, 주로 노션과 슬랙을 이용하여 모든 사항을 공유하였다. 어떤 개발 방법론으로 하자라고 구체적으로 명시하진 않았으나 매일 스크럼 회의를 하고 변화에 대응하려고 노력했으니 나름의 애자 일 방법론이 될 수 있지 않을까.. (라고 우겨본다)To-do list
각 기능의 담당자별 진척도 관리를 위해 노션에 To-do list 페이지를 만들어 관리하였다. 진척도에 따라 카드를 할 일-진행 중-완료 란에 옮기도록 하였다.
코딩컨벤션
미약하게나마 코딩 컨벤션을 정의하였다.- 변수명 : 카멜케이스
- url : 소문자
- css 작성 시 : input, p 같이 전체를 한꺼번에 변경하는 선택자 말고 클래스나 id 이름으로 선택자 지정하기
그라운드룰
원활한 협업을 위해 그라운드룰을 정하였다. 실제로 다들 잘 지키려고 노력해 주었다.- 지각 & 결석 미리 말해주기
- 진행 상황 공유하기
- 피드백 제공하기
- 매일 아침 to-do List 작성 및 확인하기
- 귀가 전 각자 브랜치에서 git push
- 아침에 오면 git pull origin develop
형상관리
형상관리는 git을 이용하였다. 우선 main 브랜치는 서버 배포용 브랜치로 하고 개발할 때 머지는 develop 브랜치를 만들어서 진행하였다. 팀원별 각자 브랜치를 따로 파서 해당 브랜치에서 각자 푸시 하면 develop에서 머지 하는 형식이었다.내가 맡은 역할
- MVC 아키텍쳐 개발환경 빌드
- nginx와 aws로 서버 배포
- 깃허브 리포지토리 및 브랜치 세팅
- 진척관리 및 개발&협업 관련 문서 작성
- 채팅기능 구현
기능구현(채팅)
socket.io 라이브러리를 이용하여 실시간 채팅 기능을 구현하였다. 주차장 상세페이지에서 '주인과 채팅하기'버튼을 클릭하면 socket.on()으로 채팅방을 만들어지고 채팅을 시작하면 RDB에 모든 채팅 내역이 저장되고 불러올 때는 createdAt 기준으로 시간을 출력한다. 이때 만들어진 채팅방은 마이페이지> 채팅방에서 내역을 확인할 수 있다. 사실 채팅 내역 불러오는 게 가장 어려웠던 작업이었는데 구현되어 기뻤다. (번외로 배포 서버에는 웹소켓이 자꾸 끊겨 결국 로컬로 시연할 수밖에 없었다.)추가개발/개선사항
발표 후 피드백 받은 사항으로는 아래와 같다. good- PPT에 CI/CD가 있고, ERD, 기능 명세서 등이 있어 서비스의 흐름을 파악할 수 있어서 좋았다.
- 서비스에 적합한 모바일 ui로 구현한 게 좋았다.
- 채팅 기능이 배포 서버에서 돌아가지 않는 것이 아쉽다.
- 사기를 방지하는 신고 기능이 필요한 거 같다.
Review
프로젝트 기간에 sqld 시험도 함께 진행하여 몇 주간 정신없는 일상이었다.프로젝트 기간이 약 2주 정도 됐었는데, 첫째 주 토요일은 sqld 시험이라 1주는 거의 통으로 날렸다. (하루 5시간밖에 투자를 못했으니... 다행히 팀원들이 이런 사정을 이해해 주어서 다행이었다.) 서버 배포 또한 원인 파악하느라 3일을 잡아먹었다. 그리고 개발이 시작되자, socket.io 라이브러리를 파악하고 작동원리를 이해하는 것에 시간이 소요되었다. (지금도 잘 모르겠다.) DB에 저장된 채팅 내역 불러오는 게 가장 큰 시간이 걸렸고 힘든 작업이었으나, 구현하고 나서의 뿌듯한 감정 역시 비례적이었다. 채팅 기능은 교육과정 시작 전부터 가장 만들고 싶었던 기능이었으므로 이번 프로젝트 역시 좋은 경험이었고 많은 것을 배웠다고 생각한다. (참고로 5개의 팀 중 2등을 해서 더 기분이 좋다.) 로직적으로 오류사항이 확인되어 개선하고 파일전송 기능, 채팅방 알람 기능 또한 차츰 구현할 예정이다. 또한 이번에도 팀원운이 좋아, 좋은 분들을 만나서 많은 걸 배우고 익힐 수 있었다. 다음 주부터는 리액트를 배우는데 가장 배우고 싶었던 라이브러리라 역시 기대가 된다.