기술 스택

• Next.js (app router)
• typescript
• tailwind
• react query
• zustand
• ui library (shadcn/ui)
• node js (v20.18.0)
• shadcn

협업 툴

• Notion (문서 정리용)
• GitHub Projects (일정 관리 툴)

배포

• Vercel

• 김강우
• 김정현
• 이형준
• 조규진

정리

1. 추가 구현 관련

1) Middleware 사용

• What is middleware?
• middleware 사용 이전
  • 페이지에 접근한 이후에 권한을 판단하고 차단함
  • 성능, 보안 UX등에 부정적인 영향
• middleware 사용 이후
  • 페이지를 요청하기 전에 접근권한을 우선 판별하여 접근 차단 여부를 결정
  • 성능, 보안, UX를 모두 크게 향상 시킬 수 있음

2) Next Fetch API

• 도입 이유
  • next app router의 기능을 적극적으로 활용 하기 위해
  • 데이터 caching, revalidating 등 지원
• vs axios
  • axios에 비해 부족한 기능이 존재 (interceptor 등…)
  • return-fetch라는 라이브러리를 이용하여 부족한 기능을 보충

3) 공통 모달 컴포넌트 리팩토링

• 기존
  • 장점
    • 개발 편의를 위해 이해/사용하기 쉬운 구조로 구현
  • 단점
    • 여러가지 케이스들을 하나의 구조로 구현하다 보니 많은 로직과 3항 연산자가 필요
    • 구현 이후에도 새로운 케이스가 등장할 때마다 지속적인 수정이 불가피
• 수정
  • shadcn의 구조를 최대한 그대로 반영하여 수정
  • 이외에 추가적으로 프로젝트에 필요한 로직과 코드를 추가
    • 디자인 변경 (tailwind class name)
    • x 모양 닫기 버튼 on/off prop 추가
    • overlay 클릭 시 닫히지 않는 alert 형태로 사용할 수 있도록 하는 로직 추가
  • 개선된 점
    • 필요한 부분에 필요한 로직만 사용
    • 적절한 VisuallyHidden 사용을 통한 웹 접근성 향상