UPCO - 팀 프로젝트 회고

eggMun·2023년 4월 5일
1
post-thumbnail

1. 개론

드디어 팀 프로젝트가 오늘로서 끝났다??
아니다 코드캠프에서 팀 프로젝트가 끝난 거다.
아직 다듬어야 할 부분이 많고, 추가해야 되는 부분이 많다.
하지만 코드캠프에서의 마지막 작업이니 회고록을 적으려고 한다.

2. 기획

처음에 우리는 무슨 프로젝트를 진행할지 많은 고민을 하였다. 나의 아이디어는 자전거를 타고 목적지에 도착하면 도장을 찍어 주는 아이디어를 냈다. 하지만 나의 아이디어는 모바일에서 더 좋은 아이디어이므로 선택받지 못했다. 그 대신 나보다 더 좋은 아이디어인 주변 동네 친구를 사귀는 아이디어가 선택받았다. 그게 바로 UPCO 프로젝트이다. UPCO는 '엎어지면 코 닿을 거리에 있는 사람들'이라는 뜻을 가지고 있다.


UPCO 프로젝트에 진행하기 위해 무슨 서비스를 제공할지 정했다. 먼저 지도에 있는 사람들과 채팅 또는 화상채팅을 제공하는 서비스를 하기로 하였다. 그러기 위해 실시간 gps와 채팅 기능을 도와주는 소켓io, 화상 채팅을 도와주는 웹RTC가 필요했다. 그리고 간단한 CRUD인 공지사항, 문의사항, 마이페이지도 추가하였다.

3. 디자인

이제 우리가 해야 할 프로젝트가 정해졌으니 웹 디자인을 해야 한다. 우리 프론트엔드팀은 어떤 디자인을 할까 많은 고민을 하였다. 먼저 랜딩페이지는 넷플릭스나 다른 화상채팅 사이트들을 많이 참고하였다. 그 사이트들의 공통점은 랜딩페이지에 로그인 버튼과 시작 버튼이 있다는 거다. 그래서 우리 랜딩페이지도 바로 시작 버튼을 나두기로 하였다. 메인페이지는 큰 지도화면과 함께 친구 목록과 내 주변 목록이 보이게 구상하였다. 그리고 채팅 페이지도 메인페이지의 사이드바를 가져와 친구 목록, 채팅방 목록을 구상하였다. 마지막으로 공지사항, 문의사항, 마이페이지는 유저가 처음 이 페이지에 접속해도 바로 기능들을 사용할 수 있게 심플한 UI를 구상하였다.

4. 구현

나는 메인페이지의 지도 구현과 실시간 gps 좌표 출력을 맡았다. 먼저 지도 구현을 위해 구글, 카카오, 네이버 등 많은 지도 라이브러리를 조사하였다. 그리고 지도 조작이 쉽고, 최적화가 잘 되어있는 지도를 선택하기로 하였다. 그 선택사항에서 다 만족하는 카카오맵 라이브러리를 선택하였다.


첫째 지도 구현을 위해 리액트용 라이브러리를 다운받았다. 그리고 메인페이지에 지도를 출력하였다. 하지만 브라우저에서 마운트가 되고 리렌더링이 되어야 지도가 출력이 되었다. 이 문제를 해결하기 위해 구글링을 하거마 멘토 또는 동기들에게 물어보았다. 그리고 문제의 원인과 해결 방법을 찾았다. 우리는 Next.js를 사용해 개발을 하고 있기 때문에 화면을 렌더링 하기 전에 지도 요청 코드를 작성하면 오류가 생긴다. 해결 방법으로는 isOpen이라는 변수를 만들어 조건을 걸었다. 지도 라이브러리가 onLoad가 되었을 때 isOpen 변수가 true일 때만 지도를 출력하게 변경하였다. 그리고 그 지도 출력 문제를 해결하였다.


둘째 실시간 gps 구현을 하였다. 실시간 gps를 구현하기 위해 Geolocation API를 사용하였다. 이 API를 사용한 이유는 기기의 위치를 실시간으로 정확하게 가져오기 때문이다. 단점으로 배터리 소모가 크다는 점이 있지만 우리 프로젝트에서는 정확한 위치와 실시간 좌표를 받아와야 하기 때문에 Geolocation API를 선택하였다. Geolocation API는 처음 사용하는 거라서 익숙하지가 않았다. 하지만 계속 공부를 하고 사용을 하다 보니 점점 익숙해지고, 이 API에 대해 잘 알게 되었다. 그리고 실시간 gps를 구현하게 되었다.


셋째 유저의 실시간 좌표를 서버에 보냈다. 유저의 실시간 위치를 지도에 보여주기 위해서는 일정 시간마다 API 요청을 보내야 한다. 일정 시간마다 API 요청을 보내기 위해서 폴링 방식을 선택하였다. 폴링 방식으로 API 요청을 보내니 일정 시간마다 API 요청 횟수가 늘어났다. 왜 이런 오류가 나타났는지 폴링방식을 좀 더 공부하였다. 공부를 하다 보니 이유를 알게 되었다. 문제의 원인은 setInterval을 잘못 사용하였기 때문이었다. setInterval의 콜백 함수가 제거되지 않고 계속 실행된 상태이기 때문에 오류가 발생하였다. 그래서 clearInterval 함수를 사용하여 setInterval의 함수 타이머를 중지시켰다.


넷째 지도의 최적화를 진행하였다. 지도 라이브러리 자체에서도 api 요청을 보내고, 유저의 위치를 api 요청을 보내고 있기 때문에 최적화가 필요하였다. 지도의 최적화를 위해 debounce와 useCallback을 사용하였다. 그리하여 브라우저의 부담을 줄일 수가 있었다.


다섯 째 모든 페이지들을 반응형을 구현하였다. 지도와 실시간 gps가 빨리 구현을 하다 보니 프론트엔드팀 중에서 내가 할 일이 없어졌다. 그래서 반응형 페이지를 맡았다. 처음으로 제대로 반응형 페이지를 하니 많이 막혔다. 이모션에서는 어떻게 미디어 쿼리를 써야 하는지도 몰랐고, 모바일, 태블릿, 웹 사이들의 크기도 잘 몰랐다. 하지만 반응형 페이지를 하기 위해 공부를 하다 보니 반응형 페이지의 방법도 알게 되었다. 그리고 실제로 반응형 페이지를 하면서 많이 실력이 늘었다. 약속된 시간이 도달하기 전에 반응형 페이지를 끝냈다. 조금 흠이 있지만 코드캠프를 수료하고 나서 보완하려고 한다.

5. 결론

지난 3~4주간 많은 것을 배우고 느끼고 성장하였다. 나는 이 프로젝트를 통해서 협업의 중요성, 소통의 중요성을 느꼈다. 왜나하면 프론트팀과 백엔드팀의 소통과 협업 능력이 프로젝트에 영향이 가고 팀 분위기에도 영향이 있기 때문이다. 그래서 백엔드팀과의 소통과 프론트팀끼리의 소통을 위해 협업 툴을 사용하거나 좀 더 원활한 소통을 위한 많은 대화를 나누어야 된다고 배웠다. 앞으로 나는 소통과 협업을 잘하는 프론트엔드 개발자가 되기로 다짐하였다.

profile
블로그 이전: https://eggmun98.tistory.com/

0개의 댓글