[유데미x스나이퍼팩토리] 프로젝트 캠프 Next.js 1기 - 11일차

 

11일 차인 오늘은 Next.js의 Server Client에서의 Data Fetching 하는 방식에 대해 학습했다. 

 📚 학습한 내용
- loading, error 
- streaming 과 Suspense
- tmdb API 활용한 Data Fetching

 

✍🏻 학습한 내용 정리

 

서버와 데이터를 요청하고 응답하는 과정에서 화면이 보이기까지의 로딩시간이 존재하게 된다. 로딩시간에 Loading의 의미의 UI를 보여주는 게 더 나은 사용자 경험을 제공한다. Next.js는 loading 이름의 파일을 생성하면 데이터 요청 시 로딩시간이 걸리는 화면에 해당 페이지를 출력해 준다. 별도의 상태처리 없이 Next의 파일 규칙에 의해 알아서 화면을 출력해 준다. 또한, 데이터 요청 시 발생하는 에러 상황을 처리할 수 있는데 error라는 이름의 파일만 추가해 주면 해당 상황에 화면을 출력해 준다. 단, error 페이지는 사용자 입력의 유효성 검사나 잘못된 API 요청 등 클라이언트에서 발생하는 에러 상황까지 처리하기 위해선 use client 선언해서 클라이언트 컴포넌트로 지정해야 한다. 별도의 상태를 생성하지 않고, root 경로 나 route 폴더에 생성하면 너무나 간단하게 구현 할 수 있다는 점에서 흥미롭고 놀랍다. 프레임워크는 정해준 규칙이 있어 제어할 수 없지만, 손쉽게 개발할 수 있다. Next.js를 공부하면서 느끼는 건 정말 잘 사용할 수 있다면 개발을 너무 쉽게 할 수 있을 거 같은(?) 자신감을 준다. 잘 활용해보고 싶다는 생각도 마구마구 든다. 

 

출처 : Next.js 공식문서

 

loading의 UI을 부분적으로 처리할 수 있는 Suspense 컴포넌트도 알게 되었다. 웹서비스의 페이지는 영역별로 각각의 API 요청하게 되는 경우도 발생한다. 각 영역별로 API 요청 중에 loading UI를 처리할 수 있도록 도와주는 컴포넌트인데 React18의 추가된 내용이며 Next.js에서도 App Router에서 잘 활용된다. 스트리밍을 통해 서버에서 클라이언트로 HTML를 점진적으로 렌더링 할 수 있다. 비동기 작업을 수행하는 컴포넌트를 래핑하고 해당 작업이 진행되는 동안 대체 UI를 표시한 다음 작업이 완료되면 컴포넌트를 교체하는 방식으로 작동한다. 몰랐던 개념이라서 복습하면서 사용해보려고 한다.

 

 

👩🏻‍💻 학습을 통해 느낀 점 

 

Suspense 컴포넌트를 사용해보려고 했다. tmdb API를 사용해서 각 영역별로 비동기 작업이 이루어지도록 구성했다. 처음에 내가 잘못 생각한게 app/ 폴더 내의 페이지에서 비동기 작업을 수행할 컴포넌트를 래핑 해야 하는데, Suspense로 래핑한 컴포넌트를 불어오니 제대로 동작하지 않았다. 공식문서를 다시 한번 읽어보니, 친절한 예시가 있었다. router 페이지 내에서 사용해야 한다는 점 잊지 말자. Next.js 공식문서는 참 친절하다. 한국어 버전이 있었으면... 더 좋겠다. fullback에 적용할 스켈레톤 컴포넌트도 tailwindCSS 애니메이션 유틸 클래스를 사용해서 적용해 보았다. 배운 내용을 토대로 코드를 작성하려는 시도를 계속 하고 있다. 조금 속도가 더뎌서 조급해진다. 팀프로젝트를 수행하기 위해선 더 많은 시도를 해봐하는데.. 열정은 크지만 머리와손은 따라와주질 못한다.. 너무 조급해하지말고 남은 직무 교육기간 동안 시도해보자 🔥

 

import { Suspense } from 'react'
import { PostFeed, Weather } from './Components'
 
export default function Posts() {
  return (
    <section>
      <Suspense fallback={<p>Loading feed...</p>}>
        <PostFeed />  // 👈🏻 비동기 작업을 수행 컴포넌트
      </Suspense>
      <Suspense fallback={<p>Loading weather...</p>}>
        <Weather />
      </Suspense>
    </section>
  )
}

 

 

 

 

 

---

 

본 후기는 [유데미x스나이퍼팩토리] 프로젝트 캠프 : Next.js 1기 과정(B-log) 리뷰로 작성되었습니다.

 

#유데미 #udemy #웅진씽크빅 #스나이퍼팩토리 #인사이드아웃 #미래내일일경험 #프로젝트캠프 #부트캠프

#Next.js #프론트엔드개발자양성과정 #개발자교육과정