안녕하세요.주니어 프론트엔드 개발자 천승아입니다.
yarn berry를 도입한 서비스를 운영하며 알아가는 내용을 정리해나가고자 한다. 1. nodeLinker: pnp yarn berry는 .pnp.cjs 파일로 패키지를 관리하기 때문에 기본적으로 node_modules가 존재하지 않는다. 그런데 yarn2 –> yarn3 버전업 후 install 시 .pnp.cjs가 제거되는 문제가 생겼다. .yarn…
antd 기반 프로젝트에서 사용자가 리스트 내용을 입력하고 드래그 앤 드롭으로 순서를 변경하는 기능을 개발하게 되었다. 작업 비용을 줄이기 위해 드래그에서 라이브러리를 사용하기로 했고 react-sortable-hoc를 선정하였다. 다른 프로젝트의 유사한 기능에 사용한 히스토리가 있어 참고에 용이했으며 러닝커브가 낮다고 느꼈기 때문이다. 1. 사용 방법 …
1. 목 함수 (Mock Function) 목 함수란 실제가 아닌 테스트를 위해 만든 모형 함수이다. 특정 기능에 집중하는 목 함수를 적절히 활용하여 효율적인 테스트 코드를 작성할 수 있다. 예를 들어 유저 DB에서 user list를 select 하는 작업 구현 시 작성해야 할 코드가 많아지며(테스트 코드보다 많아질 수도) 네트워크, DB 상태 등 외부…
1. beforeEach, afterEach 두 값을 입력받아 더한 결과를 반환하는 함수를 반복해서 테스트 할 때 아래처럼 작성할 수 있다. fn.ts fn.test.ts 하지만 num에 이전 더한 값이 누적되기 때문에 두 번째 케이스부터 테스트를 통과하지 못한다. 즉 모든 테스트를 통과하려면 num을 초기화하는 과정이 필요하다. 이럴 때 각 테스트 전에…
1. Callback 테스트 1-1. setTimeout 테스트 jest는 테스트가 시작되면 실행을 멈추지 않는다. 이를 위해 done 콜백을 받으면 done이 호출되기 전까지 테스트를 끝내지 않고 기다린다. fn.ts fn.test.ts 기본 설정 5초 동안 응답이 없어서 테스트 실패로 간주한다. 1-2. 에러 테스트 에러를 감지 하려면 try-cat…
1. Jest란? 페이스북에서 만든 Javascript 테스팅 프레임워크 zero config 실현 : 별도 설정 없이 빠르게 테스트 케이스를 작성할 수 있는 장점이 있다. 2. 구성 새 프로젝트에서 jest와 typescript, es6 모듈 시스템을 사용할 수 있도록 설정한다. 2-1. 설치 2-2. 설정 babel.config.json jest.co…
해당 포스트는 댄 밴더캄의 이펙티브 타입스크립트 책 1장을 읽고 정리한 내용입니다. 타입스크립트가 무엇인 지, 자바스크립트와의 관계 등 타입스크립트의 기본적인 개념을 다루고 있습니다. 1. 아이템1 - 타입스크립트 알아보기 타입스크립트는 자바스크립트의 상위 집합이다. 타입스크립트는 컴파일과 실행 모두 자바스크립트로 이루어진다. 상위 집합이다 === 마이그…