✅ RootLayout app폴더 바로 밑에 있는 layout.tsx 파일의 경우 next 앱의 모든 페이지에 공통적으로 적용되는 글로벌 레이아웃이다. RootLayout은 페이지 컴포넌트를 children으로 받아서 html, body 태그 안에 넣어주는 역할을 한다.즉, html 기초 틀 역할을 하는 파일이므로 필수로 있어야하는 파일이다.// ..export default function RootLayout({ children,}: Readonly) { return ( {children} );} 그래서 next 앱을 처음 생성할 때 자동으로 app/layout.tsx 파일이 생성되고, 만약 app/layout.tsx를 지우거나 파일명을 바꾸면nex..
✅ App Router를 사용한다면? 변경되거나 추가되는 사항- React 18 신규 기능 추가 (React Server Component, Streaming 등)- 데이터 페칭 방식 변경- 레이아웃 설정 방식 변경- 페이지 라우팅 설정 방식 변경 크게 변경되지 않는 사항- 네비게이팅 (Navigating)- 프리페칭 (Pre-Fetching)- 사전 렌더링 (Pre-Rendering) ✅ App Router는? 폴더 구조를 기반으로 페이지 라우팅이 자동 설정된다는 점은 Page Router와 동일하지만 App Router에서는 page라는 이름을 갖는 파일만 페이지로 설정된다. 쿼리 스트링은 페이지가 전달받은 props에서 searchParams를 통해 가져올 수 있다.export defa..
✅ Page Router의 장점 1. 파일 시스템 기반의 간편한 페이지 라우팅을 제공한다.→ 추가적인 코드가 필요없이 폴더 구조만으로 자유롭게 페이지의 라우팅을 설정할 수 있다. 2. 다양한 방식의 사전 렌더링을 제공한다.→ React 앱의 단점인 느린 FCP를 효과적으로 보완할 수 있는 SSR, SSG, ISR이라는 3가지의 사전 렌더링 방식을페이지별로 다르게 설정이 가능해 대부분의 케이스에 쉽게 대응할 수 있다. - SSR (서버사이드 렌더링) : 요청이 들어올 때마다 사전 렌더링을 진행.- SSG (정적 사이트 렌더링) : 빌드 타임에 미리 페이지의 사전 렌더링을 진행.- ISR (증분 정적 재생성) : SSG 페이지를 일정 시간마다 재생성. ❗각 사전 렌더링 방식별 자세한 내용은 이전 포스팅..
✅ 각 페이지에 SEO 설정하기 각 페이지 컴포넌트 return문 안에 Head태그를 사용해 title, meta 태그들을 작성할 수 있다.import SearchableLayout from "@/components/searchable-layout";// ...import Head from "next/head";export const getStaticProps = async () => { // ...};export default function Home({ allBooks, recoBooks }: InferGetStaticPropsType) { return ( 한입북스 // ... ..
✅ (복습) React App에서의 data fetching 1. 불러온 데이터를 보관할 state 생성2. 데이터 페칭 함수 생성3. useEffect를 이용해 컴포넌트 마운트 시점에 데이터 페칭 함수 호출4. 데이터가 로딩 중일때의 예외처리export default function Page() { // 1. 데이터를 보관할 state 생성 const [state, setState] = useState(); // 2. 데이터 페칭 함수 생성 const fetchData = async () => { const response = await fetch("..."); const data = await response.json(); setState(data); }; ..
최상위 컴포넌트인 App 컴포넌트를 먼저 살펴보자.// _app.tsximport "@/styles/globals.css";import type { AppProps } from "next/app";export default function App({ Component, pageProps }: AppProps) { return ( );} App 컴포넌트가 전달받는 props 중 Component라는 props는 현재 접속하는 페이지 컴포넌트이다. 따라서 모든 페이지의 적용될 레이아웃이 있다면 App 컴포넌트와 같이 최상위 컴포넌트에 적용해주면 된다.// global-layout.tsx : 모든 페이지에 적용할 레이아웃import Link from "next/link";import { Rea..
Next.js에서 스타일링은 기본적으로 React에서 스타일링 하는 방식과 거의 유사하다. 2022.08.12 - [개발공부/🟦 React.js] - [React] React 스타일링 [React] React 스타일링React – A JavaScript library for building user interfacesA JavaScript library for building user interfacesreactjs.org 1️⃣ 좋은 앱을 만들려면? 1) 번들 사이즈에 대한 고려→ CSS 코드가 차지하는 사이즈는 무척limelbe.tistory.com 다만 React와 다르게 Next.js에서는 _app.tsx가 아닌 파일에서 import문을 통해 css를 그대로 불러오는 경우 에러가 발생..
✅ 프리페칭 (Pre-fetching) 빠른 페이지 이동을 위해 현재 사용자가 보고있는 페이지 내에서 이동할 가능성이 있는 모든 페이지들을 사전에 미리 불러놓는 기능이다. 그런데 여기서 생각해볼 것이 있다. Next.js는 초기 접속 요청이 발생했을 때 사전렌더링이 되고 이후 서버가 모든 JS파일을 번들 형태로 브라우저에게 전달해준다.그리고 초기 접속 요청이 종료된 이후에 발생하는 페이지 이동은 서버에게 추가적인 요청없이브라우저가 직접 자바스크립트 코드를 실행시켜서 필요한 컴포넌트를 교체하는 CSR 방식으로 이루어진다. 그럼 페이지를 이동시키게 되더라도 사실상 브라우저가 서버에게 추가적인 리소스를 요청할 필요가 없는데왜 프리 페칭 같은 기능이 필요할까? Next.js는 next 앱 안에 작성한 모..
✅ 네비게이팅 (Navigating) 일반적인 HTML문서에서 페이지를 이동하고 싶을 때는 a태그를 이용하여 페이지를 이동한다. Next.js의 페이지 이동은 클라이언트 사이드 렌더링 방식으로 이루어지는데a태그는 서버에게 매번 새로운 페이지를 요청하기 때문에 클라이언트 사이드에서 원하는 페이지 이동 방식이 아니다. 따라서, Next.js가 제공하는 Link 컴포넌트를 사용하여 페이지 이동을 구현할 수 있다. // _app.tsximport "@/styles/globals.css";import type { AppProps } from "next/app";import Link from "next/link";export default function App({ Component, pageProps }: App..
✅ Pages Router는? pages 폴더의 구조를 기반으로 페이지 라우팅을 제공한다. 폴더명을 기반으로도 가능하다. 이 때 폴더 아래 index.js 파일을 만들면 해당 경로로 라우팅이 설정된다.폴더 하위에 폴더나 파일을 계속 중첩해서 중첩경로를 생성해줄 수 있다. 동적 경로에 대응하는 페이지는 파일명에 대괄호[]를 묶어서 만들면 된다. ✅ 동적 페이지 설정하기 1) Dynamic Routes book 폴더 내에 [id].tsx 파일 생성import { useRouter } from "next/router";export default function Page() { const router = useRouter(); const { id } = router.query; retur..
