2장 - CSS 스타일링
2-1. Tailwind
위의 코드 조각을 사용하면 어떤 모양이 보입니까?
c. 검은색 삼각형
테두리 클래스 이름은 삼각형 모양을 만드는 데 사용됩니다.
2-2. CSS 모듈
CSS 모듈을 사용하면 어떤 이점이 있나요?
b. 기본적으로 CSS 클래스를 구성 요소에 로컬로 범위 지정하여 스타일 충돌 위험을 줄이는 방법을 제공합니다.
CSS 모듈은 각 구성 요소에 대해 고유한 클래스 이름을 생성하므로 스타일 충돌에 대해 걱정할 필요가 없습니다.
2-3. 라이브러리를 사용하여 clsx 클래스 이름 전환
코드 편집기에서 "clsx"를 검색하십시오. 클래스 이름을 조건부로 적용하기 위해 이를 사용하는 구성 요소는 무엇입니까?
a. status.tsx 및 pagination.tsx
status.tsx 및 pagination.tsx 구성 요소는 clsx를 사용하여 조건부로 클래스 이름을 적용합니다.
3장 - 글꼴 및 이미지 최적화
3-1. 글꼴을 최적화하는 이유는 무엇입니까?
Next.js는 글꼴을 어떻게 최적화합니까?
d. 추가 네트워크 요청이 없도록 다른 정적 자산과 함께 글꼴 파일을 호스팅합니다.
Next.js는 빌드 시 글꼴 파일을 다운로드하고 이를 다른 정적 자산과 함께 호스팅합니다. 이는 사용자가 애플리케이션을 방문할 때 성능에 영향을 미칠 수 있는 글꼴에 대한 추가 네트워크 요청이 없음을 의미합니다.
3-2. 데스크탑 히어로 이미지 추가
참 또는 거짓: 치수와 웹 글꼴이 없는 이미지는 레이아웃 변경의 일반적인 원인이 됩니다.
a. 참
크기와 웹 글꼴이 없는 이미지는 브라우저가 추가 리소스를 다운로드해야 하기 때문에 레이아웃이 변경되는 일반적인 원인이 됩니다.
4장 - 레이아웃 및 페이지 만들기
4-1. 루트 레이아웃
Next.js에서 레이아웃 파일의 목적은 무엇입니까?
c. 여러 페이지에서 UI를 공유하려면
그렇습니다. 레이아웃 파일은 애플리케이션의 모든 페이지에서 사용할 수 있는 공유 레이아웃을 만드는 가장 좋은 방법입니다.
5장 - 페이지 간 탐색
5-1. 자동 코드 분할 및 프리패치
프로덕션 환경에서 브라우저의 뷰포트에 <Link> 구성 요소가 나타날 때 Next.js는 무엇을 합니까?
c. 연결된 경로의 코드를 미리 가져옵니다.
Next.js는 백그라운드에서 연결된 경로에 대한 코드를 자동으로 미리 가져옵니다. 사용자가 링크를 클릭하면 대상 페이지의 코드가 이미 백그라운드에 로드되어 페이지 전환이 거의 즉각적으로 이루어집니다.
6장 - 데이터베이스 설정
6-1. 데이터베이스 시드
데이터베이스의 맥락에서 '시드'란 무엇입니까?
c. 초기 데이터 세트로 데이터베이스 채우기
좋습니다. Seeding은 애플리케이션을 구축할 때 작업할 데이터를 갖고 싶을 때 유용합니다.
6-2. 쿼리 실행
이 송장은 어느 고객의 것인가요?
b. Evil Rabbit
좋습니다.
7장 - 데이터 가져오기
7-1. 데이터를 가져오는 방법 선택
다음 중 데이터베이스를 직접 쿼리하면 안 되는 시나리오는 무엇인가요?
a. 클라이언트에서 데이터를 가져올 때
그렇습니다. 클라이언트에서 데이터를 가져올 때 데이터베이스에 데이터베이스 비밀이 노출되므로 직접 쿼리하면 안됩니다.
데이터를 가져오기 위해 React Server 구성 요소를 사용하면 어떤 이점이 있나요?
b. 추가 API 계층 없이 서버에서 직접 데이터베이스를 쿼리할 수 있습니다.
추가 API 계층 없이 서버에서 직접 데이터베이스를 쿼리할 수 있습니다.
데이터 가져오기 측면에서 SQL을 사용하면 무엇을 할 수 있나요?
b. 특정 데이터를 가져오고 조작
SQL을 사용하면 특정 데이터를 가져오고 조작하기 위한 대상 쿼리를 작성할 수 있습니다.
7-2. 요청 폭포수란 무엇인가요?
폭포 패턴을 사용하고 싶을 때는 언제여야 합니까?
a. 다음 요청을 하기 전에 조건을 충족하려면
예를 들어 사용자 ID와 프로필 정보를 먼저 가져오고 싶을 수 있습니다. ID가 있으면 친구 목록을 가져올 수 있습니다.
8장 - 정적 및 동적 렌더링
8.1 정적 렌더링이란 무엇입니까?
정적 렌더링이 대시보드 앱에 적합하지 않은 이유는 무엇입니까?
c. 응용 프로그램은 최신 데이터 변경 사항을 반영하지 않기 때문에
데이터가 업데이트되면 대시보드에 최신 변경 사항을 표시하려고 합니다. 정적 렌더링은 이 사용 사례에 적합하지 않습니다.
8.2 동적 렌더링이란 무엇입니까?
요청 시에만 알 수 있는 정보에는 어떤 것이 있나요?
c. 쿠키 및 URL 검색 매개변수
쿠키 및 URL 검색 매개변수
9장 - 스트리밍
9-1. 스트리밍이란 무엇입니까?
스트리밍의 장점 중 하나는 무엇입니까?
c. 청크가 병렬로 렌더링되어 전체 로드 시간이 단축됩니다.
이 접근 방식의 한 가지 장점은 페이지의 전체 로딩 시간을 크게 줄일 수 있다는 것입니다.
9-2. Suspense 영역을 배치할 위치 결정
일반적으로 Suspense 및 데이터 가져오기 작업 시 모범 사례로 간주되는 것은 무엇입니까?
c. 데이터 가져오기를 필요한 구성요소로 이동
가져오는 데이터를 필요한 구성 요소로 이동하면 보다 세부적인 Suspense 경계를 만들 수 있습니다. 이를 통해 특정 구성 요소를 스트리밍하고 UI가 차단되는 것을 방지할 수 있습니다.
10장 - 부분 사전 렌더링(선택 사항)
10-1. 부분 사전 렌더링이란 무엇입니까?
부분 사전 렌더링의 맥락에서 구멍은 무엇입니까?
b. 동적 콘텐츠가 비동기적으로 로드되는 위치
좋아요. 구멍은 요청 시 동적 콘텐츠가 비동기적으로 로드되는 위치입니다.
11장 - 검색 및 페이지 매김 추가
11-1. 검색 기능 추가
디바운싱은 검색 기능에서 어떤 문제를 해결합니까?
c. 키를 누를 때마다 새로운 데이터베이스 쿼리를 방지합니다.
좋아요. 디바운싱은 키를 누를 때마다 새로운 데이터베이스 쿼리를 방지하여 리소스를 절약합니다.
12장 - 데이터 변형
12-1. 서버 작업이 포함된 Next.js
서버 작업을 사용하면 어떤 이점이 있나요?
b. 점진적인 향상.
좋아요. 이를 통해 사용자는 양식에 대한 JavaScript가 아직 로드되지 않았거나 로드에 실패한 경우에도 양식과 상호 작용하고 데이터를 제출할 수 있습니다.
13장 - 오류 처리
13-1. notFound 함수를 사용하여 404 오류 처리
Next.js의 어떤 파일이 경로 세그먼트에서 예상치 못한 오류를 포착하는 역할을 합니까?
c. error.tsx
error.tsx 파일은 예상치 못한 오류에 대한 포괄적인 역할을 하며 사용자에게 대체 UI를 표시할 수 있게 해줍니다.
15장 - 인증 추가
15-1. 인증이란 무엇입니까?
다음 중 인증과 승인의 차이점을 가장 잘 설명한 것은 무엇입니까?
c. 인증은 귀하의 신원을 확인합니다. 승인에 따라 액세스할 수 있는 항목이 결정됩니다.
좋아요. 비슷해 보이지만 인증은 신원을 확인하는 반면 승인은 액세스할 수 있는 항목을 결정합니다.
