/web17_morak

Morak | 네이버 부스트캠프 내 모각코 모집/관리 플랫폼 🧑🏻‍💻👩🏻‍💻👨🏻‍💻

Primary LanguageTypeScript

🚚 repository 이사했어요 https://github.com/team-morak/morak

📒 팀 노션 | 🖋️ 그라운드 룰 | 📜 기획서 | 🎨 디자인 | 🔍 위키

모락 | Morak

네이버 부스트캠프 내 모각코 모집/관리 플랫폼

모락은 부스트캠프 웹·모바일 8기의 모각코 살롱 채널인 '카페인_cafe人' 채널로부터 아이디어를 얻어 출발했습니다.

기존 슬랙 채널에 존재하던 정보 분산과 가독성 문제를 해결하고, 누구나 쉽고 빠르게 모각코를 열거나 참여할 수 있는 플랫폼을 목표로 개발된 서비스입니다.

이후의 모든 부스트캠프 캠퍼들이 이 서비스를 통해 더욱 활발한 오프라인 모각코 문화를 만들어가길 소망합니다.

기능 설명

📌 내가 속한 그룹의 모임 글을 리스트 형태로 볼 수 있습니다

모임 글 리스트 캡처 화면

🗓️ 내가 속한 그룹의 모임을 달력 뷰로 확인할 수 있습니다

달력 뷰 캡처 화면

🗺️ 내가 속한 그룹의 모임을 지도 뷰로 확인할 수 있습니다 지도 뷰 캡처 화면

📌 달력과 지도 뷰에서 모임에 대한 상세 내용을 사이드 바로 확인할 수 있습니다

달력 뷰 사이드 바 캡처 화면 지도 뷰 사이드 바 캡처 화면

📌 참여한 모임에서는 채팅으로 소통할 수 있습니다 채팅 캡처 화면

👥 그룹에서 참여하고 나갈 수 있습니다 그룹 리스트 캡처 화면

🧑‍💻 기술적 도전

Monorepo With Turborepo

  • 모노레포를 도입하여 코드 공유, 일관된 코드 스타일, 빌드 및 테스트 캐싱을 통해 효율성을 올렸습니다.
    • 모노레포의 내부 패키지 사용으로 다음과 같은 이점을 얻었습니다.
      • FrontEnd/BackEnd 간 타입 불일치 문제를 예방하고 인터페이스 변경에 신속하고 정확하게 대응할 수 있도록 공통 타입을 사용합니다.
      • 공통 컴포넌트를 패키지화하여 컴포넌트의 재사용성을 높입니다.
      • configuration 파일 재사용으로 초기 세팅 비용을 줄입니다.
    • Turborepo의 캐싱 기능을 Docker 이미지 빌드에 적용하여 빌드 시간을 단축했습니다.
    • TurboRepo 설정 by 서지원

Test Code

지도

채팅

  • socket.io를 기반으로 사용자들이 실시간으로 대화를 나눌 수 있는 채팅 기능을 개발했습니다.
  • FE에서 채팅 구현 중 겪은 여러 문제 상황과 해결 과정에 대하여 기록하였습니다.

OAuth2.0과 인증/인가

기타

이 외에도 모락 팀의 개발 일지를 구경해 보세요!

기술 스택

분류 스택
Common
FrontEnd
BackEnd
Infra
Collaboration

아키텍처 구조도

image

브랜치 전략

image

  1. upstream에서는 main 브랜치와 develop 브랜치만 관리한다.
  2. 개발 feature는 develop 브랜치에서 따서 작업 후 develop 브랜치로 머지한다.
  3. 협업으로 인한 추가 브랜치가 필요한 경우 upstream에서 develop 기준 feature 브랜치를 생성하여 2와 같은 방식으로 작업한다.

🧑🏻‍💻 command

package install

$ npm install <package-name> -w=backend
$ npm install <package-name> -w=frontend

run

$ npm run start:dev -w=backend
$ turbo run start:dev --filter backend

$ npm run dev -w=frontend
$ turbo run dev --filter frontend
  • 이외 명령어들도 각 app 내의 script 명령어를 root(web17_morak)에서 npm run <command> -w={workspace} 형태로 입력하여 실행하면 됩니다.
  • turbo scripts를 이용하고 싶을 경우 turbo.json에 추가가 필요합니다.

팀원

FrontEnd FrontEnd FrontEnd BackEnd BackEnd
이태림 이지원 맹지승 임동혁 서지원