플레이스 매칭 커뮤니티 '동세권'

• 현재 위치를 기반으로 유저들이 다양한 오프라인 장소를 직접 선택하여 함께 즐길 수 있는 플랫폼
• 원하는 유저들과 함께 매칭을 이뤄 여러 핫플을 가보세요!

toPangyo

💫 Member

• 💁🏻 우명규 FE
• 💁🏻 최성민 BE
• 💁🏻‍♀️ 류나연 FE
• 💁🏻 선원종 BE
• 💁🏻‍♀️ 전혜지 BE

💫 Team Goals

• LCP 2.5초 이내로 최적화하기
• 정해진 기간 내에 서버를 MSA 아키텍쳐로 구현하기

동세권

동세권 프로젝트의 전체적인 구조입니다.

📄 기능

• 매칭
  • 매칭방 CRUD
  • 카테고리 분류
  • 검색
• 채팅
  • 메시지 송/수신
  • 방장 권한
  • 입/퇴장 기능
• 알림
  • 알림 전송
  • 알림 받기
• 유저
  • 로그인
  • 회원가입
  • 프로필 설정
• 포스팅
  • 모집글 CRUD
  • 시간 및 장소 설정
  • 신청 기능

💻 Architecture

🛠 Skills

• Front-end
  • React.js
  • SCSS
  • Redux
  • Kakao map API
  • axios
  • Figma
• Back-end
  • Node.js
  • express
  • NginX
  • Socket.io
  • MariaDB
  • MongoDB
  • redis
  • gitbook
  • Insomnia

팀목표를 이루기 위한 노력들

LCP최적화

원인 1 : 카카오맵의 로딩용량이 컸었고, 카카오맵이 필요하지 않은 페이지에서도 카카오맵이 계속 실행되어 LCP에 영향을 준 것

[기존]

(public/index.html)

...
<script
  type="text/javascript"
  src="//dapi.kakao.com/v2/maps/sdk.js?appkey=%REACT_APP_KAKAO_MAP%&libraries=services"
></script>
...

[변경]

(src/components/Homepage/MainMap.js)

...
const defaultMap = () => {
    const script = document.createElement("script");
    script.type = "text/javascript";
    script.src =
      "//dapi.kakao.com/v2/maps/sdk.js?appkey=%REACT_APP_KAKAO_MAP%&autoload=false";
    script.async = true;
    document.head.appendChild(script);
    script.onload = () => {
      window.kakao.maps.load(() => {
        const container = document.getElementById("map");
        var options = {
          //지도를 생성할 때 필요한 기본 옵션
          center: new window.kakao.maps.LatLng(37.365264512305174, 127.10676860117488), //지도의 중심좌표.
          level: 3, //지도의 레벨(확대, 축소 정도)
        };
    var kakaoMap = new window.kakao.maps.Map(container, options);
    dispatch(setMap(kakaoMap));
    })}}

...

useEffect(() => {
	defaultMap()
}, [])
...

✅ 해당 페이지가 렌더링 될때 script태그를 생성하여 카카오맵을 표시하게 만들었고 그에따라 LCP의 성능을 5.3초 → 3.7초로 최적화 할 수 있었다.

(개선 전)

(개선 후)

원인 2 : LCP에 영향을 끼치는 불필요한 script코드들과 css코드들이 많았음

✅ 불필요한 코드들을 정리하여 LCP의 성능을 높였고 그에따라 LCP의 성능을 3.7초 → 3.3초로 최적화 할 수 있었다.

(개선 전)

(개선 후)

프로젝트 성공과 실패 혹은 아쉬운 부분 / 개선사항

클라이언트 ✅(성공)

1. 카카오맵 api를 활용한 구현

   • 반경 계산
   • 마커 기능 구현
   • 현재 위치 받아오기
   • Service 라이브러리를 활용한 place 정보 호출 등

2. 성능 관련 기능 요소 구현

   • 폰트 경량화
   • 필요에 따른 스크립트 호출
   • 알맞은 hook 사용 등

3. 주요 기능의 이벤트 핸들링

   • 응답받은 데이터를 컴포넌트에 바인딩
   • 모달을 통한 페이지 호출 줄이기
   • 일반적인 CRUD 구현 등

4. 협업

   • 서버와 RESTful한 데이터 요청 및 응답
   • Github를 활용한 관리 및 업데이트 되는 코드

백엔드 ✅(성공)

1. 채팅

   • 소켓을 이용한 채팅 서버 구현(채팅, 채팅 방, 장소/시간 선택)
   • Room 단위 통제

2. DB

   • RESTful한 api설계
   • mySQL 외부 공유 (포트 포워딩)

3. 알림

   • Redis, FCM, web-push라이브러리, socket등 다양한 방법 이해
   • Redis 연결 및 미들웨어로의 사용, DB와 사용하며 I/O성능 개선

4. 경험

   • 아키텍쳐, 목표설정 등 체계적인 팀 프로젝트의 경험
   • Github를 활용한 관리 및 업데이트 되는 코드

---

클라이언트 ❌(실패)

• 효율적인 코드 (ex 코드 중복)
• 예외처리
• 성능 최적화
• 반응형 웹 구현
• 카테고리 페이지네이션
• 이벤트 처리의
• 카테고리 페이지네이션 (기본 )
• RTK활용 미흡과 prop drilling 문제
• 컴포넌트에서의 실시간 데이터 전달
• 무분별한 axios 호출
• SCSS의 활용 제대로 못함
• 많은 라이브러리 경험 X

➡️ 기능을 구현에 어려움을 많이 겪다보니 실질적으로 성능을 최적화 할 수 있는 시간도 부족했고, 코드를 다시 한번 살펴보고 리팩토링 할 여유가 없었음

---

서버 ❌(실패)

• 모델 인덱싱 ➡️ 필요 속성 호출로 대체, 사전 고려 요소가 불충분 했고 설계 과정에서 다시 확인하기

• 채팅 클러스터링 ➡️ 싱글 구현을 우선 진행

• 배포 ➡️ AWS 등 시간과 역량 문제가 원인

• Redis pub/sub만을 이용한 알림 구현 ➡️ 단독 알림 서버 구현 실패, 채팅과 비슷하다고 생각하여 추후 채팅과 비교하여 분석

• 중복없는 DB작성 ➡️ 서버 별로 DB를 나누다 보니 발생 설계 문제

• MSA 아키텍쳐를 통한 서버 구성 ➡️ 통합 되었으면 좋겠다 싶은 부분이 많았음. 설계 기준을 다시 확인하고 리팩토링

• 서버 호출 최소화 ➡️ 코드 리뷰를 받으며 리팩토링

• Docker 컨테이너화 ➡️ 컨테이너화의 부재를 느낌, 역량 문제

• Task queue 도입 ➡️ 안정적인 서비스를 위한 도입을 시도 못함. 역량문제.

• 복잡한 코드 ➡️ 너무 여러 방법을 찾아보았으며 시간 관리 미흡

🏃🏻 Notion

팀원들과 열심히 노력한 흔적 보러가기!