전체 글 (101) 썸네일형 리스트형 [Next.js] MSW와 Instrumentation을 활용하여 Server-side api 요청 모킹하기 * 개발 환경 정보Next.js: 14.1msw: 2.2 1. MSW api mocking 동작 원리 살펴보기- msw는 가장 먼저 글로벌 fetch를 몽키패치 한다.- 이를 통해 msw가 네트워크 요청을 가로채야 할지 판단하는데, 해당하는 경우 핸들러를 사용하여 모의 응답을 생성한다.- 해당하지 않는 경우에는 본래 네트워크 요청을 진행한다.export class FetchInterceptor extends Interceptor { constructor() { super(FetchInterceptor.symbol) } protected async setup() { const pureFetch = globalThis.fetch // ...생략 globalThis.fetch.. Critical Rendering Path Critical Rendering Path - 브라우저에서 웹 페이지를 렌더링하기 위해 필요한 자원들을 로드한 이후부터 렌더링이 완료되어 사용자 화면에 나타날 때까지의 단계를 말한다. - 웹은 기본적으로 분산되어 있다. 설치하여 사용하는 네이티브 앱과 달리 브라우저는 페이지를 렌더링하기 위해 필요한 모든 자원을 가진 웹 사이트에 직접 의존할 수 없다. - 그렇기 때문에 브라우저는 페이지를 점진적으로(progressively) 렌더링하는 데에 매우 능숙하다. - 네이티브 앱은 일반적으로 설치 단계과 실행 단계가 명확히 구분되는 반면, 웹 페이지 혹은 웹 앱의 경우 그 경계는 덜 분명하다. 그리고 브라우저는 이 점을 염두에 두고 특별하게 설계되었다. - 브라우저는 페이지를 렌더링할 자원을 가지고 있으면 렌더.. [Next.js] Next.js Image 동작 원리 (번역) 출처: https://pixelpoint.io/blog/next-image/ Core Architecture next/image의 주요 아키텍처는 주로 세 가지 구성 요소로 이루어진다. Next.js Image Component Image API Image Optimizer React Component - Next Image 컴포넌트의 주요 기능은 주어진 속성에 맞게 HTML 이미지 요소를 출력하고, src와 srcset 속성에 채워질 여러 url들을 구성한다. - Next Image 컴포넌트는 아래와 같이 작성할 수 있다. import Image from 'next/image'; export default function Page() { return ( ); } - 위의 Next Image 컴포넌트가 .. [React] useEffect vs. useLayoutEffect 출처: https://github.com/donavon/hook-flow [Next.js] React Server Components 파헤치기 1. React Server Components (RSC) - 리액트 서버 컴포넌트는 기존의 리액트 컴포넌트가 서버에서 실행되는 방식을 정의한 개념이다. - 빌드 중에 실행되어 직접 파일 시스템을 통해 컨텐츠를 읽어오거나, API 없이 직접 데이터 계층에 접근할 수 있다. - 이렇게 가져온 데이터를 클라이언트 컴포넌트에 props로 전달할 수 있다. - JS 번들에 포함되지 않는다. (출처: https://react.dev/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components) 2. Server component vs. Client component - "서버 컴포넌트는 서버에서만 실행되고, 클라.. [Next.js] React query prefetching with hydrate 1. 리액트 쿼리 Hydration (v5) *참고: https://tanstack.com/query/latest/docs/framework/react/reference/hydration 'dehydrate' - 서버 컴포넌트에서 fetch한 데이터를 클라이언트 컴포넌트에 전달하려면 serialization을 거쳐야 한다. - serialization이란 데이터를 저장 혹은 전송 가능한 포맷으로 변환하는 과정을 말한다. - 리액트 쿼리의 dehydrate는 이 serialization과 유사한 개념으로, 리액트 쿼리가 server-side에서 생성된 쿼리를 client-side로 전달하기 위해 고정된(frozen) 형태로 만드는 과정을 말한다. - dehydrate된 쿼리는 local storage나 다.. [Next.js] Next.js Image Optimization - Next.js는 built-in Next.js Image Optimization API를 사용하여 자동으로 이미지를 최적화해주는 이미지 컴포넌트를 제공한다. - Image 컴포넌트가 제공하는 최적화 기능은 다음과 같다. 1. 사이즈 최적화 - 이미지 리사이징, 압축 및 WebP/AVIF 같은 모던 이미지 포맷 변환을 통해 이미지 용량을 줄인다. 2. 반응형 이미지 - 디바이스의 크기에 따라 적절한 크기의 이미지를 자동으로 선택하여 로드한다. 3. CLS - 이미지가 로드될 때 발생할 수 있는 레이아웃 변화를 방지하여 CLS 성능을 개선한다. 4. Lazy Loading - 이미지가 뷰포트에 나타날 때 로드하여 초기 페이지 로드 시간을 줄여 LCP 성능을 개선한다. 위 최적화와 관련된 Next Imag.. [Next.js] Authentication with NextAuth.js 1. 개요 인증(Authentication) - 시스템에서 '사용자를 식별하는 과정'을 말한다. - 사용자의 신원을 확인하는 방법에는 고유 자격 증명(이메일, 아이디, 비밀번호 등), 기기 인증, 외부 애플리케이션(google 등) 등 여러 다양한 방법이 존재한다. 인가(Authorization) - 사용자가 시스템의 특정 자원에 접근하거나, 그 자원을 사용할 수 있는 '권한을 부여 받았는지를 확인하는 과정'을 말한다. - 인가는 인증 이후의 단계이다. 먼저 사용자의 신원을 확인하고 앱에서 허용된 행위에 대해 승인한다. - 일반적으로 next.js에서는 사용자가 routes navigation, route handlers, server actions 등을 수행할 때 자격을 검증한다. - 사용자의 인증 정.. 이전 1 2 3 4 ··· 13 다음
