분류 전체보기

데이터 프로퍼티 (data property)와 접근자 프로퍼티 (accessor property) 란?

프로퍼티의 종류 프로퍼티의 종류는 데이터 프로퍼티(Data property) 와 접근자 프로퍼티(Accessor property) 가 있다. 접근자 프로퍼티 (Accessor property) 란? Descriptor 에서 정의하는 아래 함수들을 말한다. get (getter 함수) set (setter 함수) 데이터 프로퍼티 (Data property) 란? value 로 표현되는 모든 프로퍼티를 말한다.

자바스크립트의 Descriptor 란? (feat. Object.defineProperty())

Descriptor 속성들 Object.defineProperty 의 3번째 파라미터에 들어가는 내용이다. 객체의 프로퍼티는 descriptor 를 갖는다. 우리는 보통 객체 프로퍼티의 key 와 value 만 설정해주기 때문에 descriptor 를 직접 볼 일은 많지 않다. descriptor 에는 아래의 옵셔널 속성이 존재한다. value: 프로퍼티 값 writable: 프로퍼티의 수정 가능 여부 enumerable: 프로퍼티의 열거(iterate) 가능 여부 configurable: 프로퍼티의 삭제 혹은 수정 가능 여부 (writable 보다 더 엄격한 버전) Object.defineProperty(obj, prop, descriptor); configurable 프로퍼티의 속성을 변경할 수 있는..

웹 개발자를 위한 자바스크립트의 모든 것 4장 클래스

