인플루언서와 팬이 소통하는 커뮤니티
인플루언서와 실시간으로 소통을 해보세요!
인플루언서라면 팬들과 일상을 공유하며 친밀감을 올릴 수 있어요. 😊
SNS 서비스에 공통적으로 있는 포스트, 피드, 실시간 채팅, 검색 기능은
웹 서비스에서 흔히 사용되어 이번 기회에 학습하고 구현해보면 추후에 도움이
될 것 같아 이 주제를 선택하게 되었어요. 😎
-
포스트 및 코멘트 실시간 업데이트
-
피드
-
채팅
📢 더 자세히 확인해보세요 → 여기로!
📢 자세한 내용은 여기를 봐주세요
선언적으로 뷰 표현 가능. 뷰를 컴포넌트 단위로 관리.
직관적인 CSS 프로퍼티 사용. CSS 클래스 네임 고려 불필요.
비동기 상태 관리 라이브러리로써 비동기 상태 관리의 복잡성 낮춤.
정해진 구조, 데코레이터로 효율적으로 개발.
데이터가 대부분 연관, 자주 변경 일어나서 RDBMS 사용.
namespace와 room 기능을 이용한 빠르게 개발.
PM2: 프로세스 종료 시 재시작, 로그, cluster
Grafana: 모니터링을 위한 시각화
Prometheus: 서버, 노드 어플리케이션 별 metric 수집.
재사용성을 생각한 컴포넌트 설계
코드의 중복을 막기 위해 함수로 분리하는 것처럼, 요소의 중복 또한 컴포넌트로 분리해야 된다고 생각합니다. 그리고 컴포넌트로 분리할 때 가장 중요한 점은 그 컴포넌트의 목적을 명확하게 하고, 다양한 상황에 사용할 수 있도록 만드는 것이라고 생각했습니다.
무한 스크롤 및 무한 슬라이더
무한 스크롤과 무한 슬라이더를 만들면서, 동시에 확장성과 최적화를 고민했습니다. 재사용을 위해 필요한 로직을 커스텀 훅으로 분리하고, 최적화를 위해 컴포넌트의 구조와 동작 자체를 다시 설계하는 등 많은 기술적 고민을 했습니다.
그 외 고민들
모니터링
테스트가 처음이라서 최적화할 지표를 찾는 것이 고민이었습니다. 그래서 실시간으로 변하는 그래프를 보면 빠르게 찾을 것 같아서 Grafana와 Prometheus를 도입했습니다. Prometheus 서버와 exporter 등의 개념을 이해하고 적용했고, 테스트를 하면서 CPU 사용률과 이벤트 루프 시간을 개선하기로 결정했습니다.
채팅과 알림
채팅뿐만 아니라 포스트와 댓글 업데이트를 소켓으로 새로고침 없이 자동 업데이트하기 위해 chat, post, page, notice 4개의 namespace와 각 요소 ID를 room으로 하여 관리하였습니다.
처음에는 단순 DB 저장만 있던 과정이 API와 알림, 소켓을 통한 update 등 과정이 복잡해지면서 이해를 위해 정리하고, 그림을 그렸습니다.
댓글, 포스트 생성 Flow
사용자가 댓글 작성 → Clova Sentiment로 감정 분석 후 색깔 생성 → DB에 저장 → socket 해당 페이지에 있는 사람들에게 Comment Update
사용자가 포스트 작성 → PaPago로 번역, ncloud storge에 업로드 → DB에 저장 → socket 해당 페이지에 있는 사람들에게 Post emit, 구독 중인 사용자에게 Notice emit
DB 성능 측정
NoSQL인 MongoDB를 그나마 관계가 떨어져 있는 채팅 DB에만 적용해 봤는데, MySQL과 읽기와 쓰기 성능 차이가 별로 없었습니다.
프로젝트를 나중에 더 잘 기억하고, 협업 시 발생한 어려움을 해결하기 위해 특별히 신경 쓴 페이지들이 있습니다.
데일리 회고📄 : 매주 KPT 방법으로 회고하는 것과 별개로, 매일 일기장처럼 개발하면서 느낀 점을 기록했습니다. 작성하면서 다른 팀원들 생각도 알 수 있어서 일정을 계획할 때 참고되었습니다.
데일리 스크럼📄 : 매일 공유할 내용, 전날 작업한 내용을 공유하면서 상호 간 작업 이해도를 높일 수 있었습니다. 높은 이해도를 바탕으로 주별 목표 달성을 위한 세부 계획의 우선순위를 설정해서, 프로젝트가 끝날 때까지 초기의 계획대로 진행할 수 있었습니다.
프-백 콜센터📄 : 슬랙에서 매일 서로 단체로 채팅을 주고받다 보면 서로 요청했던 세세한 요구사항이 뒤로 밀려 잊히고는 했습니다. 그래서 소통의 창구로 콜센터라는 노션 게시판을 만들어 Jira에 넣기에는 너무 작은 요구사항들을 체크리스트로 만들어 관리했습니다. 😊
기본적으로 개발 계획에 대한 다양한 view를 제공하고, 현업에서도 자주 쓰이는 툴 사용 방법을 익히고자 Jira로 프로젝트 일정을 관리했습니다.
타임라인 : 이슈들을 한눈에 보고, 에픽을 고려하면서 일정 조율을 했습니다.
스프린트, 백로그 : 매주 월요일 스프린트 회의를 하면서 백로그에서 이번 스프린트에 할 이슈를 선택하고, 개발할 이슈만 있는 백로그나 보드를 참고해서 개발했습니다.
스프린트가 완료되어서 지금은 비어있지만, 스프린트 세션에서 올라온 이슈를 완료 처리 하면서 개발했습니다.
깃허브와 연동 : 커밋과 PR에 이슈 번호를 적으면 이슈 정보에서 볼 수 있고, 코드 탭에서 머지가 되지 않은 PR을 빠르게 확인할 수 있었습니다.
백엔드는 2주 차 이후로 코딩 컨벤션 등을 세우고 지키기 위해 오프라인으로 페어프로그래밍을 했습니다. 온라인으로는 Vscode의 live share을 사용해서 실시간으로 작업을 공유하면서 개발했습니다. 페어 프로그래밍으로 진행을 하니 모르거나 부족한 부분을 서로 보완하고 개발 시각을 넓힐 수 있었습니다. 😊