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

자바스크립트에는 8가지의 자료형이 존재한다. 그 종류로는 number, string, BigInt, boolean, null, undefined, Symbol, 마지막으로 객체가 존재한다. 이 중 객체를 제외한 나머지들은 딱 하나의 값만 가질 수 있는데, 이런 자료형을 원시타입(primitive type)이라 하고, 객체는 여러 값들을 포함할 수 있는 하나의 덩어리이며 참조타입(reference type) 이라 부른다. 객체가 포함할 수 있는 값들에 제한은 없으며 어떤 자료형이든 객체의 내부 값으로 할당할 수 있다. 프로퍼티는 키-값 쌍으로 구성되는데 키는 값을 나타내는 이름이라 생각하면 되고, 이 키로 해당 프로퍼티 값에 접근할 수 있다. let obj = { name: 'sunny' // 키(name..

자바스크립트로 개발을 하다보면 this를 다룰일이 많이 있다. 자바스크립트에서 this는 현재 코드가 실행되는 상황에 따라 할당되는 값이 달라지는데, 언제 어떤 값이 this에 할당되는지 제대로 이해하지 않고 대충 얼버무리고 넘어간다면 어디가서 JS좀 한다 같은 소리는 고이 접어두자. "this 바인딩 이 정도면 다 이해한듯?" 그 당시엔 이렇게 생각이 들었어도, 시간이 흐르고 this로 복잡한 작업을 하다보면 금세 또 헷갈리고 인터넷을 찾게된다. 그래서 이번엔 this에 대해 최대한 정리해 보려한다. 엄격모드 - "use strict" this에 대해 살펴보기 전에 우선 엄격모드에 대해 알아볼 필요가 있다. 이 엄격모드에 따라 this가 가리키는 값이 상황에따라 달라지기 때문이다. 엄격모드란? 자바스크..

이전에 실행 컨택스트에 대한 내용을 포스팅 한 적이 있다. 복습겸 짧게 요약하면, 실행 컨택스트는 현재 실행중인 코드의 환경 정보를 가진 데이터 구조이고, 함수가 호출될 때 만들어져서 호출스택에 push 된다. 함수가 끝나면 (return 되면) 호출스택에서 pop 되고 메모리에서 제거된다. 실행 컨택스트 관리는 자바스크립트 엔진이 수행하는 가장 중요하면서도 기본적인 역할이고, 이 개념만 제대로 이해해도 대단한 일이다. 하지만 이것만 가지고는 브라우저의 작동 매커니즘을 모두 이해했다고 할 수 없다. 실제 브라우저에서는 DOM 이벤트, 네트워크 요청, 렌더링, 비동기 처리 등 수 많은 일들이 동시 다발적으로 발생한다. 무거운 작업을 수행할때도 브라우저가 버벅이거나 먹통이 되지 않도록 앱을 잘 설계하기 위해..

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