자바스크립트 클래스 ES6 가 나오기 이전에는 프로토타입을 이용해 클래스처럼 구현하는 것이 가능했다. ES2015(ES6) 가 나온 이후에는 클래스처럼이 아닌 클래스를 구현하는 것이 가능해졌다. 클래스 기본 문법 살펴보기 class Color { constructor(r = 0, g = 0, b = 0) { this.r = r; this.g = g; this.b = b; } get rgb() { return `rgb(${this.r}, ${this.g}, ${this.b})`; } set rgb(value) { // TODO ... } toString() { return this.rgb; } static fromCSS(css) { // TODO ... } } let c = new Color(30, 144..

자바스크립트의 splice() 함수에 대해 설명해보세요.

splice() 메서드란? Array.prototype.splice() 와 같이 내장 객체인 Array 의 프로토타입에 존재한다. 원본 배열을 변화시키는 함수이다. 원소를 제거(remove) 하거나, 대체(replace) 하거나, 추가(add) 할 수 있다. 원본 배열을 변화시키는 점이 싫다면, slice() 를 이용하는 것이 좋다. const months = ["Jan", "March", "April", "June"]; months.splice(1, 0, "Feb"); // inserts at index 1 console.log(months); // expected output: Array ["Jan", "Feb", "March", "April", "June"] months.splice(4, 1, "M..

정규표현식 Lookaround (Lookahead, Lookbehind) 알아보기

Regex Lookaround match 란? 일치하는 텍스트를 매칭하고 싶을 때가 아니라, 일치하는 텍스트의 앞, 뒤를 매칭하고 싶을 때 사용하는 정규표현식이다. 전방 탐색 (Positive Lookingahead) (?=) 후방 탐색 (Positive Lookingbehind) (? 소비 개념 알아보기 정규표현식에서 일치하는 영역을 반환하는 동작을 소비(consume) 라고 표현한다. 보통 Regex Lookaround match 는 소비(consume) 를 원하지 않을 때 사용한다. 예제 제목 태그 안에 있는 내용만 얻고 싶다면? Regex Lookaround 를 이용하지 않는다면? 하위표현식을 이용해 데이터를 자른다. 정규표현식에서 () 와 같이 괄호로 나누면 그룹별로 데이터를 뽑기 좋다. 혹은 ..

로컬과 운영 환경의 log4j 나누기

다른 경로의 log4j 사용하기 log4j.xml 은 설정에 따라 많은 정보를 로깅하기도, 꼭 필요한 정보를 로깅하기도 한다. level 태그의 value 프로퍼티를 INFO 로 바꾸면 아주 많은 로그를 띄운다. 운영 중인 프로젝트의 log4j 에 너무 많은 로그가 쌓이면 금방 용량이 꽉차게 되고 장애가 일어난다. 개발용 log4j.xml 과 운영용 log4j.xml 이 가끔 나누어질 필요가 있다. -Dlog4j.configuration="file:///D:/log4j/log4j_all_log.xml"톰캣을 실행할 때, VM 속성에 위와 같이 입력해주면, 특정 경로에 있는 log4j.xml 을 사용할 수 있다.

DOM 엘리먼트에 Array Prototype 내장 함수 이용하는 방법

DOM 엘리먼트에 Array 내장 함수를 이용하는 방법 a b c 위와 같이 HTML 에 3 개의 div 가 있을 때, 모든 div 를 잡아서 내용이 b 인것만 남기고 싶다고 해보자. const divs = document.querySelectorAll("div"); divs.filter((e) => e.textContent === "b"); // Uncaught TypeError: divs.filter is not a function" 위와 같이 filter 메서드를 사용하면 편할 것 같은데, 바로 사용이 되지는 않는다. const divs = document.querySelectorAll("div"); const filtered = Array.prototype.filter.call( divs, (e)..

Symbol.species 심볼과 용례

Symbol.species 란? Symbol 오브젝트에서 기본으로 제공하는 Well-known symbol 중 하나이다. 파생된 오브젝트를 만들기 위해 생성자에서 이용하는 Function-valued 프로퍼티를 명시한다. @@species 접근자 프로퍼티는 서브 클래스에서 이를 이용해 기본 생성자를 오버라이드 할 수 있게 해준다. 예제 코드 @@species 오버라이드 해보기 class SubArray extends Array {} const subArray = new SubArray(1, 2, 3).map((e) => e * 2); console.log(subArray instanceof SubArray); // true console.log(subArray instanceof Array); // tr..

모던 자바스크립트, 심볼 (Symbol)

Symbol 이란? ES2015 에서 추가된 7번째 타입으로 원시 데이터 타입(primitive data type)이다. 전까지는 Boolean, null, undefined, Number, String, Object 가 있었다. 익명의 오브젝트 프로퍼티를 만드는데 이용된다. 이름 충돌이 없는 유일한 객체 프로퍼티를 만든다. 프로퍼티를 의도치 않은 노출로부터 보호한다. 자바스크립트 빌트인 객체에 이미 많이 쓰이고 있다. 이는 심볼을 이용해 빌트인 객체를 확장해서 쓰라는 의도도 있다. Symbol 추가가 갖는 의의 왜 굳이 고유한 객체의 키값이 필요할까? 문자열로 하면 안되는 걸까? 자바스크립트 언어 스펙을 정하는 사람들은 새로운 속성이나 메서드를 추가할 때 "다른 개발자들이 이미 쓰고있는 이름은 아닐까?..

웹 개발자를 위한 자바스크립트의 모든 것 3장 새로운 함수 기능

화살표 함수와 this, super, 그 외 화살표 함수 화살표 함수는 ES6 에서 새로 도입되었다. 쉼표 연산자 (Comma Operator) 를 사용하여 map 반환하기 MDN - Comma Operator handlers = handlers.map((handler) => (unregister(handler), register(handler))); 쉼표로 이어진 값을 평가하고 가장 마지막 값을 반환한다. map 의 본문을 간략화하고 싶을 때 사용할 수 있다. 이런식으로 사용하는 것을 추천한다기보다는 간혹 이런식으로 작성된 코드를 볼 수 있어서 알아두면 좋다. 화살표 함수의 this this 를 갖지 않는다. 대신 바로 바깥 스코프의 this 를 가진다. 화살표 함수는 new 키워드로 생성할 수 없지만..

오브젝트 리터럴 ('{}') 이 new Object() 보다 빠른 이유

오브젝트 생성, {} 와 new Object() 의 퍼포먼스 차이 console.time("new Object"); for (var i = 0; i < 200000; i++) { var arr = new Object(); } console.timeEnd("new Object"); console.time("object literal"); for (var i = 0; i < 200000; i++) { var arr = {}; } console.timeEnd("object literal"); 두 오브젝트 생성의 퍼포먼스를 콘솔로 찍어보면, 오브젝트 리터럴({}) 형태가 더 성능이 좋게 나온다. 그 이유는 constructor 함수 호출에 있다. new 키워드는 얼핏 보면, 단순히 객체를 생성하는 것 같지만 실..

Array.prototype.sort() 자세히 알아보기

자바스크립트 내부 배열 정렬 (Array.prototype.sort()) sort() 메서드는 in place 메서드이다. 입력값을 직접 변화시킨다. 입력 참조를 그대로 반환한다. 복사본을 만들지 않는다. 문자열을 넣으면 UTF-16 유니코드 값으로 정렬한다. 구현 방식은 자바스크립트 엔진에 따라 다르다. 예제 const months = ["March", "Jan", "Feb", "Dec"]; months.sort(); console.log(months); // expected output: Array ["Dec", "Feb", "Jan", "March"] const array1 = [1, 30, 4, 21, 100000]; array1.sort(); console.log(array1); // expec..