본문 바로가기
반응형

전체 글

 (174)
[ TypeScript ] 클래스 타입스크립트 또는 자바스크립트에서 클래스는 특별한 '함수'에 불과하다. 클래스를 typeof로 찍어봐도 'function'으로 나오는 것을 확인할 수 있을 것이다. 정확하게 말하면 클래스는 클로저의 Syntatic Sugar라고 할 수 있는데, 완전히 동일하지는 않고 약간 다른점이 있다. 클래스와 클로저에 대한 자세한 내용은 나중에 'JavaScript' 파트에서 따로 다루도록 하겠다. 많이 궁금하면 여기를 읽어보면 된다. 1. 클래스 구성요소(Members) 1) 필드(field) - 클래스 내부 변수. 보통 필드 보다는 '멤버 변수'로 많이 부른다. - 클래스 내부에서 타입과 함께 선언. - 필드는 클래스 내에서 생성자에 의해 반드시 초기화되어야 한다. class Point { x: number; /..
[ TypeScript ] 인터페이스와 제네릭 1. 인터페이스 - 인터페이스는 객체의 타입 체크를 위해 사용되며 변수, 함수, 클래스에 사용할 수 있다 - 객체(Object)만 대상으로 하며 내부에 프로퍼티와 메소드를 가질 수 있다. - 인터페이스 내부에서는 단지 프로퍼티 또는 메소드의 타입만을 정의한다. - 객체의 타입 별칭으로 생각하면 된다. 1) 변수에 인터페이스 적용 interface Student { major: string; // 선택적 프로퍼티 적용 => major?: string; id: number; // 읽기전용 프로퍼티 적용 => readonly id: number; sayHello(): void; } let stu1: Student; stu1 = { major: 'computer science', id: 1, sayHello()..
[ TypeScript ] 타입 조작과 Narrowing 타입 조작 - 유니언 타입 - 타입 별칭 - 인터페이스 - 타입 단언 - 리터럴 타입 타입 Narrowing - typeof - Truthiness - in operator - instanceof 1. 타입 조작 1) 유니언 타입 서로 다른 두 개 이상의 타입을 사용하고자 할때 유니언 타입을 사용할 수 있다. 사용 방법은 굉장히 간단한데, 그냥 타입 사이에 | 를 넣어주면 된다. let tmp: string | number | boolean; tmp = 'string'; tmp = 2; tmp = true; tmp = []; // Error 함수 매개변수에 적용할때 Type Narrowing을 통해 타입에 유요한 메서드를 사용할 수 있다. function strORnum(ary: string | numb..
[ TypeScript ] 함수와 함수 오버로딩 1. 함수 타입 표기법 타입스크립트에서 함수의 타입을 지정해줘야 하는 부분은 크게 두 파트로 나뉜다. 1. 매개변수의 타입 2. 반환값의 타입 위 규칙에 따라 함수 타입 표기법을 정리하면 아래와 같다. 자바스크립트 코드와 비교할 수 있도록 같이 적었다. 참고로 공식문서에 따르면 반환 타입은 일반적으로 타입스크립트가 추론 가능하므로 적지 않아도 되는 경우가 많다고 한다. 기명 함수 타입 표기법 // js function add(x, y) { return x + y; } // ts function add(x: number, y: number): number { return x + y; } 익명 함수 타입 표기법 // js let add = function(x, y) { return x + y; } // ts..
[ TypeScript ] TS 공부시작...은 기본 타입 오늘부터 타입스크립트 공부를 시작한다. 아직 자바스크립트도 제대로 모르는거 같은데 벌써 타입스크립트를 공부하는게 약간(좀 많이) 시기상조인거 같지만... 커리큘럼상 어쩔수 없다^^ 그래도 다행스러운 점은 짧은 시간이지만 그동안 자바스크립트를 쓰면서 불편한 점이 있었다는 것이다. 나는 C++로 코딩을 시작해서 자바스크립트를 공부하면서 '아니 이게 된다고???' 라는 생각을 정말 많이 했다. 내가 느끼기에 자바스크립트는 관대해도 너무 관대했다. 그리고 이는 나에게 오히려 불편함으로 다가왔다. 다행스럽게도 내가 불편해했던 점들이 타입스크립트로 거의다 해결된다. 자바스크립트를 쓰면서 불편함을 느꼈던 나는 타입스크립트를 공부할 자격이 있다! 이상 자기합리화였다. 아직 타입스크립트를 잘 모르지만 자바스크립트와의 차..
[ JavaScript ] 콜백과 비동기 콜백 함수란 무엇인가? MDN 웹문서에는 콜백 함수를 아래와 같이 정의하고 있다. A callback function is a function passed into another function as an argument 이를 직역하면 콜백 함수는 다른 함수의 인자로 넘어가는 함수를 말한다. 콜백에 대해서는 이게 전부다. 그런데 콜백 함수는 대부분 비동기 함수에서 쓰이기 때문에 '콜백 함수는 비동기 처리된다'라는 오개념이 생기기 쉽다. 하지만 이는 틀렸다. 콜백 함수라고 전부 비동기 처리되지 않는다. 아래 예시를 보자. function increase_Sync(n, callback) { console.log(n); callback(n + 1); } console.log('**** Start Script ..
[ JavaScript ] Rest parameter, Spread Syntax, 구조 분해 할당 MDN 웹문서를 참고해 사용법만 아주 간단하게 정리해봤다. Rest parameter 함수의 매개변수 이름 앞에 ...을 붙여서 정의한 매개변수를 의미한다. Rest 파라미터는 함수 인자들을 배열로 받는다. function foo(...rest) { console.log(Array.isArray(rest)); // Array console.log(rest); // [1,2,3,4] } foo(1,2,3,4); rest 파라미터는 반드시 마지막에 위치해야 한다. 아래와 같이 사용할 수 있다. // rest 앞쪽은 다른 변수로 지정해서 받을 수 있다 function foo(first, second, ...rest) { console.log(first, second); // 1 2 console.log(res..
[ JavaScript ] async/await 이 글은 promise의 개념을 알고 있어야 이해할 수 있다. 따라서 promise가 아직 뭔지 모른다면 이전 글을 보고 오도록 하자. 등장배경 같은건 생략하고 핵심만 짚어보자. 그럼 바로 시작! 1. async의 위치는 함수 선언부 앞부분으로 고정된다. 2. 함수 선언시 앞에 async를 붙여주면 그 함수는 async 함수가 된다. 3. async 함수의 반환값은 무조건 promise다. 4. await 키워드는 오직 async 함수 내부에서만 쓸 수 있다. 이정도는 암기해놓고 시작하자. 이해하려고 하면 안되고 그냥 받아들여야 한다. 왜냐하면 async/await가 이렇게 만들어졌기 때문이다. '왜?' 라고 질문을 던진다면 '태생이 이래요'라고 답할 수밖에 없다. 1번과 2번은 진짜 있는 그대로 받아들..
반응형

티스토리툴바