nextjs7 [NextJS] e2e - PlayWright 설치 및 메인화면 띄우기(1) playwright는 병렬 테스트가 가능하며, 속도도 cypress보다 빠르고, 마이크로소프트에서 지원해 주기 때문에 playwright로 시작 설치 npm init playwright@latest 위의 명령어를 입력하면 아래처럼 다른 것들도 물어보는데 Choose between TypeScript or JavaScript (default is TypeScript) > 언어 선택 Name of your Tests folder (default is tests or e2e if you already have a tests folder in your project) > 테스트 폴더 이름 지정 Add a GitHub Actions workflow to easily run tests on CI > CI 작성해줌 .. 2024. 2. 6. 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. 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 다음
