프로젝트 전체 영상

• 렌카는 렌터카 중개 O2O 서비스 플랫폼 개발 및 공급사업을 하는 기업입니다. 렌터카를 요청하는 렌카 앱웹과 렌터카를 제공하는 IMS 앱웹을 개발하는 프로젝트를 진행하였습니다.

• 주로 보험사 직원이 사용하는 요청자 웹앱(동영상 오른쪽)에서 요청을 하면 주로 렌터카 업체에서 사용하는 제안 웹앱(동영상 왼쪽) 목록에 요청이 뜨고 제안을 하면 요청자가 선택하여 1:1 매칭해주는 플랫폼입니다. 요청부터 반납까지 비즈니스 로직에 따라 서버와 통신하며 프로젝트를 진행하였습니다.

• 20.12.14 ~ 20.01.15 (5주)

• 프론트엔드 3명, 백엔드 2명

• 프론트엔드

1. Next.js(함수형, 클래스형)
2. Mobx
3. Sass
4. Socket.io

1. Flask
2. Database Modeling (AQueryTool)
3. AWS

1. Git / Github / Git-flow
2. Slack
3. Notion

팀원들과 회의 후 회원가입/로그인 페이지는 클래스형 컴포넌트를 사용하기로 했습니다.

• 유효성 검사 및 애니메이션을 통해 회원 가입 페이지 구현

• 사용자의 input을 Mobx에서 관리하고 Query String을 이용해 서버로 전송 후 중복검사 및 에러핸들링

• 서버에서 받은 회사 리스트를 검색 로직 구현

• 생산성을 높이기 위해 Input 컴포넌트 재활용

• Mobx를 활용해 state 관리

search.js

삼항으로 조건을 주고 공통 Input 컴포넌트에서 props를 수정 가능한 state로 만들었다.

input component

공통 콤포넌트의 input은 onChange에 삼항을 주어서 선택된 카드가 수정 가능한 상태로 만들었다.

• Socket.io를 활용해 TCP통신 구현 (직접 기획)

예약이 확정되면 고객과 업체가 채팅이 가능하다. 원래는 댓글로 되어있던 부분을 팀 회의를 통해 채팅 기능으로 수정하기로 결정했고 Socket.io를 통해 TCP 통신을 했다.

서버와 채팅 페이지를 진행하면서 몇 가지 문제가 생겼다. 먼저 Socket.io의 이해도 부족으로 인해 메시지가 쌓이면 느림 현상이 발생한 것. 메시지 10-15회 이상 주고 받으면 서버로 부터 엄청나게 많은 요청이 들어오게 된다.

chat.js

connect 이후 join으로 id와 name을 서버로 전송하는데 connect와 join은 최초 렌더만 발생하고

messages를 on으로 받을 때마다 useEffect를 실행하는데

메시지를 보낸 수만큼 서버에서 response가 들어온다. 백엔드 팀원과 room id, socket.id, 등 문제를 해결하려고 했지만 결국 해결하지 못한 채 부채로 남았다.

_요청자(왼쪽)에서 제안을 선택하면 제안자(오른쪽)쪽에서 제안중 탭에 있던 카드가 예약확정으로 넘어간다. _

• SSR(Server Side Rendering)으로 초기 View 로딩 속도 향상
• Axios Custom Instance를 활용해 에러 선처리
• Next.js의 동적 라우팅을 이용해 효과적인 routing

Next.js의 경우 디렉토리 구조로 곧 route가 되기 때문에 index.js파일에 [id].js로 잡고

카드 클릭시 상세 페이지로 넘어가는 함수

router.push를 해주면 해당 페이지로 넘어갈 수 있다. 여기서 문제가 생겼는데 제안이 확정된 이후부터는 id값이 달라진다. 무슨 말이냐면 요청자에 의해 제안이 확정 되기 전에는 request_id를 기준으로 end point를 잡았기 때문에 상세 페이지로 이동하기 위해서 해당 카드의 request_id를 endpoint로 API를 요청했다.

하지만 예약이 확정된 후 백엔드의 모델링 때문에 예약확정 상세페이지에 가기 위해서는 suggestion_id를 end point로 써야 했다. request_id를 가지고 있던 상황에서 suggestion_id도 가져와야 했기 때문에 suggestion_id를 매번 Mobx에 state로 관리하는 불편한 상황이 발생했다.

하지만 router.push를 하게 되면 getServerSideProps의 context.query로 id값을 가져올 수 있음을 알게 되었고 suggetion_id를 넣어 문제를 해결했다.

• Query String을 이용해 서버로 통신
• Next.js의 getServerSideProps를 적절하게 활용하여 서버로 데이터를 효과적으로 수신
• 배차완료/반납완료 Request를 서버로 송신
• 제안취소/배차취소시 DELTE 메서드를 POST하여 상태값을 받고 상태값에 맞게 UI 렌더

예약 확정 상세 페이지 부터request와suggestion 두 개의 데이터가 들어오는데 여기서 문제가 발생했다.

모델링에 따라 requst 데이터 안에 suggestion의 키값으로 데이터가 들어왔는데 Proposal 컴포넌트도 공통으로 사용하다 보니 suggestion을 키값으로 잡고 데이터를 받아오면 삼항 연산자가 두 번 연달아 쓰여야 할 불편함이 생겼다.

삼항 연사자를 두 번 쓰면 에러 확률이 높을 수 있다고 판단하여 백엔드 팀원과 상의 후 request, suggestion 키값으로 병렬 구조로 데이터를 받기로 하고 해결되었다.

• Cookie에 저장된 Token을 활용해 유저 데이터 수신

• Css를 활용해 Toggle on/off Switch 구현 및 중첩 객체를 활용해 원하는 데이터만 수정
• 직원 리스트에서 데이터 삭제 구현

• router를 이용하여 로그아웃 구현