Front-End 검색 결과

해당 글 41건
[JavaScript] Proxy와 Reflect에 대해 알아보자

Proxy와 Reflect Proxy 객체는 기본적인 동작의 새로운 행동을 정의할 때 사용한다. 여기서 말하는 기본적인 동작이란 속성 접근, 할당, 순회, 열거, 함수 호출 등을 말한다. proxy 객체를 생성할 때는 new 라는 생성자를 호출해야 한다. 아래 구문처럼 필수적으로 2개의 인자를 받는다. 구문 new Proxy(target, handler); 매개변수 target : proxy와 함께 감싸진 target 객체 (native array, function, 다른 proxy를 포함한 객체) handler : property이 function인 객체이다. 동작을 수행할 때, handler는 proxy의 행동을 정의한다. DOM node 조작 2개의 다른 element의 속성이나 클래스의 이름을 바..
Front-End/JavaScript 2022. 2. 24. 17:20
[JavaScript] 구조 분해 할당 (Destructuring)

구조 분해 할당 (Destructuring) ES6 문법에서 가장 많이 사용하게 되는 구조 분해 할당에 대해 알아보자. 구조 분해 할당은 다시 말해 해체할당이라고도 하는데 한국말이 꽤나 어려운 듯하다. 디스트럭쳐링이 더 편한 듯 하다. 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식이라고 한다. 텍스트로 보면 어려우니 코드를 통해 확인해보자. 예시 let a, b, c; [a, b] = [10, 20]; console.log(a); // 10 console.log(b); // 20 펼침연산자를 사용해보면, let a, b, c; [a, b] = [10, 20]; console.log(a); // 10 console.log(b); // 20 [a, b, ..
Front-End/JavaScript 2022. 1. 18. 13:21
[JavaScript] Set 문법 알아보기

Set Set 객체는 자료형에 관계없이 원시값과 객체 참조 모두 유일한 값을 저장할 수 있다. 중복없이 유일한 값을 저장하거나 이미 존재하는지를 체크할 때 유용하게 사용할 수 있다. 예시 let mySet = new Set(); mySet.add("Hello"); mySet.add("World!!"); mySet.add("Hello"); console.log(mySet); // Hello World!! console.log(mySet.has("Hello")); // true mySet.delete("Hello"); console.log(mySet.has("Hello")); // false
Front-End/JavaScript 2022. 1. 17. 11:33
[JavaScript] for 문, for in 문, for of 문 알아보기

for 문, for in 문, for of 문 알아보기 for 문 흔히 사용하는 for 문법은 초기식, 표현식, 증감식이 포함되어 있다. for(var i = 0 ; i < 10 ; i++) { console.log(i); } 쉼표 연산자(,) 를 통하여 여러 개의 초기식과 증감식을 동시에 사용할 수 있다. for in 문 일반적으로 사용하던 for 문과는 다른 반복문이라고 할 수 있다. for in 문은 해당 객체의 모든 열거할 수 있는 프로퍼티(enumerable properties) 를 순회할 수 있도록 해준다. 열거할 수 있는 프로퍼티란, enumerable 태그가 true 로 설정되어있는 것을 의미한다. var arr = [1, 2, NaN, undefined, null, ""]; Array.p..
Front-End/JavaScript 2022. 1. 17. 10:26
<!DOCTYPE html> 의 의미는 무엇일까?

*.html 파일에서 느낌표(!)를 누르면 html 코드가 자동완성된다. 그 중에서 맨 상단에 위치한 DOCTYPE의 의미는 무엇인지 알아보자. 의 의미 지금껏 당연하다고 생각만 하고 별도로 공부할 생각을 못했던 DOCTYPE 선언은 HTML 문서가 어떤 버전으로 작성되었는지 브라우저에게 알려주는 것이다. 브라우저에게 HTML 의 버전 및 웹브라우저 내용을 잘 출력할 수 있도록 도와주는 역할을 하는 것이다. 이렇게 선언하는 이유는 호환성을 높이기 위함이다. 사용 용도와 발전된 기간에 따라 버전이 달라진 것이다. 선언하는 이유 자바스크립트로 그러하듯이 HTML 또한 버전마다 적용되는 태그와 적용되지 않는 태그가 있다. 구버전에서 신버전의 HTML 태그를 사용한다면, 웹브라우저에서 문법오류로 간주할 것이다...
Front-End/Etc 2021. 11. 15. 17:06
ES6 Helper Method 에 대해 알아보기

ES6 Helper Method 자바스크립트로 개발하다보면, 가장 많이 사용하는 함수 (forEach, map, filter, find, reduce) 들이 있는데 다른 함수 안에서 특정 기능을 하고 있는 것을 Helper Method 라고 부른다. 해당 함수들이 헬퍼 메소드라는 별도의 명칭이 있다는 것을 최근에 알게되었다. 아무리 자주 사용해도 제대로 응용하지 못하고 있는 것 같아 기본기를 다지고자 정리하게 되었다. forEach 배열의 각각에 대한 요소를 실행하는 메소드이다. arr.forEach(callback(currentvalue[, index[, array]])[, thisArg]) callback 함수에서는 3가지의 매개변수를 받는데, currentvalue 는 처리할 현재 요소, index..
Front-End/JavaScript 2021. 11. 12. 16:56