그럼에도 불구하고

lodash library에 대해 알아보자 [ lodash ] lodash는 JavaScript의 인기 있는 라이브러리 중 하나입니다. 보통의 경우 array, collection, date 등 데이터의 필수적인 구조를 쉽게 다루기 위해 사용합니다. JavaScript에서 배열 안의 객체들의 값을 handling(배열, 객체 및 문자열 반복 / 복합적인 함수 생성) 할 때 유용합니다. 이런 점으로 인해 JavaScript의 코드를 줄여주고, 빠른 작업에 도움이 됩니다. 특히 frontend 환경에서 많이 쓰입니다. ㅡ. (변수) 이런식으로 작성할 경우 lodash wrapper로 변수를 감싸게 되면서 해당 변수에 대한 chaining을 시작합니다. _라는 기호를 이용해서 사용하기 때문에 명칭 또한 lod..

innerHTML, innerText, textContent 속성은 텍스트를 읽어오고 설정할 수 있다는 점에서 비슷해 보이지만, 조금씩 다른 차이가 있다. 그 차이에 대해 알아보자 :) [ innerHTML ] innerHTML은 'Element'의 속성으로, element내에 포함된 HTML 또는 XML 마크업을 가져오거나 태그와 함께 입력하여 내용을 직접 설정할 수 있다. 즉, innerHTML을 사용하면 내부 HTML 코드를 JavaScript 코드에서 새 내용으로 쉽게 변경할 수 있는 것이다. HTML 삽입 미리보기할 수 없는 소스 innerHTML은 유용한 메서드이고, 자주 사용하지만 치명적인 단점을 가지고 있다. ※ innerHTML의 단점 MDN에 따르면 innerHTML은 XSS(Cross..

Element.closest()에 대해 알아보자 [ Element.closest() ] Element의 closest() 메서드는 주어진 CSS 선택자와 일치하는 요소를 찾을 때까지, 자기 자신을 포함해 위쪽(부모 방향, 문서 루트까지)으로 문서 트리를 순회한다. 구문 closest(selectors) 매개변수 selectors: Element와 그 조상 요소들에 테스트할, 유효한 CSS 선택자 문자열을 말한다. 반환 값 selectors에 일치하는 가장 가까운 조상 Element 또는 자기 자신, 일치하는 요소가 없으면 null을 발생 예제 HTML Here is div-01 Here is div-02 Here is div-03 JavaScript const el = document.getElement..

importNode()에 대해 알아보자 [ importNode() ] 현재 문서가 아닌 외부 문서의 노드를 복사하여 현재 문서에 넣을 수 있도록 해준다. var node = document.importNode(externalNode, deep); ● node : 문서에 추가될 새로운 노드를 말한다. 새로운 노드가 문서 트리에 추가되기 전까지, 새로운 노드의 parentNode는 null이다. ● externalNode : 다른 문서에서 가져올 노드를 말한다. ● deep : 불리언 타입을 가지며, 다른 문서에서 노드를 가져올 때 노드의 자식 요소들을 포함하여 가져올 것인지에 대한 여부를 결정한다. 실제 사용한 예제를 보자 index.html HTML 삽입 미리보기할 수 없는 소스 app.css HTML ..

모듈 / import / export에 대해 알아보자 [ 모듈 ] 모듈(module)이란 애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각을 말한다. 일반적으로 모듈은 기능을 기준으로 파일 단위로 분리한다. 이때 모듈이 성립하려면 모듈은 자신만의 파일 스코프(모듈 스코프)를 가질 수 있어야 한다. 자신만의 파일 스코프를 갖는 모듈의 자산(모듈에 포함되어 있는 변수, 함수, 객체 등)은 기본적으로 비공개 상태이다. 다시 말해, 자신만의 파일 스코프를 갖는 모듈의 모든 자산은 캡슐화되어 다른 모듈에서 접근할 수 없다. 즉, 모듈은 개별적 존재로서 애플리케이션과 분리되어 존재한다. 하지만 애플리케이션과 완전히 분리되어 개별적으로 존재하는 모듈은 재사용이 불가능하므로 존재의 의미가 없다. 모듈은 ..

프로미스에 대해 알아보자 [ 프로미스 (Promise) ] 프로미스는 비동기 처리를 위한 콜백 패턴은 콜백 헬이나 에러 처리가 곤란하다는 문제가 있기에, 이를 극복하기 위해 ES6에서 도입되었다. Promise 생성자 함수를 new 연산자와 함께 호출하면 프로미스(Promise 객체)를 생성한다. ES6에서 도입된 Promise는 호스트 객체가 아닌 ECMAScript 사양에 정의된 표준 빌트인 객체다. Promise 생성자 함수는 비동기 처리를 수행할 콜백 함수를 인수로 전달받는데 이 콜백 함수는 resolve와 reject 함수를 인수로 전달받는다. HTML 삽입 미리보기할 수 없는 소스 Promise 생성자 함수가 인수로 전달받은 콜백 함수 내부에서 비동기 처리를 수행한다. 이때 비동기 처리가 성공..

Web Animation API에 대해 알아보자 HTML 삽입 미리보기할 수 없는 소스 [ Web Animation API ] Web Animation API는 자바스크립트에서 애니메이션을 사용하기 위한 하나의 수단이다. DOM 요소의 애니메이션과 같은 웹 페이지 표시에 대한 동기화 및 타이밍을 변경하는 것이 가능하다. 또한 타이밍 모델과 애니메이션 모델 두 가지 모델을 결합하여 수행할 수 있다. 또한, CSS Transitions와 CSS Animations는 CSS에 모션을 미리 등록해 놓아야 하지만 Web Animation API는 자바스크립트만으로 처리할 수 있어 종료 시점을 판단하기 쉽다는 장점이 있다. 첫 번째 인수는 시작과 종료 값을 포함하는 객체를, 두 번째 인수는 애니메이션 속성을 포함하..

비동기 프로그래밍에 대해 알아보자 [ 동기 처리와 비동기 처리 ] 실행 콘텍스트에 따르면 함수를 호출하면 함수 코드가 평가되어 함수 실행 콘텍스트가 생성된다. 이때 생성된 함수 실행 콘텍스트는 실행 콘텍스트 스택(콜 스택)에 푸시되고 함수 코드가 실행된다. 함수 코드의 실행이 종료되면 함수 실행 콘텍스트는 실행 콘텍스트 스택에서 팝 되어 제거된다. 함수 호출 -> 함수 코드 평가 -> 함수 실행 콘텍스트 생성 -> 실행 콘텍스트 스택(콜 스택)에 푸시 -> 함수 코드 실행 -> 함수 코드 실행 종료 -> 함수 실행 컨텍스트를 실행 콘텍스트 스택에서 팝 되어 제거 함수가 실행되려면 "함수 코드 평가 과정"에서 생성된 함수 실행 콘텍스트가 실행 콘텍스트 스택에 푸시되어야 한다. 다시 말해, 실행 컨텍스트 스..

REST API에 대해 알아보자 XMLHttpRequest 참고 :) https://despiteallthat.tistory.com/149 [JavaScript] XMLHttpRequest란? XMLHttpRequest에 대해 알아보자 [ XMLHttpRequest ] 브라우저는 주소창이나 HTML의 form 태그 또는 a 태그를 통해 HTTP 요청 전송 기능을 기본 제공한다. 자바스크립트를 사용하여 HTTP 요청을 전송하려면 XMLHt despiteallthat.tistory.com [ REST API ] REST(REpresentational State Transfer)는 HTTP/1.0과 1.1의 스펙 작성에 참여했고 아파치 HTTP 서버 프로젝트의 공동 설립자인 로이 필딩(Roy Fielding)..

