프론트엔드/Web API

브라우저 History API 를 활용하는 방법

History API 로 작업하기 (History API 활용 방법) History API 를 이용하면, 브라우저의 세션 기록과 상호작용할 수 있다. 세션 기록이란, 브라우저에서 사용자가 방문했던 페이지를 기록한 것을 말한다. 일반 사용자는 앞으로 가기, 뒤로 가기 버튼을 통해 세션 기록을 이용한다. History API 제공 메서드 페이지를 이동하는 메서드는 직관적으로 이해가 쉬우나, 기록된 페이지를 수정하는 메서드들은 잘 활용하기 위해 약간의 학습이 필요하다. 이 API 의 주요 목적은 fetch() 같은 메서드를 통해 업데이트 되는 SPA(Single Page Application)와 같은 웹사이트를 지원하기 위한 것이다. 기록된 페이지로 이동 History.back() History.forward..

이벤트 캡처링 (Event Capturing) 이란?

이벤트 캡처링이란? 이벤트 버블링 전에 일어나는 단계이다. 이벤트 캡처링 개념을 알기 위해서 이벤트 버블링부터 공부하는 것이 좋다. 캡처링 -> 타겟 -> 버블링 순으로 이벤트가 흘러간다. 엘리먼트에 캡처링 이벤트를 등록하는 방법 element.addEventListener("click", () => {}, true); 위와 같이 코딩하면, 캡처링 이벤트를 등록할 수 있다. 캡처링, 버블링 결과 예측해보기 HELLO 위의 코드를 실행하면, 순서대로 어떤 것이 로그에 찍히는지 예상할 수 있으면, 캡처링과 버블링을 명확히 이해한 것이다. 헷갈린다면 버블링은 바닥에서부터 거품이 뽀글뽀글 올라오는 이미지라고 생각해보자. 정답은 아래의 순서로 로깅된다. capturing div capturing span bubb..

event.target 과 event.currentTarget 의 차이

event.target 과 event.currentTarget event.target 과 event.currentTarget 은 비슷한 이름을 가졌지만, 다른 결과를 낸다. event.target HELLO div 의 onclick 은 event.target 을 띄운다. 자식 엘리먼트인 span 을 클릭하면, alert 에 표출되는 내용은 [object HTMLSpanElement] 이다. 즉 span 을 클릭하면, div 에 이벤트를 걸어도 event.target 은 span 이다. div 만 정확하게 클릭하면 출력 내용은 [object HTMLDivElement] 이다. event.target 은 내가 실제로 클릭한 요소를 나타낸다. event.currentTarget HELLO event.curre..

이벤트 버블링 (Event Bubbling) 이란?

이벤트 버블링이란? 간단하게 설명하면, 이벤트가 자식에서 부모로 올라가는 현상을 말한다. hello 위와 같은 내용의 html 태그가 존재할 때, span 을 클릭하면 div 의 onclick 이벤트까지 같이 호출되는 현상을 말한다. 사실 이 현상은 document 객체를 만날 때까지 올라간다. 정리하자면, 자식 엘리먼트의 이벤트가 호출된 이후에 자동으로 부모 엘리먼트의 이벤트도 호출된다. 마치 물 아래서 기포가 올라가는 모양과 같다고 하여 버블링이라고 한다. 버블링 되는 이벤트의 종류 거의 모든 이벤트이다. 몇가지 예외로 focus 와 같은 이벤트는 버블링되지 않는다. 버블링을 중단하는 방법 (event.stopPropagation()) HELLO 이렇게 자식 엘리먼트에서 event.stopPropag..

자바스크립트를 이용해 쿠키 값 구하기

코드 쿠키 값을 오브젝트 형태로 불러온다. function getCookieObject() { return document.cookie.split(";").reduce((acc, e) => { const [key, value] = e.trim().split("="); return { ...acc, [key]: value, }; }, {}); }

FormData 란? 그리고 사용법

