1. 제목 : [팀 ID] 프로젝트 명 (팀의 특성을 드러내는 썸네일 이미지 활용을 권장합니다.)
2. 기능 시연 영상을 포함한 주요 기능 안내
3. 활용 기술 및 팀, 개인의 도전 과제

2. GitHub에 작성한 프로젝트 소개와 내용이 같아도 되나요?
같아도 무방하지만 노션에는 프로젝트의 개요와 기술적인 도전을 한 눈에 볼 수 있도록 요약하고,
자세한 내용은 GitHub이나 이외 외부 링크를 첨부하는 것을 권장합니다.
3. 기능 시연 영상은 반드시 포함되어야 하나요?
아니요. 팀에서 판단하여 포함하거나, 포함하지 않아도 좋습니다.
4. 아직 기능 구현이 덜 되었는데 영상은 나중에 추가해도 되나요?
네, 가능합니다. 영상 이외 프로젝트 소개 내용 역시 수정하거나 보완할 수 있습니다.

---

1. html 을 좀 떼고 마크다운 표준으로?
2. 주요 기능 안내가 없음 (동영상 링크로 퉁 친 느낌)
1. 동영상은 가능하면 임베디드 해야됨
2. 데모 영상과 별개로 기능별 영상으로 나눠야 함
3. 팀, 개인의 도전 과제 없음
1. 팀원 소개를 더 세분화하고 여기에 개인별 어떤 도전 과제를 겪었는지 추가
4. 특징으로 내세우기 뭐한 것들이 있음
1. MongoDB 내용 좀 이상함
2. SFTP 빼도 될듯
5. 기술 스택
1. SFTP는 기술 스택이라고 말하면 안됨 (사용한 프로토콜임)
2. 분류를 좀 해야될 수도
3. 채택 이유도 적어야 하나?

---

<div align="center">
<div>
<img src="https://i.imgur.com/3nQKUuw.png" width="200" >
<br>
<img src="https://i.imgur.com/dmdTV1Q.png" width="300">
</div>
<h2>
마크다운을 지원하는 SNS <br> 모헤윰으로 당신의 일상을 공유해보세요
</h2>
</div>
<div align="center">
<img src="https://img.shields.io/badge/Next.js-13.0.3-000000?logo=next.js&logoColor=black&style=for-the-badge">
<img src="https://img.shields.io/badge/React-18.2.0-61DAFB?logo=react&style=logo&style=for-the-badge">
<img src="https://img.shields.io/badge/NestJS-9.1.4-E0234E?logo=nestjs&style=for-the-badge">
<img src="https://img.shields.io/badge/Recoil-0.7.6-blue&style=for-the-badge">
<img src="https://img.shields.io/badge/Mongoose-9.2.1-000000&style=for-the-badge">
<img src="https://img.shields.io/badge/MongoDB-6.0.2-47A248?logo=mongodb&style=for-the-badge">
<img src="https://img.shields.io/badge/Redis-7.0.5-DC382D?logo=redis&style=for-the-badge">
<img src="https://img.shields.io/badge/TypeScript-4.8.4-3178C6?logo=typescript&style=for-the-badge">
</div>
<div align="center">
<img src="https://img.shields.io/badge/Emotion-11.10.5-yellow?style=for-the-badge">
<img src="https://img.shields.io/badge/Yarn--Berry-3.2.4-2C8EBB?logo=yarn&style=for-the-badge">
<img src="https://img.shields.io/badge/Naver Cloud Platform-green?logo=naver&style=for-the-badge">
<img src="https://img.shields.io/badge/GitHub Actions--2088FF?logo=github actions&style=for-the-badge">
<img src="https://img.shields.io/badge/PM2--2B037A?logo=pm2&style=for-the-badge">
<img src="https://img.shields.io/badge/NGINX--009639?logo=nginx&style=for-the-badge">
<img src="https://img.shields.io/badge/Figma--F24E1E?logo=figma&style=for-the-badge">
<img src="https://img.shields.io/badge/SFTP--blue?&style=for-the-badge">
</div>

<div align="center">
<a href="https://polarlsm.notion.site/Moheyum-4c54f7ce6bc348bd84121578d4079b50">노션</a> |
<a href="https://www.figma.com/file/bUlrkKtjfXPfHvdIvLuXvc/Moheyum?node-id=158%3A1655&t=U1UrufRdVG1ntwB2-0">피그마</a> |
<a href="https://polarlsm.notion.site/TIL-07a41dada35841aeb396e9a73c14ff4e">학습 공유</a> |
<a href="https://github.com/orgs/boostcampwm-2022/projects/68/views/6">백로그</a> |
<a href="https://github.com/boostcampwm-2022/web34-moheyum/wiki">위키</a>
</div>

