1. 프로젝트 개요
주제 : 데이트코스 공유 플랫폼
목표 : 연인과 편하게 데이트 코스를 계획 & 계획한 코스를 타인과 공유
프로젝트 명 : Flow Day
2. 프로젝트 일정
팀 매칭 : 2024.11.04. ~ 2024.11.08
프로젝트 기획 : 2024.11.15. ~ 2024.11.20.
프로젝트 개발 : 2024.11.21. ~ 2024.12.09.
프로젝트 발표 : 2024.12.10.
3. 프로젝트 팀 구성
저는 PM 겸 FE 개발을 담당하였습니다.
Frontend
 |  |  |
|---|---|---|
| 임O현 | 이O영 | 김O준 |
| PM & FE팀원 | FE 팀장 | FE 팀원 |
Backend
 |  |  |
|---|---|---|
| 서O원 | 강O진 | 황O정 |
| BE 팀장 | BE 팀원 | BE 팀원 |
 |  |
|---|---|
| 임O영 | 천O상 |
| BE 팀원 | BE 팀원 |
4. 기술 스택
🌈 Frontend
🌈 Backend
5. 기능 설명
채팅 : STOMP, SockJS 라이브러리를 활용하여, 실시간 채팅 기능을 구현하였습니다.
-> 리액트 네이티브의 WebSocket 호환성 문제를 파악하여 해결한 경험이 있습니다.
게시글 페이지 : 리액트 네이티브의 <FlatList>를 활용하여 무한스크롤을 기능을 구현하였습니다.
-> 게시글을 카테고리, 인기순 or 최신순으로 필터링 할 수 있도록 구현하였습니다.
글쓰기 페이지 : 제목, 태그, 카테고리 선택, 코스 선택, 사진 첨부, 본문 작성 기능이 있습니다.
-> Image Picker 라이브러리를 통해 이미지를 선택하여 서버에 저장하는 방식을 채택하였습니다.
게시글 상세 페이지 : 제목, 태그, 코스 위치, 사진, 본문, 좋아요, 댓글, 게시글 수정, 삭제 기능이 있습니다.
알림 페이지 : 채팅과 동일하게 웹소켓 라이브러리를 사용하였습니다. 알림 클릭 시 해당 페이지로 이동되도록 구현하였습니다.
6. 도전과제 & 해결책
이번 프로젝트에서 가장 큰 도전 과제는 채팅 및 알림 기능 구현이었습니다. 특히 웹소켓을 사용한 경험이 전혀 없었고, 관련 지식도 부족했기 때문에 웹소켓 통신을 처음부터 학습하는 것이 가장 중요한 과제가 되었습니다. 구글링과 GPT를 활용하여 빠르게 학습한 뒤, 이를 프로젝트에 적용하기 시작했습니다.
리액트 환경에서 채팅 기능을 구현하는 자료는 많이 있었기 때문에 이를 바탕으로 쉽게 진행할 수 있을 것이라고 생각했습니다. 그러나 리액트 네이티브 환경에서 STOMP를 활용한 예제는 매우 부족했습니다. 이때 첫 번째 문제가 발생했습니다. 제한된 자료를 바탕으로 코드를 작성했는데, 그 코드가 틀린 자료였던 것입니다. 구체적으로, STOMP 라이브러리가 버전 4에서 버전 5로 업데이트되면서 이전 버전의 문법이 더 이상 통용되지 않았습니다. 그럼에도 불구하고 사용된 자료에서는 v4 방식과 v5 방식이 혼용되어 있었고, 이로 인해 많은 시간을 허비했습니다.
이를 해결하기 위해 공식 문서를 참고하며 문제를 해결했습니다. 웹소켓 연결이 정상적으로 이루어졌다고 판단했지만, 의도한 대로 작동하지 않는 문제가 발생했습니다. 예를 들어, brokerURL에 문제가 없으면 onConnect 이벤트가 정상적으로 호출되어야 했지만, 이 부분만 작동하지 않았습니다. 결국 GitHub 이슈와 Stack Overflow를 뒤지면서 원인을 발견했습니다. 리액트 네이티브의 특성상 수신된 메시지의 끝에 NULL 문자가 누락되는 문제가 있었고, 이를 해결하기 위해 수동으로 NULL 문자를 추가해주는 코드를 작성해야 했습니다.
다음은 해당 문제를 해결한 코드 예시입니다:
import { Client, Message } from '@stomp/stompjs';
const stompConfig = {
connectHeaders: {},
brokerURL: "주소 URL을 입력해주세요",
forceBinaryWSFrames: true, // 리액트 네이티브 환경에서만 필요
appendMissingNULLonIncoming: true, // 리액트 네이티브 환경에서만 필요
onConnect: () => {console.log("connected")},
}
stompClient = new Client(stompConfig);
useEffect(() => {
stompClient.activate();
}, [])7. 결과 & 성과 & 향후 계획
많은 어려움과 아쉬움이 있었지만 담당했던 모든 기능을 구현하였습니다. 아쉬운 부분은 채팅을 보내고, 받아오는 과정에서 간헐적으로 웹소켓 연결이 끊겨 극히 일부 메시지가 누락되는 버그가 존재합니다. 알림도 동일한 문제를 겪고 있습니다. 이를 향후 리팩토링 과정을 겪을 생각입니다. 가장 쉬운 해결법은 라이브러리 교체이지 않을까 생각하고 있습니다.
8. 후기 & 배운 점
프로젝트를 진행하면서 백엔드와 협업하는 팀 프로젝트를 처음 경험해보게 되어, 예상보다 많은 어려움과 당황스러운 순간들이 있었습니다. PM으로써 기획, 컨벤션 설정, 깃허브 관리, 프로젝트 세팅 등 여러 업무를 전반적으로 맡으면서, 개발 과정에서 서로의 코드를 공유하고 리뷰하는 일까지 진행하게 되었습니다. 이로 인해 담당 기능 개발에 집중할 시간이 부족했던 점이 아쉬웠고, 그로 인해 예상보다 프로젝트 진행에 시간이 지연되었으며, 발표 전 배포 예정이었던 부분을 완료하지 못한 점이 많이 아쉽습니다.
이번 프로젝트를 통해 배운 중요한 점은 공식 문서의 중요성과 한글 자료에 의존하지 않아야 한다는 점이었습니다. 영어에 대한 자신감이 부족하여 주로 한글 자료를 찾아보았으나, 관련 자료가 부족한 상황에서 잘못된 코드나 부정확한 정보를 접하게 되어, 그로 인해 많은 어려움을 겪을 수 있었습니다. 이러한 경험을 통해, 새로운 기술을 습득하거나 문제를 해결할 때는 공식 문서를 기준으로 삼는 것이 중요하며, 이를 통해 시간을 보다 효율적으로 관리할 수 있다는 것을 깊이 깨닫게 되었습니다. 이 경험이 프로젝트 진행에 있어 가장 중요한 교훈이었던 것 같습니다.
9. 마무리
백엔드 팀과 처음으로 협업을 해보아 서로가 바라보는 관점이 매우 다르다는 것을 깨달았습니다. 그리고 사람이 3~4명 수준의 프로젝트에선 회의를 하며 빠르게 의견이 채택되고 팀장이 이끌어주면 팀이 잘 나아갔다고 생각했습니다. 그러나 인원수가 많아지니 저 혼자 이끌려고 하면 불협화음이 나온다는 것을 배웠습니다. 팀원들이 프로젝트를 이끌고 나갈 수 있는 분위기와 시스템을 만들어줘야한다고 생각합니다. 개발 방법론에 대해 더욱 찾아보고, 어떤 식으로 팀을 이끌어야 효율적인 방식일지 찾아보고자 합니다. 여러 방면에서 많이 부족하지만 한 단계 성장할 수 있는 기간이지 않았나 생각합니다. FlowDay 팀 여러분 모두 고생하셨습니다 :)
