<aside>

GitHub : https://github.com/boostcampwm-2024/web05-Denamu

팀 노션 : 네이버 부스트캠프 9기 멤버십 그룹 프로젝트 - Web05

</aside>

데모 발표 목표 (발표자 : J152_안성윤)

목차

<aside> 📄

  1. 스프린트 Week3
  2. Denamu의 현 위치
  3. 기술적 경험
    1. [FE] - shadcn을 활용한 협업 능률 향상
    2. [FE] - axios Mock API 설정기
    3. [BE] - PM2를 활용한 다중 프로세스 배포
    4. [BE] - Test 컨벤션 결정하기
    5. [BE] - 조회수 중복 증가 방지를 위한 방안 논의
    6. [SE] - 명확한 코드리뷰 문화 조성을 위한 Pn룰 도입
  4. Q&A </aside>

1. 스프린트 Week3

<aside> 1️⃣ 프로젝트 소개

개발자들의 이야기가 자라나는 곳, Denamu🎋

Developer 들의 테크 대나무 숲 Denamu는요,,,

image.png

이런 기능들을 제공해요!

비슷한 서비스

<aside> 2️⃣ 3주차 스프린트 계획

핵심 목표 : 메인 기능들만 포함한 MVP 프로토타입 0.1 출시 하기

FE

BE

금주 까지는, 비교적 로직이 단순한 핵심 기능들의 개발과, 인프라 세팅(CI / CD)를 완성하는것을 목표로 삼았습니다.

</aside>

2. Denamu의 현위치

<aside> 1️⃣ 데모 버전

프로토타입 바로가기 - https://deploy-preview-82--denamu.netlify.app/

프로토타입 0.1 출시를 위한 API들은 모두 구현이 완료된 상태이고, 리뷰 상태에 있어요.

그로 인해 BE ↔ API가 완전히 연동된 버전은 아직 개발중에 있어요.

</aside>

<aside> 2️⃣ 차주 계획

[FE & BE] 트렌딩 기능 추가

[FE & BE] 검색 기능 구현

[FE & BE] 도메인 + https 를 통한 완전 배포

[FE] 데이터 캐싱

[FE] prefetching 기능 추가

산출물 : 프로토타입 0.2 출시

</aside>

3. 기술적 경험

<aside> 1️⃣ [FE] - shadcn을 활용한 협업 능률 향상

사전에 FE 팀끼리 디자인 시안을 통일하지 않은 부분들의 작업 진행이 이루어졌고, 스프린트 리뷰 회의 데모 시연 시간에 각자 작업물의 디자인이 조금 다르다는 피드백이 나왔습니다.

해당 문제를 해결하기 위한 방안 중 하나로 shadcn/ui 의 도입을 결정하였습니다.

image.png

디자인적으로 큰 학습비용 없이도 높은 UX가 검증된 UI들을 도입할 수 있었습니다. (검증된 형태의 컴포넌트들을 적극적으로 활용)

image.png

shadcn/ui 컴포넌트들을 참고하며, 웹 표준 및 접근성 등 다양한 부분에서 best practice들을 쉽게 참고하고, 따라할 수 있었습니다.

</aside>

<aside> 2️⃣ [FE] - axios-mock-adapter 설정기

BE API가 아직 구현되지 않은 상태에서 FE 개발을 진행하며, 다양한 서버 응답 데이터들이 필요해졌습니다.

이를 위해 mock API를 fetch를 사용해 직접 구현하고, FE 개발간 사용 중이었습니다.