log4me

이 글은 3 Ways To Create HTML Element In JavaScript을 참고하여 작성된 글입니다. 자바스크립트를 통해 아래와 같은 구조를 갖는 DOM을 만드는 방법 3가지를 알아보자. Click Me! 1. createElement() 사용하기 먼저 body에 app 요소를 추가한다. const app = document.createElement('div'); app.id = 'app'; document.body.appendChild(div); 그리고 app에 button 요소를 추가한다. const button = document.createElement('button'); button.id = 'button'; button.i..

이벤트 핸들러의 Event 객체 JavaScript에서는 addEventListener() 메서드를 통해 DOM 요소에 이벤트 핸들러를 등록할 수 있다. 등록된 이벤트 핸들러는 호출될 때 자동적으로 Event 객체를 첫 번째 인자로 전달받는다. 보통 임의로 e나 event로 이름지어 사용하는 파라미터가 여기에 해당된다. 이 이벤트 객체는 앞으로 다루게 될 target, currentTaget과 같은 프로퍼티와 stopPropagation()과 같은 메서드 등을 가지고 있다. const input = document.querySelector('.input'); // 파라미터명은 꼭 e가 아니어도 된다. const handleChange = (e) => { const { name, value } = e.ta..

고차 함수란 아래 조건 중 하나 이상을 만족하는 함수이다. 하나 이상의 함수를 인자로 받기 결과로 함수 반환하기 예제 1. 조건 1, 2를 만족하는 고차함수 예제이다. 고차함수 not은 인자로 전달받은 함수 f의 실행 결과값을 부정한다. function not(f) { return function(...args) { let result = f.apply(this, args); return !result; // f의 결과를 부정한다. } }숫자가 짝수인지 판별하는 함수 isEven을 고차함수 not의 파라미터로 전달한다면, 그 결과는 숫자가 홀수인지를 판별하는 것과 같을 것이다. const isEven = x => x % 2 === 0; const isOdd = not(isEven);따라서 배열의 요소는 ..

프론트엔드 개발을 하다가 동적으로 HTML 요소의 스타일을 변경해줘야 하는 상황을 만났다. 나는 styled-component와 같은 CSS-in-JS 방식을 사용하지 않고 공통 스타일 값들을 CSS의 변수로 관리하고 있었기 때문에, 또 한 번 자바스크립트 상수를 선언해 중복해서 값을 관리하고 불러와 사용해야 하는 건지 고민이 생겼다. 하지만 다행히도 자바스크립트에는 CSS에 선언한 변수의 값에 접근하는 API가 존재했다! getComputedStyle() 과 getPropertyValue() getComputedStyle(): 인자로 전달받은 HTML 요소에 대한 모든 CSS 속성값을 담은 스타일 객체 반환 getPropertyValue(): 스타일 객체 중 인자로 전달받은 특정 속성에 대한 값을 문자..

TL;DR slice() 메서드는 복사+추출의 개념, splice() 메서드는 제거+추출의 개념이다. 때문에 원본 배열이 유지되어야 할 때는 slice() 메서드를, 원본 배열을 변경해야 할 때는 splice() 메서드를 사용한다. 특히 요소를 삭제하고 곧바로 그 위치에 새로운 요소를 삽입하고 싶다면 splice() 메서드를 사용한다. 문제 아래 array 배열의 값은 그대로 유지한 채, 맨 앞의 두 원소가 제거된 새로운 배열을 만들어 출력하려고 한다. 둘 중 어떤 메서드를 써야할까? const array = [1, 2, 3, 4, 5];1. splice() Removes elements from an array and, if necessary, inserts new elements in their pl..