<aside> <img src="/icons/notification_pink.svg" alt="/icons/notification_pink.svg" width="40px" /> 멘토링 신청 가이드

*** 각 질문 내용 구성**

<aside> <img src="/icons/arrow-right-basic_pink.svg" alt="/icons/arrow-right-basic_pink.svg" width="40px" /> ① 한 줄 요약 ② 질문 배경 & 질문자 ③ 관련 자료 설명 & 자료 첨부

</aside>

*** 신청서 형식**

① 한 줄 요약 👉제목 형식으로 설정 → 신청서 상단 ‘목차’에 반영되도록 - 또는, 자체적으로 전체 개요를 일목 요연하게 작성하여 상단에 명시

② 질문 배경 & 질문자 👉 간단히 질문하게 된 배경과 해당 내용 질문자 작성 - 특정되지 않는다면 ‘조원 모두’로 작성

③ 관련 자료 설명 & 자료 첨부 👉 질문 내용에 대해 구체적으로 작성 - 첨부 자료의 내용이 많다면, 어떤 부분을 중점적으로 확인 요청하는지 설명

*** 멘토링 신청서 제출 후, 추가 내용은 최하단 섹션에 작성**

⛔ 제출 후, 기존 내용 절대 수정 금지 ⛔ (기존 내용 수정시 큰 혼선 야기)

• 제출 후, 기존 내용 관련 반드시 참고 필요한 사항은 댓글 활용하여 작성 (기존 내용과 섞이지 않도록)

</aside>

**목차**

질문 1

• 질문 : 지금 개발 환경을 고민하던 중 PWA를 도입하려고 합니다. (FCM 등 알람 및 모바일 대응을 위해) 아직 저희 팀중에는 PWA를 도입해 본 적이 없어서, 이를 적용시 사전에 주의해야 할 점 등을 알려주시면 감사하겠습니다!

• 답변 :

질문 2

• 질문 : 라우터 설정 할 때, path를 constants로 따로 관리해서 사용하는 방식을 봤는데 이런방식은 어떤 이점이 있을까요?? 보통 현업에서는 spa 라우터 관리를 어떻게 하는지 궁금합니당

const router = createBrowserRouter([
    {
      path: PATH.ROOT,
      element: <App />,
      errorElement: <NotFoundPage />,
      children: [
        {
          path: '',
          element: (
            <Suspense fallback={<CommunityPageSkeleton />}>
              <Lazy.CommunityPage />
            </Suspense>
          ),
        },
        {
          path: PATH.MY_TRIPS,
          element: (
            <Suspense fallback={<TripsPageSkeleton />}>
              <Lazy.TripsPage />
            </Suspense>
          ),
        },
        {
          path: PATH.TRIP(':tripId'),
          element: (
            <Suspense fallback={<TripPageSkeleton />}>
              {isMobile ? (
                <Lazy.TripMobilePage tripType={TRIP_TYPE.PERSONAL as TripTypeData} />
              ) : (
                <Lazy.TripPage />
              )}
            </Suspense>
          ),
        },
...

// constants/path.ts
export const PATH = {
  ROOT: '/',
  MY_TRIPS: '/my-trips',
  CREATE_TRIP: '/trip-new',
  EDIT_TRIP: (tripId: string) => `/trip/${tripId}/edit`,
  TRIP: (tripId: string) => `/trip/${tripId}`,
  EXPENSE: (tripId: string) => `/trip/${tripId}/expense`,
  SHARE_TRIP: (tripId: string) => `/trip/share/${tripId}`,
  SHARE_EXPENSE: (tripId: string) => `/trip/share/expense/${tripId}`,
  COMMUNITY_TRIP: (tripId: string) => `/community/trip/${tripId}`,
  COMMUNITY_EXPENSE: (tripId: string) => `/community/trip/expense/${tripId}`,
  LOGIN: '/login',
  MY_PAGE: '/my-page',
  REDIRECT: '/auth/:provider',
  RELOAD: 0,
} as const;

• 답변 :

질문 3

• 질문 : vercel을 지금까지는 편하게 배포하려고만 사용해 보았는데, 아래 블로그 글 처럼 캐시전략을 세워 사용자에게 좀 더 최적화 할 수 있다는 내용의 글을 보았습니다. https://velog.io/@mmmdo21/정적자산-캐시정책-세우기vercel.json

이렇게 SaaS를 이용할 때 프론트엔드 단에서 더 고민해볼수 있는 내용들에 대해 알려주시면 감사하겠습니다! - 배포 후 서비스가 정상적으로 동작하는지 모니터링 하는 기능 확인하기

• 답변 :

<aside> 📌 멘토님링 신청서 제출 후 업데이트 내용 멘토링 24시간 전 전달 후, 추가된 내용 작성

</aside>

추가 질문 1.