ice rabbit programming

이전 글에서 CSS에서 변수 사용하는 것을 다룬 적이 있다. 글에서 사용한 방법은 다른 CSS 파일에서 변수를 가져다가 사용할 수 있게 된다. 오늘 포스팅에서는 자바 스크립트 파일에서 사용하는 것에 대해서 소개하고, 타입 스크립트일 경우에는 모듈을 포함하는 걸 추가로 작성하려고 한다. 과정을 요약하면 CSS에서 변수를 export하고, JS/TS 파일에서 import하여 사용하는 간단한 과정이다. CSS에서 변수 선언 및 export하기 첫 번째로는 CSS에서 변수를 정의한 후에, export를 해주어야 한다. 다음과 같이 사용하면 된다. $theme-colors: ( 'someColor': #000, 'anotherColor': #FFF, ); :root { @each $key, $value in $t..

https://kr.vuejs.org/v2/guide/typescript.html#%ED%94%8C%EB%9F%AC%EA%B7%B8%EC%9D%B8%EA%B3%BC-%ED%95%A8%EA%BB%98-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0-%EC%9C%84%ED%95%9C-%ED%83%80%EC%9E%85-%ED%99%95%EC%9E%A5 TypeScript 지원 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org Vue 3.0부터는 아예 TypeScript를 지원하지만, Vue 2.0도 공식 가이드 등에서 TypeScript 사용을 지원하고 있다. Vue를 사용하다 보면, 플러그인을 Vue.use로 포함하고, 전역적으로 Vue.plugin..

프론트엔드를 개발하다 보면, window 객체를 종종 사용하는데, 기본적으로 있는 속성 외에 추가해서 사용해야 할 경우도 있다. 자바스크립트라면 문제가 되지 않겠지만, 타입스크립트는 아는 타입의 경우에는 해당 객체에 있는 속성인지까지 미리 체크를 하기 때문에 문제가 발생한다. console.log(window.tempProperty) 이런 식으로 없는 속성을 사용하려면, 에러가 발생한다. 물론 타입스크립트의 오류를 끄거나 할 수 있지만, 오류를 끄고 any를 남발할수록 굳이 타입스크립트를 쓰는 의미가 퇴색되므로 바람직하지 않다고 생각한다. 아래처럼 속성을 추가해 declare하면 해결된다. declare global { interface Window { tempProperty: string; } }

typescript 강의를 들으면서 정리한 마지막 글에서 Type Guard를 다루었다. 이후에 또 다른 기초 강좌를 수강할 기회가 있었고, 이미 들었던 내용이 대부분이었지만 좀 더 익숙해지고자 수강했는데, 다른 부분은 이전에 정리한 내용과 비슷했지만 Type Assertion과 Type Compatibility 관련 내용은 이전에 정리한 내용에 없어서, 추가로 포스팅하게 되었다. Type Assertion Type Assertion은 명시적 타입 캐스팅과 비슷하게 사용할 수 있다. 다만, 실제로 타입이 변경되는 것은 아니고 이런 타입이 들어올 것이라는 것을 프로그래머가 명시해주는 것이다. 다음처럼 사용할 수 있다. let a; let b = a as string; // 강제로 들어오는 type 지정 /..

이전 글에서도 언급했듯이, Decorator와 Type Guard를 마지막으로 typescript 개념 정리는 1차적으로 마칠 예정이다. 추후에 다른 강의를 듣거나, 사용하다가 팁 등을 알게 되면 올릴 것 같다. Decorator Decorator는 Class, Method, Parameter, Property에 붙일 수 있는 특수한 선언이다. @를 붙여서 표현하는데, 생김새는 자바의 annotation과 흡사하다. @뒤에는 선언에 대한 정보와 함께 런타임에 호출되는 함수여야 한다. 역시 아래 코드를 보자. class decorator function hello(constructFuntion: Function) { // signature는 생성자를 인자로 지정하는 것 } function helloFact..

Typescript의 중요한 개념들의 정리는 거의 마무리되었고, Iterator, Decorator, Type Guard에 대해서 다루면 Typescript 정리 포스팅은 일단 마무리될 것 같다. 이번에 사용하기 위해 기초 강의를 들었고, 이를 정리했다. 아마 사이드 프로젝트로 nest.js를 사용해볼 것 같은데, 이게 ts를 사용하니 기회가 된다면 좀 더 발전된 내용을 가지고 돌아올 수도 있겠다. 각설하고, 이번 포스팅에서는 iterator(반복자)에 대해서 다룰 것이다. 반복문 우선 반복문을 한 번 짚고 넘어가자. for문의 사용은 이 글을 읽는 분들은 모두 아실 테니 넘어가고, ES5냐 ES6이냐 혹은 배열이냐 그 외이냐에 따라서 다르다. ES5 : array.forEach 사용. break가 불가..

이번 글에서는 OOP에서 함수(메소드)와 클래스를 General하게 사용할 수 있는 Generic을 다룰 것이다. C#이나 자바의 Generic, C++의 Template 개념과 완전히 동일하다. 때문에 간단하게만 살펴보자. 타 언어에서 다루어보았다면 어렵지 않게 이해할 수 있을 것이다. 아래 함수 Generic의 예시를 보자. function hello(msg: T): T { return msg } hello('hi') // str hello(35) // number 타 언어와 동일함을 볼 수 있다. T에 들어가는 type이 모든 T에 적용된다. Union Type을 이용하여 제약을 줄 수도 있다. C#에서 generic - where 구문과 같다. function hello(msg: T) : T { ..

지난 글에서 인터페이스에 대해 다루었다. 이번 글에서는 객체지향의 가장 중요한 개념 중 하나인 클래스를 다룰 것이다. C++이나 C#에서의 Class 사용법과 비슷하다. 관례적으로 한 파일에 한 클래스를 사용하는 것도 비슷하다. 아래 class 작성 예시를 보면서 차이점을 보도록 하자. class Person { private _age: number // 관례적으로 private 변수에는 _ 를 붙인다. public name: string = 'ice' // class 내에서 초기화 가능 address: string // default가 public이다. static country: string = 'Korean' // 전역으로 사용 가능 constructor(name: string, age: numbe..