본문 바로가기

전체 글

 (63)
타입스크립트에서 클래스와 인터페이스 체스 엔진을 만드는 예를 들어보겠습니다. 먼저 가장 기본적인 타입부터 정의하여야 합니다. class Game {} // 체스 게임 class Piece {} // 체스 말 class Position {} // 체스 말의 좌표 집합 체스에는 여섯 가지의 말이 있습니다. class King extends Piece {} class Queen extends Piece {} class Bishop extends Piece {} class Knight extends Piece {} class Rook extends Piece {} class Pawn extends Piece {} 체스 말에는 색깔로 상대를 구분하고 체스판의 좌표는 x축이 왼쪽에서 오른쪽으로 A부터 H까지이고, y축이 아래에서 위로 1부터 8까지입..
타입스크립트에서 함수란 자바스크립트 (이하 JS)에서 함수는 일급 객체입니다. 함수를 변수에 할당 함수를 다른 함수로 전달 함수에서 함수를 반환 함수를 객체와 프로토타입에 할당 함수에 프로퍼티를 기록 함수에 기록된 프로퍼티 읽기 따라서, 위와 같은 작업을 할 수 있습니다. 타입스크립트 (이하 TS)는 이 모든 것을 타입 시스템에 녹여냈습니다. function add (a: number, b: number) { return a + b; } 보통 함수 매개변수의 타입은 명시적으로 정의합니다. TS는 항상 함수의 본문에서 사용된 타입들을 추론하지만 특별한 상황이 아니라면 매개변수 타입은 추론하지 않습니다. 반환 타입은 자동으로 추론하지만 원하면 명시할 수 있습니다. 실무에서는 TS가 반환 타입을 추론하도록 하는 게 일반적이라고 합니..
타입스크립트에서 타입의 모든 것 타입이란 값과 이 값으로 할 수 있는 일의 집합입니다. Boolean 타입은 모든 bool (참과 거짓 중 하나)과 bool에 수행할 수 있는 모든 연산 (||, &&, ! 등)의 집합입니다. number 타입은 모든 숫자와 숫자에 적용할 수 있는 모든 연산 (+, -, *, /, %, ||, &&, ? 등)의 집합입니다. string 타입은 모든 문자열과 문자열에 수행할 수 있는 모든 연산 (+, ||, && 등)과 문자열에 호출할 수 있는 모든 메서드 (.concat, .toUpperCase 등)의 집합입니다. 어떤 값이 T 타입이라면, 이 값을 가지고 어떤 일을 할 수 있고 어떤 일을 할 수 없는지도 알 수 있습니다. 여기서 중요한 것은 타입 검사기를 이용해 유효하지 않은 동작이 실행되는 일을 예방..
타입스크립트란 타입스크립트 (이하 TS)는 자바스크립트 (이하 JS)의 불완전성을 보완해주는 언어입니다. TS는 흔히 발생하는 실수를 방지하며, 문서화를 제공하고, 리팩터링을 쉽게 만들며, 단위 테스트의 숫자를 반으로 줄임으로 더 안전한 프로그램을 구현할 수 있게 보장해줍니다. 여기서, '안전한'이란 타입의 안정성을 뜻합니다. 타입 안정성은 타입을 이용해 프로그램이 유효하지 않은 작업을 수행하지 않도록 방지합니다. 숫자와 리스트의 연산 객체에 존재하지 않는 멤버 함수 호출 다른 곳으로 이동된 모듈을 임포트하기 위의 사례들이 그 예입니다. JS는 이런 실수가 있는 코드라도 최대한 실행하려 시도합니다. 유효하지 않은 작업이라도 개발자가 실제로 의도한 것이 있을 거라고 짐작하기 때문입니다. 3 + []; // "3" let..
자바스크립트에서 제너레이터와 async/await 자바스크립트 (이하 JS)에서는 이제껏 당연히 일단 함수가 실행되기 시작하면 완료될 때까지 계속 실행되며 도중에 다른 코드가 끼어들어 실행되는 법은 없었습니다. 하지만, ES6부터 이러한 완전 실행 법칙을 따르지 않는, 제너레이터라는 전혀 새로운 종류의 함수가 등장하였습니다. var x = 1; function *foo() { x++; yield; console.log("x: ", x); } function bar() { x++; } var it = foo(); it.next(); console.log(x); // 2 bar(); console.log(x); // 3 it.next(); // x: 3 함수 이름 앞에 * 표시를 붙이게 되면 JS 엔진은 이 것을 제너레이터로 인식합니다. 제너레이터를 이 제..
자바스크립트에서 프라미스란 프라미스가 나오기 이전에는 콜백으로 비동기성을 다뤘습니다. 하지만 콜백으로 프로그램의 비동기성을 표현하고 동시성을 다루면 순차성과 믿음성이 결여되는 중요한 결함이 있습니다. 그리고 제어의 역전이라는 치명적인 문제가 있습니다. 이런 콜백의 치명적인 단점, 즉 프로그램의 진행을 다른 파트에 넘겨주지 않고도 개발자가 언제 작업이 끝날지 알 수 있고 그 다음에 무슨 일을 해야 할 지 스스로 결정할 수 있게 하는 것이 바로 '프라미스'입니다. var x, y = 2; console.log(x + y); // NaN 우리는 x + y 연산을 할 때 당연히 x, y 모두 값이 세팅되어 있다고 가정합니다. 이를 더 체계적인 용어로 바꾸면 '귀결됐다'고 할 수 있습니다. 하지만 위의 경우에는 x는 아직 값이 세팅되지 않..
자바스크립트에서 콜백이 가지는 한계 콜백은 자바스크립트 (이하 JS)에서 비동기성을 표현하는 기본 단위입니다. // A ajax('..', function() { // C }) // B A와 B는 지금 당장, C는 나중에 실행됩니다. 콜백 함수는 이 나중에 실행되는 함수를 의미하며 프로그램의 연속성을 감싼/캡슐화한 장치입니다. 두뇌는 순차적이다 두뇌는 병렬 멀티스레딩이 불가능합니다. 우리의 신경은 병렬적으로 동작하지 않고 이벤트 루프 큐처럼 작동합니다. 우리가 동시에 많은 일을 하고 있다고 생각할 수 있지만, 이것은 사실 멀티태스킹이 아니라 그냥 매우 재빠른 컨텍스트 교환입니다. 사람의 두뇌는 순차적, 중단적, 단일 스레드 방식으로 계획하는 데 익숙하지만 콜백은 비동기 흐름을 비선형적, 비순차적인 방향으로 나타내므로 구현된 코드를 제대로 ..
자바스크립트에서 비동기성이란 프로그래밍 세계에서 '나중'은 '지금'의 직후가 아닙니다. 주제에 본격적으로 들어가기에 앞서, 우리가 비동기 요청을 주로 보낼 때 사용하는 AJAX에서 콜백 문제를 피하려고 중단적/동기적 AJAX를 사용하는 행위는 정당화할 수 없음을 앞서 밝힙니다. function now() { return 21; } function later() { answer = answer * 2; console.log(answer); } var answer = now(); setTimeout(later, 1000); 이 코드에서 나중에 실행되는 코드 (덩이)는 함수 later 안의 코드이고 그 외의 나머지 코드 (덩이)는 지금 당장 실행됩니다. 여기서 주의해야 할 점은 console.log 메서드는 브라우저 유형과 상황에 따라 ..

티스토리툴바