Hello Jay's Programming World!

안녕하세요, Jay입니다. 오늘은 TypeScript에서 자주 사용하는 두 가지 파일인 d.ts 파일과 types.ts 파일의 차이를 알아보려고 합니다.저도 처음 TypeScript를 사용하면서 헷갈렸던 부분 중 하나인데요, 프로젝트를 하다 보면 이 둘을 어떻게 구분하고 사용하는지 감이 안 올 때가 있습니다. 이 글에서는 d.ts 파일과 types.ts 파일의 특징과 용도를 설명해 보겠습니다.  1. d.ts 파일이란?d.ts 파일은 타입 선언 파일(Declaration File)이라고 합니다.주로 외부 라이브러리의 타입 정보를 TypeScript에 알려주기 위해 사용됩니다. 예를 들어, 어떤 JavaScript 라이브러리를 사용하는데 해당 라이브러리가 타입 정보를 제공하지 않는다면 d.ts 파일을 만들..

자바스크립트에서 데이터를 그룹화하고 전달하는 방법으로 Object를 사용합니다. 타입스크립트에서는 Object Type을 통해 Object를 표현합니다. Object Type에 이름을 지정하기 위해 인터페이스를 사용합니다. interface Person { name: string; age: number; } function greet(person: Person) { return "Hello " + person.name; } 위 코드에서 greet 함수의 매개변수로 person 변수를 받고 있습니다. person 변수의 타입은 Person으로 interface로 선언되어 있는 것을 확인할 수 있습니다. Person은 name이라는 string과 age라는 number 변수를 가진 Object로 선언되어 있..

변수 타입 지정 let name: string = 'kim'; name = 'lee';// OK name = 100;// Error 가장 기본적인 기능으로는 변수의 타입 지정 기능이 있습니다. 위 예제에서는 name이라는 변수를 문자열(string) 타입으로 지정했습니다. 그렇기 때문에 'lee' 라는 문자열은 name 변수에 할당이 가능하고, 100은 Number 타입이기 때문에 name에 할당할 수 없습니다. 배열(Array) 타입 지정 let array: string[] = ['kim', 'lee']; 배열의 타입도 지정이 가능합니다. 위와 같이 [] 키워드를 사용하면 배열을 의미하고 그 앞에 타입을 붙이면 배열에 들어 올 수 있는 타입을 지정할 수 있습니다. 객체(Object) 타입 지정 let ..

안녕하세요. Jay입니다. 오늘은 서버 환경에서 브라우저 화면을 캡쳐하는 방법에 대해서 알아보도록 하겠습니다. 일반적으로 브라우저를 사용한다고 하면 당연히 클라이언트에서 브라우저 화면을 띄워서 사용해야한다고 생각합니다. 하지만, 서버 환경에서도 브라우저에 접속하는 것이 가능합니다. Headless Browser라고 해서 GUI(Graphic User Interface)가 없는 환경을 사용하면 됩니다. 화면만 표시가 되지 않을뿐 일반적인 브라우저와 동일하게 동작합니다. 오늘은 Node 환경에서 Chromium 혹은 Chrome을 제어할 수 있도록 개발된 puppeteer 라이브러리를 살펴보려고 합니다. puppeteer 라이브러리에 대한 정보는 아래 링크에서 확인 가능합니다. puppeteer/puppet..

다각형의 무게 중심을 구하고 Raphaeljs를 이용하여 이를 그려봤습니다. 결과 및 코드는 아래 JSFiddle을 통해 확인할 수 있습니다.

회사에서 신규 프로그램에 사용할 데이터를 자동으로 가공하는 프로그램을 만들고 있습니다. Node 기반으로 프로그램을 작성하고 있는데, cli를 이용하여 입력 값을 받아 동작하도록 구현했습니다. 이를 구현하기 위해 commander.js를 사용했습니다. 제가 사용한 방법 위주로 정리해보도록 하겠습니다. commander.js를 사용하기 위해서는 아래와 같이 패키지를 설치해야합니다. $ npm install --save commander Option 일반적인 Option을 정의합니다. 옵션의 데이터가 올 수 도 있고, 옵션만 사용할 수도 있습니다. app.js 를 아래와 같이 작성합니다. const { Command } = require('commander'); const program = new Comma..

현재 노드를 이용해서 자동화 프로그램 하나 작성하고 있습니다. 내부에서 아래와 같이 fs와 unzip 패키지를 동시에 사용하고 있습니다. const fs = require('fs'), unzip = require('unzip'); 그런데, 아래와 같이 에러가 발생합니다. $ node app.js fs.js:27 const { Math, Object } = primordials; ^ ReferenceError: primordials is not defined at fs.js:27:26 검색해보니, node 12버전과 gulf 3버전을 사용하면 이렇게 에러가 발생하는 것 같습니다. 어쩔 수 없이 node를 다운그레이드 하기로 했습니다. 먼저, n 패키지를 설치합니다. $ sudo npm install -g ..

일정 시간 이후에 특정 구문을 실행하기 위해 setTimeout을 사용합니다. 그리고 가끔은 함수 호출 순서를 바꿔주기 위해 setTimeout의 delay에 0을 사용하기도 합니다. 그렇다면 delay를 음수로 준다면 어떤 일이 발생할까요? 일반적으로 delay 어떤 딜레이 값을 사용했다고 하더라도 최소 지연시간보다 작다면 최소지연 시간으로 맞춰지게 됩니다. HTML5 스펙에는 최소 지연 시간을 4ms로 명시하고 있습니다. 즉, 음수로 delay를 지정했더라도 최소 지연 시간 이후에 callback이 실행된다는 것입니다. 단, 예외가 있습니다. Stackoverflow 답변에 따르면 음수로 입력했을 때, 모든 브라우저에서 callback의 실행을 보장하진 않는다고 합니다. Internet Explore..

var SuperClass = function() { this.name = 'super'; }; SuperClass.prototype.print = function() { console.log('[SUPER] ' + this.name); }; var SubClass = function() { this.name = 'sub'; }; SubClass.prototype = new SuperClass(); SubClass.prototype.print = function() { console.log('[SUB] ' + this.name); // I want to call super's print method! }; var obj = new SubClass(); obj.print(); SuperClass와 SubC..

Function.prototype.call() 주어진 this와 파라매터 목록을 가지고 함수를 호출. function Product(name, price) { this.name = name; this.price = price; } function Food(name, price) { Product.call(this, name, price); this.category = 'food'; } console.log(new Food('cheese', 5).name);// 'cheese' Function.prototype.apply() 주어진 this와 파라매터 배열(혹은 유사 배열 객체도 가능)을 가지고 함수를 호출. const numbers = [5, 6, 2, 3, 7]; const max = Math.max...