프론트엔드/NextJS6 [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. 나도 오픈소스 기여를 ?!?! (with react-query) react-query v5가 나와서 nextjs연습할 때 호다닥 써봤는데 react-query-devtools를 사용하려니깐 안 됐었다.. 진짜 별의별짓을 했는데도 안돼서 "react-query-devtools is not working in nextjs v13" 안된다고 이슈 올렸더니 다음 버전에 고쳐진다고 한다. 코드를 기여한 것은 아니지만 새로운 경험을 했다. 사랑해요 lachlancollins 해당 이슈 링크 https://github.com/TanStack/query/issues/5671 react-query-devtools is not working in nextjs v13 · Issue #5671 · TanStack/query Describe the bug react-query-devtool.. 2023. 7. 15. Server mutate시 react-query cache 사라짐 현상 문제 발생 nextjs에서 sever mutate를 이용하려면 useRouter()를 사용하여 페이지를 refresh를 해줘야된다. 근데 나는 react-query와 같이 사용중이었는데 문제가 발생했다. useRouter().refresh()를 하면 react-query의 캐시 데이터가 모두 사라졌다. 아래 사진을 잘 보면 button 클릭시 데이터들이 모두 지워짐 아래는 코드이다. 'use client'; import { useQuery } from '@tanstack/react-query'; import { useRouter } from 'next/navigation'; async function fetchTest() { return fetch('/api/t', { method: 'get' }).th.. 2023. 7. 15. 이전 1 2 다음
