Front-End 검색 결과

해당 글 41건
(프론트 엔드의 첫걸음) 1. 인터넷 작동 원리

인터넷은 웹의 핵심적인 기술이다. 인터넷의 가장 기본적인 것은 컴퓨터들이 서로 통신 가능한 거대한 네트워크라는 것이다. 단순한 네트워크 2개의 컴퓨터가 통신이 필요할 때, 우리는 다른 컴퓨터와 물리적(이더넷 케이블) 또는 무선(와이파이나 블루투스) 으로 연결되어야 한다. 이러한 네트워크는 2대의 컴퓨터로 제한되지 않는다. 원하는 만큼의 컴퓨터를 연결할 수 있다. 그러나 이렇게 연결할 수록 매우 복잡해진다. 마치 이런모습처럼 말이다. 이 문제를 해결하기 위해서는 네트워크의 각 컴퓨터에는 라우터라고 하는 특수한 소형 컴퓨터에 연결해야한다. 이 라우터에는 단 하나의 작업만 있다. 컴퓨터 B 에게 메세지를 보내려면, 컴퓨터 A 가 메시지를 라우터로 보내야 하며, 라우터는 메시지를 컴퓨터 B 로 전달한다. 이 라..
Front-End/Etc 2021. 2. 15. 17:16
[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