개념 간혹 웹 사이트를 들어가 보면, '다시 보지 않기' 버튼과 함께 있는 팝업창이 뜰 때가 있다. 그때마다 우리는 팝업이 거슬린다는 이유로 '다시 보지 않기' 버튼에 체크한 뒤 팝업창을 가볍게 무시했었다. 그리고 그 팝업창은 다음에 재방문했을 때 뜨지 않았다. 아무것도 몰랐을 때는 그냥 당연한 기능인 줄 알았는데, 지금 생각해 보니까 '팝업창을 다시 안 뜨게 하는 것은 누가 기억하는 걸까?'와 같은 궁금증이 생겼다. 우리가 웹을 만들고 경험해 봐서 알겠지만, HTTP로 작동되는 웹은 서버와 클라이언트의 통신이 끝나면 상태를 보존하지 않는다는 특징을 가진다. 이것은 HTTP의 단점이었고, 이를 극복하고자 쿠키, 세션, 로컬 스토리지와 같은 스토리지가 등장하였다. (세션은 세션 스토리지라고도 한다. 이 글..

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 위 그림은 자바스크립트의 동작 원리 이해에 조금이나마 도움이 되고자 한 번 그려봤다. 그림에서 주목할 만한 점은 메모리 힙, 콜 스택, 콜백 ..