javascript 검색 결과

해당 글 11건
[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
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
[JavaScript] 자바스크립트에서 table 내용 엑셀 다운로드

자바스크립트에서 table 내용 엑셀 다운로드 HTML 로 table 을 생성하고, 해당 table 에 뿌려진 데이터를 엑셀로 다운로드 받을 수 있도록 하는 기능을 알아봅시다. 회사 프로젝트 내에 동일한 기능이 있었지만, Back-End 까지 코드를 수정해야하기 때문에 번거로웠습니다. 백엔드까지 가지않고, 프론트에서 해결할 수 있는 방법을 드디어 찾았습니다. 먼저, 엑셀 다운로드하고자 하는 table 에 class 또는 id 를 부여합니다. 예를 들면, 아래와 같이 구현되어있을 것입니다. sample sample sample data1 data2 data3 data4 data5 data6 제가 회사에서 사용한 table 은 동적으로 생성되었으므로, 위에처럼 구성되어있진 않지만 참고용으로 만들었습니다. 그..
Front-End/JavaScript 2020. 6. 18. 17:46