What 자바스크립트에서는 addEventListener()를 통해 해당 요소를 클릭했을 때 특정 이벤트를 발생시킬 수 있다. 만약, 부모-자식 요소 관계에서 부모 요소와 자식 요소 둘 다 이벤트 리스너를 적용했을 때(전제 조건) 이 중 하나를 클릭하게 되면 어떤 이벤트 리스너가 먼저 작동하게 될까? (아래의 예시들은 위와 같은 구조의 DOM 요소를 가지고 있다고 가정한다.) How 이벤트 버블링(Event Bubbling) : 아래 → 위 const box1 = document.querySelector('.box1'); const box2 = document.querySelector('.box2'); const box3 = document.querySelector('.box3'); box1.addEve..

What 인코딩(encoding)이란, 쉽게 말해 사람의 언어를 컴퓨터 언어로 바꿔주는 것을 말한다. 예를 들어 '가'는 '%EA%B0%80'의 형태로 바꿔준다. 보통 컴퓨터는 영어와 숫자는 이해하지만(아스키 코드로 표현 가능하지만), 한글 같은 경우에는 이해를 하지 못하기 때문에 영어와 숫자의 조합으로 바꿔주는 작업이 필요하다. 이것을 우리는 인코딩한다고 표현한다. 인코딩의 반댓말인 디코딩(decoding)은 인코딩된 언어를 다시 인코딩하기 전으로 바꿔주는 것을 뜻한다. 예를 들어 '%EA%B0%80'를 디코딩하면 '가'라는 값이 반환된다. 참고로, 인코딩과 디코딩은 암호화와 복호화가 아니다. 암호화는 키를 이용한 알고리즘으로 정보를 변환하고 보호하는 것을 의미하며 단순히 문자열을 아스키 코드 형태로 ..

What function sum() {...}과 functin Sum() {...}의 차이점은 뭘까? 함수 이름이 소문자로 시작하는 게 우리가 일반적으로 알고 있는 함수라면, 대문자로 시작하는 것은 바로 new 연산자와 함께 사용하는 생성자 함수이다. 안 그래도 복잡한데 일반 함수 쓰면 되지 굳이 생성자 함수를 알아야 할 필요가 있을까 싶겠지만, 이 생성자 함수를 제대로 사용한다면 객체 생성에 있어서 조금 더 효율적으로 사용할 수 있게 된다. 이제 우리가 생성자 함수를 어떨 때 사용하는지에 대해서 알아보도록 하자. How 유사한 객체를 무한대로 찍어내고 싶을 때 function Character(name, age){ this.name = name; this.age = age; } let kim = new..

What 자바스크립트를 공부한다고 해서 단순히 타입과 메서드를 공부하는 게 전부는 아니다. 사실 이것보다 중요한 것은 자바스크립트가 어떻게 동작하는지를 이해하는 것이다. 우리가 작성한 코드가 자바스크립트 입장에서 어떻게 읽어내는지, 그냥 위에서 아래로 읽기만 하는 건지 등을 공부하는 게 자바스크립트 학습의 가장 기본 중에 기본이라고 할 수 있다. 지금까지 자바스크립트를 그저 내가 친 코드나 읽어주는 엔진 나부랭이(?) 정도로만 생각했다면, 이 글에서만큼은 스스로가 자바스크립트 엔진 혹은 한 줄의 JS 코드가 되었다고 생각하고 어떻게 동작하는지 이해해 보자. How 위 그림은 자바스크립트의 동작 원리 이해에 조금이나마 도움이 되고자 한 번 그려봤다. 그림에서 주목할 만한 점은 메모리 힙, 콜 스택, 콜백 ..

What배열을 선언하는 방법에는 여러 가지가 있다. const arr = [1, 2, 3] 처럼 변수에 배열을 담는 가장 일반적인 방식도 있고, Array(1, 2, 3) 처럼 생성자를 이용해서 배열을 생성하는 방식도 있다.* Array(10)처럼 인자에 한 개만 넣을 경우에는 배열의 length를 의미하고, Array(1, 2, 3)처럼 두 개 이상일 경우 배열의 값을 의미한다. Array.from()은 어떤 특정한 규칙을 갖는 값을 배열로 선언할 때 혹은 유사 배열 객체나 이터러블 객체를 새로운 배열로 선언하고자 할 때 사용한다. 또한, 문자를 한 글자씩 배열로 만들고자 할 때도 유용하게 사용된다. How문자열을 한 글자씩 떼서 배열로 선언하고 싶을 때const str = '안녕하세요';const a..