마크다운을 지원하는 SNS
모헤윰으로 당신의 일상을 공유해보세요.
현재 임시 영상이며 영상 추후 추가 예정입니다.
https://youtu.be/1vs4SEbdDDM
|
|
![](https://camo.githubusercontent.com/a7b9a07fbb2991b8c13a53f7ff98ce4ecdb0764587ec9950ec75e43dc1d59ea9/68747470733a2f2f73332e75732d776573742d322e616d617a6f6e6177732e636f6d2f7365637572652e6e6f74696f6e2d7374617469632e636f6d2f32333062643532382d393562382d343335342d386539352d3130316134356533396562622f75706c6f61642e6769663f582d416d7a2d416c676f726974686d3d415753342d484d41432d53484132353626582d416d7a2d436f6e74656e742d5368613235363d554e5349474e45442d5041594c4f414426582d416d7a2d43726564656e7469616c3d414b49415437334c324734354549505433583435253246323032323132303325324675732d776573742d322532467333253246617773345f7265717565737426582d416d7a2d446174653d3230323231323033543039343435395a26582d416d7a2d457870697265733d383634303026582d416d7a2d5369676e61747572653d6564323537363061343537376134363435643031356662363539633134393939343138326531353039383934663130363736623835306438626564366663393626582d416d7a2d5369676e6564486561646572733d686f737426726573706f6e73652d636f6e74656e742d646973706f736974696f6e3d66696c656e616d6525334425323275706c6f61642e67696625323226782d69643d4765744f626a656374) |
![](https://camo.githubusercontent.com/a7b9a07fbb2991b8c13a53f7ff98ce4ecdb0764587ec9950ec75e43dc1d59ea9/68747470733a2f2f73332e75732d776573742d322e616d617a6f6e6177732e636f6d2f7365637572652e6e6f74696f6e2d7374617469632e636f6d2f32333062643532382d393562382d343335342d386539352d3130316134356533396562622f75706c6f61642e6769663f582d416d7a2d416c676f726974686d3d415753342d484d41432d53484132353626582d416d7a2d436f6e74656e742d5368613235363d554e5349474e45442d5041594c4f414426582d416d7a2d43726564656e7469616c3d414b49415437334c324734354549505433583435253246323032323132303325324675732d776573742d322532467333253246617773345f7265717565737426582d416d7a2d446174653d3230323231323033543039343435395a26582d416d7a2d457870697265733d383634303026582d416d7a2d5369676e61747572653d6564323537363061343537376134363435643031356662363539633134393939343138326531353039383934663130363736623835306438626564366663393626582d416d7a2d5369676e6564486561646572733d686f737426726573706f6e73652d636f6e74656e742d646973706f736974696f6e3d66696c656e616d6525334425323275706c6f61642e67696625323226782d69643d4765744f626a656374) |
이메일 인증을 통한 회원가입, 비밀번호 찾기 |
무한 스크롤을 통한 뉴스피드 탐색 |
![](https://camo.githubusercontent.com/a7b9a07fbb2991b8c13a53f7ff98ce4ecdb0764587ec9950ec75e43dc1d59ea9/68747470733a2f2f73332e75732d776573742d322e616d617a6f6e6177732e636f6d2f7365637572652e6e6f74696f6e2d7374617469632e636f6d2f32333062643532382d393562382d343335342d386539352d3130316134356533396562622f75706c6f61642e6769663f582d416d7a2d416c676f726974686d3d415753342d484d41432d53484132353626582d416d7a2d436f6e74656e742d5368613235363d554e5349474e45442d5041594c4f414426582d416d7a2d43726564656e7469616c3d414b49415437334c324734354549505433583435253246323032323132303325324675732d776573742d322532467333253246617773345f7265717565737426582d416d7a2d446174653d3230323231323033543039343435395a26582d416d7a2d457870697265733d383634303026582d416d7a2d5369676e61747572653d6564323537363061343537376134363435643031356662363539633134393939343138326531353039383934663130363736623835306438626564366663393626582d416d7a2d5369676e6564486561646572733d686f737426726573706f6e73652d636f6e74656e742d646973706f736974696f6e3d66696c656e616d6525334425323275706c6f61642e67696625323226782d69643d4765744f626a656374) |
![](https://camo.githubusercontent.com/a7b9a07fbb2991b8c13a53f7ff98ce4ecdb0764587ec9950ec75e43dc1d59ea9/68747470733a2f2f73332e75732d776573742d322e616d617a6f6e6177732e636f6d2f7365637572652e6e6f74696f6e2d7374617469632e636f6d2f32333062643532382d393562382d343335342d386539352d3130316134356533396562622f75706c6f61642e6769663f582d416d7a2d416c676f726974686d3d415753342d484d41432d53484132353626582d416d7a2d436f6e74656e742d5368613235363d554e5349474e45442d5041594c4f414426582d416d7a2d43726564656e7469616c3d414b49415437334c324734354549505433583435253246323032323132303325324675732d776573742d322532467333253246617773345f7265717565737426582d416d7a2d446174653d3230323231323033543039343435395a26582d416d7a2d457870697265733d383634303026582d416d7a2d5369676e61747572653d6564323537363061343537376134363435643031356662363539633134393939343138326531353039383934663130363736623835306438626564366663393626582d416d7a2d5369676e6564486561646572733d686f737426726573706f6e73652d636f6e74656e742d646973706f736974696f6e3d66696c656e616d6525334425323275706c6f61642e67696625323226782d69643d4765744f626a656374) |
마크다운 형식의 게시글 작성 |
유저 프로필 페이지 및 팔로우 |
- 이메일 인증을 통한 회원가입, 비밀번호 찾기
- 무한 스크롤을 통한 뉴스피드 탐색
- 마크다운 형식의 게시글 작성
- 드래그 앤 드랍을 통한 이미지 업로드
- 팔로워/팔로잉 유저 멘션
- 게시글에 대한 답글 작성 및 탐색
- 프로필 페이지
![image](https://user-images.githubusercontent.com/57206558/205439322-ca839964-4898-4438-82f1-37d5fdd7858f.png)
Category |
Tech Stack |
FE |
![Emotion](https://camo.githubusercontent.com/1553abc3c491a5edc38fbff55aef487178fbd1a2b2f811359f1bf2fa108f48d1/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f456d6f74696f6e2d79656c6c6f77) |
BE&DB |
![Redis](https://camo.githubusercontent.com/374221fdb66234889d759801ef0c6bb4d734a7f12278574d7b07d31e967c9771/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f52656469732d4443333832443f6c6f676f3d7265646973266c6f676f436f6c6f723d7768697465) |
COMMON |
![YarnBerry](https://camo.githubusercontent.com/b3c799596cdfb465197848ff69215bb9a4ee6d5b0ac1507696490b38396750da/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f5961726e2d2d42657272792d3243384542423f6c6f676f3d7961726e266c6f676f436f6c6f723d7768697465) |
INFRA |
![NGINX](https://camo.githubusercontent.com/40963bbc7e97a01d5cccfef0484ca20238466080e0141f05f8492b655e3d8af8/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4e47494e582d3030393633393f6c6f676f3d6e67696e78) |
TOOL |
![Figma](https://camo.githubusercontent.com/44f4bae67eee25de64aa360d6ee9ef8cc248aeec4a97b981500123c165a94fd7/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4669676d612d4632344531453f6c6f676f3d6669676d61266c6f676f436f6c6f723d7768697465) |
1. 별도의 라이브러리 없이 마크다운 에디터 구현
- 사용자가 기본적인 서식을 적용할 수 있기를 원했어요.
- 직접 에디터를 구현하고, 입력한 내용을 Markdown Parser가 렌더링해줘요.
- 멘션 추천 등 원하는 기능과 UI를 추가할 수 있었어요.
- 내용이 자주 변하지 않는 일부 페이지에 SSR 기능을 도입했어요.
- 글 읽기 페이지는 서비스를 처음 접한 유저들도 볼 수 있는 만큼 SSR을 통해 성능적인 이점을 챙길 수 있었어요.
- B+ tree index 의 특성을 고려한 ESR Rules 인덱싱
- 병렬 쿼리 및 Set을 이용한 중복 제거
- (예정)
- <>를 통한 스트레스 테스트
- <>를 통한 벤치마크