간단한 블로그

최근 의외로 자주(다시?) 사용하게 되는 것 중 하나로 Data URI를 꼽을 수 있다.Data URI는 data: 접두사가 붙은 데이터 문자열로, 이미지나 영상, 심지어 사운드 파일도 될 수 있다. 1. Data URIMozilla.org의 Data URIs 문서를 살펴보면 Data URI는 아래와 같은 형식을 가진다. data:[][;base64],여기서 은 jpg, png, wav, mp3등 데이터의 형식(MIME 타입이므로 실제로는 image/jpg 같은 형태로 적힌다), base64는 대상 파일을 base64 형식으로 변환한 실제 데이터를 뜻한다. 여기서 base64는 바이트를 아스키 코드 문자열로 변환하는 방식인데,원래 플랫폼 독립적인 형식으로 데이터를 전송하기 위해 만들어졌지만 이 포스트에서..

CSS사이트의 기능에 따라 스타일만을 변경해야 할 필요가 있다. 이 때 link 태그를 사용하는데 이 태그도 DOM 엘리먼트와 마찬가지로 아이디나 클래스를 적용할 수 있다. 이렇게 적용한 아이디나 클래스는 DOM 엘리먼트처럼 동적으로 조작이 가능하다. 스타일시트를 조작하면 브라우저는 이미 그려졌던 스타일을 다시 그려내기 시작한다. 이 기능은 익스플로러7 버전 이후의 모든 브라우저가 지원한다. // 모든 테마를 비활성화 한 후 red 테마만 활성화 $("link.theme").prop('disabled', true); $("link#red").prop('disabled', false); JQuery로 비활성화 Script재미있는 점은 script 태그 역시 클래스나 아이디를 설정하여 선택할 수 있다는 점이..

자바스크립트 코드를 작성하다 보면 배열을 이용하는 경우가 많은데, 늘 splice와 slice 메소드가 헷갈린다. 이번 기회에 정리해두려 한다. 1. Array.prototype.splice기존 배열을 변형하는 메소드다. Array.prototype. splice (start, deleteCount, items...) 배열의 start번째부터 deleteCount개 만큼의 요소를 '제거'한 다음, 그 자리에 items를 '삽입'한다. '제거'된 요소의 배열을 리턴한다.const array = [1, 2, 3, 4, 5, 6]; array.splice(0, 1); // [ 1 ] console.log(array); // [ 2, 3, 4, 5, 6 ] array.splice(3,1); // [ 5 ] co..

