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..

이 글을 검색으로 들어온 개발자라면 v-model에 대해서는 능숙하게 사용하겠지만, 앞 부분에서 간단하게만 짚고 넘어가겠다. 아래의 링크들은 모두 vue 공식 문서(한글)로 연결되어 있다. v-model 웹 프론트엔드나 클라이언트 프로그래밍은 사용자에게 직접 데이터를 제공하고 입력받는 UI를 다룬다. 이 데이터를 내부 로직으로 처리하거나 서버로 보내 처리하는 등의 과정이 필요하기 때문에, UI와 데이터 간의 바인딩이 필수적이다. vue에서는 v-model이라는 키워드로 바인딩을 제공한다. 아래처럼 쓸 수 있다. // ... // ... data() { myData: '' } input의 value가 myData로 바인딩되어, 초깃값 설정 및 입력 시 담는 등의 활용이 가능해진다. 컴포넌트 간의 통신 이번..

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

오늘 포스팅은 간단한 기능 팁에 관련한 글이다. 최근에 아이콘 이미지를 서버에 보내거나, groovy 빌드 시 로그를 남길 때 base64로 인코딩/디코딩 처리가 필요한 적이 있었다. base64는 문자 그대로 8비트 이진 데이터를 64진법으로 변환하는 인코딩 기법이다. 문자 코드에 구애받지 않는 ASCII 코드를 활용하여 데이터의 변조 없이 송수신함이 보장하는 인코딩이기에, 미디어나 전자 메일을 통한 데이터의 송수신 등에 많이 쓰인다. 대부분의 언어에서 내장 패키지로 base 64 인코딩/디코딩을 지원한다. 본인이 최근에 자바스크립트(와 bash도 처리하긴 했지만)로 변환을 처리했기 때문에 javascript의 메소드를 간단히 소개하겠다. const example = '{"myExample":"hi"}..

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