너와 나의 프로그래밍

[Typescript] 배열 안 타입을 정의하는 방법 타입스크립트를 사용하면서 항상 빼놓을 수 없는 순간은 '타입 정의(Type Definition)'다. 보통 Interface나 Type Alias를 사용하면서 타입 정의를 하지만 배열 안 Type을 정의 할 때 어떻게 해야하는지 궁금해서 찾아봤다. 예를 들어, 이러한 코드가 있다고 가정해보자. const arr: Array = [{ name : 'test', age : 12, isShowing: true }] 선언된 매개변수를 그대로 사용할 시 아래와 같은 오류를 마주할 수 있다. 말 그대로 arr에 매개변수 안에 isShowing이라는 프로퍼티가 object 안에 없다는 얘기다. 이럴 때는 Custom하게 Interface를 사용하여 직접 objec..

[Typescript] Type의 대해 Typescript의 가장 기본이자 기초적인 Type의 대한 사용법을 간략하게 정리하려고 한다. 맨 처음 프로그래밍을 Java로 접하신 분들이라면 빠르게 이해가 갈 수도 있다고 생각한다. Type 선언은 간단해 보이면서도 Typescript로 프로젝트를 개발할 때 굉장히 스트레스가 되기도 한다. 마치 애증의 관계가 아닐까 생각든다. 대표적인 Type의 종류 number : 모든 숫자와 숫자에 적용할 수 있는 모든 연산.(253 이하의 정수만 가능) string : 문자열 타입. bigint : number와 같은 정수지만 100이상의 값을 선언 할 때 사용하는 타입. object : 객체의 대한 타입. Array : 배열의 대한 타입. any : 타입들의 어머니. ..

[Typescript] 타입스크립트로 개발하기 Typescript 관련 글을 쓰면서 제일 먼저 써야될 '타입스크립트로 개발하는 방법'의 대해서 쓰지 않았었다. 뭔가 밥을 짓기 전 쌀을 씻지 않은 듯한 기분이 든다. 타입스크립트가 무엇인지, 어떻게 동작하는지, 또 타입스크립트를 사용할 때 무엇을 해야하는지 간략하게 쓰려고 한다. What is Typescript 제일 처음 타입스크립트를 접했을 당시에 도대체 '타입스크립트가 뭐지?'라는 생각이 많이 들었다. 개인적으로 지금까지 개발을 하면서 타입스크립트가 어떤지의 대해 느낀건 딱 3가지다. 타입스크립트는 자바스크립트의 변수나 class에 'Type'을 선언하면서 사용하는 것! 기존 자바스크립트와는 달리 마치 Java를 사용하는 것 처럼 사용하는 것! 굉장히..

[Typescript] 써드파티 라이브러리 타입 정의 방법(.d.ts) Typescript를 사용하는 도중 항상 부딛히는 문제중 하나는 타입의 대한 정의라고 생각한다. 그 중 서드파티 라이브러리를 사용하면서 타입스크립트를 지원하지 않는 라이브러리를 사용할 때 타입을 직접 선언을 해야하기 때문에 정말 골머리가 깨지는 경우가 많다고 생각한다. 타입스크립트를 지원하지 않는 서드파티 라이브러리는 index.d.ts 파일을 생성해 직접 타입을 선언해 해결 할 수 있다. 1. index.d.ts를 만들어보자. index.d.ts를 만들기 전에 몇 가지 설정을 해야될 부분이 있다. 첫번째로 'tsconfig.ts' 파일을 수정해준다. "compilerOptions"에 "typeRoots" 속성을 추가해 주고 배열 안..

[TypeScript] 비동기 함수의 동기식 처리 Async/Await Async/Await란?? 자바스크립트 특성 상 '싱글 스레드'에서 실행되는 환경이다 보니 비동기 함수를 사용할 때 가장 고민이 되는 것이 아마 '응답 시간 만큼의 지연 시간이 존재하는 것'이 아닐까 싶다. 그 이유로 인해 원하는 작업을 하지 못하면서 난처한 경우가 많다. 단일 스레드로만 실행해야 페이지를 로딩할 때 보다 더 빠른 속도로 실행 할 수 있을 뿐만 아니라 브라우저의 인터프리터(Interpreter)가 단일 스레드기 때문이다. 지연시간/응답시간이 각자 다른 비동기 함수를 자바스크립트의 싱글 스레드 방식의 처리인 동기화 방식으로 사용을 해주는 Async/Await가 해결책이 될 것 같다. Async/Await는 ES2015에..

[TypeScript] 비동기 통신 Promise Promise의 대해 예전에는 비동기 처리를 하기 위해 Ajax를 많이 사용했으나 콜백 함수를 사용하는데 있어 코드의 가독성이나 자칫 잘못 구현하면 콜백 지옥을 맛볼 수 있는 경우가 많았으나, 최근에는 Promise 객체를 사용함에 있어 비동기 처리를 더욱 쉽게 처리할 수 있게 되었다. TypeScript에서의 비동기 처리는 기본적으로 ES6의 Promise로 처리한다.(axios도 괜찮지만 일단...) Promise Pattern은 IE11/오페라 미니 외 브라우저에서는 지원하지 않는 단점이 있다. 하지만 컴파일 할 때 'ES5 + 프로미스' 조합으로 컴파일을 하면 모든 브라우저에서 동작이 가능하다. tsc promise.ts --lib ES2015.P..