내가 보려고 만든 개발 공부 일지

어떤 채용 공고에 제출한 프론트엔드 과제의 코드리뷰 중 이런 피드백을 받아본적이 있다. "debounce와 throttle 처리가 없는게 아쉽습니다.. " (나 : 디바운스 뭐시기 그게 뭔데 😂) 사실 디바운싱과 스로틀링은 용어만 생소할 뿐이지 프론트엔드 개발자라면 한 번 쯤은 자기도 모르게 고민해봤거나, 직접 구현했던 적이 있을지도 모르는 프로그래밍 기법이다. 함수 실행 횟수 제한 프론트엔드 개발을 하다보면 이벤트 처리는 흔한 일이다. 페이지 내에 스크롤 위치에 따라 모양이 변하는 HTML 요소가 있다고 가정해 보자. 개발자는 먼저 scroll 이벤트를 등록할 것이고, scroll 이벤트의 콜백함수에서는 스크롤의 현 위치값을 받아서 계산해주는 작업이 필요할 것이다. 그런데 이 콜백함수는 스크롤이 일어나..

자바스크립트를 잘 다루기 위해선 알아야 할 개념들이 정말 많다. 기본적인 문법부터 시작해서 자료형, 함수, 프로토타입, 모듈, 비동기 처리 등등... 자바스크립트 공부는 끝이 없는것 같다. 이런 여러 개념들중 자바스크립트가 어떻게 동작하는지 이해하기 위해 반드시 알고 있어야 할 가장 핵심적인 개념이 있는데, 바로 이번 글의 주제인 실행 컨택스트(Excution Context) 이다. 실행 컨택스트란 ? 실행 컨택스트는 함수의 실행, 호이스팅, 렉시컬 환경, 클로저 같은 개념들을 관통하는 하나의 큰 개념이다. 그래서 실행 컨택스트란 무엇인가? 실행 컨택스트는 현재 실행중인 코드에 대한 세부 정보(제어 흐름의 위치, 선언된 변수와 함수, this, arguments 등) 를 담고있는 데이터 구조이다. (이 ..

자바스크립트 공부를 하면서 유사배열이 어쩌고 이터러블이 어쩌고 하는 말을 종종 들었었다. 그런데 실제로 개발할땐 그냥 배열만 잘 다룰줄 알아도 전혀 문제가 없었기에 굳이 찾아보거나 하진 않았다. 그래서 이번에 배열, 이터러블, 유사배열 이 세가지 녀석들에 대해 공부한 내용을 정리해 본다. 1. 배열 배열은 우리에게 너무나도 친숙한 녀석이다. 배열은 자바스크립트 내장 함수인 Array에 의해 만들어지는 객체 타입의 자료형이다. let a = new Array(); // (1) let b = []; // (2) 배열 선언은 위와 같이 할 수 있는데, (1) 과 (2) 는 같은 뜻이다. (1)을 단축해서 쓴것이 (2)이다. new 키워드를 통해 반환된 값이기 때문에 당연히 배열의 타입도 객체이다. let a ..

HTML 요소 포커싱 HTLM 요소의 포커싱 관련 이벤트로 onfocus 와 onblur 가 있다. 이 두 이벤트는 서로 짝꿍이다. 이름 그대로 HTML 요소가 포커싱 되었을땐 onfocus 이벤트가 발생하고, 반대로 포커싱 해제 되었을땐 onblur 이벤트가 발생하게된다. 여기서 '포커싱' 이란 HTML 요소가 마우스 클릭 혹은 Tab키로 선택이 가능한 것을 의미한다. 모든 HTML 요소가 다 포커싱 가능한것은 아니다. 기본적으로 포커싱 가능한 HTML 요소로는 a, button, details, input, select, textarea 가 있고 이 요소들을 대화형 요소 라고 부른다. 위 6개 요소들을 제외한 HTML 요소들은 비대화형 요소 라고 부르며 (div, span, ul ... 등 같은 나머..