엘리스트랙 - 2차 팀프로젝트 회고 [조용할지도]

eocode·2023년 1월 17일

엘리스 AI 트랙

목록 보기

2/3

엘리스 AI 트랙에서 두번째 웹서비스 팀프로젝트를 진행하였습니다. ‘수치 자료 분석 및 표현이 포함된 웹서비스 제작’라는 주제로 프로젝트가 진행되었으며 프론트엔드 3명, 백엔드 2명, 디자인 1명으로 구성으로 팀을 이루었습니다.

저번 1차 프로젝트는 팀프로젝트 경험이 처음이다 보니 깃 협업 부분에서 긴장을 많이 했었는데 1차 팀프로젝트 경험 덕분에 이번 프로젝트에선 깃 협업을 수월하게 진행할 수 있었습니다 :)

1. 프로젝트 소개

지도 기반 접근 소음 정보 커뮤니티 ‘조용할지도’

‘수치 데이터 분석 및 표현이 포함된 웹사이트’ 주제에 맞게 서울특별시의 소음 공해 상황(각 지역별 소음 수치, 소음 민원 수치)의 데이터를 활용하였습니다.

소음 상태(소음 수치, 민원 수치)를 지도로 한눈에 알아보고 접근 가능한 커뮤니티입니다.

메인 페이지에서 서울시 소음 공해 상황을 그래프로 표현하여 소음 공해의 심각성을 나타내었고 컨텐츠 페이지에선 지도를 통해 소음 상태(수음 수치, 민원 수치)를 한눈에 알아보기 쉽게 나타내고 커뮤니티에 접근 가능하도록 하였습니다.

개발 기간

기획 기간: 2022.10.03 ~ 2022.10.07
개발 기간: 2022.10.07 ~ 2022.10.21

기술 스택

Front-End

HTML/CSS
React.js
Next.js
styled-component

Back-End

Node.js
Express.js
mongoDB

프레임워크 [next.js]
프로젝트를 처음 계획할 때 대한민국 전체 지도를 geojson 데이터를 이용해 나타내려고 하였습니다. 이 경우 매우 큰 geojson 데이터를 서버에서 받아오게되고 렉이 발생할 것이라 판단하여 SSR을 활용하기 좋은 next.js 프레임워크를 사용하기로 결정하였습니다.
[프로젝트를 진행하며 지역이 서울특별시로 좁혀지고 geojson 데이터를 프론트단에 저장하여 사용하게 되어 getserversideprops 등 next.js의 기능을 사용하지 않게 되었습니다...]

상태관리
상태 관리 라이브러리를 사용한 팀원이 적고 프로젝트가 복잡하지 않아 props 드릴링이 발생하지 않을 것이라 판단하여 상태관리 라이브러리를 사용하지 않기로 결정하였습니다.

프로젝트 이미지

메인 페이지

서울시 소음 공해 상황을 그래프로 소음 공해의 심각성을 나타냅니다.

컨텐츠 페이지

서울특별시 전체 지도를 통해 소음과 민원 발생량을 파악할 수 있으며 각 자치구 지도 및 좌측 수치 데이터를 클릭해 자치구 지도로 진입가능합니다.

데시벨과 민원 건수에 따라 빨간색, 파란색 지도로 표현됩니다.
명도에 따라 소음 및 민원 발생량을 한번에 파악할 수 있습니다.
좌측 목록을 통해 수치순, 글자순으로 오름차순, 내림차순 정렬하여 자치구별 소음 데시벨과 민원 건수를 확인할 수 있습니다.

서울시지도에서 자치구를 클릭했을때 나오는 화면입니다. 구 내 모든 동의 소음 리뷰 게시글이 나타납니다.

좋음, 보통, 나쁨으로 구분된 이모티콘으로 구의 전체적인 소음 리뷰를 파악할 수 있습니다.
자치구지도에서 녹색으로 보이는 마커를 클릭하면 해당하는 동의 리뷰만 따로 모아서 볼 수 있습니다.
자치구지도에서 6단계로 구분된 상태 핀을 클릭하면 해당하는 지역의 소음 수치를 확인할 수 있습니다.

자치구지도에서 6단계로 구분된 상태 핀을 클릭 하였을 때 나오는 화면입니다. 평균 소음 수치 및 시간대 별 소음 수치를 그래프로 나타납니다.

게시글 작성 화면입니다. 빠르고 간단하게 소음 리뷰를 작성할 수 있도록 로그인이 필요하지 않은, 비밀번호만을 이용한 익명 게시판입니다.

2. 담당 역할

상태 정리

공통으로 사용되는 state를 상위 컴포넌트에 선언하고 상태 정보 및 컴포넌트 간 props 흐름을 정리

지도 기능 구현

