본문 바로가기

전체 글54

[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.
ESM:(ECMAScript Module) with import, from ESM: ECMAScript 모듈 ECMAScript 2015 명세의 일부분으로 자바스크립트에 서로 다른 환경(브라우저, node등)에서도 적합한 공식 모듈 시스템을 부여하기 위해 도입되었습니다. 특징으로는 간편한 문법, 순환 종속성에 대한 지원과 비동기적으로 모듈을 로드할 수 있게 되었습니다. CommonJS와 큰 차이는 ES 모듈은 static 특성입니다. 즉, 임포트가 모든 모듈의 가장 상위 레벨과 제어 흐름 구문의 바깥쪽에 기술됩니다. 아래 코드를 확인해 봅시다. 아래 코드는 EMS에서는 사용할 수 없습니다. 이유는 import문은 가장 상위에 작성해야 되기 때문입니다. // ❌ An import declaration can only be used at the top level of a modul.. 2024. 1. 3.

티스토리툴바