Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/boostcampwm2023/web17_morak

Morak | 네이버 부스트캠프 내 모각코 모집/관리 플랫폼 🧑🏻‍💻👩🏻‍💻👨🏻‍💻
https://github.com/boostcampwm2023/web17_morak

backend frontend nestjs react typescript

Last synced: about 1 month ago
JSON representation

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

Host: GitHub
URL: https://github.com/boostcampwm2023/web17_morak
Owner: boostcampwm2023
Created: 2023-11-06T01:37:38.000Z (about 1 year ago)
Default Branch: develop
Last Pushed: 2024-02-07T03:44:44.000Z (11 months ago)
Last Synced: 2024-04-14T03:08:32.888Z (9 months ago)
Topics: backend, frontend, nestjs, react, typescript
Language: TypeScript
Homepage: https://morak.io
Size: 5.91 MB
Stars: 47
Watchers: 3
Forks: 5
Open Issues: 25
Metadata Files:
- Readme: README.md
- Codeowners: .github/CODEOWNERS

Awesome Lists containing this project

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

https://morak.io

🎤 최종 발표

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

# 모락 | Morak

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

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

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

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

## 기능 설명

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

모임 글 리스트 캡처 화면

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

달력 뷰 캡처 화면

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

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

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

## 🧑‍💻 기술적 도전

### **Monorepo With Turborepo**

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

### **Test Code**

- 보다 더 효율적인 개발과 QA 방식을 위한 테스트 코드 작성에 대해 고민했습니다.
- [UI 테스트를 할 수 있는 방법은? (시각적 회귀 테스트)](https://www.notion.so/UI-ee39d501d6b6498a9583859cc64e8a38?pvs=21) by 이태림

### **지도**

- TMap API를 사용하여 사용자와 상호작용할 수 있는 지도 페이지를 개발했습니다.
- 좋은 사용자 경험을 주기 위해 Vector와 Raster 지도 SDK를 개발자 도구 성능 탭으로 비교해 보고, 선택한 과정을 담았습니다.
- [Tmap API로 지도 렌더링](https://www.notion.so/TMap-API-06c9e324d093465ea8da56777d338aaa?pvs=21) by 이지원
- [폼 작성 시 장소 선택 TMap API 적용하기](https://www.notion.so/TMAP-API-1645d224b33d4f968ee81dca843bd8ae?pvs=21) by 이태림
- [느림의 미학 (feat. TMap 지도 성능 측정)](https://www.notion.so/TMap-063aa40efb0e4d0a95c61a990a188f45?pvs=21) by 이지원, 이태림

### **채팅**

- socket.io를 기반으로 사용자들이 실시간으로 대화를 나눌 수 있는 채팅 기능을 개발했습니다.
- FE에서 채팅 구현 중 겪은 여러 문제 상황과 해결 과정에 대하여 기록하였습니다.
- [FE 채팅 기능 구현과 트러블슈팅](https://www.notion.so/9c866a10d5754c81bf86850a881486ef?pvs=21) by 맹지승

### **OAuth2.0과 인증/인가**

- NestJS에서 소셜 로그인에 대한 인증과 사용자 정보를 인지하여 인가 처리를 기록하였습니다.
- 로그인을 통해 해당 사용자의 정보를 추출해내어 사용하는 방법을 기록하였습니다.
- [지금 접속한 당신 정체가 무엇이오?](https://www.notion.so/67f910a8f32140ccb43bf9d9622c8b84?pvs=21) by 임동혁
- [인증(Authentication)과 인가(Authorization)](https://www.notion.so/Cookie-ea27c771aeef406aadc02709f587c99e?pvs=21) by 임동혁

### 기타

- [assets는 왜, 어디에서 관리해야 할까요? public? src?](https://www.notion.so/assets-9b3e50f913cb4fdbabce2c0b5a06851f?pvs=21) by 이태림
- [react-query와 컴포넌트 props 전달](https://www.notion.so/a86d59c0a6924b27b764e589df34af41?pvs=21) by 맹지승
- [NestJS 빡치는 라우팅 시스템에 대해 알아보자](https://www.notion.so/f3d7e301dd5040d2950f423ca211ecae?pvs=21) by 임동혁
- [Jest 경로를 일일히 지정해야 한다고?](https://www.notion.so/433965335b5845878257813e3e733cac?pvs=21) by 임동혁
- [Jotai vs. Zustand](https://www.notion.so/Jotai-vs-Zustand-e0837b29d53e4fe2a3793dee1a6487c9?pvs=21) by 맹지승
- [놀랍고 재미있는 접근성 개선](https://www.notion.so/5e26158dc5254aba9b6bff2d706be07d?pvs=21) by 맹지승
- [모바일에서 폼 입력 시 화면이 확대되는 현상… 접근성과 관련 있다고?](https://www.notion.so/6f3bad0053f04f84afed52d562d78be6?pvs=21) by 이태림
- [Nginx 설정](https://www.notion.so/dd2c18bdc779419b8928424f1a97048e?pvs=21) by 서지원
- [Docker Registry 설정](https://www.notion.so/61b9b8ab5f1440eeb738248832cfaaba?pvs=21) by 서지원

> 이 외에도 [모락 팀의 개발 일지](https://www.notion.so/ttaerrim/be56a4fcbd3f4fe9a6f29525b492ab0c?pvs=4)를 구경해 보세요!

## 기술 스택

| 분류 | 스택 |
| :---------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **Common** | |
| **FrontEnd** | |
| **BackEnd** | |
| **Infra** | |
| **Collaboration** | |

## 아키텍처 구조도

![image](https://github.com/boostcampwm2023/web17_morak/assets/43867711/adf6c3ca-7fff-4cf0-a7ae-4ae79ac1e28f)

## 브랜치 전략

![image](https://github.com/boostcampwm2023/web17_morak/assets/43867711/ffc35dc4-7c48-4526-b14e-325521d007d9)

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

## 🧑🏻‍💻 `command`

### package install

```bash
$ npm install -w=backend
$ npm install -w=frontend
```

### run

```bash
$ 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 -w={workspace}` 형태로 입력하여 실행하면 됩니다.
- turbo scripts를 이용하고 싶을 경우 `turbo.json`에 추가가 필요합니다.

## 팀원