목록자바스크립트, 타입스크립트 (6)
혼자 정리
Node.js의 CommonJS, ESM 모듈 호환성Node.js 문서를 참조하여 필요한 부분만 정리했습니다Modules: CommonJS modules | Node.js v21.7.1 DocumentationModules: ECMAScript modules | Node.js v21.7.1 Documentation우선 Node.js 에서는 각 파일을 별개의 모듈로 간주한다는 점을 깔고 갑니다.CommonJS 모듈module.exports 객체에 키값을 지정하여 내보내기CommonJS 방식에서 모듈 내부의 변수를 export하려면 module.exports object 또는 exports object 에 할당하면 됩니다.Example모두 commonjs 타입 모듈이라고 가정합니다.src/to-string...
Typescript 4.9 릴리즈 노트 관련 피쳐 이슈 관련 PR 어떤 expression이 원하는 타입에 속하는지 밸리데이션을 진행하면서 동시에 기존 타입을 유지할 수 있는 오퍼레이터이다 예시를 통해 보자. type SomeRequest = { // ... url: URL | string } 이러한 타입에 속하는 변수를 만들어서 사용하고 싶은 경우가 있다. const someRequest = { // ... url: new URL("http://test.com") } // someRequest.url 의 타입은 URL로 추론됨 // someRequest.url.host 접근 가능 하지만 위와 같이 사용하면 프로퍼티명에서 오타가 생겨도 쉽게 놓칠 수 있다. const someRequest = { // ...
NestJS의 기본 Exception 필터는 프레임워크에서 제공하는 기본 HttpException 에러 클래스 류를 제공한다. 처음 생각한 방향은 특정 컨트롤러에 서비스 레이어에서 던지는 에러를 catch할 수 있는 필터를 장착한 후, 해당 필터에서 HttpException클래스로 예외 전환을 해서 던지려고 했다. 그렇게 하면 글로벌 기본 필터에서 HttpException을 잡을 것이라고 생각했기 때문이다. 하지만 그렇게 해 본 결과 예외가 던져진 후 응답 처리가 되지 않았다. 공식 문서를 찾아보니 이유가 자세히 나와 있었다(https://docs.nestjs.com/faq/request-lifecycle#filters). Filters are the only component that do not re..
다음 형태의 미리 정의된 함수 타입을 가지고 있었다. type FunctionA = (keys: string[]) => void; type FunctionB = (mutator: (prevKeys: string[]) => string[]) => void; 두 함수 타입에서 받을 수 있는 파라미터를 모두 허용하는 함수 타입을 만들고자 했다. 사실 다음처럼 하면 되기는 한다. type FunctionAll = (param: string[] | (mutator: (prevKeys: string[]) => string[])) => void; 그렇지만 이미 정의된 타입을 사용하려 해서 다음과 같이 정의해보았다. type FunctionAll = FunctionA | FunctionB; 그 후 (mutator: (..
상황 리액트에서 직접 검색할 수 있는 드랍다운을 커스텀으로 구현. onBlur 속성에 핸들러를 달아서 인풋 바깥을 클릭했을 때 드랍다운이 닫히도록 하고자 했음 const onBlur = useCallback(() => { // 드랍다운 닫는 행동 }, [/* dependencies */]); return ( // pre-input elements... // after-input elements... ); 문제점 드랍다운에서 선택(클릭 또는 리턴 키 입력)을 하지 않고 blur이벤트가 발생하는 경우 입력하던 input칸이 초기화되도록 해놓은 상태. 유저는 input에서 중간까지 입력하고 나머지 입력할 것이 생각나지 않아서 다른 창으로 넘어갔다가 오는 경우가 있는데(ex. alt+tab) 이 때도 blur이..
JavaScript execution contexts (참고한 것) In depth: Microtasks and the JavaScript runtime environment - Web APIs | MDN Understanding Execution Context and Execution Stack in Javascript 자바스크립트의 코드는 하나의 execution context내부에서 작동한다. 다음 세 종류의 코드는 각각 새로운 execution context를 생성한다. global context : 코드의 메인 바디를 실행하기 위해 생성됨. 어떠한 함수 안에 있지 않은 코드를 실행하기 위한 컨텍스트 local context: 각 함수를 실행하기 위한 컨텍스트 eval function execut..