Intersection Observer란? Intersection Observer란 브라우저 뷰포트(브라우저 화면에 보이는 것)와 설정한 요소의 교차점을 관찰해서, 그 요소가 뷰포트에 있는지의 여부를 감시하는 비동기적 기능을 말한다. 쉽게 말하면 스타크래프트의 옵저버처럼 내가 감시하고 싶은 유닛을 지정하면 그 유닛이 내 시야에 들어오는 순간을 알려주는 기능이라고 생각하면 된다. (물론 스타크래프트의 옵저버는 따로 감시할 유닛을 지정하지는 않지만..) ⚠️ 이 글은 해당 API의 세세한 기능 설명을 담고 있지 않으며, 단순 구현 방법만을 설명하고 있습니다. 해당 포스팅에서는 Intersection Observer API이란 무엇이며, 간단히 구현하는 방법 정도만을 소개하고 있고 해당 API의 다른 메서드 ..

우리가 알고 있던 것과 다른 개념 [] == ![] // true 자바스크립트를 조금 끄적여본 사람이라면 머릿속에 쌓아온 자바스크립트적 통념이란 게 있다. 1 == !1의 결과로 false가 나온다는 것이 바로 그 통념의 예시이다. 이것은 굳이 코딩을 모르는 사람이 봐도 비교 연산자만 알고 있다면 답을 알 수 있는 기본적인 상식이기도 하다. 이런 통념을 바탕으로 [] == ![]을 보면 어떨까? 처음엔 '배열과 배열이 아닌 게 같다고? 당연히 false겠네'라고 생각할 것이다. 하지만, 이것은 true를 리턴한다. 이때부터 우리는 그동안 쌓아왔던 통념과 충돌을 느끼고 내가 그동안 잘못 배운 건가라는 생각에 사로 잡히게 된다. 왜 이런 결과가 나오는지에 대해서는 동등 연산자(==)와 배열의 타입에 대해서 ..

배열 + 배열 : [1, 2, 3] + [4, 5, 6] = [1, 2, 3, 4, 5, 6] 2개 이상의 배열이 주어지고, 이 배열을 하나의 배열로 합치고 싶을 때는 다음과 같은 방법들이 있다. concat() 사용하기 const arr1 = [1, 2, 3]; const arr2 = [4, 5, 6]; const result = arr1.concat(arr2); console.log(result); // [1, 2, 3, 4, 5, 6] concat() 메서드는 원래의 배열과 하나 이상의 배열을 합쳐서 새로운 배열을 반환해 주는 역할을 한다. 스프레드 연산자(...) 사용하기 const arr1 = [1, 2, 3]; const arr2 = [4, 5, 6]; const result = [...arr..

구현할 기능 웹사이트나 웹앱을 만들 때, 위아래 혹은 좌우로 터치 드래그하면 화면이 전환되는 이벤트를 구현하고 싶을 때가 있다. 이와 관련해서 다양한 플러그인도 많고 제이쿼리를 이용해서도 간단하게 만들 수 있다. 하지만, 이 글에서는 플러그인 없이 바닐라 자바스크립트만을 이용해서 드래그를 감지하는 이벤트를 구현하고자 한다. 사전 지식 touch 이벤트 touchstart 스크린에 손가락이 닿으면 발생 (스크린에 처음 손가락이 닿았을 때) touchend touchstart 상태(손가락이 닿은 상태)에서 손가락을 떼면 발생 touchmove touchstart 상태에서 손가락을 움직이면 발생 터치 이벤트는 마우스 이벤트와 비슷하다. 마우스를 클릭했을 때, 뗐을 때, 클릭한 채로 움직일 때 등의 마우스 이벤..

history 객체란? 우선, BOM 객체에 대해서 알아야 한다. BOM 객체(Browser Object Model)는 브라우저와 관련된 정보를 갖고 있는 객체로 브라우저의 너비나 높이, 혹은 도메인 주소처럼 브라우저 영역 전반을 다루는 객체라고 보면 된다. document 객체 또한 브라우저의 내용이라고 볼 수 있기 때문에 BOM 객체에 속하며, 때문에 DOM도 BOM에 속한다고 할 수 있다. BOM 객체에는 window(최상위), location, navigator, history, screen, document가 있으며 우리가 이 글에서 다룰 객체는 history 객체이다. history는 간단하게 정의하면 뒤로 가기와 앞으로 가기를 다루는 객체이다. 즉, 브라우저의 히스토리 정보를 담고 있는 객체..