기록하는 블로그

You don't know JS 를 스터디하면서 defineProperty 같은 함수는 내부적으로 쓰이는거고 서비스 개발할땐 별로 쓰일일이 없겠다 생각하고 넘겼는데, 어쩌다보니 써야하는 상황이 왔고, 나름 훌륭하게 해결한것 같아서 정리하고 공유할겸 글을 남기게 되었다. 이슈 상황 API 서버와 통신할때 JSON 을 통해서 데이터를 주고받는 상황이다. 이때 서버에선 스네이크 케이스를 사용하고, 클라이언트에선 카멜 케이스를 사용한다. 이때 클라이언트에선 받아온 JSON의 key들을 카멜 케이스로 변환해주어야 하는데, 방법은 여러가지가 있다. key를 순환하면서 변경시키기 defineProperty 를 사용하여 laze access 내가 직접 작업한 방법은 위에 2가지 인데, 우선 별 생각 없이 key값을 순..

드디어 마지막 You don't know JS 2권의 마지막인 부록이다. 정리에 앞서 목차를 정리하자면 다음과 같다. ES6 Class asynquence 라이브러리 고급 비동기 패턴 asynquence 라이브러리 와 고급 비동기 패턴의 경우 asynquence 라이브러리의 설명 정도인데, 이 라이브러리가 현재 많이 쓰이는지 잘 모르겠고, 개인적으로 필요해졌을때 보아도 늦지 않을거라고 생각한다. 커뮤니티 자체가 죽은건 아니지만 활발하게 이루어지고 있진 않았고, 최근엔 많은 대안들이 있으므로 선택적인 내용인듯 하다. 따라서 나는 따로 정리하지 않는다. 한번 보고싶으신 분들은 아래 링크를 확인하면 좋을것같다. https://github.com/getify/asynquence APPENDIX A: ES6. C..

a++와 ++a 사이에 어떤것이 성능이 좋을것인가? 학부생때도 뭐가 더 좋은지 많이 고민해보았고, 써져있는 글마다 달랐다. 결론적으로 의미가 없다는걸 알게되었다. 저 둘이 성능차이가 있으면 얼마나 있을꺼고, 내 서비스에 얼마나 큰 영향을 줄수 있을까... 책에서도 그러한 미시적 성능 튜닝에 초점을 두고있진 않았다. 6.1 벤치마킹 일반적으로 많이 사용하는 성능 측정 코드이다. var start = (new Date()).getTime(); // TODO: 테스트할 작업 var end = (new Date()).getTime(); console.log(end - start); 위와같은 방법으론 정확한 성능을 알아낼 수 없다. 문제점은 다음과 같다. getTime의 최소값인 밀리세컨 이하의 값은 측정 불가 ..

비동기 패턴 덕분에 성능 좋은 코드를 작성할 수 있었다. 하지만 근본적으로 단일 이벤트 루프 스레드에 묶여있기 때문에 한계가 있다. 이러한 문제를 극복하기 위한 3가지를 알아보았다. 1. 웹 워커 비동기 이벤트를 이용하여 스레드간에 메시지를 교환하며 자바스크립트 파일을 개별 스레드 단위로 실행하게 해준다. 메인 UI 스레드의 응답성을 높이면서도 소요 시간이 길거나 자원을 집중적으로 소모하는 작업을 다른 스레드로 분산하는 장점을 가진다. 2. SIMD CPU 수준의 병렬 수학 연산을 대량 데이터의 수치 연산 같은 고성능 병렬 데이터 연산에 특화된 JS API로 연결하는 기법이다. 3. asm.js GC나 강제변환 등 최적화 하기 어려운 영역을 피해서 자바스크립트 엔진이 이런 부류의 코드를 자동으로 인식하여..

