PPR은 island 아키텍처인가?

PPR은 island 아키텍처인가?PPRisland 아키텍처PPR과 island 아키텍처의 차이클라이언트 컴포넌트와 island의 비교Astro의 렌더링 모델2층 아키텍처의 나선기술 선택의 나선요약 최근 Next.js의 새로운 렌더링 모델인 Partial Pre-Rendering(이하 PPR)이 장안의 화제인데요. 결론부터 말씀드리면, PPR과 island 아키텍처는 전혀 다른 개념입니다. 이 글에서는 PPR과 island 아키텍처의 차이점에 대해 설명하겠습니다. PPR 먼저 PPR과 island 아키텍처의 개요를 다시 정리해보겠습니다. PPR은 페이지를 static rendering으로 하면서도, 부분적으로 dynamic rendering을 가능하게 하는 렌더링 모델입니다. 구체적으로는, 화면을 빌드 ..

• format_list_bulleted Javascript
• · 2024. 6. 10.
• textsms

Next.js와 PPR: 프리렌더링의 신시대와 SSR/SSG 논쟁의 종결

Next.js와 PPR: 프리렌더링의 신시대와 SSR/SSG 논쟁의 종결렌더링 모델의 역사 돌아보기Pages Router 시대App Router 등장 이후Streaming SSRSSG/SSR에 있어 정적·동적 데이터의 혼재PPR이란?정적화와 Streaming 렌더링의 혜택PPR의 동작 관찰PPR 고찰SSG + Client fetch / Streaming SSR과의 비교PPR을 통한 React다운 설계 책임SSR/SSG 논쟁의 종결PPR의 단점 고찰감상 Partial Pre-Rendering(이하 PPR)은 Next.js v14.0에서 발표된 SSR과 SSG에 필적하는 새로운 렌더링 모델입니다. PPR은 개발 중인 기능으로, v15의 RC(Release Candidate) 버전에서 experimental ..

• format_list_bulleted Javascript
• · 2024. 6. 10.
• textsms

2024년에 Remix 앱을 위한 최적의 호스팅 옵션 가이드

2024년에 Remix 앱을 위한 최적의 호스팅 옵션 가이드추천사항서버리스 함수(Serverless Functions)Long-lived serversVercelFastlyNetlifyCloudflareSSTFly.ioRenderRailwayDigitalOcean App PlatformGitHub Pages기타 호스트Remix는 많은 다른 호스팅 옵션을 지원합니다. 이 가이드는 당신의 앱에 적합한 호스팅을 선택하는 데 도움이 될 것입니다.추천사항이 가이드는 당신을 특정 제공 업체로 유도하려는 것이 아니라, 정보에 입각한 결정을 내릴 수 있도록 필요한 정보를 제공하는 것을 목적으로 합니다. 그럼에도 불구하고, 대부분의 사람들에게 가장 좋은 아키텍처는 관리되는 컨테이너에서 Remix를 운영하면서 앱 내에서 ..

• format_list_bulleted Javascript
• · 2024. 6. 6.
• textsms

Next.js 버전 15의 핵심 변경 사항 - 기본적으로 비활성화된 라우팅 및 데이터 캐싱

Next.js 버전 15의 핵심 변경 사항 - 기본적으로 비활성화된 라우팅 및 데이터 캐싱v15의 파괴적 변경 사항 개요캐시 설정의 파괴적 변경Data Cache의 비활성화Router Cache의 비활성화왜 이 시점에서 변경되었을까?v15 이후 Next.js의 설계 사상요약Next.js의 App Router는 종종 어렵다는 평가를 받습니다. 이는 React의 새로운 기능인 Server Components와 같은 Server First 패러다임 전환을 요구하고, 기본 캐시 동작이 초보자들에게 혼란을 줄 수 있기 때문입니다. Server Components나 Server Actions와 같은 React의 새로운 기능은 초보자를 위한 에러 힌트 및 수정을 돕는 설계가 되어 있으며, 많은 문서와 기사가 공개되어..

• format_list_bulleted Javascript
• · 2024. 5. 25.
• textsms

자바스크립트 배열 완전 정복: 희소 배열부터 다양한 메서드 활용까지

희소배열과 반복문(Sparse Arrays and Loops)for-in 문은 프로퍼티를 반복하기 때문에, for-in 문을 사용하여 희소 배열(sparse array)을 반복할 때 프로퍼티가 없는(빈) 인덱스는 건너뜁니다.공통된 3가지 for 문 특징 부분에 두 개 이상의 문(statement)이나 선언을 작성하려면 블록 문({ ... })을 사용해 하나의 문으로 묶어야 합니다.for (...) {console.log("Hello");console.log("World");}하나의 문만 작성할 때도 블록 문을 사용할 수 있습니다.for (...) {console.log("Hello");}for 문 자체는 하나의 문이므로 문이 기대되는 곳에 작성할 수 있습니다.for 문을 중첩해서 사용할 수 있습니다.fo..

• format_list_bulleted Javascript
• · 2024. 5. 17.
• textsms

TypeScript 고급 타입 마스터하기 - 객체 키 추출부터 infer 활용까지

TypeScript의 고급 타입 마스터하기다룰 개념객체의 키를 얻기객체의 키 필터링클래스를 다루기문자열 조작하기infer를 사용해 기존 타입에서 타입 추출하기요약TypeScript의 고급 타입 마스터하기지난주에 TypeScript의 3가지 황금 규칙(독자적인 해석)에 대해 설명했습니다. 그 중 세 번째 규칙인 "타입의 파생을 우선한다: 범용 타입(제네릭)"은 특히 구현하기 어려운 부분입니다. 타입 시스템이 효과적으로 기능하는 이유는 그 정의가 정확하기 때문입니다. 하지만 정확할수록 타입의 중복이 늘어나고, 코드가 유지보수 불가능해질 위험이 커집니다. 이에 대한 해결책은 파생(=다른 타입에서 타입을 정의하는 것)을 활용하는 것입니다. 하지만 이는 간단하지 않습니다. 그래서 오늘은 타입을 최적으로 설정하기 ..

• format_list_bulleted Javascript
• · 2024. 5. 15.
• textsms