HTMLButtonElement에 style 적용하는 방법 간단하게 HTMLButtonElement를 설명하자면, HTMLButtonElement는 인터페이스로 요소를 조작하기 위한 속성 및 메서드를 제공합니다. (정규 HTMLElement 인터페이스 외에도 상속을 통해 사용할 수 있습니다.) Style 적용하기 일단 button을 만들어줍니다. const audioButton = document.createElement('button') 이후 버튼명.style.CSS속성 = '문자열'로 스타일을 적용합니다. // style 적용하기 audioButton.style.flex = 'auto' audioButton.style.display = 'flex' audioButton.style.alignItems ..
리액트 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 절로 직행합니다. 같은 기능을 콜백으로 구현하려면 아래처럼 ..
