프론트엔드24 Page Caching [Full Route Cache, Router Cache ] Page Caching NextJS 캐싱 중 페이지와 관련된 캐싱을 알아보겠습니다. NextJS의 페이지 캐시는 Full Route Cache와 Router Cache가 있습니다. (data, request 관련 캐시는 다음에 다루도록 하겠습니다.) Full Route Cache와 Router Cache는 한마디로 말하자면, 서버에서 캐싱과, 클라이언트에서의 캐싱입니다. 즉, Full Route Cache는 서버에서 렌더링 된 페이지를 캐싱해 두는 것이고, Router Cache는 클라이언트가 서버에서 받은 페이지를 캐싱하는 것입니다. 정확히는 ReactServerCompontPayload를 캐싱하는 것이지만 편하게 페이지라 부르겠습니다. Full Route Cache NextJS를 빌드를 하고 나면 페.. 2024. 1. 29. setState 함수는 Dependency list에 넣어줘야 할까? setState 함수는 Dependency list에 넣어줘야 할까? useEffect나 useCallback, useMemo 등 각 훅들에 Dependency list에 set함수를 넣어줘야 하는지 갑자기 궁금해짐. NextJS로 진행하면 아래 두 개의 코드처럼 사용해도 린트가 경고를 안 해준다. 그래서 찾아봤더니 const fn = useCallback(() => { setState(true); }, [setState]); const fn = useCallback(() => { setState(true); }, []); 공식문서의 대답 리액트 구버전 공식문서에서 setState는 함수 식별자 ID가 안전하고 리렌더링 되어도 변하지 않는다고 한다. https://legacy.reactjs.org/doc.. 2024. 1. 17. [CSS] container-queries 목차 - 컨테이너 쿼리 vs 미디어 쿼리 - 사용법 컨테이너 쿼리 vs 미디어 쿼리 기존 반응형을 작성하려면 mdedia query로 css를 작성하게 되는데 이는 viewport 크기를 기준으로 작성하게 됩니다. container-query는 element 크기를 기준으로 작성할 수 있게 해줍니다. 사용법 사용법은 간단하게 container-type: inline-size로 컨텍스트를 지정해준다음 @container [:name] (size)로 사용하시면 됩니다. 아래 코드와 처럼 주의할 점은 container context로 지정된 컨테이너틑 css 수정할 수 없습니다. container 내부 요소들만 css를 변경시킬 수 있습니다. .post { container-type: inline-size; .. 2023. 12. 30. zustand persist(broswer storage(localstorage)연동) zustand persist(broswer storage연동) - 리액트 기준 사용법 - NextJS 기준 사용법 리액트 기준 사용법 기존 zustand의 스토어 정의에서 persist 미들웨어와 옵션을 추가해 준 것이 끝입니다. 공식문서 샘플을 확인 하여 broswer storage를 사용하는데 필요한 최소 코드를 확인해 봅시다 아래 코드를 보시면 옵션 부분 중 name만 명시해도 기본으로 localStorage가 적용되기 때문에 손쉽게 사용가능 합니다. import { create } from 'zustand' import { persist, createJSONStorage } from 'zustand/middleware' export const useBearStore = create( persist.. 2023. 12. 29. 이전 1 2 3 4 5 6 다음
