자바스크립트/개념

자바스크립트 DOMContentLoaded vs load (onload) 의 차이

개요 바닐라 자바스크립트에서 페이지 시작 시에 DOM 에 이벤트 리스너를 붙여주고 싶다면, document.addEventListener() 혹은 window.addEventListener() 와 같이 이벤트를 붙이는 것으로 시작하는데, 보통 아래의 두 이벤트 타입 중 하나를 사용한다. DOMContentLoaded load (onload) 위의 두 방법은 소스코드가 비슷하여 얼핏 같은 역할을 한다고 이해하기 쉬우나 미세한 차이가 있다. DOMContentLoaded 를 이용하는 방법 document.addEventListener( "DOMContentLoaded", function () { // attach event listeners here. }, false ); 이 이벤트는 말 그대로 '모..

자바스크립트 클로저 (Closure) 란 무엇인가?

개요 Closure 란, Lexical Scope 개념에서 스코핑 개념을 조금 더 확장시킨 것이다. 외부 함수가 값을 반환했음에도 Lexical Scope 에 의해 내부 함수에서 외부 함수 스코프에 존재하는 변수에 접근 가능하다는 것이 핵심이다. 클로저 예제 코드 1: 기본 개념 function outerFunction() { const outerVariable = "Mozilla"; function innerFunction() { console.log(outerVariable); } return innerFunction; } const myFunc = outerFunction(); myFunc(); innerFunction() 에서는 outerFunction() 스코프에 존재하는 outerVariabl..

자바스크립트 var , let , const 의 스코프 차이에 대해 알아보자.

개요 자바스크립트에서 변수를 선언할 수 있는 키워드는 var, let, const 3가지가 있다. 엄밀히 따지자면, const 는 상수를 선언하는 키워드라고도 할 수 있다. 자바스크립트 코딩 시 무조건 var 의 사용은 지양해야 한다. var 와 let, const 의 가장 큰 차이는 스코프이다. var 는 Function Scope 혹은 Global Scope 에 사용된다. 이는 많은 자바스크립트 개발자들이 실수할 여지를 만들어주었다. 예제 코드 var 는 블록 스코프를 지원하지 않는다. if (Math.random() > 0.5) { var x = 1; } else { var x = 2; } console.log(x); // window.x; 다른 언어를 사용하다 왔다면, 보통 위의 코드가 에러가 날..

자바스크립트의 Proxy 란?

프록시(Proxy)란? Proxy 오브젝트는 다른 오브젝트를 감싸 연산을 가로챈다. 이를테면 프로퍼티를 읽고 쓰거나 다른 자체적인 오브젝트 조작 연산등을 가로챈다. 혹은 아무런 핸들러도 등록하지 않아 오브젝트가 프로퍼티를 다루는 것을 투명하게 허용할 수도 있다. 일반적으로는 중간에 get 과 같은 연산을 가로채 프로퍼티 접근 로그를 남기거나 set 으로 값이 입력 되기 전 값 검증하기, 값 포맷팅하기, 입력된 값을 깔끔하게 만드는 등의 작업을 추가하여 해당 연산이 일어날 때마다 개발자가 입력한 추가 작업이 수행되도록 하는 방식으로 많이 사용한다. 많은 라이브러리나 브라우저 프레임워크에서 사용된다. 문법 let proxy = new Proxy(target, handler); target: 감쌀 오브젝트이다..

자바스크립트 fetch API 알아보기 (feat. ajax)

개요 네트워크에서 HTTP 통신을 이용하여 리소스를 가져오는(fetch) 역할을 한다. Fetch API 이전에는 XMLHttpRequest 와 Ajax 가 있었다. 다만, XMLHttpRequest 는 스펙 자체가 사용하기 조금 불편하다는 단점이 있었고, Ajax 는 JQuery 의존성이 걸려있다는 단점이 있었다. 이러한 문제들을 해결한 유연하고 강력한 API 가 fetch API 이다. 특징 요청으로 Request 인터페이스를 이용하고 반환 값으로 Response 오브젝트를 이용하는데, 응답은 비동기이기에 이를 resolve() 하여 Promise 형태로 반환한다. Promise 에 대한 설명 fetch() 의 결과로 반환되는 Promise 객체는 오직 네트워크 에러가 발생했을 때만 reject 를 ..

자바스크립트 Promise 알아보기

개요 Promise 객체는 비동기 작업을 코드로 깔끔하게 표현하기 위해 사용되는 포장지같은 것이다. 아직 결정되지 않은 값에 대한 유연한 처리를 제공하여 비동기 코드가 잘 녹아들 수 있게 해준다. The Promise object represents the eventual completion (or failure) of an asynchronous operation and its resulting value. 상세 Promise 는 Promise 가 생기는 시점에는 불가피하게 알 수 없는 값(not necessarily known)에 대한 프록시이다. 이를 통해 비동기 작업의 최종 성공으로 도출되는 값이나 실패에 대한 이유 처리를 담당하는 핸들러를 구성할 수 있다. 이를 이용해 비동기 메서드를 동기 메서..

자바스크립트 XMLHttpRequest 알아보기

개요 XMLHttpRequest 객체는 브라우저에서 서버와 통신하기 위해 사용된다. 페이지의 전체 새로고침 없이 새로운 데이터를 가져올 수 있어서 유용하다. 사용자가 현재 하는 일을 방해하지 않고 웹페이지를 일부 업데이트하는 것을 가능하게 한다. JQuery 사용자가 많이 쓰는 AJAX 는 XMLHttpRequest 를 사용하기 편하게 만들어놓은 것일 뿐이다. 이름과 달리 XMLHttpRequest 는 XML 데이터 이외에도 다양한 데이터를 주고 받는 것이 가능하다. 서버로부터 이벤트 데이터 혹은 메시징 데이터를 받는 것이 통신에 포함되어 있다면, EventSource 인터페이스를 통한 server-sent event 를 사용하는 것을 고려하자. 완전한 양방향 통신의 경우는 WebSockets 가 보통은..