인문학적 공학도

체크박스를 감싸는 영역(label)의 클릭이 체크박스에 연동되도록 하는 과정에서 심상치 않은 발생했다. 클릭 시 focus-within을 이용해 해당 영역의 backgroundColor가 변경되어 focus되었다는 것을 시각적으로 보여주고자 하였다. 일단 그 때 당시의 상황을 코드로 재현해보았다. 보시다시피 다른 체크박스를 클릭하는 순간 backgroundColor이 깜빡거리는 것을 확인할 수 있다. 원인은 을 감싼 태그가 focus 불가능한 엘리먼트이기 때문이다. 마우스 다운 시 input의 focus가 풀리면서 backgroundColor도 풀리게 되고, 마우스 업을 하면서 input의 focus가 다시 되살아나서 비활성화되었던 focus-within이 활성화되는 것이다. 해결법은 간단하다. 에 ta..

기본 개념 - heap: object, function등의 동적인 메모리 할당 - stack: primitive data, references pointing to the real objects 등의 정적인 메모리 할당. 더 안전 1. reference-counting: js는 더이상 사용하지 않는 object에 대해 gc 실시. circle reference에 대해서 취약. 2. mark-and-sweep: root object로부터 지정된 하위 object까지 도달가능 여부를 따짐. node.js의 경우 new space와 old space의 두 부분으로 나뉩니다. 이름에서 알 수 있듯이, 전자는 새로운 개체(젊은 세대)가 할당되는 위치이고 후자는 오랜 기간(구세대) 동안 생존한 개체의 대상입니다. ..

배열에 원소를 추가할 때 unshift를 쓰곤 한다. arr = [2, 3, 4] arr.unshift(1) arr.unshift(0) console.log(arr) // [0, 1, 2, 3, 4] 그러나 unshift는 다음과 같이 배열의 값을 직접 참조하여 원본 배열에 변형을 일으키는데, 불변성의 이슈에서나 성능 상의 이유에서나 좋지 못하다. arr = [2, 3, 4] // 0: 2, 1: 3, 2: 4 arr.unshift(1) // 0: 1, 1: 2, 2: 3, 3: 4 arr.unshift(0) // 0: 0, 1: 1, 2: 2, 3: 3, 4: 4 보시다시피 배열의 원소와 인덱스의 연결이 전부 끊어지고 새로운 값이 할당된다. 중간에 새로운 원소가 끼어들거나, 최악의 경우 첫 번째에 새로..

한창 취준을 하면서, 연습삼아 여기저기 인터뷰를 보고 있다. 오늘은 화상통화를 하며 1시간 동안 js와 react 문제를 해결하는 형식의 인터뷰를 진행했다. 그리고 1번으로 나온 문제다. for (var i = 0; i < 10; i++) { setTimeout(function() { console.log(i); }, 10); } 늘상 코딩테스트 단골문제로 나온다고 다른 블로그에서 스치듯 지나간 문제이다. 언뜻 보기에 별 문제없는 코드이고 정상적으로 0부터 9까지 출력될 것 같다. 그러나 실상은 다르다. 제대로 된 원리를 알지 못해 미심쩍어하면서도 0~9를 적은 본인을 탓하며, 왜 이렇게 돌아가는지 조사해보았다. 간단하게 말해보자면 setTimeout 내의 callback 함수는 모든 함수가 종료되고 난..

참조prototype, __proto__에 관하여 prototype, __proto__에 관하여 프로토타입 개념에 관한 도식이다. Constructor 생성자함수로 instance를 생성한 경우 Constructor의 프로퍼티인 prototype가 instance의 __proto__라는 프로퍼티에 전달이 된다. 그럼 prototype은 무엇일까? co.. student513.tistory.com prototype, __proto__에 관하여 프로토타입 개념에 관한 도식이다. Constructor 생성자함수로 instance를 생성한 경우 Constructor의 프로퍼티인 prototype가 instance의 __proto__라는 프로퍼티에 전달이 된다. 그럼 prototype은 무엇일까? co.. stu..

javascript에는 변수를 선언할 수 있는 3가지 키워드가 있습니다. 그리고 이와 관련된 내용을 검색해서 들어오셨다면 셋이 어떻게 다른지 알고 싶으실 것입니다. 각설하고, var, let, const는 두 가지의 기준으로 비교할 수 있습니다. 재선언이 가능한가? 재할당이 가능한가? var의 경우 재선언과 재할당이 모두 가능합니다. var a = 5; a = 4; console.log(a) // 4 (재할당 ok) var a = 3; console.log(a) // 3 (재선언 ok) var a; console.log(a) // undefined (재선언 ok) 개인적으로 재선언이란 개념 자체가 바람직한 프로그래밍 문법이 아니라고 생각합니다. 변수의 값을 변경하고 싶다면 재할당으로도 충분하기 때문입니다..

함수가 호출될 때 동적으로 바인딩된다. 호출 방식에 따라 바인딩이 달라진다. 호출되는 문맥 브라우저 node.js 전역공간에서 호출 시 window global 함수 호출 시 window global 메소드 호출 시 메소드 호출 주체(메소드명 앞) callback 호출 시 기본적으로는 함수 내부에서와 동일 생성자함수 호출 시 인스턴스 함수 호출시 그런데 이상하다. 함수 호출 시에도 전역공간에서 호출한 것과 같은 효과가 나타난다. 이 경우에는 함수의 호출이 전역공간에서 일어난 것이므로 자연스럽다고 볼 수 있다. function a() { console.log(this); } a(); 함수 내에 함수가 호출된 경우에는 어떨까? function b() { function c() { console.log(thi..

var의 경우 console.log(a()); console.log(b()); console.log(c()); function a() { return 'a'; } var b = function bb() { return 'b'; } var c = function() { return 'c'; } 이 코드는 자바스크립트의 hoisting에 의해 다음과 같이 해석된다 function a() { return 'a'; } var b; var c; console.log(a()); console.log(b()); console.log(c()); b = function bb() { return 'b'; } c = function() { return 'c'; } 어째서 변수에 함수가 할당이 되는지에 관해서는 일급함수에 대..