MSW에서 request handler를 작성할 때 경로 매칭과 관련하여 주의해야 할 점을 공유합니다.문제 및 원인MSW request handler를 작성할 때 정확한 경로로 핸들러를 작성해도 오류가 발생할 때가 있습니다. 다음과 같이 구현했다고 해봅시다.const handlers = [ http.get('/posts/:id', postResolver), http.get('/posts/latest', latestPostsResolver),];fetch('/posts/latest'); 여기서 /posts/latest로 요청을 보냈을 때 /posts/latest를 다루고 있는 핸들러에 매칭될 것이라고 일반적으로 예상할 것입니다. 하지만 예상과 달리 /posts/:id를 다루는 핸들러에 매칭되는데요. 이..

책 "이펙티브 타입스크립트"의 아이템 37 "공식 명칭에는 상표를 붙이기" 부분을 읽던 중, 의문이 생겼다. 왜 객체와 원시 타입을 인터섹션하는데 never가 아닌 거지? 브랜디드 타입(Branded Type)을 공부하면서 생긴 의문을 정리하고자 이 글을 쓴다. 브랜디드 타입을 모르고 읽어도 무방하지만, 안다고 가정하고 글을 썼기 때문에 더 깊게 이해하고 싶다면 이 글을 추천한다. 객체 타입과 원시 타입의 인터섹션 살펴보기type A = number & object; // nevertype B = number & {}; // number & {}type C = number & { _brand: "C" }; // number & { _brand: 'C' } object의 타입은 정확히 object이다. 원..

구조적 타입 시스템의 호환성으로 인한 문제타입스크립트는 기본적으로 구조적 타입(Structural Type) 시스템으로 타입의 구조가 동일하면 타입 간 호환이 가능하다.덕분에 유연한 타입 사용이 가능하지만, 동시에 타입이 다름에도 불구하고 같은 구조를 가지고 있어 호환이 되는 불편이 있을 수 있다. type UserID = number;type PostID = number;async function getPost(userID: UserID, postID: PostID) { const response = await fetch(`/${userID}/${postID}`); const data = await response.json(); return data;}const userID: UserID = 1;..

메서드는 정적 메서드와 인스턴스 메서드로 구분할 수 있습니다. 정적 메서드는 인스턴스 없이 바로 호출할 수 있는 메서드를 말하고, 인스턴스 메서드는 인스턴스를 주체로 하여 호출되는 메서드를 말합니다. Number.prototype.toString, String.prototype.split 등이 인스턴스 메서드입니다. 그런데 원시형 타입인 숫자나 문자열이 어떻게 메서드를 가질 수 있는 걸까요? 메서드는 객체에 프로퍼티로 할당된 함수를 말하는 건데 말입니다. 우리는 어떻게 원시형 타입을 마치 객체처럼 다룰 수 있는 걸까요? 이 메서드는 어디에 있는 걸까요? 원시형 타입과 객체 래퍼 타입자바스크립트는 원시형 타입 값을 자동으로 객체로 래핑(wrapping)합니다. 예를 들어 primitive string 값..

로컬 환경에서 브라우저로 스크립트 로드 시 에러html 파일에서 스크립트를 로드할 때 type="module"로 명시하고 브라우저로 html 파일을 열었더니 CORS 에러가 발생했습니다.Access to script at 'file://.../index.js' from origin 'null' has been blocked by CORS policy 현재 출처(null)에서 스크립트 파일의 출처로 접근하는 것이 차단되었다고 합니다. 왜 현재 출처가 null이고, 또 html 파일과 스크립트 파일 모두 로컬에 있는데 왜 출처가 다른 걸까요? 우선 브라우저는 프로토콜이 file인 경우 출처를 null로 설정합니다. 그리고 type="module"로 로드되는 스크립트 파일은 보안을 위해 CORS 정책을 적용받..