nextjs

Section 1에서는 본격적인 학습에 앞서 Next.js라는 기술은 무엇인지 오늘날 왜 이렇게 많은 관심을 받고 있는지 살펴봅니다.

Next.js란 리액트를 더 강력하고 편하게 사용할 수 있는 기능을 제공하는 프레임워크입니다. 쉽게 말해 Next.js는 Vercel사가 개발해서 오픈소스로 운영하고 있는 리액트의 확장판입니다.Next.js는 라이브러리가 아닌 프레임워크로서 만들어졌기 때문일 것입니다.

브라우저의 요청을 받으면 사전에 렌더링이 완료된 HTML 문서로 응답하는 방식입니다.기존에 리액트가 따르고 있던 Client Side Rendering(CSR)의 단점을 효율적으로 보완한 기술입니다.CSR(Client Side Rendering)이란 리액트 앱의 기본적

실습용 백엔드 서버 링크에 접속하여 리포지토리를 로컬에 다운로드합니다.압축 해제한 폴더를 VS Code에서 엽니다.Supabase에 접속합니다.Start your project - Sign up now - 원하는 방식으로 회원가입을 합니다.저는 깃허브 계정과 연동시켰습

Next.js란 어떤 기술인가?사전 렌더링(Next.js의 대표 기능)실습용 백엔드 서버 세팅Next.js에서 제공하는 자체 라우팅 시스템입니다.반면 리액트에서는 외부 라이브러리 React Router를 사용해야 했습니다.4~5시간 분량 학습 예정Next 초창기부터 제

프로젝트와 함께 Next.js 출시 초기부터 제공된 Page Router에 대해 빠르게 살펴봅니다.동시에 Page Router에 어떠한 불편함과 기술적 한계점 들이 있는지도 함께 살펴봅니다.2.1. Page Router를 소개합니다2.2. 페이지 라우팅 설정하기2.3.

현재 많은 기업에서 활용되고 있는 안정적인 라우터입니다.React Router처럼 페이지 라우팅 기능을 제공합니다.Pages 폴더 내부의 파일명을 기반으로 페이지를 라우팅합니다.하지만 파일명뿐 아니라 폴더를 생성하면 폴더명을 기준으로 그 내부의 index 파일을 렌더링

1. 실습 프로젝트 구성 1) Index 인덱스 페이지(/) 등록되어 있는 모든 도서의 리스트를 볼 수 있다. 2) Search 검색 페이지(/search) 제목, 저자별로 검색 결과를 볼 수 있다. 3) Book 상세 페이지(/book/{book_id}) 특정

보통 페이지 이동을 위해서는 a 태그를 사용했었습니다.a 태그는 CSR이 아닌, 매번 서버에 페이지를 요청하는 방식으로 페이지를 렌더링합니다.우리가 원하지 않는 느린 방식이기 때문에 이 넥스트 앱에서는 Link 컴포넌트를 사용하도록 합니다.Link는 CRS 방식으로 페

프리페칭(Prefetching): Pre(사전에, 미리) + fetching(불러온다) 현재 페이지에서 이동이 가능한 페이지들을 모두 미리 불러와서 신속한 페이지 이동이 가능하게 만드는 기능입니다.

넥스트에서 API를 구축할 수 있게 해주는 기능입니다.마치 백엔드 API 서버가 하는 일과 동일하게 브라우저가 데이터베이스에서 데이터를 가져올 수 있습니다.API Routes를 학습하기 위해 넥스트 앱을 가동해봅니다.pages/api 폴더는 넥스트 프로젝트를 생성할 때

Next.js의 스타일링은 리액트의 스타일링과 방식이 동일합니다.pages/index.tsx - 파일을 스타일링하기 위해 css 파일을 만들어봅니다.pages/index.css - tsx 파일과 동일한 위치에 css 파일을 생성했습니다.그리고 tsx에 css 파일을 i