프론트엔드/JavaScript
[JavaScript / ES6] 화살표 함수 (Arrow function)
Arrow function (화살표 함수) 화살표 함수는 function 키워드 대신 화살표 =>를 사용하여 보다 간략한 방법으로 함수를 선언하는 방법이다. 문법 기본 문법은 다음과 같다. // function let func = function(arg1, arg2, ...argN) { return expression; }; // arrow function let func = (arg1, arg2, ...argN) => expression 인수가 하나밖에 없다면 인수의 괄호는 생략할 수 있다. // function let double = function(n) { return n * 2 } // arrow function let double = n => n * 2; 인수가 없을 땐 빈 괄호를 사용한다. 다..
[Javascript] classList 메서드 종류 (remove, add, item, toggle, contains, replace)
Element.classList classList의 다양한 메서드를 통해 클래스를 간편하게 제어할 수 있다. classList 자체는 읽기 전용 프로퍼티지만 add()와 remove() 메서드를 이용하여 변형할 수 있다. 메서드 먼저 foo 클래스를 가지는 div 상수를 만들고 시작한다. const div = document.createElement('div'); div.className = 'foo'; console.log(div) // 1. remove() 지정한 클래스 값을 제거한다. 존재하지 않는 클래스를 제거해도 에러를 발생시키지 않는다. div.classList.remove("foo"); // 2. add() 지정한 클래스 값을 추가한다. 추가하려는 클래스가 이미 존재한다면 무시한다. div...
[JavaScript] 템플릿 리터럴 (Template literals)
Template literals (템플릿 리터럴) 템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴이다. 이전 버전의 ES2015 명세서에는 "template strings" (템플릿 문자열)라고 불렸다. 익숙해지면 굉장히 편리한 문법이다! 핵심 기능 여러 줄 표현 문자열에 변수, 표현식 삽입 사용 방법 이중 따옴표"", 작은 따옴표'' 대신 백틱(backtick)``을 이용한다. 물결(~)과 같은 키 버튼이다. 변수나 표현식은 $와 중괄호를 통해 표기한다. - ${var}, ${a + b} 여러 줄 표현 normal strings console.log('string text line 1\n' + 'string text line 2'); [ES6] template literals console.lo..
[JavaScript] 자주 사용하는 DOM API 정리
DOM (Document Object Model) 브라우저는 웹 문서를 로드한 후, 파싱하여 DOM을 생성한다. DOM은 모든 요소, 속성, 텍스트를 객체로 만들어 이 객체들을 부자 관계에 따라 트리 구조로 구성한 것을 의미한다. 정적인 웹페이지를 변경하는 유일한 방법은 DOM을 변경하는 것이며, 이때 필요한 것이 DOM API이다. DOM tree 구성요소 문서 노드(Document Node) - 최상위 트리이자 접근의 시작점이다. 요소 노드(Element Node) - HTML 요소를 표현한다. 속성 노드(Attribute Node) - HTML 요소의 속성을 표현한다. 텍스트 노드(Text Node) - HTML 요소의 텍스트를 표현한다. 자식을 가질 수 없다. DOM API DOM을 통해 웹페이지..