민ズl으l 개발일ブl

SSG : 서버에서 미리 페이지를 생성하여 정적 html로 저장하고, 클라이언트가 요청시 즉시 반환=>14버전에선 디폴트(안적거나) 또는 cache:"force-cache" =>yarn build시 ssg페이지는 ㅇ static으로 표현됨 SSR : 클라이언트가 요청할때마다 서버에서 html을 생성하여 반환=>cache:"no-store" : yarn build시 ssr페이지는 f dynamic으로 표현됨 CSR  : 클라이언트에서 js를 사용해 UI를 생성하고 렌더링=>리액트 훅 사용=>"use client" 사용 ISR : SSG와 유사하게 미리 페이지를 생성하지만, revalidate 주기에 따라 서버에서 페이지를 다시 생성하여 최신 데이터를 제공=>next:{revalidate:다시 생성할 시간}

상황 🤔 lol api를 불러오는 함수작성후, 터미널에서 해당 함수를 불러와서 데이터 확인에러 👻에러는 없었지만, 데이터가 안찍힘😱😱😱 해결과정 👀api주소 확인 => 맞음!!!함수가 잘못됐나? => 아님!!!해결 🌟ㅎ... 브라우저에서 새로고침하니 터미널에 찍힘... 밥오...상황 🤔 이미지 불러오기 에러 👻 해결과정 👀다시 코드보며 생각해보니...next에서 Image태그를 쓸때 next.config.mjs에 config 써야하는걸 깜빡,, 해결 🌟상황 🤔 GET함수로 API 불러오기 에러 👻 해결과정 👀차근히 코드를 다시 확인 => 코드상에는 문제가 없음api key가 설정되어있는 환경 변수문제인가? => postman으로 확인시 데이터를 잘 불러와짐console.error..

이미지 최적화웹 성능을 개선하는 중요한 작업으로, 다음 방법들을 활용할 수 있음차세대 형식 사용: WebP, AVIF로 변환디바이스 크기에 맞는 이미지 제공: 적절한 해상도로 최적화레이지 로딩 적용: 스크롤 시 필요한 이미지만 로드블러 이미지 사용: 로딩 중에도 사용자 경험 개선*이미지 최적화 예제import Image from "next/image";export default function BookItem({...}: BookData) { return ( ... );} * 외부 이미지 로드 문제 해결외부 도메인의 이미지를 사용하려면 next.config.js 파일을 수정/** @type {import('next').NextConfig} */const nextConfig = { ..

Parallel Route (병렬 라우트)하나의 화면에 여러개의 페이지 컴포넌트들을 동시에 렌더링하는 라우팅 패턴복잡한 구조의 애플리케이션을 구축할 때 유용예시소셜 미디어 서비스 (예: 왼쪽 사이드바, 중앙 피드, 오른쪽 알림 창을 병렬로 표시)관리자의 대시보드 (예: 메뉴, 콘텐츠 영역, 상태 표시창 등을 동시 렌더링) slot(슬롯)병렬로 렌더링될 페이지 컴포넌트를 보관하는 폴더URL 경로에는 아무런 영향을 미치지 않으며, 라우트 그룹과 비슷한 역할을 함export default function Layout({ children, sidebar, feed,}: { children: ReactNode; sidebar: ReactNode; feed: ReactNode;}) { return ( ..

Error 객체란?javascript에서 발생한 에러를 나타내는 내장 객체TypeScript에서도 Error객체를 사용기본적인 에러를 다루기 위한 객체Error는 클래스이기 때문에 상속가능두가지 주요 속성을 제공message : 에러 메시지를 나타내는 문자열name : 에러의 이름//javascriptconst error = new Error("Something went wrong!");console.log(error.message); // "Something went wrong!"console.log(error.name); // "Error"//typescriptfunction throwError(message: string): never { throw new Error(message); ..

라이브러리 vs 프레임워크=> 핵심단어 : 제어역전(IOC)=> 라이브러리의 제어역전은 개발자, 프레임워크의 제어역전은 프레임워크 위에 origin부분이 밑에 app폴더위에 path부분이 밑에 Segmentorigin : App폴더path : Segment 동적라우팅 Link  컴포넌트 : client side navigation 방식 (vs server side navigation) Route Group폴더명을 소괄호로 씌우기??라우트 그룹 왜 씀?=> 코드정리=> 별도의 레이아웃을 갖고싶어서 layout 컴포넌트는 무조건 props를 받음 _privateFolder : url path에서 완전히 제외(위에 라우터그룹은 하위폴더는 라우터에 노출됨)위에 그림은 page.tsx에서 사용하는 컴포넌트구나하고..

dynamic 옵션특정 페이지의 유형을 강제로 Static 또는 Dynamic 페이지로 설정할 수 있는 옵션 1. auto기본값어떤 설정도 강제하지 않음export const dynamic = 'auto' 2. force-dynamic페이지를 강제로 Dynamic 페이지로 설정export const dynamic = 'force-dynamic'; 3. force-static페이지를 강제로 Static 페이지로 설정props가 undfined로 설정됨하위 데이터 패칭 함수에서 cache:'no-store'를 사용하더라도 강제로 캐싱됨정적페이지로 강제됨단점: 검색 페이지 등 동작이 필요한 페이지에서 문제가 발생export const dynamic = 'force-static'; 4. error페이지를 강제로..

캐싱이란🤔데이터를 효율적으로 저장하고 빠르게 제공하기 위한 기술🥳Next.js에서 클라이언트와 서버에서 데이터를 빠르게 제공하거나 서버 부하를 줄이는 데 사용캐싱의 종류1. 클라이언트 캐싱브라우저나 사용자 디바이스에 데이터를 저장하여 재요청 없이 데이터를 제공예시: 브라우저가 이미 로드된 이미지나 CSS 파일을 캐싱하여, 다시 방문 시 빠르게 로드 🏃‍♀️2. 서버 캐싱서버가 자주 사용하는 데이터를 미리 저장하여 클라이언트 요청에 빠르게 응답서버 부하를 줄이고 성능을 최적화 🌟예시 : API 요청 결과를 캐싱하여 동일 요청 시 더 빠르게 처리주요 캐싱 개념과 옵션1. Full Route Cache페이지 전체를 캐싱하여 요청 시 저장된 페이지를 반환정적 페이지나 cache : 'force-cache..

환경변수명 : NEXT_PUBLIC_~~~NEXT_PUBLIC_API_SERVER_URL=http://localhost:12345 환경변수 적용시const response = await fetch(`${process.env.NEXT_PUBLIC_API_SERVER_URL}/post`); [공식문서] Configuring: Environment Variables | Next.jsLearn to add and access environment variables in your Next.js application.nextjs.org

React Server Component react 18버전부터 새롭게 추가된 새로운 유형의 컴포넌트오직 서버에서만 실행되는 컴포넌트(브라우저에서 실행 x)페이지의 대부분을 서버 컴포넌트로 구성할 것을 권장!클라이언트 컴포넌트는 꼭 필요한 경우에만 사용할것서버 컴포넌트서버측에서 사전 렌더링을 진행할 때 딱 한번만 실행됨브라우저에서 실행될 코드가 포함되면 x클라이언트 컴포넌트에게 직렬화되지 않는 Props는 전달불가클라이언트 컴포넌트서버측에서 사전 렌더링 진행할때 한번, 하이드레이션 진행할 때 한번 총 2번 실행=> 클라이언트에서만 실행하는건 아님서버 컴포넌트 import 못함//클라이언트 컴포넌트"use client";import { useEffect } from "react";...export defa..