간단한 블로그

테스트나 에러 확인, 진행 상황 체크 등을 위해 자주 사용하는 console 객체의 함수에 대해 정리해본다. 1. 로그 기본안드로이드의 로그캣과 마찬가지로 info, log, warn, error가 있다. 이 중 warn은 노란색, error는 붉은색으로 표시된다.console 함수의 파라미터로 객체를 전달하면 JSON 형태로, 배열을 전달하면 배열 전체가 출력된다. 또, 여러개의 인자를 전달하면 ' '(공백-띄어쓰기)로 구분하여 출력한다. // 기본적인 사용 console.info('This is a info message'); console.log('This', 'is a log message'); // console.log == console.debug (둘은 같은 함수다) console.warn(..

에라토스테네스의 Sieve of Eratosthenes 일정한 범위 내의 숫자 중 소수를 찾는 알고리즘. 재귀를 이용해 짧고 간결하게 구현할 수 있다.참고로 ECMA6에는 꼬리재귀 최적화(Tail call optimiztion)가 스펙으로 잡혀있다. const sieve = (numbers, primeNumbers) => { primeNumbers = primeNumbers ? primeNumbers : []; // primeNumbers가 없다면 빈 배열을 생성 if (!numbers.length) return primeNumbers; // 검사를 위한 숫자가 없다면 결과 리턴 const value = numbers[0]; return sieve(numbers.filter(i => i % value),..

전개 연산자(Spread Operator)는 배열, 제네레이터 함수 등의 이터레이터를 펼쳐내는 연산자다. Rest Parameter와 마찬가지로 변수 앞에 ...를 붙이면 된다. const arr1 = ["hello", "world", "!!!"]; console.log(...arr1); // hello world !!!console.log 함수는 1개 이상의 파라미터를 받는 함수다. 더 다양한 함수에 사용해 보자.const input = ['hello', 'jack']; const func1 = (str) => console.log('func1', str); func1(input); // func1 ['hello', 'jack'] // func1(...input); // Error const func2..

재직중 사내 위키에 작성했던 내용인데 최근 Generator를 다시 사용하게 되어 블로그에도 등록한다. Generator FunctionES6에 추가된 Generator 함수는 손쉽게 이터레이터를 만들 수 있게 해준다. JAVA의 Stream.iterate(...)와 유사하다. Generator 함수의 객체는 next()를 호출할 때마다함수의 완료 상태 여부를 뜻하는 프로퍼티 done과 yield로 반환된 value 프로퍼티를 가진 객체를 리턴한다. Generator 함수는 ES5에서 자신의 상태를 가지고 그 상태에 따라 다른 동작을 하는 함수로 변환된다. 현재 Arrow Function을 이용해 Generator 함수를 만들 수는 없다. 이 기능은 ES7 기능으로 논의되고 있다고 한다.

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