<aside> 🏁 실전 프로젝트 6주차에 가장 집중해주셔야 할 것은 “최종 발표회 준비”입니다. 최종 발표에는 6주간 진행했던 프로젝트 개발 과정을 엔지니어답게 설명할 수 있어야합니다. 아래 항목들을 바탕으로 기술적으로 더욱 매력적인 최종 발표를 준비해봅니다.

</aside>

• 우리 프로젝트에서 기술적으로 강점을 삼을 만할 항목을 정리해 주세요. (최종 발표 및 면접에서 프로젝트를 진행할 때 어떤 도전을 했는지 말할 수 있는 좋은 소스가 됩니다)

  • [ FE ] : Tailwind CSS 프레임워크
  • [ FE ] : 이미지 압축, 다중이미지, 저장 전 추가 등록, 삭제 기능 구현
  • [ FE ] : 게시글 작성 시 태그 검색 / 태그 등록 / 삭제
  • [ FE ] : Chart.js 를 활용한 데이터 시각화
  • [ FE ] : local state 및 Recoil 전역 state 관리방안
  • [ FE ] : 무한스크롤
  • [ FE ] : SSE 실시간 알림
  • [ FE ] : WebSocket을 활용한 실시간 채팅
  • [ FE ] : 액세스 토큰 만료 시 재발급 로직 (AXIOS interceptor)
  • [ BE ] : github action & codedeploy를 활용한 CI/CD
  • [ BE ] : Scheduler를 활용한 Open Api data 수집 (약 12만건 / 일 1만 4천건 수집)
  • [ BE ] : Native Query를 활용한 data 통계
  • [ BE ] : QueryDsl을 사용한 검색 기능
  • [ BE ] : 무한스크롤
  • [ BE ] : WebSocket을 활용한 실시간 채팅
  • [ BE ] : SSE를 활용한 실시간 알람
  • [ BE ] : Redis
  • [ BE ] : Sentry를 활용한 에러 로그 확인 및 공유
  • [ BE ] : nginx 무중단배포

• 프로젝트에 적용했던 핵심 기술 목록을 작성해 주시고, 각 기술을 도입하게된 의사결정 과정을 정리해주세요.

  • 남병관 멘토님 기술 제언 참고

  구분	요구사항	선택지	핵심 기술을 선택한 이유 및 근거
  FE	css library/framwork	TailWind CSS	추후 유지보수보다 당장 구현을 하는데 시간을 단축시킬 수 있는 방안으로 테일윈드 선택
  FE	전역상태관리라이브러리	Recoil	불필요한 전역 state를 로컬 state로 관리하고, 가벼운 전역 state 관리를 위해 recoil 채택
  FE	데이터 시각화를 위한 차트 라이브러리	Chart.js	이용이 간편하고, 필요에 따라 일부 커스터마이징이 가능한 차트 라이브러리로 채택 하였으며, 바차트의 디자인 커스텀 반영
  FE	캐러셀 구현 시 시간단축을 위한 라이브러리	Slick-carousel	화살표, 도트 등의 사용여부를 간편히 선택할 수 있는 라이브러리로 채택하게 되었으며, 도트 컬러/위치 등 추가 커스텀 반영
  FE	지역구를 잘 모르는 유저를 위한 지도/주소 검색 API	Daum-post-code	주소를 확인하고 해당 지역구의 정보/커뮤니티로 이동 시키기 위해 주소 검색 API로 선택하였으며, 서비스 컨셉에 맞춰 컬러 커스텀 반영
  FE	무한스크롤 구현을 위한 스크롤 위치 감지	React-intersection-Observer	JS 내장 스크롤 이벤트에서 요청하지 않은 동작이 반복되는 문제를 해결할 수 있는 API 도입
  FE	SSE를 활용한 실시간 알림 구현	event-source-polyfill	단순 실시간 알람같은 경우에는 websocket보다 sse를 활용하는 것이 효율적이며, 접속에 이슈가 발생하여도 자동으로 연결을 재시도하는 특성을 고려하여 도입
  FE	Web socket을 활용한 검색 기능	Stomp client	백엔드 기술스택에 따라 Spring에서 용이한 Stomp로 결정
  BE	github action & codedeploy를 활용한 CI/CD	github action / jenkins
  codedeploy / docker	우리가 필요했던 건 단순 자동 빌드 및 배포, 쉽고 빠르게 적용할 수 있는 git hubactions 선택
  BE	Scheduler를 활용한 Open Api data 수집 (약 12만건 / 일 1만 4천건 수집)	batch 사용 여부 / scheduler( quartz or not)	batch 불필요 /
  가장 사용이 간편한 scheduler 선택
  BE	QueryDsl을 사용한 검색 기능		동적 쿼리를 작성하기 위해 QueryDsl을 도입하였다. 또 중복코드를 줄일 수 있어 효율적이라는 판단이 있었다.
  BE	무한스크롤	off set / no offset	검색시에는 무언가 순서대로 인덱스를 추출할 수 있는게 없기 때문에 off set방식을 사용했다
  BE	WebSocket을 활용한 실시간 채팅		새로운 데이터가 들어오면 먼저 서버가 클라이언트에게 데이터를 전송하는 기술이므로 실시간 채팅 메세지를 주고받는 방식에 적합함
  BE	SSE를 활용한 실시간 알람	websocket / sse	단순 실시간 알람같은 경우에는 websocket보다 sse를 활용하는 것이 효율적이다.
  BE	Redis		무한정 저장되는 것이 아닌 refreshToken
  을 저장하기 위함.TTL관리가 용이하기 때문에 선택
  다른 곳에서도 DB병목 줄이기 위한 용도로도 사용 가능

• 이번 주 한 일

  • 팀 전체 (리더님께서 필두로 정리해 주세요.)
    • 유저 피드백 반영 QA
    • FE : Redux → 지역 state로 분리 및 Recoil로 상태관리 라이브러리 변경
    • WebSocket을 활용한 실시간 채팅
    • SSE를 활용한 실시간 알람
  • 팀원 개인별로 작성해 주세요.
    • 오기쁨 : 유저 피드백 반영 QA, 기존 Redux 상태 로컬화/Recoil 로 리팩토링
    • 임효진 : WebSocket을 활용한 실시간 채팅, SSE를 활용한 실시간 알람
    • 정성우 : WebSocket을 활용한 실시간 채팅, SSE를 활용한 실시간 알람
    • 장윤서 : WebSocket을 활용한 실시간 채팅, SSE를 활용한 실시간 알람
    • 유도원 : WebSocket을 활용한 실시간 채팅, SSE를 활용한 실시간 알람

• 유저 테스트를 진행했다면 해당 항목을 추가로 작성 해 주세요

  • 유저테스트 설문지의 링크와 결과, 결과를 토대로 반영해야 할 점을 작성 해 주세요

    • 유저테스트 설문지 링크

    붐비붐비 서비스 만족도 평가

    붐비붐비: 사용자 서비스만족도 조사(응답)

    • 반영해야 할 점

  • 유저 테스트를 기반으로, 무엇을 어떻게 개선하면 좋을지 우선순위 별로 기록 해 주세요

  • 유저 테스트 기반 QA 진행현황

    우선순위	개선 및 추가사항	마감일자
    1	검색 결과 없을 시 UI 추가	12/10
    2	검색 카테고리 추가 : 태그검색 / 게시글 검색	12/10
    3	신고기능	12/10