면접관으로 들어갈때 종종 타입이 정적인 언어와 동적인 언어를 비교해보라는 질문을 하는데 내가 이 질문을 받으면 얼마나 멋지게 대답할지 문득 궁금해졌다. 그래서 내 생각을 정리해볼겸 글로 남기기로 하였다. Stack overflow에서는? 일단 Stack overflow에서 꽤 추천수를 받은 답을 보자. 정적 타입 언어 compile time에 변수의 타입을 알고있다면 정적 타입 언어이다. Java나 C, C++과 같은 언어에서는 개발자가 각각의 변수에 특정한 타입들을 지정해줘야한다. Ocaml, Haskell, Scala, Kotlin 과 같은 언어에서는 타입의 인터페이스를 제공하고, 시스템이 변수의 타입을 결정할 수 있도록 한다. 여기서의 장점은 모든 종류의 체킹을 compiler에 의해서 확인할 수 ..

작동 위임 5장을 요약하면 다음과 같다. [[Prototype]] 객체는 한 객체가 다른 객체를 잠조하기 위한 내부 링크이다. [[Prototype]]을 사용하여 객체에 없는 필드나 메서드에 접근하기 위해 사용한다. 현재 객체에 없으면 [[Prototype]]을 따라 들어가 찾고, 다시 또 [[Prototype]]를 찾는다. 이를 프로토타입 체이닝이라 한다. 6.1 위임 지향 디자인으로 가는 길 Javascript는 [[Prototype]]이 클래스와 근본부터 다른 디자인 패턴이다. 단, 클래스 지향 디자인 원칙을 모두 포기하라는것은 아니다. 6.1.1 클래스 이론 클래스 기반의 디자인 설계 부모가 되는 클래스를 설계 부모를 상속받은 자식클래스를 정의한다. 자식의 특성을 자식클래스에 정의한다. 위 과정에..

[Part2] Ch5. Prototype 5.1 [[Prototype]] [[prototype]]이라는 내부 프로퍼티가 있고, 다른 객체를 참조하는 단순 레퍼런스로 사용 보통 생성 시점에 할당되며 [[Get]]으로 접근했는데 없으면 이 [[prototype]]을 사용하여 값을 찾는다. var anotherObject = { a: 2 }; var myObject = Object.create(anotherObject); myObject.a; // 2 myObject는 anotherObject와 [[prototype]]으로 링크되었다. myObject에는 a라는 값이 없지만 anotherObject에서 찾아온것이다. var anotherObject = { a: 2 }; var myObject = Object...

객체지향 프로그래밍 (OOP, Object oriented progamming)에 대해 알아보자 인스턴스화, 상속, 다형성 등 클래그 관련 기법들을 살펴보기 전에, 클래스 지향을 디자인 패턴으로 조명해보자. 클래스 지향 개념은 자바스크립트와 잘 맞지않는 부분이 있어 헷갈린다. 4.1 클래스 이론 클래스와 상속은 특정 형태의 코드와 구조를 형성하며 실행활 영역의 문제를 소프트웨어로 모델링 하기 위한 방법이다. 자세한건 OOP 관련된 책에서 확인 4.1.1 클래스 디자인 패턴 클래스를 디자인 패턴이라고 생각해본적이 없음. 절차 지향형 프로그래밍을 좀더 체계적으로 바꾼 일종의 디자인 패턴이다. 4.1.2 자바스크립트의 클래스 일단 Javascript에서 클래스는 없다. ⇒ 비슷하게 프로토타입을 사용하여 흉내낼..

3.1 구문 객체는 두가지 형태로 정의할 수 있다. 리터럴형 선언형 var obj = { key: 1 } 한번에 여러 필드 정의 가능 var obj = new Object(); obj.key = 1; 한번에 하나의 필드를 정의할 수 있음 3.2 타입 원시타입 7가지 null undefined boolean number string object symbol 원시타입은 객체가 아니다. null이 객체라고 아는 사람도 있는데, 이는 typeof의 버그로 인해 object가 나오는것일뿐 실제론 객체가 아니다. javascript의 모든것은 객체이다는 말은 잘못된 말이다. 3.2.1 내장 객체 내장객체란 객체의 하위 타입이다. String Number Boolean Object Array Function Date..

function foo() { console.log(this.a); } var a = 2; (function () { 'use strict' foo(); })()