Front-End/JavaScript 검색 결과

해당 글 25건
[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
[ES6] WeakSet, WeakMap

WeakSet 에 객체를 저장할 수 있다. WeakSet 은 Set 과 다르게 참조를 가지고 있는 객체만 저장이 가능하다. 객체 형태를 중복없이 저장하고자할 때 유용하게 활용할 수 있다. let arr = [1, 2, 3, 4]; let arr2 = [5, 6, 7, 8]; let obj = [arr, arr2]; let ws = new WeakSet(); ws.add(arr); ws.add(arr2); ws.add(obj); console.log(ws); 콘솔창에 아래와 같이 출력된다. 만약 위 코드를 아래와 같이 arr, arr2 를 null 로 변경하면, let arr = [1, 2, 3, 4]; let arr2 = [5, 6, 7, 8]; let obj = [arr, arr2]; let ws = ..
Front-End/JavaScript 2020. 6. 13. 13:58
[JavaScript] 프로토타입(prototype)_2편

프로토타입(prototype)_2편 contructor 프로퍼티 생성자 함수의 프로퍼티인 prototype 객체 내부에는 constructor 이라는 프로퍼티가 있습니다. 인스턴스의 __proto__ 객체 내부에도 마찬가지죠. 이 프로퍼티에는 단어 그대로 원리 생성자 함수(자기 자신) 를 참조합니다. 예제를 살펴봅시다. var arr = [1, 2]; Array.prototype.constructor === Array //true arr.__proto__.constructor === Array //true arr.constructor === Array //true var arr2 = new arr.constructor(3, 4); console.log(arr2); //[3, 4] 인스턴스의 __proto..
Front-End/JavaScript 2020. 5. 24. 18:09
[JavaScript] 프로토타입(prototype)_1편

프로토타입 (prototype) 현생에 치이고, 5월의 연휴를 즐기다보니 너무 오랜만에 공부를 하게 되었습니다 ^^; 이번주부터는 열심히 포스팅할 예정입니다! 오늘은 프로토타입에 대해 정리하려고 합니다. JavaScript 는 프로토타입 (prototype) 기반 언어입니다. 클래스 기반 언어에서는 '상속' 을 사용하지만 프로토타입 기반 언어에서는 어떤 객체를 원형으로 삼고 이를 복제(참조)함으로써 상속과 비슷한 효과를 얻습니다. 프로토타입의 개념을 이해해봅시다. 아래 그림은 프로토타입의 도식입니다. 어떤 생성자 함수 (Contructor)를 new 연산자와 함께 호출하면 Contructor 에 정의된 내용을 바탕으로 새로운 인스턴스 (instance) 가 생성됩니다. instance 에는 __proto..
Front-End/JavaScript 2020. 5. 6. 16:14
[JavaScript] 클로저 (Closure)

클로저 클로저(Closure) 는 여러 함수형 프로그래밍 언어에서 등장하는 보편적인 특성이다. 클로저란, 어떤 함수에서 선언한 변수를 참조하는 내부함수에서만 발생하는 현상이다. 어려운 내용인 듯하니, 예제를 통해 살펴보자. var outer = function() { var a = 1; var inner = function() { return ++a; }; return inner(); }; var outer2 = outer(); console.log(outer2); // 2 outer 라는 함수에 지역변수 a가 선언되어있는데, outer 함수의 실행 컨텍스트가 종료된 시점에도 a 변수는 사라지지 않고 1이 증가된 모습을 확인할 수 있다. inner 함수 실행시점에 outer 함수는 실행이 종료된 상태임에..
Front-End/JavaScript 2020. 4. 10. 23:09