리액트 Component에서 Font Awesome 사용하기 Font Awesome 패키지를 먼저 설치합니다. npm i @fortawesome/fontawesome-svg-core Font Awesome은 무료 버전 3가지를 사용할 수 있고, 3개 중 사용할 목적에 따라 설치합니다. solid npm i @fortawesome/free-solid-svg-icons regular npm i @fortawesome/free-regular-svg-icons brands 브랜드 로고를 사용하려면 따로 설치해줘야 합니다. npm i @fortawesome/free-brands-svg-icons React에서 사용 가능하도록 npm i @fortawesome/react-fontawesome 설치한 Font Awe..
서버에서 타입스크립트 실행하기 타입스크립트 코드를 NodeJS에서 실행하려면 tsconfig.json의 module 플래그를 commonjs로 설정하고, 코드를 ES2016 자바스크립트로 컴파일합니다. 그러면 ES2016의 import를 require로, export를 module.exports로 변환하여 NodeJS에서 추가 번들 없이 실행할 수 있도록 컴파일해 줍니다. 소스 맵을 사용 한다면 소스 맵도 NodeJS 프로세스에 제공해야 합니다. NPM에서 source-map-support 패키지를 구한 다음 설정 안내를 따릅니다. PM2, Winston, Sentry 같은 대부분의 프로세스 모니터링, 로깅, 에러 리포트 도구는 소스 맵을 기본으로 지원합니다. https://www.npmjs.com/pa..
프로미스로 정상 회복하기 먼저 Promise로 파일에 내용을 추가하고 결과를 다시 읽어오는 예를 살펴보겠습니다. function appendReadPromise(path: string, data: string): Promise{ return appendReadPromise(path, data) .then(()=>readPromise(path)) .catch(error=>console.error(error)) } 이 코드는 원하는 일을 완수하는 데 필요한 비동기 작업들을 직관적인 체인(chain) 하나로 엮은 결과, 콜백 피라미드는 전혀 등장하지 않는다는 점에 주목합니다. 한 작업이 성공하면 다른 작업을 실행하며, 그중 하나가 실패하면 catch 절로 직행합니다. 같은 기능을 콜백으로 구현하려면 아래처럼 ..
이벤트 방출기 이벤트 방출기는 채널로 이벤트를 방출하고 채널에서 발생하는 이벤트를 리스닝하는 API를 제공합니다. interface Emitter { // 이벤트 방출 emit(channel: string, value: unknown): void // 이벤트가 방출되었을 때 어떤 작업을 수행 on(channel: string, f:(value: unknown)=>void): void } 이벤트 방출기는 JavaScript에서 자주 사용하는 디자인 패턴입니다. DOM 이벤트, 제이쿼리 이벤트, NodeJS의 EventEmitter 등을 사용하면서 이미 이벤트 방출기를 사용해 본 적 있으신 분도 계실 겁니다. 대부분의 언어에서 이런 형태의 이벤트 방출기는 안전하지 않습니다. value의 타입이 특정 chan..
