2차 프로젝트 회고록 & 위코드 8주차

1. About team IIIIEE

• 개발기간: 2023.07.14 ~ 2023.07.28
• 깃헙 링크 : FrontEnd, BackEnd

1-1. airbnb PET 분석

Products

최근 코로나 이후, 여행객의 수요가 증가하면서 숙박업 시장의 눈부신 성장
2020년 대비 147.1% 상승 (2022) / 84억 달러

공유 경제 서비스
Host / Guest 에 거리낌 없는 공유 경제 서비스

고객과 host 중개/연결해주는 시스템

원하는 날짜 / 장소 필터링 후 예약 기능

장소와 시간에 구애받지 않으며, 소비자의 자유로운 선택이 가능

현장 체험 시스템
숙소를 단순 머무는 공간에 한정 짓지 않으며, 호스트가 주최한 다양한 체험을 추가하여 소비자의 선택 폭 확장.

 

End_User

• 고객 : 여행지만의 독특한 점을 생생하게 느낄 수 있도록 현지인의 숙소를 이용할 수 있고 독특한 체험이 가능
• host : 인간관계의 다양화 또는 pipe money (부수익 창출 가능)

Tech : front end 가 사용할 기술스택

• 기술 스택 : javascript, react, styled-compoenets
• 협업 툴 : git & github, slack, trello, notion, VScode

 

1-2. 그럼 IIIIEE는 어떤 프로젝트를 하고 싶은가?

Products

• 누구나 주최자 (host) / 고객 (Joiner)가 될 수 있다는 것
• 원하는 맛집을 호스트가 주최하고, 게스트가 참여하며 서로 만남을 가짐과 동시에 맛있는 음식을 먹으며 대화를 하며 친목 도모
• 맛집 탐방을 취미로 즐기는 사람들을 연결해주는 커뮤니티
• 해당 커뮤니티와 자사 서비스를 사용하는 파트너 식당의 중개 역할
• 수익 창출은 방 수수료 및 파트너사를 통하여 진행.
  • 방을 만들고 예약 할 때 수수료를 받고 예약금은 파트너 식당으로
  • 예약금은 식당을 위한 노쇼 방지로 활용 됨.

End_User

• 홀로 맛집을 가고 싶지 않으며, 사람들과 함께 가고 싶어하는 사람들
• 다양한 인맥을 넓히고자 모임을 원하는 사람들.
• 고객을 끌어들이고 싶은 식당

구현하고 싶은 사항

• 소셜 네트워크 로그인 : 서비스의 접근성 증가
• 강남언니의 ui를 가져와 모바일 웹으로 구현 : 서비스의 접근성 증가 및 광고를 통해 추가 수익 창출 가능
• 필터링 : 유저가 원하는 장소, 시간, 연령대, 성별 선택해 원하는 모임에 접근 가능
• 유저가 직접 모임을 등록 : 원하는 조건의 모임 생성 가능
• 식당 위치 표시 : 카카오 맵 API를 활용
• 리뷰 서비스 : 호스트의 리뷰 작성 및 악플 필터링
• 결제 서비스 : 카카오 페이 API를 활용
• 메신저 알림 기능  : 스케쥴러 활용

 

1-3. ERD 구성

 

1-4. Trello 사용

---

2. 시현영상

---

3. 내가 맡은 역할

1. 메인페이지
   • 레이아웃
   • useParams 이용해 모임 제목 누르면 상세페이지로 이동-슬라이드 라이브러리 사용해서 슬라이드 이미지 구현
   • useParams 이용해 맛집의 모임 등록 페이지로 이동
   • 맛집 사진 누르면 모임목록 토글 뜨게 하기
2. 모임페이지
   • 레이아웃
   • 모임 정보 및 호스트 정보 get
   • 신청 인원 넘어가면 신청하기 버튼 비활성화
   • 호스트 정보 및 리뷰 컴포넌트 분리
   • 후기 등록 버튼 클릭 시 post 요청
   • 별점을 아이콘화
   • 호스트와 밥을 먹은 사람만 리뷰를 작성할 수 있도록 구현
   • 신청하기 버튼에 post 요청 걸고 성공 시 신청목록으로 이동
   • 호스트의 후기 정보 get
3. 모임 등록 페이지
   • 레이아웃
   • 모임 등록 post 요청 후 response로 받아온 roomId 값과 유저가 업로드한 사진을 formdata로 post 재요청
   • 캘린더 라이브러리 사용
   • 백엔드 db에 저장되어있는 데이터들은 모두 get 요청
   • 전체 값 state로 관리
   • 유저가 직접 작성할 수 있는 태그 추가 및 삭제
4. 모임 목록 페이지
   • 레이아웃
   • 유저가 만든 모임에 신청한 게스트 유저를 수락, 거절할 수 있는 버튼 구현
   • 예약하기 버튼 클릭 시 카카오페이 결제 api 연결
   • useParams 이용해 모임 제목 누르면 상세페이지로 이동
   • 결제 성공 시 예약하기 버튼이 사라지고 예약완료 텍스트 보여줌
   • 신청인원이 모두 찼을 때 예약하기 버튼 활성화
   • 유저가 만든 모임 모두 가져오는 get 요청
