본문 바로가기

JavaScript15

VSCode에서 JavaScript CommonJS의 export 객체 속성들 <Find Reference>에 검색되지 않는 문제 문제 JavaScript에서 CommonJS 형식인 module.exports를 통해 객체를 export할 수 있습니다. 아래 코드는 math.js 내의 산술연산 함수들을 export하고 있습니다. 그리고 math.js의 함수를 사용하는 index.js 가 있습니다. 지금 상황에서는 index.js가 math.js의 sum과 subtract 함수를 import 하여 사용하고 있는데요, 만약, 다양한 코드 영역에서 sum 함수를 import하여 사용하고 있을 때, sum 함수를 참조하고 있는 모든 영역을 찾고 싶을 때 어떻게 해야 할까요? VSCode에서는 기능을 통해 선택한 속성을 참조하는 코드 영역을 모두 찾아줍니다. 그런데, 위 코드처럼 CommonJS 형식으로 export한 속성들은 같은 파일 내에.. 2022. 9. 6.
JavaScript로 interface 모사하기 소개 JavaScript에는 class만 존재하고, interface가 없습니다. 따라서, interface를 이용한 아키텍처를 불완전하게 적용할 수 밖에 없습니다. class만으로 interface와 비슷한 기능을 하도록 모사하는 방법을 제안합니다. Step 1. interface base 생성 프로젝트에서 소스 폴더 내에 interfaces 폴더를 생성하고, 그 안에 base.interface.js 파일을 만들어 다음과 같이 작성합니다. /** * 인터페이스 정의 헬퍼 함수 * * @template T * @param {T} newInterface * @returns {T} */ function defineInterface(newInterface){ const NOT_IMPLEMENTED = "thr.. 2022. 8. 6.
Function.bind(this, ...)가 필요한 경우 예를 들어, 다음과 같이 두 함수 foo, bar가 있다고 하자. const foo = (a: string, b: string, c: string) => { return `${a}-${b}-${c}` } const bar = (func: (a: string, b: string)=> string) => { return func('wow', 'amazing') } 이때, bar의 파라미터로 foo를 넘겨주고 싶은데, 파라미터 개수가 다르다. 따라서, foo의 첫 번째 파라미터는 'world'로 고정하여 bar에 넘겨주고 싶을 때, Function.bind(this, ...)를 사용할 수 있다. bar(foo.bind(this, 'world')) // wolrd-wow-amazing foo.bind(this,.. 2022. 2. 16.
쿼리 대신 TypeOrm으로 DB 통신하기 (샘플) 웹 앱에서 MariaDB, MySQL 등의 RDB와 통신할 때 보통 쿼리와 파라미터를 넘기는데, 사용하는 DB, 테이블, 칼럼이 많아지면 쿼리도 많아지게 되면서 나중에는 프로젝트에 쿼리 문자열로 가득차게 된다. TypeOrm 패키지는 쿼리 대신 객체와 클래스를 이용해서 DB와 통신할 수 있는 방법을 제공한다. 타입스크립트에서 기본 예제를 소개한다. 우선 프로젝트에 mysql, reflect-metadata, typeorm을 설치한다. $ npm install --save typeorm $ npm install --save reflect-metadata $ npm install --save mysql tsconfig.json 파일에 다음의 속성을 추가한다. { "compilerOptions": { "exp.. 2022. 2. 8.
[번역] 2021년 웹 어셈블리 현황 설문조사 출처 : https://blog.scottlogic.com/2021/06/21/state-of-wasm.html 작성자 : Colin Eberhardt 번역 : 혼새미로 요약 러스트는 가장 많이 사용되고 웹 어셈블리에 가장 적합한 언어이다. 어셈블리스크립트는 웹 어셈블리 언어에서 두 번째로 적합한 언어이다. 웹 어셈블리는 웹, 서버리스, 게이밍 그리고 컨테이너 화 앱에서 가장 큰 영향력을 가질 것으로 기대된다. 더 나은 디버깅 지원이야말로 가장 많은 사람들이 필요하다고 느끼는 요소이다. 개요 웹 어셈블리 (이하 WA) 2018년 W3C에서 마지막 명세서 초안이 출판된 상대적으로 최신 기술이다. WA는 근본적으로 브라우저에서 다중 언어 지원 및 네이티브에 근접한 속도를 갖는 새로운 런타임으로 탄생하였으며,.. 2022. 1. 13.
데스크탑에서 JS 또는 TS Playground 앱 (RunJS) RunJS는 데스크탑에서 JavaScript 또는 TypeScript에 대한 Playground를 제공합니다. 아래 그림과 같이 소스코드를 작성하는 즉시 결과값이 우측에 표출됩니다. 다운로드는 RunJS - A playground for JavaScript and TypeScript 에서 가능합니다. 탭을 추가하거나, 테마를 변경하거나, NPM 모듈을 설치하고자 하는 경우 22,000원 가량의 라이선스를 구매해야 합니다. 2022. 1. 13.
TypeScript 4.3 신기능 정리 목차 클래스 오버라이드 플래그 템플릿 문자열 타입 개선 ECMAScrpt #private 클래스 요소 ConstructorParameters를 추상클래스에서 사용 항상 참인 Promise 검사 Import 자동완성 편집기 지원 @link 태그 Enum과 임의의 값 비교 불가 클래스 오버라이드 플래스 부모 클래스를 상속받은 자식 클래스가 부모의 메소드를 재정의할 수 있는데, 이때 어떠한 이유로 부모 클래스의 해당 메소드가 삭제되는 경우, 자식 클래스에서는 별도의 오류를 발생시키지 않아 해당 메소드가 오버라이드된 것인지 아닌지 확인하기 어렵다. class SomeComponent{ show(){ console.log('show a1'); } hide(){ console.log('hide a1'); } } c.. 2022. 1. 13.
Node.js 객체 복사 방식에 따른 수행시간 간단 비교 개요 JS에서 각 객체의 깊은 복사 방식에 따른 수행시간을 간단하게 비교한다. 원본 객체 const obj1 = { a: 1, b: "string", c: { name: "Leon", age: "29" } }; JSON 복사 function jsonCopy(obj){ return JSON.parse(JSON.stringify(obj)); } Lodash 복사 function lodashCopy(obj){ return lodash.cloneDeep(obj); } 재귀함수 복사 /** 객체 깊은 복사 */ function cloneObjectDeep(obj) { const clone = {}; if (typeof obj !== 'object') return obj; for (const key in obj) .. 2022. 1. 12.
C++ vs Node.js vs Go - 멀티스레드 퀵정렬 수행속도 비교 [실험환경] CPU : AMD Ryzen 7 1700 8-Core Processor Memory : 32.0 GB OS : Windows 10 Pro 데이터 개수 : 2천만개 ~ 3억 2천만개 스레드 개수 : 16개 값의 범위 : 0 ~ 1,000,000,000 [분석] 데이터 개수가 적을 때는 Node.js 가 가장 느린 성능을 보여주었으며, 데이터 개수가 증가함에 따라 Node.js가 Go를 제치고 더 빠른 성능을 보여주었다. Node.js는 멀티스레드를 사용하기 위해 worker_thread를 사용하는데, 각 스레드들이 수행할 작업이 적힌 스크립트 파일 (js)을 읽어서 수행하기 때문에 초반에 지연이 걸리게 되었다. 모든 경우에서 C++가 가장 빠른 속도를 보여주었다. 데이터 개수가 1억 6천만개 .. 2021. 6. 7.