XMLHttpRequest에 대해 알아보자 [ XMLHttpRequest ] 브라우저는 주소창이나 HTML의 form 태그 또는 a 태그를 통해 HTTP 요청 전송 기능을 기본 제공한다. 자바스크립트를 사용하여 HTTP 요청을 전송하려면 XMLHttpRequest 객체를 사용한다. Web API인 XMLHttpRequest 객체는 HTTP 요청 전송과 HTTP 응답 수신을 위한 다양한 메서드와 프로퍼티를 제공한다. [ XMLHttpRequest 객체 생성 ] XMLHttpRequest 객체는 XMLHttpRequest 생성자 함수를 호출하여 생성한다. XMLHttpRequest 객체는 브라우저에서 제공하는 Web API이므로 브라우저 환경에서만 정상적으로 실행된다. // XMLHttpRequest 객체의..

JSON.stringify와 JSON.parse에 대해 알아보자 [ JSON.stringify ] JSON.stringify 메서드 객체를 JSON 포맷의 문자열로 변환한다. 클라이언트가 서버로 객체를 전송하려면 객체를 문자열화해야 하는데 이를 직렬화(serializing)라 한다. HTML 삽입 미리보기할 수 없는 소스 JSON.stringify 메서드는 객체뿐만 아니라 배열도 JSON 포맷의 문자열로 변환한다. HTML 삽입 미리보기할 수 없는 소스 [ JSON.parse ] JSON.parse 메서드는 JSON 포맷의 문자열을 객체로 변환한다. 서버로부터 클라이언트에게 전송된 JSON 데이터는 문자열이다. 이 문자열을 객체로서 사용하려면 JSON 포맷의 문자열을 객체화해야 하는데 이를 역직렬화(de..

data 어트리뷰트와 dataset 프로퍼티에 대해 알아보자 data 어트리뷰트와 dataset 프로퍼티를 사용하면 HTML 요소에 정의한 사용자 정의 어트리뷰트와 자바스크립트 간에 데이터를 교환할 수 있다. data 어트리뷰트는 data-user-id, data-role과 같이 data-접두사 다음에 임의의 이름을 붙여 사용한다. HTML 삽입 미리보기할 수 없는 소스 data 어트리뷰트의 값은 HTMLElement.dataset 프로퍼티로 취득할 수 있다. dataset 프로퍼티는 HTML 요소의 모든 data 어트리뷰트의 정보를 제공하는 DOMStringMap 객체를 반환한다. DOMStringMap 객체는 data 어트리뷰트의 data-접두사 다음에 붙인 임의의 이름을 카멜 케이스로 변환한 프로퍼..