개발자는 코드를 찢어 개발자는 코드를 찢어

🔔 서론 프로그래머스 데브코스 Javascript 심화과정을 수강하던 중 생소한 키워드를 알게 됐다. 그것은 Event Delegation 즉, 이벤트 위임 이라는 개념이었다. 강사님께서 예시 코드를 보여주시면서 이벤트 델리게이션의 개념을 알아두는 게 정말 중요하다고 스치듯 말씀하셨지만, 내 귀에는 엄청 강조하듯이 들린 것 같은 느낌이었고 마침 처음 듣는 개념이었기에 정리를 하고자 했다. Event Delegation에 대해 알기 위해서는 Event Flow, Event Capturing, Event Bubbling등 여러가지 개념을 또 알아야 했기에 이번 포스팅에서 모두 알아보도록 하자. 📌 Event Delegation이란? 이벤트 델리게이션은 Javascript의 대표적인 디자인 패턴 중 하나이다...

🔔 서론 프로그래머스 데브코스 Javascript 강의를 수강하면서 과제를 진행하던 중 나를 미치게 만드는 요소가 크게 두 가지 있었는데 첫 번째가 장시간 앉아서 강의를 듣다보니 생긴 허리통증 이었다면, 두 번째는 this 였다. 그런의미로 오늘은 this를 공부해보자. 🔔 this란? 먼저 mdn 공식문서에서 this를 뭐라고 설명하는지 알아보자 🤔 흠... 그렇구만.. 흐음.. 이라는 생각만 들게 만드는 문장들이다. this의 특징들을 살펴보면서 위의 문장을 제대로 이해해보도록 하자. 📌 this this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수다. this를 통해 자신이 속한 객체 혹은 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다. this는 일반적..

프로그래머스 데브코스 프론트엔드 과정을 이수하던 중 Event Loop의 동작 과정에 대해 접하게 되었다. 상당히 예전에 Javascript를 처음 공부하던 당시에 접했던 키워드라 기억이 가물가물해서 이번 기회에 다시 한번 정리해보기로 했다. Event Loop가 Javascript 엔진에 포함되어 있다고 착각하는 경우가 종종 있다고들 하는데, 사실은 그렇지가 않다. Event Loop는 Javascript 엔진에 포함되어 있지않고, 브라우저나 Node.js에서 자체적으로 관리하고 있다. WebAPI는 브라우저에서 제공하는 API이고, 클릭과 같은 DOM event, 네트워크 호출 혹은 Timer 등을 실행시킬 경우 브라우저에 위임되는데, 보통 이런 WebAPI들은 Callback 함수를 넘기기 마련이다..

얼마 전 면접을 본적이 있는데 js에서의 호이스팅에 대해 다른 면접자에게 질문을 하는 것을 보았다. 얼추 어떤 개념인지는 머릿속으로는 알고 있었지만 막상 나도 설명을 해보려고 생각해보니까 정확히 알고 있지 않은 것 같아 정리를 하게 되었다. Hoisting 이란? 함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것 자바스크립트 함수는 실행되기 전에 함수 안에 필요한 변수값들을 모두 모아서 유효 범위의 최상단에 선언한다. 자바스크립트 Parser가 함수 실행 전 해당 함수를 한 번 훑는다. 함수 안에 존재하는 변수/함수선언에 대한 정보를 기억하고 있다가 실행시킨다. 유효 범위: 함수 블록 {} 안에서 유효 즉, 함수 내에서 아래쪽에 존재하는 내용 중 필요한 값들을 끌어올리..