2022년 4월 첫 동아리에 들어가서 카풀 앱서비스 개발에 참여했지만 실력이 많이 부족해 배포에 실패한 경험이 있다..
| 카풀 이용자 100명 달성 | 인원 성장률 | 학생들의 리뷰 |
|---|---|---|
 |  |  |
당시 많은 사람들이 이용했었지만 당시 나와 같이 개발에 참여했던 친구도 개발실력이 많이 부족했던 터라 많은 기술들을 사용하지 못하고 어떻게든 카풀시스템이 돌아가게 만들기에 급급했었다. 그래도 나름 욕심있게 운영하고 싶었는지 많은 노력을 하였다.
프로젝트 소개 및 목적
MATE 플랫폼은 지방 대학교 학생들이 대학 등교에 어려움을 겪는 시내버스의 긴 시간을 극복하기 위해 자동차를 공유하고 교내에서 카풀 운영할 수 있도록 지원하는 서비스입니다. 이로써 대중교통의 높은 접근성을 유지하면서 학생들에게 편리한 대안을 제공합니다.
소요기간
2달 (2023.07 ~ 09)
📚 사용기술
디자인
Figma
Front
React
TypeScript
styled-components
Back
NextJs
NodeJS
Express
MongoDB
etc
aws ec2
주요 기능 구현 방법 및 문제 해결
1. SSR과 CSR 랜더링
| 컴포넌트 구조 |
|---|
 |
ChatListContainer 컴포넌트를 SSR
나머지 layout에 있는 Nav와 Title들은 CSR
NextJS의 장점을 살리고자 효율적인 컴포넌트 배치를 하였습니다.
데이터베이스를 불러오는 채팅방목록, 유저정보들을 SSR방식으로 컴포넌트를 구성하였고
항상 유지되는 헤더(내비바)는 CSR을 이용하여 화면에 보여주는 렌더링 속도를 개선하였습니다.
또한 두 렌더링 방식을 이용하여 SEO에도 유리하게 가져 갈 수 있었습니다.
2. Socket.io를 활용한 채팅 기능 구현
NextJS는 서버리스를 사용함으로, 실시간 채팅을 구현할 수 없어서 NodeJS Express서버를 구축하고 실시간 채팅 기능을 이용할 수 있게 되었습니다. 그리고 채팅내용들을 데이터베이스에 저장하여 과거 채팅내역도 볼 수 있게 구현하였습니다.
3. session을 활용한 라우팅 보호
| session |
|---|
 |
카카오로그인을 사용해서 유저가 로그인 완료시 세션이 등록됩니다. 만약 로그인을 하지 않거나 세션이 만료 될 경우 로그인페이지로 리다이렉트 됩니다. 이렇게 각각의 라우터들을 보호하며 비정상적인 접근을 방지해놓았습니다.
4. useRef을 활용한 이미지 변경 및 미리보기
CarImgInput 을 display:none 설정 후, 이미지 클릭시 ref인 input을 참조하여 dom에 접근할 수 있게 구현
useRef()을 활용하여 이미지 클릭시 이미지 업로드를 가능하게 하였고, 미리보기 기능을 구현
사용자들에게 조금 더 익숙한 UI/UX를 제공하였습니다.
프로젝트를 진행하면서 알게된 점
- 폴더 구조
| 폴더 구조 |
|---|
 |
NextJS의 폴더 구조는 조금 복잡했던것 같습니다
_components 컴포넌트들
(routes) 페이지 폴더
(profile) 프로필 페이지
(chat) 채팅페이지
next의 방식을 따라가면서 조금더 보기 편하게 폴더구조를 정하고 진행하였습니다
() : 괄호는 페이지 부분
_ : 그 외 컴포넌트나 데이터 모델
- NextJS
NextJS 개발을 하면서 서버리스의 개념을 익히며 사용하였고, CSR과 SSR 방식들을 이해하면서 효율적인 컴포넌트 배치와 SEO에 유리한 최적화 방법에 대해서도 알게되었습니다.
- Socket.io
서버리스는 서버가 계속해서 유지되지 않아, 실시간 채팅 기능 구현에 적합하지 않았습니다. 이로 인해 새로운 서버를 구축하여, socket을 이용하여 채팅 기능을 구현하였고 데이터베이스를 이용하여 채팅 기록을 저장하며 과거 채팅 내역까지 볼 수 있게 구현하였습니다.
- 라우팅 보호
라우팅 보호에는 쿠키와세션을 이용한다는것은 알고 있었지만, 세션을 어떻게 이용해서 보호 할 수 있을까에 대해 생각 해보았고, 로그인을 할 경우 세션에도 사용자의 정보가 등록을 하며, 세션이 없거나 만료 될 경우 로그인 화면으로 리다이렉트를 하게 했으며, 비정상적인 접근을 막을 수 있는 방법을 알게 되었습니다.
개선사항
이미지 저장 크기
현재 이미지를 업로드 후 저장이 될 때, 용량이 생각보다 큽니다. 또한 url길이를 줄여야 하는 방법에 대해 고민을 해야 했습니다
컴포넌트 재사용
컴포넌트를 재사용 할 일이 꽤 있음에도 불구하고 기능 구현에만 너무 목 메인것 같습니다.
재사용 되는 컴포넌트는 폴더를 만들어서 CSR SSR을 구분지으며 만들어야 될 거라 생각이 들었습니다
