-
렌카는 렌터카 중개 O2O 서비스 플랫폼 개발 및 공급사업을 하는 기업입니다. 렌터카를 요청하는 렌카 앱웹과 렌터카를 제공하는 IMS 앱웹을 개발하는 프로젝트를 진행하였습니다.
-
주로 보험사 직원이 사용하는 요청자 웹앱(동영상 오른쪽)에서 요청을 하면 주로 렌터카 업체에서 사용하는 제안 웹앱(동영상 왼쪽) 목록에 요청이 뜨고 제안을 하면 요청자가 선택하여 1:1 매칭해주는 플랫폼입니다. 요청부터 반납까지 비즈니스 로직에 따라 서버와 통신하며 프로젝트를 진행하였습니다.
- 20.12.14 ~ 20.01.15 (5주)
- 프론트엔드 3명, 백엔드 2명
- 프론트엔드
- Next.js(함수형, 클래스형)
- Mobx
- Sass
- Socket.io
- Flask
- Database Modeling (AQueryTool)
- AWS
- Git / Github / Git-flow
- Slack
- Notion
팀원들과 회의 후 회원가입/로그인 페이지는 클래스형 컴포넌트를 사용하기로 했습니다.
-
유효성 검사 및 애니메이션을 통해 회원 가입 페이지 구현
-
사용자의 input을 Mobx에서 관리하고 Query String을 이용해 서버로 전송 후 중복검사 및 에러핸들링
-
서버에서 받은 회사 리스트를 검색 로직 구현
-
생산성을 높이기 위해 Input 컴포넌트 재활용
-
Mobx를 활용해 state 관리
삼항으로 조건을 주고 공통 Input 컴포넌트에서 props를 수정 가능한 state로 만들었다.
input component
공통 콤포넌트의 input은 onChange에 삼항을 주어서 선택된 카드가 수정 가능한 상태로 만들었다.
- Socket.io를 활용해 TCP통신 구현 (직접 기획)
예약이 확정되면 고객과 업체가 채팅이 가능하다. 원래는 댓글로 되어있던 부분을 팀 회의를 통해 채팅 기능으로 수정하기로 결정했고 Socket.io를 통해 TCP 통신을 했다.
서버와 채팅 페이지를 진행하면서 몇 가지 문제가 생겼다. 먼저 Socket.io의 이해도 부족으로 인해 메시지가 쌓이면 느림 현상이 발생한 것. 메시지 10-15회 이상 주고 받으면 서버로 부터 엄청나게 많은 요청이 들어오게 된다.
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를 이용하여 로그아웃 구현