Next.js 공식문서 읽기 📍Layout 컴포넌트 살펴보기 - components/layout.js import Head from "next/head"; import Image from "next/image"; import styles from "./layout.module.css"; import utilStyles from "../styles/utils.module.css"; import Link from "next/link"; const name = "Your Name"; export const siteTitle = "Next.js Sample Website"; export default function Layout({ children, home }) { return ( {home ? ( {name..

📍/public - root의 /public는 /pages 처럼 앱 내에서 참조 가능 - /public 폴더에는 이미지같은 static assets을 보관 📍기존 이미지 로드 방식의 한계 엘리먼트는 아래 사항을 직접 조절해야 함 - 사이즈 크기에 따라 이미지 크기를 직접 조절 (반응형 대응) - 이미지 최적화를 위해 타사 라이브러리를 사용 - viewport에 들어올 때만 이미지 로딩 가능 📍Image 컴포넌트 - 예시 import Image from 'next/image'; const YourComponent = () => ( ); 디폴트 옵션 - 리사이징, 최적화 및 다양한 포맷 지원 - 빌드 타임에 최적화하지 않고 요청받을 때 최적화 실행 (따라서 일반적 ssg에 비해 빌드 타임이 증가하지 않음 -..

📍create-next-app - 터미널에서 Next.js 앱을 빠르게 만드는 툴 체인 - cli 에서 프로젝트 완성에 필요한 정보를 전달 npx create-next-app@latest docs에서 제공하는 스타터 템플릿 npx create-next-app@latest nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/master/basics/navigate-between-pages-starter" 📍라우팅 📂/pages - 파일명으로 route가 정해진다 - /pages/index.js 가 root page. 즉, / 에 해당 - /pages/posts/first-post.js 파일은 /posts/first-post ..

📍Fast Refresh 란? - Next.js 개발서버에서 파일을 변경하면 브라우저에 바로 업데이트 - 새로고침이 필요 없이 변경하는 즉시 적용된다 📍Code Splitting - Next.js는 자동으로 코드 스플리팅을 수행 - 따라서 각 페이지는 해당 페이지에 필요한 것만 로드 - 수많은 페이지를 가진 앱이라도 첫 페이지를 빠르게 로드하는 장점이 있음

Next.js 공식문서 읽기 📍Next.js 란? 1️⃣어플리케이션을 구조화하기 위한 프레임워크를 제공 2️⃣개발 프로세스 및 어플리케이션 속도를 최적화 - Development Env. 와 Production Env. 모두에 도움 🛠️개발 환경(+DX)에 도움을 제공 - TypeScript - ESLint 통합 - Fast Refresh 등등 👨‍💻Production 환경에 도움을 제공 - 성능 최적화 - Minifying(tree shaking 과 비슷) 등등 Rust와 SWC로 작성된 컴파일러를 통해 빠르게 번들링, 컴파일 등을 실행 📍컴파일이 필요한 이유 - JSX는 브라우저가 이해할 수 없기 때문에, 브라우저가 이해할 수 있는 JavaScript 버전으로 변환되어야 함 📍Minifying - 불..

📍목표 - 검색 API를 호출할 때, API 응답 데이터를 저장하기 - 같은 키워드를 두 번 검색한 경우, API를 호출하지 않고, 저장된 데이터를 활용하기 - data fetching 라이브러리 사용하지 않고 이를 구현하기 📍로컬 캐싱 글로벌 캐싱과 다르게, 로컬내에 캐시를 저장해야 함 (in-memory or web storage) - local 에서 작동하기 때문에 속도가 빠름 (네트워크 필요 X) 캐시를 로컬 스토리지 혹은 세션 스토리지에 저장하면 새로고침 시 데이터 휘발을 막을 수 있지만, 검색 API의 응답 데이터는 중요한 데이터도 아니므로 in-memory에 저장해도 된다 (권장되는 방법) 그리고 웹 스토리지의 경우 메모리 크기에 제한이 있기도 하고, 읽기 쓰기 속도도 당연히 느리다 📍캐시를..