ice rabbit programming

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

타입스크립트에서는 타입의 정적 체크와 더불어, OOP의 인터페이스와 클래스도 지원한다. 용법은 C#이나 자바에서의 용법과 비슷하다. 인터페이스 자체에 관한 이야기는 다른 OOP 언어에서 다루었을 것이므로, 간단하게만 짚고 넘어가겠다. 인터페이스를 사용함으로 겹치는 규격을 정하여 규격(형태)이 같은 클래스 간에 재사용성을 높이고, 클래스 간의 결합도를 줄일 수 있다. (자세한 내용은 추상 클래스 혹은 인터페이스를 찾아보자) interface Person { name: string; age: number; } const person: Person = { name: 'KDH', age: 35 } 만약 자바스크립트처럼 interface를 쓰지 않고 사용하려하면 아래처럼 항상 정의해주어야한다. const pers..

타입스크립트란 자바스크립트가 가진 다른 C계열 언어들과의 차이는 크게 두 가지라고 개인적으로 생각한다. 첫 번째로는 비동기, 두 번째는 타입이다. 이 중에 동적 타입은, 자바스크립트만의 특징은 아니다. 파이썬과 같이 런타임에 정해지는 스크립트 언어도 존재한다. 어쨌거나 그런 이유로, 컴파일 언어와는 다르게 정적 타입으로 사전에 체크할 수가 없었고, 이를 해결하고 실행 전 단계에서 에러를 최대한 거르고자 여러가지 방법이 나왔다. 그 중 하나가 바로 타입스크립트이다. 타입스크립트는 자바스크립트의 상위호환(SuperSet)으로, 단순하게 생각하면 타입을 가진 자바스크립트의 느낌이다. 거기에 class, interface 등을 추가해서 자바나 C#과 같은 OOP 프로그래밍을 할 수 있다. 인터프리터 언어인 자바..

자바스크립트를 사용하면 var, let, const로 변수를 선언하게 된다. 순수 자바스크립트는 컴파일 타임에 타입을 알 수 없기 때문에, 타입 추론을 통해 런타임에 타입을 정하게 된다. var, let, const 각각의 차이에 대해 간단하게 정리해보았다. var : ES5 이전까지 쓰이던 변수 키워드. 함수 스코프에서 유효하다. 재선언이 가능하고, 호이스팅도 가능하다. let(값 변경 가능), const(값 변경 불가) : ES6부터 쓰이는 변수 키워드. 블록({}) 스코프에서 유효하다. 재선언 및 호이스팅이 불가능하다. 즉 간단하게 말하면 var는 예전에 쓰던 것, let과 const는 요즘 쓰는 것인데 스코프(범위)나 재선언은 들으면 바로 감이 올 텐데 호이스팅이라는 개념은 잘 와닿지 않는 분들도..