배열 + 배열 : [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는 간단하게 정의하면 뒤로 가기와 앞으로 가기를 다루는 객체이다. 즉, 브라우저의 히스토리 정보를 담고 있는 객체..

Map 객체 Map 객체는 자바스크립트의 객체와 동일하게 'key-value' 값의 한 쌍으로 이루어진 집합이다. 우리가 알던 객체와는 다르게 메서드를 이용해서 객체의 프로퍼티에 접근한다. 사용 방법 const maps = new Map(); // Map 객체 생성 maps.set('name', 'shawn'); maps.set(123, 456); maps.set(true, 'true'); maps.get('name'); // 'shawn' maps.has('name'); // true maps.delete(123); // true maps.size(); // 2 maps.clear(); - map.set(key, value) : Map 객체에 key와 value값을 넣어준다. 이 때, 객체와 크게 다른..

DOM(Document Object Model)이란?DOM이란 문서 객체 모델이라는 뜻으로 브라우저가 HTML 파일의 코드를 읽고 각 요소들을 트리 모양으로 구조화한 객체를 말한다. 쉽게 말하면 우리가 HTML로 만든 코드를 주문서라고 한다면, 브라우저가 이 주문서를 바탕으로 만들어내는 게 DOM인 것이다.  간혹 사람들이 헷갈려하는 게 "HTML === DOM"이라고 착각하는 경우가 많다.하지만 둘은 다른 개념이다. DOM이라는 것은 코드가 아니라 HTML 코드를 파싱하여 만들어지는 객체 모델이다. 반면 HTML은 코드 자체를 의미한다. 우리가 웹을 만들 때 HTML을 이용하여 전체적인 레이아웃을 잡는다. 그리고 이 HTML 코드를 브라우저가 읽고 DOM을 생성한다. 이때, HTML의 각 엘리먼트들은 ..