react simple map 라이브러리를 이용, 소음 수치를 한눈에 보여주며 동시에 커뮤니티 접근이 가능하도록 지도를 구현
자치구 지역별 수치에 따른 지도 색상 적용
소음/민원 순위표에서 소음/민원 설정에 따른 지도 색상 변경 기능 적용
소음/민원 수치 클릭 시 해당하는 자치구로 지도 변경
지도, 상태 핀(상태를 나타내는 아이콘), 마커(동을 나타내는 원형 아이콘) 클릭시 각각에 해당하는 컴포넌트가 나타나고 지도가 변경되는 기능 구현
react tooltip을 활용한 지역, 상태 핀, 동 마커 시각화 기능 구현

소음 정보 컴포넌트

구지도에서 상태 핀 클릭시 소음 정보 컴포넌트의 내 수치 데이터가 변경되도록 연결
소음 수치에 따른 6가지 색상 적용

3. 아쉬웠던 부분

스타일드 컴포넌트를 사용하였는데 공통 컴포넌트를 먼저 다같이 만들고 활용하면 좋았겠지만 그냥 서로 담당한 부분에서 스타일드 컴포넌트 만들고 사용하여 파편화가 발생하였습니다. 다음 프로젝트에선 공통 컴포넌트를 먼저 다 같이 만든 후 프로젝트를 진행해보아야 겠습니다.
지도 관련 라이브러리 및 geojson 데이터를 처음 사용해보아서 가장 간단하다는 react simple map 라이브러리를 사용하였는데 이름대로 정말 기능이 적어서 지도를 원하는 대로 꾸미지 못한 점이 아쉬웠습니다 ㅠ
- 핀, 마커를 svg로만 사용가능
- 핀, 마커 크기 변경이 자유롭지 않음
모바일 페이지를 고려하지 않은 프로젝트....
페이지 이동 시 긴 딜레이 발생

⭐️⭐️⭐️ 페이지 이동 시 긴 딜레이 발생

첫 페이지는 빠르게 동작하지만 이후 헤더를 통한 페이지 이동시 매우 긴 딜레이가 생기는 문제가 발생하였습니다. next.js의 SSR 문제라고 보기엔 next.js에서 로 페이지 이동시 클라이언트 사이드 렌더링으로 진행되기 때문에 SSR이 원인은 아니라 생각하였습니다.

도대체 딜레이가 왜 발생했을까???

_app.js에서 사용한 CDN으로 인한 딜레이?

부트스트랩을 cdn으로 추가하여 사용하고있었습니다. 이 부분이 문제일까 싶어 지우고 실행해 보았는데도 페이지 이동 딜레이 문제는 여전하였습니다.

한페이지에 너무 집중된 볼륨?

메인페이지, 팀원 소개페이지 같이 간단한 페이지로 넘어갈때는 딜레이가 발생하지 않았습니다. 따라서 볼륨이 큰 동네찾기 페이지에서 문제가 발생한다고 판단하였습니다.

게시글 요청으로 인한 딜레이?

팀원분께서 게시판에 많은 수의 샘플 게시글을 작성한 이후 부터 딜레이가 발생하는 것 같다는 의견을 주셔서 DB에 저장된 게시글 데이터를 모두 날려보았습니다. 이후 확인해보니 딜레이가 사라졌습니다.... 즉 동네찾기 페이지의 게시판 컴포넌트에서 게시글을 서버로부터 불러올 때 딜레이가 발생하는 것이었습니다.

게시판 컴포넌트에 어떤 문제가 있었을까?

게시판 컴포넌트의 코드를 살펴보니 게시글 CRUD가 생소한 방식으로 구현되어있었습니다...? 특정 이벤트 발생 시 미리 선언한 특정 state의 값만 변경 되었고 이후 상위 컴포넌트에 선언된 useEffect로 state 값이 변경됨을 인지, 데이터 요청 및 상태 업데이트가 진행되었습니다.

<특정 컴포넌트 onClick(()=>{특정 state 값 변경})>

useEffect(()=>{
 서버로 데이터 불러오기
 state 업데이트
}, [특정 state])

일반적인 코드

클릭 이벤트 발생 → 함수 실행(데이터 요청 및 state 업데이트)

작성된 코드

클릭 이벤트 발생 → 미리 선언한 특정 state 값 변경 → 상위 컴포넌트에서 useEffect로 state의 변경을 인지 → 서버로부터 데이터 요청 및 state 업데이트

문제는 대부분의 게시판 이벤트가 이런 형태로 작성되어있었고 그렇기 때문에 첫 렌더링 때 모든 useEffect가 실행되는 것에 있었습니다. 페이지 이동 시 모든 전체 게시글 데이터, 특정 동 게시글 데이터, 소음 수치 데이터 등을 서버에 모두 요청하기 때문에 딜레이가 발생하던것이었습니다.