개발 언어/Javascript (20) 썸네일형 리스트형 번들링과 웹팩 웹 개발 초기와 달리 현재의 웹 개발은 훨씬 복잡해지고 인터랙티브 해졌습니다. 그렇기 때문에 초기의 방식을 사용하게 되면 변수 이름의 충돌 가능성 많은 js 파일 다운로드로 인한 네트워크 부하 수동적인 반복 작업 (파일, 이미지 압축 등) 위와 같은 부작용이 발생하였습니다. 그래서, 번들링이 등장하였습니다. 번들링이란 여러 자원들을 하나로 묶는다는 뜻입니다. 이로 인한 장점은 다음과 같습니다. 코드의 모듈화 리소스 최적화 반복 작업의 자동화 그러면, 번들러의 대표 주자인 웹팩에 대해 알아보겠습니다. 웹팩은 모듈 단위의 코드 작성을 가능하게 합니다. 여기서 모듈이란, 어플리케이션을 구성하는 특정 기능에 기여하는 자원 전부를 일컫습니다. Javascript, css, image, icon, font 등이 모.. DOM의 개념과 조작 방법 DOM (Document Object Model)은 HTML 요소를 Object처럼 다룰 수 있는 Model입니다. 우리는 Javascript를 사용한다면 DOM으로 HTML을 조작할 수 있습니다. DOM을 조작할 수 있는 주요 메서드와 개념을 살펴보도록 하겠습니다. Node vs. Element Node는 DOM API 상에 존재하는 모든 것들입니다. Element는 Node의 부분 집합으로 div나 span 같은 특정한 태그가 포함된 요소를 뜻합니다. document.createElement(>) const newDiv = document.createElement('div'); 새로운 element를 만드는 메서드입니다. DOM에 새로운 element가 생성되었지만 붕 떠 있는 상태입니다. 즉, DO.. 자바스크립트에서 제너레이터와 async/await 자바스크립트 (이하 JS)에서는 이제껏 당연히 일단 함수가 실행되기 시작하면 완료될 때까지 계속 실행되며 도중에 다른 코드가 끼어들어 실행되는 법은 없었습니다. 하지만, ES6부터 이러한 완전 실행 법칙을 따르지 않는, 제너레이터라는 전혀 새로운 종류의 함수가 등장하였습니다. var x = 1; function *foo() { x++; yield; console.log("x: ", x); } function bar() { x++; } var it = foo(); it.next(); console.log(x); // 2 bar(); console.log(x); // 3 it.next(); // x: 3 함수 이름 앞에 * 표시를 붙이게 되면 JS 엔진은 이 것을 제너레이터로 인식합니다. 제너레이터를 이 제.. 자바스크립트에서 프라미스란 프라미스가 나오기 이전에는 콜백으로 비동기성을 다뤘습니다. 하지만 콜백으로 프로그램의 비동기성을 표현하고 동시성을 다루면 순차성과 믿음성이 결여되는 중요한 결함이 있습니다. 그리고 제어의 역전이라는 치명적인 문제가 있습니다. 이런 콜백의 치명적인 단점, 즉 프로그램의 진행을 다른 파트에 넘겨주지 않고도 개발자가 언제 작업이 끝날지 알 수 있고 그 다음에 무슨 일을 해야 할 지 스스로 결정할 수 있게 하는 것이 바로 '프라미스'입니다. var x, y = 2; console.log(x + y); // NaN 우리는 x + y 연산을 할 때 당연히 x, y 모두 값이 세팅되어 있다고 가정합니다. 이를 더 체계적인 용어로 바꾸면 '귀결됐다'고 할 수 있습니다. 하지만 위의 경우에는 x는 아직 값이 세팅되지 않.. 자바스크립트에서 콜백이 가지는 한계 콜백은 자바스크립트 (이하 JS)에서 비동기성을 표현하는 기본 단위입니다. // A ajax('..', function() { // C }) // B A와 B는 지금 당장, C는 나중에 실행됩니다. 콜백 함수는 이 나중에 실행되는 함수를 의미하며 프로그램의 연속성을 감싼/캡슐화한 장치입니다. 두뇌는 순차적이다 두뇌는 병렬 멀티스레딩이 불가능합니다. 우리의 신경은 병렬적으로 동작하지 않고 이벤트 루프 큐처럼 작동합니다. 우리가 동시에 많은 일을 하고 있다고 생각할 수 있지만, 이것은 사실 멀티태스킹이 아니라 그냥 매우 재빠른 컨텍스트 교환입니다. 사람의 두뇌는 순차적, 중단적, 단일 스레드 방식으로 계획하는 데 익숙하지만 콜백은 비동기 흐름을 비선형적, 비순차적인 방향으로 나타내므로 구현된 코드를 제대로 .. 자바스크립트에서 비동기성이란 프로그래밍 세계에서 '나중'은 '지금'의 직후가 아닙니다. 주제에 본격적으로 들어가기에 앞서, 우리가 비동기 요청을 주로 보낼 때 사용하는 AJAX에서 콜백 문제를 피하려고 중단적/동기적 AJAX를 사용하는 행위는 정당화할 수 없음을 앞서 밝힙니다. function now() { return 21; } function later() { answer = answer * 2; console.log(answer); } var answer = now(); setTimeout(later, 1000); 이 코드에서 나중에 실행되는 코드 (덩이)는 함수 later 안의 코드이고 그 외의 나머지 코드 (덩이)는 지금 당장 실행됩니다. 여기서 주의해야 할 점은 console.log 메서드는 브라우저 유형과 상황에 따라 .. 자바스크립트에서 작동 위임이란 이 게시글은 기존의 클래스/상속 디자인 패턴에서 작동 위임 디자인 패턴으로 사고방식을 바꾸기 위함입니다. 자바스크립트 (이하 JS)의 무한한 가능성을 이끌어낼 가장 중요한 핵심 기능이자 실제적인 체계는 전적으로 '객체를 다른 객체와 연결하는 것'에서 비롯됩니다. 클래스 지향과 대비하여 객체를 다른 객체에 연결하는 코드 스타일을 OLOO (Objects Linked to Other Objects)라고 지칭하겠습니다. 이 코드 스타일에서 우리는 객체가 다른 객체에 작동을 위임하는 부분만 신경 쓰면 됩니다. OLOO 스타일 코드의 특징은 다음과 같습니다. 상탯값은 위임하는 쪽에 두고 위임받는 쪽에 두지 않는다. 같은 명칭이 뒤섞이는 일이 될 수 있으면 피해야 한다. 암시적 호출부에 따른 this 바인딩 규칙에.. 자바스크립트에서 프로토타입이란 자바스크립트 (이하 JS) 객체에는 [[Prototype]]이라는 내부 프로퍼티가 있고 다른 객체를 참조하는 단순 레퍼런스로 사용됩니다. var otherObj = { a: 2 }; var myObj = Object.create(otherObj); console.log(myObj.a); // 2 myObj는 otherObj와 [[Prototype]]이 링크됩니다. myObj.a란 프로퍼티는 없지만 otherObj에서 2라는 값을 대신 찾아 프로퍼티 접근의 결괏값으로 반환합니다. 만약 otherObj에서도 a라는 프로퍼티를 찾지 못했다면 프로토타입 연쇄를 다시 따라 올라가고 일치하는 프로퍼티명이 나오거나 프로토타입 연쇄가 끝날 때까지 이 과정은 반복됩니다. 연쇄 끝에 이르러서도 프로퍼티가 발견되지 않으면 .. 이전 1 2 3 다음
