typescript9 [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. 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. 타입스크립트 교과서: 3-10 Awaited, Promise 타입스크립트 교과서가 나왔길래 보는 중. 어려운 부분이 있어서 작성 Awaited에 대한 이야기다. 이걸 직접 사용해 본적은 없는데 가끔 라이브러리를 찾아보면 이런게 써져 있음 Awaited에 대해 알아보자 1. 프로미스는 기본적으로 Awaited 타입이 붙여짐 2. await 키워드를 붙이면 자동으로 Awaited로 감싸짐 const str1 = Promise.resolve('promise'); // type str1 = Promise const str2 = await Promise.resolve('promise'); // type str2 = Awaited 3. Awaited 분석 규칙 규칙 1 Awaited === 객체가 아닌 값 규칙 2 Awaited === Awaited 규칙은 아래를 읽고 코드.. 2023. 12. 1. 이전 1 2 3 다음
