728x90 반응형 TIL147 tanstack Query v5 기존 상태 라이브러리는 비동기 및 서버 상태 관리에 적합하지 않다우리는 서버 상태를 관리하기 위한 가장 좋은 라이브러리다!!구 리액트 쿼리현 탠스택 쿼리 서버 상태 관리란? 클라이언트에서 제어하지 않은 상태에서 관리됨비동기 api 필요사용자가 모르는 사이에 바뀔 수도 있음 캐싱같은 데이터 요청 중복 제거최대한 빠르게 업데이트 반영 stale-while-revaildate http 캐싱에도 사용되는 캐싱 매커니즘-> 캐싱된 데이터를 사용자에게 줌 + 비동기적으로 콘텐츠를 서버에서 revaildate fetching이건 fresh한 상태임조건에 따라 (staleTime) stale로 바뀜 사용되지 않으면 inactive 로 바뀜gcTime(cacheTime) 가비지 콜렉터 타임... 캐시를 제거하는.. 2024. 7. 28. 타입스크립트 never, 컨디셔널 타입 저번주 주말에 공부했는데 이번주에 일하다 써먹을 일이 생겨서 얼른 도입하고정리하려고 씀 never는 어떠한 타입도 대입할 수 없음 그럼 언제 never가 뜨는지.... 함수가 정상적으로 완료되지 않거나, 반환할 가능성이 전혀 없는 경우에 사용됨예를 들어, 무한 루프나 예외를 던지는 경우임 근데 선언형일때랑 표현식 쓸 때랑 타입을 다르게 추론함 표현식일 때는 void()로 추론함never가 더 맞는 거 아닌가? 해서 never 넣으면never는 어떠한 타입도 넣을 수 없기 때문에 타입 오류 뜸 이렇게 쓰면 됨 근데 저런 코드가 많진 않을 거 같음그럼 왜 never를 쓸까 뭐가 좋아서 ??? 코드의 명확성: never 타입을 사용하면 이 함수가 정상적으로 반환되지 않는다는 것을 명확하게 나타낼 수 있습.. 2024. 7. 27. jest 2 테스트 종류 참고https://youtu.be/q9d631Nl0_4?si=ygDZPvIiM4jtBDwohttps://youtu.be/MN7Pw4mK6lU?si=uj4TEHC7lGZJGx5S 프론트 엔드는 입출력이 데이터가 아니기 때문에 테스트가 애매함 입력 데이터- dom 이벤트 ( 마우스, 키보드, 터치 등 이벤트 )- 라우팅/io ( URL 변경, 로컬스토리지 등) 출력데이터- 코드 관전 (HTML, CSS)- 사용자 관점 (브라우저가 렌더링한 화면) 시각적 요소 검증으로는 스냅쇼 테스트가 있음 => 이거 테스트 애매함... html 구조이기 때문에 테스트 코드를 잘 때도 픽셀 정보를 예측할 수 없고테스트가 통과한다고 해도 의도된 결과가 나온다고 보장할 수 없음 그래서 이걸 편하게 해주는게 stortyBo.. 2024. 7. 21. 타입스크립트의 추론 const test : number = (a:number, b:number) => a + bconst test = (a:number, b:number) => a + b 이 정도 반환값은 그냥 알아서 추론해줌 첫번째 리턴값은 number 라고 표기하고두번째는 리턴값 타입 표기 안 했음 안해도 됨알아서 추론해줌 그렇다면 타입스크립트한테 어디까지 추론을 맡겨야할까? 책에서는 타입스크립트가 타입을 제대로 추론하면 그대로 쓰고, 틀리게 추론할 때만 올바른 타입을 표기하라고 함 const a = "안녕"; 이런 이유 때문에...리터럴이 더 좁은 개념임 const 는 리터럴로 추론하면서 let은 string으로 더 넓게 추론함let으로 선언한 변수는 다른 값을 넣을 수 있기 때문임이걸 > 라고 함 그리고 l.. 2024. 7. 20. 새로 나온 hook useFormStatus 등 리액트 동향 살펴보기 https://react.dev/reference/react-dom/hooks/useFormStatus useFormStatus – ReactThe library for web and native user interfacesreact.dev import { useFormStatus } from "react-dom";import { submitForm } from "./actions.js";function Submit() { const { pending } = useFormStatus(); return ( {pending ? "Submitting..." : "Submit"} );}function Form({ action }) { return ( );.. 2024. 7. 2. icon suspense lazy 기능으로 넣기 vite 환경import svgr from 'vite-plugin-svgr';vite.config.ts에 svgr() 추가함 이거 안 쓰면 컴포넌트 감싸서 가져와야 됨 import { Suspense, lazy, memo } from 'react';import Loading from './Loading';import { IconProps } from './types';import S from './styles';const Icon = memo( ({ fileName, alt = 'image', width = '100%', height = '100%', handleClick, }: IconProps) => { const LazyComponent = lazy(() => .. 2024. 7. 2. vite와 swc vite vue가 만들었음프랑스어 인데 한국말로 바꾸면 빠르다는 뜻이라고 한다예전에 사용해 본 결과진짜 빠르긴 했었음 vite 공식 문서에서 가져온 문구기존 번들링 툴들 넘 느려서 만들었다고 함 빠른 이유1 :노드 모듈 중요한 것들만 미리 정적으로 번들링해놓고나머지는 es modules 사용해서 동적으로 가져오기 때문에 개발서버 가볍고 빠름 웹팩은 Webpack Dev Server를 처음 시작할 때프로젝트의 모든 파일을 읽고, 의존성을 해석하고, 번들링을 수행해야 함. 그러니까 hmr 기능을 사용하면 메모리상에서 변환된 파일만 변경하는 건 맞는데 그 전에 개발 서버 킬 때마다 전체를 모두 읽어야한다는 거임(이 과정은 특히 프로젝트가 클수록, 그리고 파일이 많을수록 시간이 오래 걸림이걸 콜드 스타트 .. 2024. 6. 30. ts 브랜딩 타입 (태그드 타입) vs enum vs 리터럴 같은 number 타입이지만 kg, cm로 성질이 다른 값들...좀더 구체적인 타입을 정의하고 싶을 때 이렇게 씀 타입 안정성을 올릴 수 있는 방법 중 하나인 브랜딩 타입 const length = 80 as number & {__brand:"cm"}; // cm const weight = 90 as number & {__brand:"kg"} // kgfunction showWeight (weight:number & {__brand:"kg"}) { return console.log("weight ", weight)}function showLength (length:number & {__brand:"cm"}) { return console.log("length ", length)}showWeight(.. 2024. 6. 28. jest jest 동작 방식 1. 테스트 코드 다 짬 + script 명령어까지 완성함을 가정으로 이야기하자면2. npm test (설정한 명령어) => jest.config.js 나 package.json을 통해 jest 설정을 읽음3. 테스트 파일을 찾음. 기본적으로 루트 디렉토리에서 '.test.js, .test.ts, .spec.js, spec.ts' 를 찾음 (jsx나 tsx 도 찾음)4. 테스트 환경을 설정함 4-1. testEnvironment 설정에 따라서 테스트 환경 설정함. 4-2. 리액트는 jsdom을 사용하여 브라우저와 유사한 환경을 만듦 4-3. 이때 jest.setup.ts 같은 파일도 실행됨5. 테스트 파일을 하나씩 실행함 5-1. 파일을 가져와서 실행 .. 2024. 6. 26. 이전 1 2 3 4 5 ··· 17 다음 728x90 반응형
