jee's coding story

타입스크립트 환경에서 jest로 테스트를 하려고 코드를 작성하던 중, 아래 이미지처럼 컴포넌트를 렌더링하기 위해서는 testEnvironment 설정을 jsdom으로 설정하라는 오류가 발생했다. 그래서 jest.config.ts 파일을 아래 소스코드처럼 수정하였고, 또 다시 오류가 발생했다. import type { Config } from "jest"; const config: Config = { // ... 기존 설정 testEnvironment: "jsdom", }; export default config; 이번엔 jest-environment-jsdom은 더이상 기본으로 제공되지 않으니 설치를 해야한다는 안내였다. (As of Jest 28 "jest-environment-jsdom" is no ..

최근 프로젝트를 진행할 때 TDD 개발 방식으로 진행해서 테스트 코드를 작성한 적이 있었고 블로그에 포스팅도 했었다. [글 보러 가기] 이번에는 TypeScript로 코드를 작성하고 있으며 vite로 개발 환경을 구축했기 때문에 jest를 따로 설치한 뒤 config 파일을 생성했다. (지난번엔 CRA로 개발 환경을 구축했고, testing-library가 기본으로 설치되어 있었다.) 타입스크립트 환경에서 jest 초기 설정 방법을 작성해보려고 한다. 패키지 설치 npm install --save-dev jest @types/jest ts-jest ts-node or yarn add -D jest @types/jest ts-jest ts-node 위 명령어를 사용하여 jest 패키지와 타입스크립트를 사용..

🔍 글을 시작하기 전에 해당 글은 타입스크립트 프로그래밍 책과 유데미 타입스크립트 강의를 공부하여 정리한 글입니다. 수정해야 할 부분이 있다면 언제든지 알려주세요! 인터페이스 인터페이스는 객체의 구조(형태)를 설명한다. 타입을 작성하고 값을 할당하려고 하면 인터페이스는 이니셜라이져를 사용할 수 없다는 에러메시지가 뜬다. 이를 통해 인터페이스는 구체적인 값이 있는 구조가 아니라, 객체의 구조를 정의하는 것이라고 할 수 있다. 타입 별칭 vs 인터페이스 1) 기본 구조 // 타입 별칭 type Sushi = { calories: number salty: boolean tasty: boolean } // 인터페이스 interface Sushi { calories: number salty: boolean tas..

1. TypeScript가 추론하는 함수의 타입 시그니처 부분은 무엇입니까? 매개변수, 반환 유형 또는 둘 다? 반환 유형을 추론한다. 함수가 콜백함수여서 TS 컨텍스트에서 추론할 수 있는 경우엔 매개변수의 유형을 추론하기도 한다. 2. 자바스크립트의 인수 객체는 타입에 안전한가요? 그렇지 않다면 무엇을 대신 사용할 수 있습니까? 안전하지 않다. 나머지 매개변수를 대신 사용할 수 있다. function f() { console.log(arguments) } function f(...args: unknown[]) { console.log(args) } 3. 기존 reserve 함수에 시작 날짜가 현재인 휴가를 예약하는 기능을 추가하여 구현하자. (세 번째 호출 시그니처 추가 및 reserve 구현 갱신) ..

🔍 글을 시작하기 전에 해당 글은 타입스크립트 프로그래밍 책과 유데미 타입스크립트 강의를 공부하여 정리한 글입니다. 수정해야 할 부분이 있다면 언제든지 알려주세요! T extends type 전달받은 두 개의 객체를 하나로 합치는 함수를 구현해 보자. function merge(objA: T, objB: U) { return Object.assign(objA, objB); } 코드 실행은 잘 되지만, 에러가 발생하는 것을 확인할 수 있었다. 에러는 return 문에서 assign메서드에 전달되는 objA에서 발생했는데, 다음과 같은 오류가 발생했다. (더 보기를 누르면 발생한 오류 문구를 확인할 수 있어요.) 더보기 No overload matches this call. Overload 1 of 4, '..