ice rabbit programming

이전 글에서도 언급했듯이, 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가 불가..

이전 글에서 WebPack에서 dotenv 패키지를 활용하여 환경변수를 사용하는 것을 다루었었다. 이번 프로젝트에서는 Vue-Cli를 활용하였고, 여러 모로 편리함이 증가하였다. 편리했던 것 중 하나는 dotenv의 활용이었다. WebPack에서 dotenv 패키지를 사용해봤거나, 이전 포스팅을 읽어보신 분들은 아시겠지만, 외부 패키지를 깔고 webpack 설정 파일에서 직접 코드를 수정해주어야 했다. 하지만 vue-cli에서는 그럴 필요가 없다. 실행 script에서 실행 인자 넘겨주기 우선 가장 큰 차이점은 vue app을 실행하는 script이다. package.json의 실행 script에서 webpack을 활용할 경우에는 "webpack-dev-server .... "로 이어지는 script인데..

이번 글에서는 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..

이전 글에서 vuetify 설치에 대해 다루었다. vuetify에는 여러 기능이 있는데, 그 중에 theme 적용 및 색상 지정에 대해서 다루려 한다. 공홈 설명은 v2.vuetifyjs.com/en/customization/theme/를 참고하자. Theme — Vuetify.js Setup your application's theme and supplemental colors in a flash. v2.vuetifyjs.com vuetify를 설치한 직후라면 src/plugins/vuetify.js가 단순히 new Vuetify()를 export하는 상태일 것이다. 별도의 설정을 해주지 않아도 light theme가 적용되며, primary, secondary, error, success 등 기본적인..

기본적으로 웹 페이지에서는 CSS를 적용하여 스타일을 입힐 수 있다. 우리가 보는 세련된 페이지들도 궁극적으로는 CSS를 태그에 적용한 것이다. Vue.js에서는 UI 프레임워크를 적용하여 이러한 CSS 적용에 대한 수고를 덜 수 있다. (단, 2020년 12월 현재 기준으로 Vue 3.0 버전에 대하여는 아래 UI 프레임워크가 지원하지 않는다!!!) 여담으로, 필자가 typescript의 공식적인 적용을 위해 Vue 3.0으로 새 프로젝트를 시작하려 했다가, UI 프레임워크들이 지원하지 않아 2.6대로 회귀했다. 프론트엔드 경험이 많은 것도, 디자인에 자신이 있는 것도 아니기에.. UI 프레임워크 많이 쓰는 UI 프레임워크들은 아래와 같은 것들이 있다. - BootstrapVue : bootstrap-..

feature 브랜치에 대해서 체크를 하고 싶다거나, 동일 프로젝트에 대해 베타/정식을 운영하는 등 여러가지 사정으로 특정 브랜치만 clone해야하는 경우가 있다. 물론 git에서는 이를 지원하고, 하나의 옵션으로 간단하게 가져올 수 있다. git clone -b "branch_name" --single-branch "GIT_URL" git clone -b develop --single-branch "https://..." -b는 브랜치명을 지정하는 것이고, --single-branch는 단일 브랜치를 가져온다는 옵션이다. 참고로 대쉬 한 개(-)는 약어를, 대쉬 두 개(--)는 옵션의 풀 명칭을 뜻한다. 여담으로 특정 브랜치 pull은 저장소 뒤에 브랜치명만 붙여주면 된다. 브랜치명을 안 붙여주면 모든..