[Next.js]

Next.js가 제공하는 주요 기능 hot reloading 개발 중에 저장되는 코드는 자동으로 새로고침된다. automatic routing pages 폴더에 있는 파일은 해당 파일 이름으로 라우팅된다. public 폴더도 pages의 폴더와 동일하게 라우팅할

React는 서버에서 렌더링할 수 있는 컴포넌트인 RSC를 제공함으로써 원하는 곳에서 컴포넌트를 렌더링할 수 있는 선택지를 제공한다.기존의 Server Side Rendering(SSR)과 다른 점을 간단하게 정리하자면, SSR은 서버에서 페이지 단위로 정적인 리소스를

라우팅 라우팅(Routing)은 경로(URL Path)를 지정하는 것을 의미한다. Next.js에서는 파일 시스템 기반으로 경로를 지정한다. 폴더 이름을 따르는 URL Path Next.js의 파일 시스템 기반의 라우팅은 아래와 같은 형태를 이룬다. app 이라

앞서 세그먼트를 정하고 파일을 만들어서 실제로 접근할 수 있는 페이지를 만들었다. 각 페이지 간에 이동은 어떻게 구현할까? 태그를 사용하기 어려운 순간도 있다. 예를 들어, 버튼 컴포넌트를 클릭해서 이동해야 하는 경우 useRouter를 사용하면 된다. 한 가지 알아둬

Next.js에서는 CSS Modules, Tailwind CSS, CSS-in-JS, Sass와 같은 스타일링 방식을 지원한다. 이번 강의에서는 가장 진입 장벽이 낮은 CSS Modules 방식을 기본으로 삼는다.CSS Modules는 CSS 클래스의 이름 중복 문제

Next.js에선 Web API에서 제공되는 fetch API의 확장된 버전을 제공한다. 덕분에 Next.js에선 fetch로 각각의 페치 요청에 대한 캐싱(Caching)과 재검증(Revalidating) 동작을 설정할 수 있다.우리는 fetch를 비동기 서버 컴포넌

Next.js에서는 메타데이터(Metadata)를 설정하는 두 가지 방법이 있다. 설정 기반 메타데이터(Config-based Metadata)와 파일 기반 메타데이터(File-based Metadata)가 그 방법이다. 이번 강의에서는 설정 기반 메타데이터를 중심으로

React에서 렌더링되는 과정과 Next에서 렌더링되는 과정을 살펴보면 다음과 같은 차이가 있다.HTML과 JS파일을 한꺼번에 보내고, 클라이언트에서 JS코드를 통해 웹 화면을 렌더링한다.Pre-rendering된 HTML을 클라이언트에 전송그 이후에 번들링된 Reac

검색어에 해당하는 도서 아이템의 정보를 가져오는 코드를 작성하는 도중, 빌드시 타입 오류로 인해 다음과 같은 에러가 발생했다.참고로 useSearchParams는 현재 URL의 query string을 읽을 수 있게 해주는 Client Component 훅이다.awai

큰 파일을 여러 개의 조각으로 잘게 쪼개어 연속적으로 전송하는 기술먼저 도착하는 컴포넌트만 화면에 렌더링하고, 아직 도착하지 않은 컴포넌트는 스켈레톤 UI나 로딩 UI 등을 활용해서사용자에게 아직 로딩이 완료되지 않았다는 점을 명시적으로 보여줌스트리밍은 Dynamic