트레이딩 뷰 라이브러리의 불친절한 공식문서를 해독하며 프로덕션에 붙이다 분봉이 제대로 붙지 않는 상황이 있어서 여기저기 콘솔을 찍어봐도 문제를 찾을 수가 없었다. js 이벤트루프 특성상 이 스코프 안에서 다른 요소가 간섭할 방법이 없다. 공유자원을 가지지 못하는 사실상 멀티프로세스에 가까운 web worker때문도 아니고, event bus 부분도 떼버려서 문제가 없었다. 진짜 귀신이 곡할 노릇인데… 범인은 console.log였다… object의 참조를 찍을때 이후에 그 object가 변하면 변한 값으로 찍히더라..왜 그러냐면 브라우저 최적화를 위해 그 라인에서 바로 찍지 않고 작업이 종료된 이후에 찍을 수도 안 찍을 수도 있다.. 브라우저마다 다름let obj = { count: 0 };console..

상속js에서 상속은 c++처럼 메모리 블록단위가 아닌 프로토타입이라는 단방향 링크드리스트 기반으로 구현된다. 때문에 c++에서는 포인터 사이즈를 변경해 구현하는 업캐스팅을 js에서는 아래와 같이 프로토타입 변경을 통해 구현할 수 있다 프로토타입 체인상속받은 부모 객체를 못 찾았을때 계속 타고 올라가 찾는 것.(null에 도달할 때까지)업캐스팅// 부모 클래스 function Animal(name) { this.name = name; } Animal.prototype.makeSound = function() { console.log("Some generic sound"); }; // 자식 클래스 function Dog(name) { Animal.call(this, name); // 부모 생성자 호출 // ..

자바스크립트 딥다이브 책을 읽다가 흥미로운 점을 찾아 정리한다. 일단 C에서 얕은 복사는 그냥 포인터(메모리 주소)를 넘겨주는 것이다.때문에 js에서도 얕은 복사란 아래를 의미하는 줄 알았다.let original = { a: 1, b: { c: 2 } };let shallowCopy = original;shallowCopy.a = 3;console.log(original.a); // 3 하지만 책에서 얕은 복사란 아래를 의미한다.let original = { a: 1, b: { c: 2 } };let shallowCopy = { ...original };shallowCopy.a = 3;shallowCopy.b.c = 4;console.log(original); // { a: 1, b: { c: 4 }..

vanilla JS로 핑퐁게임 SPA 사이트 프로젝트 하다가 겪은 일이다.커스텀 게임 방 리스트 페이지위 페이지에선 2가지 비동기 동작이 정의되어 있다.1. 먼저 5초마다 setInterval로 현재 페이지네이션 숫자를 담아 fetch후 방 리스트를 렌더링 하는 로직2. 아래 화살표를 누르면 페이지네이션을 + - 하고 그 숫자를 담아 fetch후 방 리스트를 렌더링 하는 로직 그런데 아래 화살표를 광클하니 현재 페이지네이션이 아닌 페이지가 깜빡거리면서 렌더링 되는 이슈가 생겼다.로직상 문제가 없었고, 콘솔로 페이지네이션을 찍어봐도 이상이 없어서 이틀 내내 고민하고 찾아본 결과 비동기 큐가 2개라는 걸 찾았다. setInterval, setTimeout같은 macrotask이 들어가는 macrotask q..

c, c++ 만 해 본 나로선 클로저라는 머싯는 이름을 붙이는 게 이해가 안 갔다. 이거 그냥 함수 포인터 리턴하는 거 아니냐??라고 생각했다. 허나 아래 같은 상황에서는 애매하다. function createCounter() { let count = 0; return function() { count += 1; return count; }; } const counter = createCounter(); console.log(counter()); // 1 console.log(counter()); // 2 counter변수에 담긴 createCounter 내부에 선언되어 리턴된 function의 경우 counter 변수가 참조하고 있으므로 인스턴스가 살아있는 게 맞지만, 함수 createCounter의 ..