5. 404페이지 및 frame 페이지
   
   • 레이아웃 및 라우터 구성
   • 동영상 추가

아래 링크를 통해 기술 블로그 이동 가능

'오늘도 삽질 중/React.js' 카테고리의 글 목록

---

4. 추가 구현하고 싶은 내용

• 추가구현이었던 후기 삭제, 신청한 유저를 호스트가 수락/거절하는 기능, 알림기능
• 페이지네이션
• 현재 시간을 기준으로 과거는 예약을 못 하는 기능

---

5. 프로젝트를 진행하며 느낀점

두번째 팀 프로젝트

 1차 프로젝트를 진행하면서 제일 어렵게 느껴졌던 부분이 백엔드와의 통신과 협업하는 동료의 코드리뷰 두가지였다. 그래서 이번 2차 프로젝트에서는 많이 경험을 해보고 익숙해지는 것에 목표를 두었다. 첫번째로 백엔드와의 통신은 의도하지는 않았지만 대부분의 api를 내가 들고오게 되면서 정말 원없이 할 수 있었다. 처음 통신을 할 때만 해도 통신이 된건지 안된건지도 몰랐고 에러가 생기면 어찌할 줄 몰랐는데 지금은 네트워크 먼저 켜서 통신을 확인할 수 있었고 백엔드보다 빠르게 에러 상황을 알려주곤 했다. 프로젝트 후반쯤에는 다른 팀에서 백엔드와 맞춰보는 상황이면 나를 먼저 찾기도 했다.

 두번째 목표는 동료의 코드리뷰를 많이 경험해보는 것이었다. 같은 팀이었던 프론트 동기와 같은 기능을 하는 코드는 서로 공유하면서 써 최대한 많은 경험을 해보자고 논의가 되어 나도 동기도 서로의 코드를 분석하는 시간을 많이 가지게 되었다. 나는 주로 hook으로 분리해 재사용률을 높이려고 노력했고 동기 또한 라이브러리 등을 재사용할 수 있도록 노력했다. 그리고 다른 팀에 프론트가 1명뿐이라 우리팀 프로젝트를 진행하면서 틈이 나면 다른 팀을 도와주었고 그러면서 다른팀의 코드도 분석할 기회가 생겼었다. 어떻게 보면 회사의 코드처럼 길지는 않지만 이렇게라도 내코드가 아닌 남의 코드를 읽고 분석할 기회가 생겨서 두번째 목표도 도달할 수 있었다.

  그리고 레이아웃을 최소한으로 줄이면서 여러 기능을 구현하고 싶었던 개인적인 바람도 있었다. 그래서 모바일 웹이라는 의견을 냈고 고맙게도 팀원들이 채택을 해주어서 이번 프로젝트는 모바일웹으로 진행할 수 있었다. 그래서 레이아웃을 대폭 줄일 수 있었고 결제 api, 지도 api, 소셜로그인, 달력 라이브러리, hook분리, 컴포넌트 분리, 별점을 아이콘으로 나타내기 등등 새로운 것들은 많이 경험할 수 있었다. 또한 원래 알고 있던것들도 반복 적용하면서 더 확실히 이해할 수 있었다.

 

프로젝트 및 위코드의 생활을 끝마치며

 1차프로젝트에서도 소통의 중요성에 대해 많이 느껴서 2차 프로젝트에서는 더더욱 소통을 많이 해야겠다고 생각했다. 하지만 소통을 많이 하면서 진행을 했다고 생각했는데도 빠지거나 다르게 이해한 부분들이 있었다. 그래서 2차 스플린트 미팅에서 이 내용에 대해 다같이 나누고 그 이후로 하는 모든 소통은 슬랙이나 노션에 작성하면서 소통의 오류를 줄여보려고 노력했다. 2주차에는 좀 줄었다고 느꼈지만 그럼에도 불구하고 우리 모두가 주니어라 프론트는 프론트만 알고 백엔드는 백엔드만 알아서 생기는 소통의 오류는 줄이기가 힘들어서 좀 아쉬웠다. 하지만 다양한 부분에서 저번 프로젝트때보다 성장한 내가 보여서 많이 뿌듯했다.

 온보딩을 할때만 해도 아무것도 모르고 구글링하는 것 조차 어려워하던 내가 이제는 모르는게 생기면 구글링을 먼저 하고 배우려고 하는 태도가 생겼다는 점에서 위코드에서 많은 것을 배웠다고 생각한다. 그리고 소수의 인원이었지만 인맥이 중요한 개발자의 세계에서 같은 일을 하는 동기들이 생긴 것도 너무 감사한 일이다. 온보딩 기간까지 합쳐 3개월동안 배운 내용들을 기반으로 이제는 취업 준비와 인턴쉽과정을 진행한다. 기초 지식보다는 시간에 급급해 실무에 바로 적용했던 내용들을 공식문서를 보며 파악하는 시간을 주로 가지면서 또 다른 프로젝트를 진행하고 싶다. 다음 회고록에서는 좀 더 성장한 내 자신을 느끼고 싶다.