개요 HTML form 과 값들을 표현하는 key/value 쌍의 집합을 쉽게 생성할 수 있는 방법을 제공하는 인터페이스이다. fetch() 혹은 XMLHttpRequest.send() 메서드에 전달하기 위해 사용될 수 있다. 인코딩 타입이 "multipart/form-data" 로 설정되었다면, form 이 전달하는 포맷을 동일하게 사용한다. 만일 form element 가 하는 방식으로 쿼리 파라미터를 만들어 간단한 GET 요청을 제출하고 싶다면, URLSearchParams 의 생성자에 직접 넘길 수 있다. FormData 를 구현하는 오브젝트는 for...of 구조에서 직접 사용될 수 있다. 굳이 entries() 메서드를 한번 더 불러올 필요 없다. for (const p of myFormDat..

URLSearchParams 란? 그리고 사용법

개요 URLSearchParams 로 URL 뒤에 복잡하게 붙은 파라미터를 쉽게 쪼갤 수 있다. ex. www.example.com?foo=1&bar=2 에서 {foo: 1, bar: 2} 와 같이 뒤에 붙은 파라미터를 쉽게 가져올 수 있다. URLSearchParams 는 URL 의 쿼리 스트링과 관련된 작업을 하는 유틸리티 메서드를 정의하는 인터페이스이다. 주된 사용법: 생성자 URLSearchParams 는 주로 new 키워드를 이용한 생성자를 통해 초기화하고 사용한다. const params = new URLSearchParams("foo=1&bar=2"); console.log(params.get("foo")); // 1 console.log(params.get("bar")); // 2 생성자의..

window.location 이란?

개요 window.location 은 읽기 전용 프로퍼티로 Location 오브젝트를 반환한다. Location 오브젝트에는 현재 문서의 위치와 관련된 정보가 들어있다. window.location 에는 특별한 기능 하나가 있는데 비록 읽기 전용 프로퍼티지만, 주소 문자열을 할당하면 브라우저가 해당 주소로 이동하는 기능이 있다. window.location = "https://naver.com"; // 네이버로 이동 window.location 이 제공하는 다양한 정보들 window.location 은 브라우저의 주소표시줄에 나오는 문자열을 파싱하여 개념별로 제공해준다. 이를테면 https://example.org:8080/foo/bar?q=baz#bang 이라는 주소가 있다고 하면 이는 아래와 같이 파..

바닐라 자바스크립트를 이용해 이벤트 등록할 때 실수하기 쉬운 부분들

이벤트 리스너에서 실수하기 쉬운 부분 개발자가 만든 DOM 요소가 브라우저의 이벤트에 반응하게 만들기 위해서 이벤트 리스너를 등록한다. 이벤트 리스너는 웹사이트 이용자가 DOM 과 상호작용 가능하게 만들기 위해 필수적인 부분이다. 이벤트 리스너를 등록하는데는 잘 살펴보면 2가지 방법이 있다. EventTarget.addEventListener() 를 이용하는 방법 HTML DOM 의 onclick 프로퍼티 를 이용하는 방법 두 방식은 약간 다르다. EvnetTarget.addEventListener() 를 이용하는 방법 장점 하나의 이벤트에도 여러 개의 콜백 함수 등록이 가능하다. ex) onclick 시에 연쇄적으로 여러 개의 함수가 호출되게 만들 수 있다. 단점 여러개의 이벤트 등록이 가능한만큼 이벤..

HTML Element 에 바인딩된 이벤트 가져오기

개요 개발하다보면 간혹 해당 버튼에 어떤 이벤트가 들어있는지 알고 싶을 때가 있다. 하지만 아쉽게도 브라우저에서 제공하는 Native API 로는 알 수 있는 방법이 없다. 그러나, JQuery 를 통해 혹은 Chrome Dev tools 를 통해 알 수 있다. Jquery 를 이용한 방법 Jquery 는 내부적으로 엘리먼트에 대한 이벤트 정보를 저장하고 있어 이렇게 이벤트를 확인하는 것이 가능하다. $._data($("#엘리먼트_아이디")[0], "events"); 위와 같은 코드를 실행하여 해당 엘리먼트에 걸린 이벤트를 볼 수 있다. [0] 을 해주는 이유는 Jquery Object 에서 Standard Html Element 로 타입을 변환하기 위해서이다. 참고로 위의 결과로 나오는 내용은 Jque..

JS 코드로 .css 파일 혹은 .js 파일 삽입하기

개요 가끔 CSS 파일이나 JS 파일을 javascript 코드를 이용하여 동적으로 삽입하고 싶을 때가 있다. 그 때 아래의 코드를 이용하면 편리하다. 코드 if (document.getElementsByTagName("head") != null) { document.getElementsByTagName("head")[0].insertAdjacentHTML( "beforeend", ' />' ); } head 태그에 insertAdjcentHTML() 메서드를 이용해 추가해주는 방식이다. insertAdjacentHTML() 메서드는 문자열을 HTML 태그 형태로 바꾸어주는 역할을 하는 메서드이다. 레퍼런스 insertAdjacentHTML 메서드 설명 공식문서