개발공부29 [Next.js] Data Fetching Data fetching은 말 그대로 어딘가에서 데이터를 '가져오는' 작업을 의미하며보통은 서버나 API로부터 데이터를 요청에서 받아오는 것을 말한다. Client-side fetching (fetch는 클라이언트에서 일어난다.)브라우저(클라이언트)가 서버(API)에 요청을 보내는 방식.fetch()는 브라우저 내장 함수이기 때문에 클라이언트 환경에서만 작동한다.React에서는 보통 useEffect와 useState를 같이 사용해서 fetch를 처리한다. 클라이언트 컴포넌트에서의 fetch 예시 "use client";import { useState, useEffect } from "react";export default function Page() { const [isLoading, setIsLoa.. 2025. 4. 14. [Next.js] Loading UI Next.js는 어떤 순서로 화면을 보여줄까?Next.js 앱 라우팅 구조에서는 사용자가 페이지를 방문할 때 가장 먼저 보여주는 UI 요소들이 있다.사용자가 특정 페이지로 이동했을 때 전체 페이지를 기다릴 필요 없이,부분적으로 먼저 보여줄 수 있는 UI를 Next.js가 자동으로 렌더링해준다.layout.tsxpage.tsx에 도달하기 전에 보여주는 일부 UI (ex. Navigation)loading.tsx loading.tsx란?Next.js가 React의 Suspense 기능을 활용하여 콘텐츠가 로드되는 동안 보여줄 UI를 만드는 데 사용된다.app/ └── movies/ ├── page.tsx // 실제 페이지 └── loading.tsx // 페이지가 준.. 2025. 4. 14. useEffect useEffect리액트에서 컴포넌트가 렌더링된 이후에 특정 작업을 실행하고 싶을 때 사용하는 훅(Hook)대표적으로 API 호출, 타이머 설정, 이벤트 리스너 등록, 콘솔 출력 등과 같은 "부수 효과(side effect)"를 처리할 때 쓰인다. useEffect(() => { // 실행하고 싶은 코드}, [의존성]); 첫 번째 인자: 실행할 함수두 번째 인자: 의존성 배열 (dependency array)→ 배열 안에 있는 값이 바뀔 때마다 이 코드가 다시 실행된다. 두 번째 인자가 빈배열일 경우, 컴포넌트가 처음 나타날 때 한 번만 실행된다. ( API 호출 / 초기데이터 불러오기 )상황useEffect 쓰는 이유데이터 요청렌더링 후 fetch/axios로 API 호출이벤트 등록브라우저 이벤트 추가.. 2025. 4. 14. [Next.js] Route Groups, Dynamic Routes, Metadata Route Groups routes들을 논리적으로 그룹화할 수 있게 해주는 기능URL 경로에는 영향을 주지 않는다. -> 파일 구조를 더 명확하게 정리할 수 있다.사용방법 : 폴더 이름을 괄호 ( ) 로 감싼다.파일구조생성 URLapp / about / page.tsx/aboutapp / (about) / page.tsx/app / (home) / about.tsx/about Dynamic route (동적 라우팅)폴더 이름에 대괄호 [ ] 를 사용하면 동적 라우팅(Dynamic Routing) 을 만들 수 있다.app/ └── product/ └── [id]/ └── page.tsx 위 구조는 /product/123, /product/abc, /product/42 등 다양한 U.. 2025. 4. 13. [Next.js] layout.tsx Next.js에서는 layout.tsx 파일을 이용해 페이지의 레이아웃을 구성할 수 있다.이 레이아웃 시스템은 중복 없이 구조적인 UI를 만들 수 있게 해주고, 페이지 간 전환 시에도 공통 UI를 유지하게 해준다. 레이아웃 파일의 기본 개념 layout.tsx는 Next.js가 페이지를 렌더링하기 전에 먼저 확인하는 파일.각 디렉토리에 존재할 수 있으며, 중첩 레이아웃을 구성할 수 있다.즉, 상위 디렉토리의 레이아웃 안에 하위 디렉토리의 레이아웃이 포함되어 렌더링됩니다. 레이아웃의 렌더링 과정 Next.js는 먼저 최상위(root) 레이아웃부터 렌더링을 준비한다. /app/layout.tsx그 후 현재 URL을 기준으로 해당 경로의 디렉토리로 이동하여,해당 디렉토리에 layout.tsx가 있는지 확.. 2025. 4. 13. [Next.js] 하이드레이션(Hydration) 웹 렌더링 방식: CSR과 SSR💡렌더링 (Rendering)우리가 만든 React 컴포넌트를 브라우저가 이해할 수 있는 HTML로 바꾸는 과정 즉, 사용자가 볼 수 있는 웹페이지를 만드는 과정인데, HTML을 "어디서" 만들 것인지에 따라 방식이zing829.tistory.com Next.js는 어떻게 렌더링할까?💡렌더링(Rendering) React와 같은 라이브러리에서 우리가 작성한 컴포넌트(JSX)는 브라우저가 직접 이해할 수 없다. 컴포넌트를 브라우저가 이해할 수 있는 HTML로 변환해주는 과정이 바로 렌더링이다. Next.js는 기본적으로 SSR(Server Side Rendering)을 사용한다.SSR: 서버에서 HTML을 미리 만들어서 브라우저에 전달하는 방식사용자가 페이지.. 2025. 4. 12. [Next.js] App Router Next.js는 왜 폴더가 곧 URL ????Next.js는 최신 버전부터 App Router를 도입하여, 폴더 구조만으로 페이지와 URL을 정의할 수 있도록 했다.파일 시스템 기반의 라우팅 방식이라 누구나 직관적으로 구조를 파악하고 사용할 수 있다는 장점이 있다.( 혁명 그 자체. .) Next.js의 App Router가 어떻게 동작하는지, 그리고 URL이 어떻게 생성되는지 예시와 함께 정리하고자 한다.Next.js의 App Router는 /app 폴더를 기준으로 작동한다.이 app 폴더가 프로젝트의 루트 경로(/)를 구성하게 되며, 내부 폴더와 파일이 곧 URL 경로가 된다.app폴더 내의 page.tsx파일을 (/)를 루트 세그먼트(root segment)라고 부른다./app├── layout... 2025. 4. 8. [Next.js] 스타트 - 프로젝트 생성 목차- Next.JS 란?- Next.JS 특징- 프레임워크 vs 라이브러리- Next.JS 프로젝트 생성Next.js ?Next.js는 React 기반의 오픈소스 JavaScript 프레임워크로, 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), API 라우트 등 웹 애플리케이션 개발에 필요한 많은 기능을 제공한다.Next.js의 주요 특징서버 사이드 렌더링(SSR): 페이지를 서버에서 렌더링하여 SEO 개선 및 초기 로딩 속도 향상정적 사이트 생성(SSG): 빌드 시점에 페이지를 미리 생성하여 빠른 성능 제공파일 시스템 기반 라우팅: 폴더와 파일 구조를 기반으로 자동으로 라우트 생성API 라우트: 서버리스 함수를 쉽게 생성할 수 있는 기능자동 코드 분할: 페이지별로 필요한 JavaScript.. 2025. 4. 8. 파라미터(Parameter) 공부를 하다 보면 useParams()나 파라미터(Parameter)라는 말을 자주 보게 된다.솔직히 일상생활하면서 자주 쓰는 말이 아니기 때문에 나는 아직도 익숙치가 않다.그래서 익숙해지고자 블로그에 정리하기로 했다.파라미터(Parameter)파라미터(Parameter)는 어떤 것을 구분하거나 전달할 때 쓰는 정보 조각이다.특히 웹 주소(URL) 안에 들어있는 정보를 말할 때 많이 사용된다.https://zing829.tistory.com/56 나의 티스토리 블로그 주소에서도 볼 수가 있는데 이 주소에서 맨 끝에 있는 56이 바로 파라미터다.56은 블로그 글 번호, 즉 해당 글을 구분하는 정보를 나타낸다.https://zing829.tistory.com/:postId 파라미터의 종류( 한 URL에 두 .. 2025. 4. 5. 이전 1 2 3 4 다음