## 배포 주소
- 정식 버전
- 개발 버전(dev 브랜치): http://dev.moheyum.ga/

### 전체 서비스 구조
## 프로젝트 구체적인 소개
> 모헤윰은 마크다운 에디터를 지원하는 Public한 SNS 서비스 입니다.

- 마크다운으로 간단한 서식을 적용할 수 있어요.
- 각 게시글에 대한 답글을 남길 수 있어요.
- 내가 팔로우하는 사람들의 글을 뉴스피드로 확인할 수 있어요.
- 내 글을 공유하고 싶은 사람들을 멘션해보세요.
- 멘션을 받거나 답글이 달리면 알림이 와요
- 내가 보고싶은 글을 검색할 수 있어요.

## 데모 영상

**[시연 영상](https://youtu.be/1vs4SEbdDDM)**

## 프로젝트 특징
> Recorder는 모헤윰을 개발하면서 아래와 같은 도전들을 했어요.

- Package Manager로 Yarn Berry 사용
- 기존 npm이 의존성 패키지를 관리하는 방식에 불편함을 느껴 새로운 Package Manager를 사용해보고자 했어요.
- 후보로 거론된 Yarn과 pnpm에 대한 조사 후 Yarn berry를 사용하기로 정했어요. [학습 정리](https://polarlsm.notion.site/npm-vs-yarn-vs-pnpm-19e27435675c48449f6e33db147bb3b4)
- 도입 후 패키지 파일 수가 눈에 띄게 줄어 관리하기 수월해졌고, 디스크 사용량 또한 절약할 수 있었어요.

- Next.js를 이용한 SSR 도입
- 내용이 자주 변하지 않는 일부 페이지에 SSR 기능을 도입했어요.
- 글 읽기 페이지는 서비스를 처음 접한 유저들도 볼 수 있는 만큼 SSR을 통해 성능적인 이점을 챙길 수 있었어요.

- Markdown Editor 구현
- 사용자가 기본적인 서식을 적용할 수 있기를 원했어요.
- 직접 에디터를 구현하고, 입력한 내용을 Markdown Parser가 렌더링해줘요.
- 멘션 추천 등 원하는 기능과 UI를 추가할 수 있었어요.

<details>
<summary>SFTP를 이용해 환경변수 파일 관리</summary><br>

**환경변수 파일**을 팀원끼리만 공유해야하고, 동기화를 해주어야 한다고 생각하였습니다.
많은 방법중에 저희는 SFTP를 선택하여 환경변수 파일 뿐만 아닌 서버 계정 등 민감한 정보를 공유하였습니다
- vscode Extension의 SFTP가 있어 팀원 모두가 확장 프로그램을 통해 쉽게 접속할 수 있는 장점이 있었습니다
- SFTP를 개발서버에도 연동(?)을 해 환경변수로서 사용이 됩니다. => 이부분 성익님이 보강해주실수 있으실까요?
</details>

<details>
<summary>MongoDB를 사용함으로서 W/R성능 향상</summary><br>

SNS로서 많은 글이 써지고, 읽게 될 것이라는 판단이 들어 MongoDB를 선택하였습니다
- **Mongoose**를 ORM으로 사용해 개발에 편리성을 챙겼습니다
- **Schema-less** 구조여서 피쳐를 줄이거나 추가할 때 유연하게 필드를 추가 가능하였습니다

</details>

## 팀원 소개
<div align="center">

| J024_김남효 | J097_백성익 | J142_이선민 | J149_이우재 |
|:---:|:---:|:---:|:---:|
| <img src="https://user-images.githubusercontent.com/34156840/205316100-a536737c-6ace-48dc-9aac-db4ad38987a5.png" height="150" width="150"> | <img src="https://user-images.githubusercontent.com/34156840/205315809-53734bff-f9fe-4fd6-9f96-6df49c561c2d.png" height="150" width="150"> | <img src="https://i.imgur.com/ZWoDvw3.jpg" height="150" width="150"> | <img src="https://i.imgur.com/tYBm2VJ.jpg" height="150" width="150"> |
| [namhyo01](https://github.com/namhyo01) | [906bc906](https://github.com/906bc906) | [leesunmin1231](https://github.com/leesunmin1231) | [prayinforrain](https://github.com/prayinforrain) |
| Backend | Backend | Frontend | Frontend |

</div>