nextjs 1413 [next 14 공식문서 부시기] 4.2 Client Components Client Components Client Components를 사용하면 요청 시 클라이언트에 렌더링할 수 있는 상호작용이 가능한 UI를 작성할 수 있습니다. Next.js에서 클라이언트 렌더링은 선택사항입니다. 즉, React가 클라이언트에서 렌더링해야 하는 Components 를 명시적으로 결정("use Client" 지시문 사용)해야 합니다. 장점 Client Components는 상태(state), 효과(effect) 및 이벤트 리스너(event listeners)를 사용할 수 있습니다. 즉, 사용자에게 즉각적인 피드백을 제공하고 상호작용을통해 UI를 업데이트할 수 있습니다. 사용 Client Components 를 사용하려면 파일 상단, import 문 위에 React "use client" .. 2024. 2. 29. [next 14 공식문서 부시기] 4.1 Server Components Server Components React Server Components 를 사용하면 서버에서 렌더링하고 선택적으로 캐시할 수 있는 UI를 작성할 수 있습니다. Next.js에서는 streaming 과 partial rendering을 활성화하기 위해 렌더링 작업이 경로 세그먼트별로 추가로 분할됩니다. 기본적으로 Next.js는 Server Components를 사용합니다. 필요할 때 Client Components 사용을 선택할 수 있습니다. 서버 렌더링의 이점 Data Fetching: Server Components 를 사용하면 서버 데이터 소스에 더 가까운 서버에서 데이터 요청을 수행할 수 있습니다 . 이를 통해 렌더링에 필요한 데이터를 가져오는 데 걸리는 시간과 클라이언트가 수행해야 하는 요청.. 2024. 2. 24. [next 14 공식문서 부시기] 3.2 Server Actions 활용 Server Actions 과 데이터 변경 Server Actions 은 서버에서 실행되는 비동기 함수입니다. Server componnents 나 Client Components 에서 form 제출 및 데이터 변경을 처리하는 데 사용할 수 있습니다. React use server 지시어를 비동기 함수 상단에 지시문을 배치하여 함수를 Server Actions 으로 표시하거나 별도의 파일 상단에 배치하여 해당 파일의 모든 export 를 Server Actions 으로 사용할 수 있다. Server Actions은 Next.js caching 과 revalidation 아키텍처와 통합됩니다. Server Actions이 호출될 때 Next.js는 single server roundtrip으로 업데이트된 .. 2024. 2. 16. [next 14 공식문서 부시기] 3.1 fetch 를 활용한 데이터 요청과 캐싱 및 재검증 과정 1. fetch 를 사용하여 서버에서 데이터 가져오기 Next.js 는 기본 fetch 웹 API를 확장하여 서버의 각 요청에 대한 캐싱(cashing) 및 재검증(revalidating) 동작을 구성할 수 있도록 합니다. 또한 Server Components, Route Handlers, Server Actions 등 에서 async/await 와 함께 fetch 를 사용할 수 있습니다. 1.1 캐싱(cashing) 기본적으로 Next.js는 fetch 의 반환 값을 서버의 데이터 캐시에 자동으로 캐시합니다. 이는 빌드 시 또는 요청 시 데이터를 가져오고, 캐시하고, 각 데이터 요청에서 재사용할 수 있음을 의미합니다. 1.2 재검증(revalidating) 데이터 캐시를 제거하고 최신 데이터를 다시 가.. 2024. 2. 8. [next 14 공식문서 부시기] 2.9 Intercepting Routes(경로 가로채기) Intercepting Routes 경로를 가로채면 현재 레이아웃 내 애플리케이션의 다른 부분에서 경로를 로드할 수 있습니다. 사용자가 다른 컨텍스트로 전환하지 않고도 경로의 내용을 표시하려는 경우 유용할 수 있습니다. 예를 들어, feed 에서 photo 를 클릭하면 feed 에 오버레이되어 사진을 모달로 표시할 수 있습니다. 이 상황에서 Next.js 는 /photo/123 경로를 가로채서 URL 을 마스크하고 /feed 위에 오버레이합니다. 당연하게도 URL 을 클릭하거나 페이지를 새로 고쳐 photo 로 직접 이동하면 모달 대신 전체 사진 페이지가 렌더링됩니다. 기본 모양 및 규칙 현재 페이지의 컨텍스트를 유지하면서 현재 레이아웃 내에서 경로를 로드할 수 있습니다. (.)동일한 수준 의 세그먼트 .. 2024. 2. 7. [next 14 공식문서 부시기] 2.8 Parallel Routes(병렬 경로) Parallel Routes (병렬 경로) 병렬 경로를 사용하면 동일한 레이아웃 내에서 하나 이상의 페이지를 동시에 또는 조건부로 렌더링할 수 있습니다. 이는 대시보드 및 소셜 사이트의 피드와 같이 앱의 매우 동적인 섹션에 유용합니다. Slots 병렬 경로는 @folder 와 같은 형식으로 정의되는 slots 을 통해 생성됩니다. 슬롯은 공유 상위 레이아웃에 props 으로 전달됩니다. 아래의 예에서 app/layout.js 의 component 는 @analytics 및 @team 슬롯 props 을 받아 이를 children props 과 함께 병렬로 렌더링할 수 있습니다. ※ 그러나 슬롯은 경로 세그먼트가 아니며 URL 구조에 영향을 주지 않습니다. 예를 들어 /dashboard/@analytics.. 2024. 2. 5. [next 14 공식문서 부시기] 2.7 프로젝트 구조 (Route Groups, Private Folders) 프로젝트 구조 라우팅 폴더 및 파일 규칙 외에도 Next.js는 프로젝트 파일을 구성하고 배치하는 방법에 대한 다양한 기능과 전략이 존재합니다. Safe colocation by default Router 구조가 폴더를 통해 정의되더라도 page.js 또는 Route.js 파일이 경로 세그먼트에 추가될 때까지 경로에 공개적으로 액세스할 수 없습니다. 또한 공개적으로 액세스 가능하도록 설정된 경우에도 page.js 또는 Route.js 에서 반환된 콘텐츠만 클라이언트로 전송됩니다. ※ 즉 프로젝트 파일이 앱 디렉터리의 경로 세그먼트 내에 실수로 라우팅되지 않고 안전하게 같은 위치에 배치될 수 있음을 의미합니다. Route Groups Route Groups 은 폴더를 괄호로 묶어 생성할 수 있습니다.폴더가.. 2024. 1. 19. [next 14 공식문서 부시기] 2.5. Router Handlers Route Handlers Route Handlers 사용하면 웹 요청 및 응답 API 를 사용하여 특정 경로에 대한 사용자 정의 요청 핸들러를 생성할 수 있습니다 App 디렉터리 내에서만 사용할 수 있습니다. Convention Route Handlers는 App 디렉터리 내의 Route.js|ts 파일에 정의되어 있습니다. HTTP 메서드 지원 GET, POST, PUT, PATCH, DELETE, HEAD 및 OPTIONS 와 같은 HTTP 메서드가 지원됩니다. 지원되지 않는 메서드가 호출되면 Next.js 는 405 Method Not Allowed 응답을 반환합니다. 경로 지정 관련 페이지와 같은 레이아웃이나 클라이언트 측 탐색에는 참여하지 않습니다. page.js와 동일한 경로에 route.j.. 2024. 1. 16. [next 14 공식문서 부시기] 2.4. Error 처리와 Error boundary 에러 처리 error.js 활용해서 런타임 오류를 적절하게 처리할 수 있습니다. error.js 는 중첩된 하위 세그먼트 또는 page.js 구성 요소를 래핑하는 React Error Boundary 를 자동으로 생성합니다.Error boundary 내에서 오류가 발생하면 오류가 포함되고 대체 구성 요소가 렌더링됩니다. Error boundary 를 감싸는 레이아웃은 상태를 유지 하고 상호작용이 가능합니다. 오류 복구 reset() 메서드를 사용하여 사용자에게 오류 복구를 시도하라는 메시지를 표시할 수 있습니다. 함수 실행 시 error boundary 안의 내용을 다시 렌더링하려고 시도합니다. 성공하면 대체 오류 컴포넌트가 다시 렌더링된 결과로 대체됩니다. // app/dashboard/error.ts.. 2024. 1. 16. [next 14 공식문서 부시기] 2.3. <Link> & navigating 연결 및 탐색 Next.js에서 경로 간을 탐색하는 방법에는 세 가지가 있습니다. 컴포넌트 사용 useRouter 사용 기본적인 window.history 사용 Link component 은 HTML 태그를 확장하여 prefetching 및 클라이언트 측을 제공하는 내장 구성 요소입니다. 경로 간 탐색. 이는 Next.js에서 경로 간을 탐색하는 기본적이고 권장되는 방법입니다. import Link from 'next/link' export default function Page() { return Dashboard } Props Prop Example Type Required href href="/dashboard" String or Object Yes replace replace={false} Boo.. 2024. 1. 15. [next 14 공식문서 부시기] 2.2 Loading 페이지와 Streaming Loading UI loading.js 파일을 활용해 콘텐츠가 로드되는 동안 서버에서 로딩 상태를 표시할 수 있습니다 . 렌더링이 완료되면 새 콘텐츠가 자동으로 교체됩니다. ※ Instant Loading States 같은 폴더에서 loading.js 는 layout.js 안에 중첩됩니다. page.js 파일과 그 아래의 모든 하위 항목을 경계에 자동으로 래핑합니다. Streaming 기존 SSR 의 이해 먼저, 특정 페이지의 모든 데이터를 서버에서 가져옵니다. 그런 다음 서버는 페이지의 HTML을 렌더링합니다. 페이지의 HTML, CSS 및 JavaScript가 클라이언트로 전송됩니다. 상호작용은 없는 사용자 인터페이스는 생성된 HTML 및 CSS를 사용하여 표시됩니다. 마지막으로 React는 hydr.. 2024. 1. 15. [next 14 공식문서 부시기] 2.1 Page & Layout Pages page.js 파일에서 컴포넌트를 구성해 페이지를 정의하고 해당 경로에 맞게 접근할 수 있습니다. 페이지는 기본적으로 Server Components이지만 Client Components로 설정할 수 있습니다. 페이지에서 데이터를 가져올 수 있습니다 데이터 가져오기 ※ 헤더 설정 가능 js 뿐 아니라 js, ts, tsx 형식 사용 가능 Layouts layout.js 파일을 정의해 여러 페이지에서 공유되는 UI 를 구성할수 있습니다. 레이아웃은 상태를 유지하며 다시 렌더링되지 않습니다. 레이아웃은 중첩될 수도 있습니다. children props 를 통해 하위 레이아웃(존재하는 경우) 또는 하위 페이지로 채워집니다. layout.js 및 page.js 파일을 동일한 폴더에 정의할 수 있습니다.. 2024. 1. 13. 이전 1 2 다음
