3월 3주차 기록

배워가기

tsconfig의 resolveJsonModule

.json 파일 확장자를 가지고 있는 모듈의 import를 허용한다.

Ref https://www.typescriptlang.org/tsconfig#resolveJsonModule

package.json에서 특정 모듈에 대해 workerDirectory 설정

Service Worker를 사용하기 위해서 worker 코드를 작성해줘야 하는데, MSW에서는 이 코드를 개발자가 직접 짜게하지 않고 라이브러리에서 제공해준다. 제공해주는 코드를 적용하기 위해서 다음 명령어를 실행한다.

npx msw init public/ --save

명령어를 실행하면 public/mockServiceWorker.js가 생성되며 package.json 파일에 msw.workerDirectory가 추가된다. package.json에 정보를 설정하는 이유는, 추후에 msw가 업데이트 되면서 mockServiceWorker 스크립트가 변경되면 이 변경사항을 자동으로 로컬 파일에 반영해주시 위함이다. (worker 코드를 직접 작성하지 않게 해주면서 코드가 갱신되어도 갱신까지 알아서 해주는 편리함)

여기서 public/은 웹어플리케이션의 Public Directory이다. 웹어플리케이션을 호스팅할 때 정적 리소스들을 호스팅하는 폴더에 mockServiceWorker.js 파일도 함께 호스팅 되어야 한다.

Ref https://blog.walkinpcm.com/25

eslint_d

eslint_d를 처음 실행하는 시점에, 작은 서버가 백그라운드에서 랜덤 포트로 실행된다. 이후 eslint_d 명령어를 eslint와 같이 사용하는데, 이때 이 동작은 작은 서버에 위임된다. eslint_d는 워킹 디렉토리에 따라 eslint의 개별 인스턴스를 로드하여 설정들이 local에 유지되도록 한다. 만약 현재 워킹 디렉토리의 node_modules 폴더에서 eslint가 발견된다면, 해당 eslint 버전이 사용될 것이다. 그렇지 않다면, eslint_d에 기재된 eslint의 버전으로 실행된다.

Ref <https://www.npmjs.com/package/eslint_d

Error: Minified React error #306;

In the minified production build of React, we avoid sending down full error messages in order to reduce the number of bytes sent over the wire.

React의 최소화된 프로덕션 빌드에서는 완전한 오류 메시지를 전송하지 않아서 네트워크를 통해 전송되는 바이트 수를 줄입니다.

🤔 그래서 이게 모야?

Ref https://react.dev/errors/306

Javascript debugger

debugger 문은 중단점 설정 등 현재 사용할 수 있는 디버그 기능을 호출한다. 사용할 수있는 디버깅 기능이 없으면 아무런 동작도 하지 않는다.

디버거가 활성화되면 디버거 문의 위치에서 실행이 일시중지된다. 스크립트 소스의 중단점과 비슷하다.

Ref https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/debugger

isComposing 프로퍼티

compositionstart 이벤트 이후, 그리고 compositionend 이벤트 이전에 이벤트가 호출되었는지 여부를 불리언 값으로 반환한다.

ex) <input/> 태그의 keydown 이벤트를 사용하는 중 한글로 입력했을 때 해당 이벤트가 2번 발생한다. 한글은 조합 문자이기 때문에 두 가지 경우에서 keydown 이벤트가 발생한다.

• 자소를 각각 입력할 때
• 조합이 완료되었을 때

-> 따라서 코드에 이벤트 객체의 isComposing 프로퍼티가 false인 경우에만 이벤트 처리 코드가 실행되도록 할 수 있다.

labeled statement

break [label];

다음처럼 loop에 이름을 지정하여 break 또는 continue를 사용할 수 있다.

let str = '';

loop1: for (let i = 0; i < 5; i++) {
  if (i === 1) {
    continue loop1;
  }
  str = str + i;
}

Ref https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/label

npm-check-updates

패키지 버전 업데이트를 편하게 도와주는 패키지

사용방법

npm i -g npm-check-updates

어떤 패키지를 업데이트할지 선택하고 싶다면

ncu -i

이것저것 모음집

• mobx-react의 <Observer> 컴포넌트를 사용하여 특정 렌더링 영역을 observer로 만들 수 있다.

기타공유

…

마무리

오랜만에 친구들과 다녀온 여행 🌼

아직 채 지지 않은 동백꽃도, 성산일출봉과 함께 보니 더 예뻤던 노오란 유채꽃이 맞이해줬던 제주도

종일 비가 올 거란 예보와 달리 맑고 화창해서 있는 대로 다 즐기고 왔다.

그리고 이제 진짜 봄이 시작되려나 보다.