강의 수강 내용 및 회고

짐코딩님의 프론트 부트캠프의 마지막 주에는 사용자의 흐름, 데이터 흐름, 그리고 성능 최적화까지의 개발 과정을 배웠다. 특히 Server Components와 Server Actions, React Query, 캐싱 전략, 라우팅 등 주요 개념을 어떻게 적용하는지 더 살펴보는 시간이었다.

1. 페이지 이동 방식

    

   1. 서버 컴포넌트에서 페이지를 리다이렉트할 때는 redirect

   2. 클라이언트 컴포넌트에서는 useRouter

   3. 페이지 내 링크 이동은 <Link>

2. Server Action

   1. API 라우트를 따로 만들지 않고 secure 하게 서버에서 사용자 이벤트 (form submission, data mutation) 을 처리할 수 있다.

   2. 브라우저에서 직접 호출하지 못하고 오직 form action 또는 prop으로 넘긴 함수에서만 실행

   3. 전체 페이지 리렌더링이나 별도 네비게이션 없이 최소 범위의 컴포넌트 리렌더링에 의해 함수가 트리거 된다

   4. app/actions.ts 에 use server를 상위에 정의하고 클라이언트 컴포넌트에서 임포트해서 사용

       

3. 유효성 검사: Zod

   1. zod 라이브러리를 활용해 데이터 타입 검증

   2. 스키마 정의 후 parse를 통해 데이터를 검사하고 유효하지 않으면 에러 throw

4. 데이터 캐싱 전략

   1. 캐싱은 서버와 클라이언트 양쪽에서 필요에 따라 적용

      1. Request memoization: 요청 함수 반환값 캐싱

      2. Data Cache: 서버 데이터 캐싱

         1. unstable_cache로 무거운 DB 호출 캐싱, revalidate 함수로 서버에서 재검증 가능

             

             

            export const revalidate = 3600; // ISR: 1시간마다 재검증 

         2. React Query 로 클라이언트 브라우저 메모리에 데이터 캐싱이 필요하다

         useEffect(() => {
             if (state?.success) {
               queryClient.invalidateQueries({ queryKey: ['posts'] });
               router.push('/');
             }
           }, [state?.success, queryClient, router]);

      3. Full Route Cache: 전체 페이지 캐싱

      4. Router Cache: 유저 세션/시간 당 라우터 프리패치 캐싱

5. 라우팅

   1. 라우팅 그룹 (Route Groups)

   app/
     └─ (marketing)/
           └─ about/ → /about
   url 에 marketing 이 노출되지 않음

   1. 병렬 라우팅 (Parallel Routes)

      1. @ 디렉토리 slot 생성

      2. layout에서 slot을 props로 받아 렌더링

      3. default를 넣어 fallback 페이지 제공

          

   app/  
     ├─ @team/              
     │   └─ page.tsx
     ├─ page.tsx
     └─ layout.tsx

   1. 인터셉팅 라우팅 (Intercepting Routes)

      1. (.), (..), (..)(..)으로 현재 경로를 가로채 모달로 soft navigation

      2. 실제로 URL을 방문하면 full page로 렌더링

6. SEO 최적화

   1. metadata 동적/정적 설정

7. 최적화 전략

   1. static 렌더링이 성능과 SEO 면으로 좋다

   2. 초반에 배운 ISR, SSG, SSR 렌더링 방식들을 실제 유즈 케이스 관점으로 바라보고 적용해볼 수 있었다.

이번에 배운 내용으로 블로그에 효율적인 렌더링과 클라이언트와 서버 간 데이터 흐름을 구현할 수 있었다. 사실 이걸 다시 나 혼자 만들라고 하면 쉽게 개발 할 수 있을 것 같진 않다. 아직 완벽히 이해가 되지 않는 부분들이 많지만 이런게 있고 프론트앤드 개발자로써 이런 고민들을 할 수 있구나 를 배운 것 같다. 배운 내용들이 많아서 내 개발 프로세스에 다 적용시킬 수 있을 것 같진 않지만 개발해나가면서 발전해야할 점들이 보일때 "이런게 있었던 것 같은데" 할 수 있으면 충분 할 것 같다. 경험을 통해 이런 내용들은 더 확고하게 자리 잡을 것이라 빌고 믿는다.