[유데미x스나이퍼팩토리] 프로젝트 캠프 : Next.js 2기 - 사전직무교육 12일차 기록

 

학습 내용

• RSC와 RCC
  • NEXT의 컴포넌트 트리 설계 전략
• 시스템 파일: page, layout, not-found, loading, error
• layout.tsx
  • 페이지에 따라 metadata title 다르게 설정하기
  • 모든 페이지마다 유지하고 싶은 메타데이터 타이틀 일부
• not-found.tsx
• error.tsx
  • root 경로에서 에러 헨들링하기: global-error.tsx
• loading.tsx
• 컴포넌트 로딩시간 단축을 위한 방법
  1. Promise.all을 이용한 병렬요청
  2. 컴포넌트 분리를 통한 소요시간 단축
     •  <Suspese> 태그 사용
     • fallback 속성: 로딩되는 동안 보여줄 것 (컴포넌트 사용도 가능)
     • 먼저 패칭된 것이 먼저 보인다.
     • 가장 오래 걸리는 컴포넌트가 끝나야 전체가 끝남
     • Dynamic HTML Streaming: 컴포넌트의 로딩이 끝난순으로 점진적으로 보여주는 기능 (“스트리밍하다”고 함)
• 데이터 통신에서의 CSR과 SSR
  • CSR:
    1. 사용자와 interaction 가능
    2. Hook 사용 가능 (컴포넌트 코드 상단에 'use client' 명시)
  • SSR:
    1. Hook 사용 불가
    2. 웹 화면이 렌더링 되기 전에 서버에서 데이터 요청이 발생하기 때문에 빠름
    3. 한 번 요청한 데이터 통신은 내부적으로 캐시(Cache)되고, 재요청시 캐시된 데이터를 활용하기 때문에 응답이 빠름
• 캐싱 시스템
  • Router Cache > Full Route Cache > Request Memoization > Data Cache 
  • 언제나 왼쪽에서 오른쪽으로 캐싱이 빠짐
  • Data Cache를 옵트아웃(opt out: 손을 떼다, 더이상 하지 않다)해도 Router Cache는 유지된다는 의미

 

 

 

오늘 기록

잔디밭 위에서 먹으니 피크닉 온 것 같고 좋았다~

하늘도 뻥 뚫린 하늘색 하늘이라 가슴도 뻥 뚫린 것 같고~ 오후 수업 들어가기 싫고^^^,,

 

 

NEXT개발하면서 컴포넌트 분리하는 거 물어보는 사람 어떤데...ㅎ

 

사실 진짜 몰랐던 건 아니고

scr 폴더 안에 app 폴더 안에 넣으면 App Router 고민을 해야하니 

scr 폴더 안에 components 폴더를 따로 만들어서 거기서 컴포넌트 파일들을 만들었는데 

이렇게 해도 되나..^^ 하는 자신감 없음 이슈 때문에~

 

 

 

실습시간엔 저렇게 쌤이 어슬렁어슬렁 돌아다니시면서 옆에서 봐주신다.

오늘도 참 정신없고 어렵지만 보람찬 수업이었다.