프론트엔드 프레임워크 TypeScript는 프론트엔드 응용 프로그램 개발에 아주 적합합니다. 풍부한 JSX 지원과 변경에 안전하게 대응할 수 있는 능력으로 무장한 TypeScript는 응용 프로그램에 안전성과 멋진 구조를 선사하고, 빠르게 변화하는 프론트엔드 개발 환경에 적합한 정확하면서도 유지보수하기 쉬운 코드를 쉽게 작성할 수 있도록 도와줄 것이기 때문입니다. 물론 모든 내장 DOM API는 타입이 안전합니다. TypeScript에서 이 API를 사용하려면 간단히 프로젝트의 tsconfig.json에 필요한 타입 선언을 추가하기만 하면 됩니다. 이 설정은 TypeScript가 코드에서 타입을 검사할 때 lib.dom.d.ts(브라우저와 DOM 타입 내장 선언) 파일에 선언된 타입들을 포함하도록 합니다..
백엔드 프레임워크 DB와 상호작용하는 응용 프로그램을 만들 때 처음엔 타입을 갖지 않는 SQL 또는 API 호출을 그대로 사용했을 것입니다. // node-postgres를 이용한 PostgreSQL let client = new Client let res = await client.query( 'SELECT name FROM members where mId = $2', [123456] ) // any // node-mongodb-native를 이용한 MongoDB db.collection('members') .find({mId: 123456}) .toArray((err, member) => // member는 any ) 수동으로 타입을 추가하면 대부분의 any를 제거하면서 더 안전한 API로 개선할 수..
비동기 스트림 미래의 서로 다른 시점에 이용할 수 있게 될 값이 여러 개라면 어떻게 처리해야 할까요? 이런 상황은 생각보다 자주 발생합니다. 예를 들어 파일 시스템에서 파일의 일부를 읽는 상황, 티빙 서버로부터 비디오 스트리밍의 픽셀들을 받는 상황, 폼을 작성하느라 여러 키를 입력하는 상황, 연말 파티에 수십 명의 친구가 오는 상황 등이 모두 이에 해당한다고 볼 수 있습니다. 각각의 이벤트가 서로 관련 없어 보이지만, 비동기 스트림 관점에선 다들 비슷합니다. 이들은 모두 여러 개의 데이터로 이루어지며, 각각의 데이터를 미래의 어떤 시점에 받게 된다는 점에서 똑같습니다. 몇 가지 방법으로 이런 상황을 설계할 수 있는데, 가장 흔히 NodeJS의 Event Emitter 같은 이벤트 방출기(event emi..
JavaScript의 이벤트 루프 예제를 이용해 아래 문제를 풀어봅시다. 각각 1밀리 초와 2밀리 초 후에 실행되는 두 개의 타이머를 설정했습니다. setTimeout(()=> console.info('A'), 1) setTimeout(()=> console.info('B'), 2) console.info('C') 콘솔엔 어떤 결과가 출력될까요? A, B, C일까요? JavaScript 프로그래머라면, A, B, C가 아니라 C, A, B가 된다는 사실을 알고 있을 것입니다. JavaScript나 TypeScript를 사용해 본 적이 없는 사람이라면 이 결과가 직관적이지 않고 이상해 보일 것입니다. 사실 동작 원리는 간단합니다. JavaScript의 동시성 모델이 C언어의 sleep이나 Java 같은 다..
콜백(callback) 사용하기 비동기 JavaScript 프로그램의 기본 단위는 콜백(callback)입니다. 콜백은 평범한 함수이며, 다른 함수의 인수 형태로 전달됩니다. 동기 프로그램처럼 특정 함수가 고유한 동작(네트워크 요청 등)을 완료하면 호출자가 건넨 콜백 함수를 호출합니다. 비동기 코드가 호출하는 콜백은 보통의 함수라서 비동기로 호출됨을 알리는 전용 타입 시그니처는 존재하지 않습니다. fs.readFile(디스크의 파일 내용을 비동기로 읽을 때 사용), dns.resolveCname(비동기적으로 CNAME 레코드를 해석할 때 사용) 같은 NodeJS 네이티브 API는 콜백의 첫 번째 매개변수가 에러 또는 null이고 두 번째 매개변수는 결과 또는 null이라는 규칙을 사용합니다. 다음은 re..
async와 await Promise는 비동기 코드를 다루는 강력한 추상 개념입니다. 이 패턴이 유명세를 떨치면서 결국 JavaScript도 async와 await라는 형태로 이를 지원하기 시작했습니다. 따라서 자연스럽게 TypeScript도 지원합니다. 이 문법을 이용하면 마치 동기 작업을 다루듯 비동기 작업을 처리할 수 있습니다. await는 .then에 해당하는 언어 수준 문법으로 생각할 수 있습니다. Promise에 await 하려면 반드시 async 블록 안에 있어야 합니다. .catch 대신엔 await를 일반적인 try/catch 블록으로 감싸면 됩니다. 아래와 같이 Promise가 있다고 가정해 보겠습니다. function getMember() { getMemberID(20) .then(u..
비동기 프로그래밍, 동시성과 병렬성 실무의 응용 프로그램에선 네트워크 요청을 보내고 데이터베이스 및 파일 시스템과 상호 작용하며, 사용자의 동작에 응답하고, CPU를 많이 소비하는 작업을 별도의 스레드에서 수행해야 하므로 콜백(callback), 프로미스(promise), 스트림(stream) 등 다양한 비동기 API를 사용하게 됩니다. JavaScript는 이런 비동기 작업을 처리할 때 위력을 발휘하며, 멀티스레드를 지원하는 자바나 C++ 등의 다른 주류 언어와 비교하기 어려울 정도의 차별성을 보입니다. V8, SpiderMonkey 같은 유명한 JavaScript 엔진은 태스크 멀티플렉싱 기법을 영리하게 이용하여, 여러 스레드를 이용하던 기존 방식과 달리 스레드 하나로 비동기 작업을 처리합니다. 스레..
Option 타입 특수 목적 데이터 타입을 사용해 예외를 표현하는 방법도 있습니다. 이 방식은 값과 에러의 유니온을 반환하는 방법에 비해 단점이 있지만, 에러가 발생할 수 있는 계산에 여러 연산을 연쇄적으로 수행할 수 있게 됩니다. 가장 많이 사용되는 세 가지로 Try, Option, Either 타입이 있습니다. Try, Option, Either 데이터 타입은 Array, Error, Map, Promise 등과는 달리 JavaScript가 기본적으로 제공하지 않습니다. 따라서 이 타입들을 사용하려면 NPM에서 찾아 설치하거나 직접 구현해야 합니다. Option 타입은 하스켈, 오캐멀, 스칼라, 러스트(Rust) 등의 언어에서 가져온 개념입니다. 어떤 특정 값을 반환하는 대신 값을 포함하거나 포함하지..
예외 반환 TypeScript는 자바가 아니며 throws 문을 지원하지 않습니다. 참고로 throws 문은 메서드가 어떤 종류의 런타임 예외를 발생시킬 수 있는지 알려주어서 해당 메서드의 사용자가 발생 가능한 에러를 적절하게 처리할 수 있도록 도와줍니다. 하지만 유니온 타입을 이용해 비슷하게 흉내 낼 수 있습니다. function ask() { return prompt("생일 언제임?"); } // 커스텀 에러 타입 class InvalidDateFormatError extends RangeError{} class DateISInTheFutureError extends RangeError{} /** * * @throw {InvalidDateFormatError} : 사용자가 생일을 잘못 입력함 * @t..
