📔 단디

다가오는 새해, 부푼 마음으로 다이어리를 고르고 있는 당신! 마음과는 다르게 갈수록 비어가는 다이어리가 고민이지 않았나요? 작심삼일은 그만! 단디와 함께 매일매일 꾸준히 하루를 기억해봐요 🌱

🔗 지금 바로 단디 사용하기

📖 문서

📘노션   |   🎨피그마   |   ✏️위키   |   💁발표자료

🚀 프로젝트 소개

홈

• 일기 작성 기록과 그날의 기분을 잔디로 확인하고, 사용자가 선택한 기간 내의 일기에 저장된 감정 정보를 확인할 수 있어요.
• 친구 목록을 조회하거나 다른 사용자에게 친구 신청을 보내는 등 친구를 관리할 수 있어요.
• 나 혹은 친구가 작성했던 모든 일기 목록을 보여드려요.

피드

• 친구들이 쓴 일기를 최신 순으로 보여드려요.
• 친구들의 일기에 이모지로 반응을 남기고, 각 일기마다 어떤 친구가 어떤 반응을 남겼는지 확인할 수 있어요.

일기 작성

• 오늘의 일기를 작성할 수 있어요.
• 오늘 하루를 요약하는 제목과 하루의 기억을 담은 이미지를 함께 저장하고, 오늘의 감정을 나타내는 이모지와 키워드로 더 풍부하게 하루를 기록하실 수 있어요.

내 일기

• 내가 기록한 일기를 하루, 일주일, 한 달 단위로 볼 수 있어요.
• 선택한 단위마다 가장 효과적인 방법으로 일기를 보실 수 있도록 준비했어요.
• 이전에 쓴 일기 내용이 궁금할 때는 제목, 일기 내용이나 키워드로 검색해보세요.

💻 기술적 도전

[FE] API 요청 최적화

불필요한 서버 요청 비용을 줄이기 위해서 API 요청 최적화에 대해 고민했고, 이후 유지보수에서 어려움을 겪지 않도록 어떤 방식으로 API 요청을 최적화해야하는지 고민했습니다.

저희 팀은 API 응답 데이터 수정해 요청을 최소화하고 디바운싱, Tanstack Query staleTime 3가지 키워드로 해당 문제에 접근했고 기존 요청들을 평균 66% 수준으로 감소시킬 수 있었습니다.

• 디바운싱과 쓰로틀링
• TanStack Query(React Query) API 요청 줄이기

[BE] 무중단 배포

서버 이전 과정에서 이전 서버와 동일하게 프로그램을 설치/세팅하는 과정에 번거로움을 느껴 도커를 도입했습니다. 도커 도입 후 배포 과정에서 불가피하게 5분의 다운 타임이 발생했는데 해당 문제 해결을 어떤 방식으로 배포를 진행해야하는지 고민했습니다.

해당 문제 해결을 위해서 블루-그린 방식으로 무중단 배포를 도입하기로 결정했고, 다운 타임을 5분 -> 0.3초로 줄일 수 있었습니다.

• 무중단 배포 도입기
• Zero-Downtime을 위한 노력

[BE] 엘라스틱서치 적용기

저희 서비스의 목표 중 하나는 검색을 통해 사용자가 지난을 쉽게 돌아보게 하는 것입니다. 일기 검색을 위해 최대 10,000자의 일기 본문에 검색 기능을 적용해야했는데, MySQL만을 사용했을 때 Like문의 느린 조회 속도와 Full Text Index의 느린 삽입 속도를 우려해 다른 방식을 고민했습니다.

저희 팀은 역색인을 통한 빠른 검색을 지원하는 엘라스틱서치를 도입해 10초간 500명의 사용자가 검색을 사용하는 시나리오에서 요청 시간을 약 50% 수준으로 감소시킬 수 있었습니다.

• 검색 기능 개선기(2) - Elasticsearch에서 Like문 구현하기
• 검색 성능 개선기(3) - CDC를 못하면 redis로 라도…

📚 단디 개발 일지

• [Elasticsearch | 박효종] DB 데이터를 가져오는데 할게 왜이리 많죠?
• [CORS | 최수현] 알고보면 좋은 놈 CORS
• [React Portal | 김윤주] 리액트로 닥터스트레인지가 되는 법
• [Emotion & Tailwind CSS | 이도훈] Emotion과 Tailwind CSS
• [Query Invalidation | 서종현] 이건 무효야! Query Invalidation

⚙️ 프로젝트 구조

🚀 인프라 구조

👨‍👨‍👧‍👧 팀원

BE	BE	FE	FE	FE
박효종	최수현	김윤주	서종현	이도훈