전체 글93 단위 테스트 잘 사용하는 7가지 팁 하나의 논리 단위만 테스트 훅/함수 하나, 컴포넌트 하나. 외부 모듈은 jest.mock 으로 격리.Arrange-Act-Assert 패턴 고수 Arrange: 테스트 환경·데이터 준비 Act: 동작 수행 Assert: 결과 검증무엇을 "검증"하는지 이름에 드러내기 should open modal when … 같이 자연어로.불필요한 구현 세부 검사 금지 “setState가 몇 번 호출됐다”보다 "화면에 xxx가 보인다" 혹은 "API가 호출된다" 처럼 행동 위주.하나의 테스트엔 하나의 시나리오 여러 시나리오 섞으면 실패 원인 추적이 어렵다.clearAllMocks / resetModules 로 상태 초기화 테스트끼리 부작용이 없게.실패 메시지 가독성 확보 expect(result).toEqual(expe.. 2025. 5. 1. PostCSS vs LightningCSS PostCSS, LightningCSS개발 언어JavaScriptRust등장 시기2013년2022년 이후주요 목적플러그인 기반으로 CSS 처리고성능 CSS 최적화/압축/변환처리 속도느리거나 보통 (플러그인 많으면 더 느림)매우 빠름 (최대 10배 이상 빠름)최적화 성능기본 최적화 (플러그인 필요)기본 제공 (CSS 압축, 미디어 쿼리 병합 등)파일 크기최적화 플러그인 추가해야 작아짐기본으로 더 작음Tailwind와 관계Tailwind JIT 엔진 내부에서 필수 사용Tailwind v4에서 옵션으로 사용 가능주요 특징유연성 최고, 플러그인 생태계 풍부속도와 크기 최적화에 특화 2025. 4. 28. SWR 리덕스의 단점 -> 코드가 너무 길어진다. next.js 에서 만든 SWR swr은 전역 스토리지 같은 역할을 한다. import useSWR from 'swr' function Profile () { const { data, error } = useSWR('/api/user/123', fetcher) } * swr의 특징 컴포넌트가 마운트 될 때부터 요청을 보낸다. 자동으로 페이지 로드시 자동갱신이 된다. 즉, 자동으로 계속 서버에게 요청을 보낸다. 서버에게 계속 요청을 보내면 최악. •• 그래서 다양한 options들이 존재한다. https://swr.vercel.app/ko/docs/options API 옵션 – SWR 💡 느린 네트워크(2G, 데이터를 수동으로 서버에 다시 요청(O) 할 수 있는 .. 2022. 2. 9. Type,형변환 any 모든 타입의 값이 할당될 수 있다. unknown any와 마찬가지로 모든 타입의 값이 할당될 수 있다. 하지만 , let var: unknown; let var_2: any = var; 타입이 any 인 경우에만 unknown 타입 할당이 가능 한것. 그외에는 (X) as 형변환 할 수 있는 것. 타입스크립트는 as로 자유롭게 형변환 하는것이 불가능하다. 변수: e.target.value -> 변수의 type이 any나 unknown만 as로 자유롭게 형변환이 가능하다. 다만 기본자료형 string boolean number 등의 타입은 unknown으로 형변환할 수 있다. 현재 변수의 타입은 string 그래서 먼저 unknown 으로 바꾸고 다시 원하는 걸로 바꾼다. 2022. 2. 9. 제네릭 제네릭? 한가지 타입보다 여러 가지 타입에서 동작하는 컴포넌트를 생성하는데 사용 객체 내부에서 사용할 데이터 타입을 외부에서 지정해주는 기법 TS에서의 제네릭의 기본문법 function getId(id: T) : T { return id; } 제네릭을 객체에 사용하게 될 경우 객체는 제네릭의 타입만 사용해야 하고 return 되는 값들도 제네릭의 타입과 일치 하여야 한다. 2022. 2. 9. SPA React -> 단일책임원칙 :하나의 컴포넌트는 하나의 역할만한다. 1.재사용 될만한 것은 컴포넌트로 빼자. 2.하나의 컴포넌트는 하나의 역할만하자. SPA 에서는 URL이라는게 존재하지 않는다. (페이지가 하나이기 때문에 ) 오로지 index.html 만 존재한다. 그렇다면, localhost:3090/login 뒤에 붙은 /login 은 무엇일까? 서버는 localhost:3090/ 만 인식한다. 현재 웹팩 데브서버의 devServer.historyApiFallback 으로 인해, 가짜주소들 즉, /login /signup 같은 없는 주소를 있는 주소 인 것처럼 사용 하게 가능한 것이다. 원래라면, localhost:3090/login localhost:3090/signup 을 붙히는건 아무 의미가 .. 2022. 2. 8. 이전 1 2 3 4 ··· 16 다음