스칼라로 풀어보았던 문제 중 27번 문제의 알고리즘과 동일하게 작성해 보았다. flatMap 대신 배열의 concat 메소드를 이용해야 하는 점이 특이했다. 하지만 head나 tail을 직접 처리해야 한다는 점은 굉장히 까다로웠다. /** * 입력받은 배열의 조합을 만드는 함수 * @param n xCn 의 n 값 * @param values 조합으로 만들 값들 */ function combination(n, values) { return (function comb(n, values) { if(!values || values.length === 0) return []; else if(n === 1 || values.length === 1) return values.map(x => [].concat(x))..

프록시 패턴은 실제 데이터에 접근할 수 있는 일종의 인터페이스(상속구조의 인터페이스가 아니다)를 만드는 디자인 패턴이다. 자바의 ORM인 JPA에서의 예를 들자면, FetchType.LAZY로 설정되어 있을 때, 어떤 엔티티 객체와 이어진 엔티티 프로퍼티는 '진짜' 객체가 아닌 임시 객체로 실제로 사용될 때 데이터베이스에서 값을 조회해 '진짜' 객체가 만들어진다. ES6의 프록시는 JPA의 프록시와는 약간 다른 특성을 가진다. ES6의 프록시는 실제 객체와 핸들러 객체를 이용해 프로퍼티가 추가, 삭제, 변경 혹은 실행 될 때 특정 함수를 실행하는 객체를 만드는 클래스다. class Person { constructor(name) { this.name = name; } } const jack = new P..

많은 언어에서 쓰이는 콜렉션 중에는 Map이라는 콜렉션이 있다. Map은 Key-Value 콜렉션으로 특정 키에 대한 값을 가지는 형태다. NoSql이나 In-memory DB에서도 사용되는 아주 유용한 형태다. 아래 코드들은 모두 TypeScript에서 작성했다. 1. Dictionary ObjectES6 전까지의 자바스크립트에는 Map의 구현체가 없었다. 대신 객체 프로퍼티를 자유롭게 추가/삭제할 수 있다는 장점을 이용해 특정 프로퍼티에 값을 할당한 형태인 '딕셔너리(Dictionary)' 객체를 만들어 사용해 왔다.const dictObj = {}; dictObj['first'] = 1; dictObj['second'] = 'second'; dictObj[10] = '100'; // key인 10은..

Function에 구현되어 있는 bind 함수는 두 가지 용도로 사용할 수 있다. 1) 함수의 수신자 객체 지정 (이펙티브 자바스크립트 아이템 25)this는 자바스크립트에서의 기묘한 개념 중 하나다. 흔히 접하는 언어들과 달리 자바스크립트의 Scope는 코드 블록( {}로 구분되는 )이 아닌 '객체' 단위다. 때문에 아래와 같은 이상한 현상이 발생한다.let buffer = { entries: [], add: function(s) { this.entries.push(s); } }; buffer.add(100); // 100 추가 console.log(buffer.entries); // [100] (function () { this.entries = []; let x = buffer.add; x(300)..

클래스의 프로퍼티에도 데코레이터를 사용할 수 있다. 먼저 예제에 사용할 간단한 클래스를 정의한다.class Car { private name: string; private price: number; private type: string; constructor(name: string, price: number) { this.name = name; this.price = price; } public toString() { return `${this.name}, ${this.type}, ${this.price}`; } } 또, 객체를 주입할 때 사용할 간단한 컨테이너를 정의하고 객체를 넣어둔다.class Container { private static map: {[key: string]: any} = {}; ..

타입스크립트의 데코레이터는 자바에서의 어노테이션과 유사하게 메타데이터를 지정할 수 있다. 하지만 인터페이스로써 메타데이터만을 저장하는 자바와 달리 ES6의 데코레이터는 메소드나 프로퍼티를 직접 변경할 수 있다. 더 정확히 말하자면, TypeScript의 데코레이터는 파이썬의 데코레이터와 마찬가지로, 함수를 파라미터로 받는 함수를 쉽게 선언하는 일종의 Sugar Syntax다.또, 어노테이션이 붙은 모든 클래스나 메소드, 프로퍼티를 찾을 수 있는 자바 리플렉션과 달리 TypeScript의 'reflect-metadata'에는 그런 기능이 없는 것으로 보인다. Angular의 app.module.ts 파일에 컴포넌트 클래스명을 직접 입력해야 하는 이유가 이것 때문이 아닐까 하는 추측을 해본다(추측만). 몇 ..

https는 추가적인 암호화 과정이 필요해 메모리를 더 사용하고 페이지 로딩이 느려지는 경향이 있다. 그럼에도 이제 대부분의 사이트는 https를 사용한다. https에 사용되는 인증서는 SSL 인증서를 구매해야 하는데, 이전 검색해 보았을 때 COMODO의 가장 싼 인증서가 1년에 3만원이었던 것 같다. 비싼 가격은 아니지만 결제해야 된다는 것 자체가 부담스럽다. 그런 인증서를 Let's Encrypt를 통해 무료로 발급받아 사용할 수 있다. 물론 이런저런 제한과 90일마다 갱신해야한다는 귀찮은 점은 감수해야 한다. Play framework에서 Let's Encrpy로 발급받은 인증서를 적용하려면 몇 가지 과정이 필요하다. 이전 Netty 서버에 적용할때도 한참 고생했던 기억이 있다. 발급받는 곳마다..