8월 2주차 기록

August 11, 2023 • ☕️ 5 min read

weekly

마음의 짐 덜어놓기 🧘‍♂️

배워가기

단위 테스트에서는 싱글톤 패턴 ❌

싱글톤 패턴은 개발자도 모르는 사이에 단위 테스트 간에 결합도를 높인다. 테스트 스위트는 서로 독립적이어야 하는데, 싱글톤 패턴은 이를 방해하는 것이다.

테스트 코드에서 싱글톤 클래스를 생성하는 것은 문제가 없지만, 각 테스트 이후에 싱글톤 클래스의 인스턴스를 제거하는 것은 어렵다. 싱글톤 인스턴스 제거를 위해 운영 코드에 다음과 같은 메서드를 추가해야 할지도 모른다.

Copy

// 운영
static getCleanInstance(): State {
  return new State({ id:1995, status:'LOADING' });
}

Copy

// 테스트
let state: State;

beforeEach(() => {
  state = State.getCleanInstance();
});

너무 구리자나… 그니까 싱글톤 패턴은 자제하자 😇

Ref https://dev.to/bacarpereira/don-t-use-singleton-pattern-in-your-unit-tests-8p7

jest의 `resetModules`, `isolateModules`

resetModules
- jest가 캐시한 모든 require/import 구문의 모듈을 초기화한다.
- resetModules 호출 후 jest는 required module을 다시 import해온다.
isolateModules
- resetModules 의 진화한 버전으로, 콜백 함수 안에서 모듈을 초기화할 수 있다.
- 로컬 모듈 상태가 테스트 간 서로 충돌이 발생하지 않게 하기 위해 특정 모듈들을 분리하기 위해 사용한다.

Ref https://jestjs.io/docs/jest-object

react-scripts가 하는 일

“react-scripts”는 리액트 애플리케이션을 개발하고 빌드하는 데 도움을 주는 도구 모음으로, Create React App (CRA)이 아닌 일반적인 리액트 프로젝트에서도 “react-scripts”를 사용하는 이유는 다음과 같다.

개발 환경 설정의 단순화: “react-scripts”를 사용하면 복잡한 개발 환경 설정을 따로 구성하지 않고도 간편하게 리액트 애플리케이션을 개발할 수 있다. 필요한 바벨 변환, 웹팩 설정, 개발 서버 구성 등을 자동으로 처리해준다.
편리한 스크립트 제공: “react-scripts”는 개발, 빌드, 테스트 등을 수행하는 명령어를 제공한다. 이러한 스크립트를 사용하여 더욱 간단하게 애플리케이션을 개발하고 빌드할 수 있다.
Hot Module Replacement (HMR) 지원: “react-scripts”는 HMR을 통해 개발 중에 코드 변경 사항을 빠르게 반영할 수 있도록 도와준다. 이로써 코드 변경 후 새로고침 없이 화면을 업데이트할 수 있다.
표준화된 프로젝트 구조: “react-scripts”를 사용하면 프로젝트 구조가 표준화되어 있어서 여러 사람이 협업할 때 일관된 구조를 유지하기 쉽다.
설정의 추상화: “react-scripts”는 내부적으로 웹팩, 바벨 등을 설정하고 관리하지만, 개발자는 이러한 내부 설정을 신경쓰지 않고 개발에만 집중할 수 있다.
설정의 커스터마이징: CRA가 제공하는 기본 설정 외에도 “react-scripts”를 커스터마이징하여 필요한 설정을 추가하거나 수정할 수 있다. 이로써 프로젝트의 특수한 요구사항에 맞게 개발 환경을 조정할 수 있다.

근데 사실 다 똑같은 말인 것 같다. 개발 환경을 미리 세팅해준다는 말이자나 🤷‍♀️

Ref ChatGPT

webpack config의 `resolve.fullySpecified = false`

fullySpecified 활성화 시 가장 가까운 package.json이 type: module로 설정되어있는 경우 .mjs 파일이나 .js 파일에서 import 구문을 사용할 때 파일 확장자를 끝까지 써줘야 한다. 안 그러면 webpack에서 Module not found 에러가 발생한다.

Ref https://webpack.js.org/configuration/module/#resolvefullyspecified

tsconfig.json 설정들

target
- tsc가 최종적으로 컴파일하는 결과물의 문법 형태를 결정할 수 있다
- 구 버전 자바스크립트도 지원할 수 있도록 “ES5”로 작성해주는 것이 권장된다.
lib
- 현재 프로젝트에서 사용할 수 있는 특정 기능에 대한 문법(타입)을 추가한다.
- target에 따라서 기본으로 설정되는 lib가 달라진다.
- ex) "lib": ["es6", "dom"]
  - JavaScript ES6 문법과 DOM API를 사용할 수 있다

Ref https://velog.io/@sooran/tsconfig.json-제대로-알고-사용하기

이것저것

element === document.activeElement - focus 같은 클래스 하나 없이 자바스크립트로 현재 포커스 된 요소인지 알 수 있다.
<input> 태그의 spellcheck - input에 입력한 값의 철자를 검사하고 빨간줄을 그어줄지 말지를 결정한다.
pnpm why 패키지명 - 지정된 패키지에 의존하는 모든 패키지를 표시해준다. (Ref)