![](https://private-user-images.githubusercontent.com/43867711/288760203-113814b6-0fc2-4ae0-adce-94238ecc2f6b.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQ0MzYxMDYsIm5iZiI6MTcyNDQzNTgwNiwicGF0aCI6Ii80Mzg2NzcxMS8yODg3NjAyMDMtMTEzODE0YjYtMGZjMi00YWUwLWFkY2UtOTQyMzhlY2MyZjZiLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MjMlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODIzVDE3NTY0NlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWJmN2NlNzQ1ZmRmMzU2Zjk5NDMxYzYyYWM3MzY0ZTI5ODgyNjRhZDQxNzVjOGUyM2NjOTZkNmIyMmE0Nzc5ODgmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.Gv3ZY_7Qgi5u3dp8VYWByYtSzbNbSypz2B3aT4aNF5s)
📒 팀 노션 | 🖋️ 그라운드 룰 | 📜 기획서 | 🎨 디자인 | 🔍 위키
네이버 부스트캠프 내 모각코 모집/관리 플랫폼
모락은 부스트캠프 웹·모바일 8기의 모각코 살롱 채널인 '카페인_cafe人' 채널로부터 아이디어를 얻어 출발했습니다.
기존 슬랙 채널에 존재하던 정보 분산과 가독성 문제를 해결하고, 누구나 쉽고 빠르게 모각코를 열거나 참여할 수 있는 플랫폼을 목표로 개발된 서비스입니다.
이후의 모든 부스트캠프 캠퍼들이 이 서비스를 통해 더욱 활발한 오프라인 모각코 문화를 만들어가길 소망합니다.
📌 내가 속한 그룹의 모임 글을 리스트 형태로 볼 수 있습니다
![모임 글 리스트 캡처 화면](https://private-user-images.githubusercontent.com/43867711/289413451-eb832e09-b798-4866-bd7b-812a60b82402.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQ0MzYxMDYsIm5iZiI6MTcyNDQzNTgwNiwicGF0aCI6Ii80Mzg2NzcxMS8yODk0MTM0NTEtZWI4MzJlMDktYjc5OC00ODY2LWJkN2ItODEyYTYwYjgyNDAyLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MjMlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODIzVDE3NTY0NlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTI4OTc1ZjIyNDIxYzkzYjg3MWJiZTI5ZmU0OGE3NzNlM2JlMTEwNjE2MzZiNzY4Mjk3YWU5NzE3ZjBlMTQ5ZTMmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.-lrXehufFZFBeeigkHf-P87lRX1EhEBohwoybTSxqgA)
🗓️ 내가 속한 그룹의 모임을 달력 뷰로 확인할 수 있습니다
![달력 뷰 캡처 화면](https://private-user-images.githubusercontent.com/43867711/289413920-d6cd8dbd-70e1-4149-bf33-30add3faf3b8.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQ0MzYxMDYsIm5iZiI6MTcyNDQzNTgwNiwicGF0aCI6Ii80Mzg2NzcxMS8yODk0MTM5MjAtZDZjZDhkYmQtNzBlMS00MTQ5LWJmMzMtMzBhZGQzZmFmM2I4LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MjMlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODIzVDE3NTY0NlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWRiNDU2NmRiZTJjNjkxYWI3NTIzMDYyMGRmMjEyN2NkNTRjOTZiYjIzYzA2MGQwZDZlNzMwYjg0MTg0MjM4MTgmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.v2I5SpK3xhs2T7ZSsPlNl-hi7AWt0cHmpfbYQ6zpmKk)
🗺️ 내가 속한 그룹의 모임을 지도 뷰로 확인할 수 있습니다
📌 달력과 지도 뷰에서 모임에 대한 상세 내용을 사이드 바로 확인할 수 있습니다
- 모노레포를 도입하여 코드 공유, 일관된 코드 스타일, 빌드 및 테스트 캐싱을 통해 효율성을 올렸습니다.
- 모노레포의 내부 패키지 사용으로 다음과 같은 이점을 얻었습니다.
- FrontEnd/BackEnd 간 타입 불일치 문제를 예방하고 인터페이스 변경에 신속하고 정확하게 대응할 수 있도록 공통 타입을 사용합니다.
- 공통 컴포넌트를 패키지화하여 컴포넌트의 재사용성을 높입니다.
- configuration 파일 재사용으로 초기 세팅 비용을 줄입니다.
- Turborepo의 캐싱 기능을 Docker 이미지 빌드에 적용하여 빌드 시간을 단축했습니다.
- TurboRepo 설정 by 서지원
- 모노레포의 내부 패키지 사용으로 다음과 같은 이점을 얻었습니다.
- 보다 더 효율적인 개발과 QA 방식을 위한 테스트 코드 작성에 대해 고민했습니다.
- TMap API를 사용하여 사용자와 상호작용할 수 있는 지도 페이지를 개발했습니다.
- 좋은 사용자 경험을 주기 위해 Vector와 Raster 지도 SDK를 개발자 도구 성능 탭으로 비교해 보고, 선택한 과정을 담았습니다.
- Tmap API로 지도 렌더링 by 이지원
- 폼 작성 시 장소 선택 TMap API 적용하기 by 이태림
- 느림의 미학 (feat. TMap 지도 성능 측정) by 이지원, 이태림
- socket.io를 기반으로 사용자들이 실시간으로 대화를 나눌 수 있는 채팅 기능을 개발했습니다.
- FE에서 채팅 구현 중 겪은 여러 문제 상황과 해결 과정에 대하여 기록하였습니다.
- FE 채팅 기능 구현과 트러블슈팅 by 맹지승
- 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 |
- upstream에서는
main
브랜치와develop
브랜치만 관리한다. - 개발 feature는
develop
브랜치에서 따서 작업 후develop
브랜치로 머지한다. - 협업으로 인한 추가 브랜치가 필요한 경우 upstream에서
develop
기준feature
브랜치를 생성하여 2와 같은 방식으로 작업한다.
$ npm install <package-name> -w=backend
$ npm install <package-name> -w=frontend
$ 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 |
---|---|---|---|---|
이태림 | 이지원 | 맹지승 | 임동혁 | 서지원 |