Pewwwjjj

이번 ES2020에서 새로 추가된 Optional Chaining은 "?."를 사용하여 객체의 속성 값에 대해 접근할 수 있게 해줍니다. 이미 타입스크립트 3.7 버전에서 구현된 기능이기 때문에, 기존에 타입스크립트를 사용하시던 개발자분들은 그리 낯설지 않은 문법일 것 입니다. 참조하는 대상이 null이나 undefined가 아니라면(= nullish 하지 않다면) 속성에 대한 접근이 가능하며, 만약 nullish 할 경우 undefined를 반환합니다. function getProp(obj) { return obj?.a; } // A const obj = { a: 1 }; getProp(obj); // 1 // B const obj2 = null; getProp(obj2); // undefined 일반..

이번 포스팅에서는 React-Testing-Library (줄여서 RTL) 를 활용한 HOC 테스트에 대해 정리해보려 합니다. 리액트 컴포넌트 테스트를 위해 보통 Enzyme나 RTL을 사용하는데, Enzyme가 Implementation Driven Test 방법론을 따르며 어플리케이션이 어떻게 동작하는지에 대해 초점이 맞춰진 반면, RTL은 Behavior Driven Test (행위 주도 테스트) 방법론을 기반으로 어플리케이션을 사용하는 사용자의 행동에 초점을 맞추고 있습니다. 어쨌든, 예시로 들어볼 코드는 아래와 같습니다. // loginRequired.tsx import * as React from 'react'; import {useSelector} from 'react-redux'; impo..

함수의 테스트를 진행하다, import difference from 'lodash/difference'; difference(); 의 구문으로 인해 TypeError: difference_1.default is not a function 라는 에러가 발생한 것을 확인했습니다. 이번 포스팅에서는 관련된 내용에 대해 정리해 볼 예정입니다. lodash에서는 CommonJS 스펙의 require를 사용합니다. 따라서, 위 코드와 같이 CommonJS 모듈을 ES6 모듈 코드베이스로 가져오려고 할 때 문제가 발생합니다. 해당 문제를 // 1 require(~~~); // 2 import * as ~~~ 의 구문을 사용하여 해결할 수도 있지만, moment ( https://www.npmjs.com/package..