js43o / morak

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

https://morak.io

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

모락 | Morak

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

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

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

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

기능 설명

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

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

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

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

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

👥 그룹에서 참여하고 나갈 수 있습니다

🧑‍💻 기술적 도전

Monorepo With Turborepo

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

Test Code

• 보다 더 효율적인 개발과 QA 방식을 위한 테스트 코드 작성에 대해 고민했습니다.
  • UI 테스트를 할 수 있는 방법은? (시각적 회귀 테스트) by 이태림

지도

• TMap API를 사용하여 사용자와 상호작용할 수 있는 지도 페이지를 개발했습니다.
• 좋은 사용자 경험을 주기 위해 Vector와 Raster 지도 SDK를 개발자 도구 성능 탭으로 비교해 보고, 선택한 과정을 담았습니다.
  • Tmap API로 지도 렌더링 by 이지원
  • 폼 작성 시 장소 선택 TMap API 적용하기 by 이태림
  • 느림의 미학 (feat. TMap 지도 성능 측정) by 이지원, 이태림

채팅

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

OAuth2.0과 인증/인가

• NestJS에서 소셜 로그인에 대한 인증과 사용자 정보를 인지하여 인가 처리를 기록하였습니다.
• 로그인을 통해 해당 사용자의 정보를 추출해내어 사용하는 방법을 기록하였습니다.
  • 지금 접속한 당신 정체가 무엇이오? by 임동혁
  • 인증(Authentication)과 인가(Authorization) by 임동혁

기타

• assets는 왜, 어디에서 관리해야 할까요? public? src? by 이태림
• react-query와 컴포넌트 props 전달 by 맹지승
• NestJS 빡치는 라우팅 시스템에 대해 알아보자 by 임동혁
• Jest 경로를 일일히 지정해야 한다고? by 임동혁
• Jotai vs. Zustand by 맹지승
• 놀랍고 재미있는 접근성 개선 by 맹지승
• 모바일에서 폼 입력 시 화면이 확대되는 현상… 접근성과 관련 있다고? by 이태림
• Nginx 설정 by 서지원
• Docker Registry 설정 by 서지원

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

기술 스택

분류	스택
Common
FrontEnd
BackEnd
Infra
Collaboration

아키텍처 구조도

브랜치 전략

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
이태림	이지원	맹지승	임동혁	서지원