/web34-moheyum

Primary LanguageTypeScript

logo

마크다운을 지원하는 SNS
모헤윰으로 당신의 일상을 공유해보세요.

기능

현재 임시 영상이며 영상 추후 추가 예정입니다.

https://youtu.be/1vs4SEbdDDM
이메일 인증을 통한 회원가입, 비밀번호 찾기 무한 스크롤을 통한 뉴스피드 탐색
마크다운 형식의 게시글 작성 유저 프로필 페이지 및 팔로우
  • 이메일 인증을 통한 회원가입, 비밀번호 찾기
  • 무한 스크롤을 통한 뉴스피드 탐색
  • 마크다운 형식의 게시글 작성
    • 드래그 앤 드랍을 통한 이미지 업로드
    • 팔로워/팔로잉 유저 멘션
    • 게시글에 대한 답글 작성 및 탐색
  • 프로필 페이지

프로젝트 구조 및 사용 기술

image

Category Tech Stack
FE Next.js React Recoil Emotion
BE&DB Nest Mongoose MongoDB Redis
COMMON TypeScript YarnBerry
INFRA NCloud Github Actions PM2 NGINX
TOOL Figma

도전

1. 별도의 라이브러리 없이 마크다운 에디터 구현

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

2. Next.js를 이용한 SSR 도입

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

3. MongoDB 쿼리 최적화

  • B+ tree index 의 특성을 고려한 ESR Rules 인덱싱
  • 병렬 쿼리 및 Set을 이용한 중복 제거

4. Redis를 이용한 캐싱

  • (예정)

5. API 서버 성능 수치화

  • (예정)
  • <>를 통한 스트레스 테스트
  • <>를 통한 벤치마크

6. Auto-Scaling

  • (예정)

멤버

J024_김남효 J097_백성익 J142_이선민 J149_이우재
namhyo01 906bc906 leesunmin1231 prayinforrain
Backend Backend Frontend Frontend

문서