muntari Log muntari Log

웹사이트를 구성할때 .js .css .images 파일등 수 많은 들이 모여 웹사이트를 구성하게 된다. 따라서 웹사이트에 접속했을때 굉장히 많은 파일이 다운로드될 수 있는데 이것에 비례하여 서버의 자원을 소모하고 웹사이트가 느리게 로딩이 된다. 또한, 많은 자바스크립트 패키지등을 사용하다보면 각각의 서로 다른 패키지들이 서로 같은 이름이나 함수를 사용하게 되면서 애플리케이션이 깨지게 되는데 이러한 현상을 해결하기 위해 나온 개념이 묶는다는 개념의 번들러가 등장하였다. Weppack, Broserify, Parcel 과 같은 도구들이 번들러에 속한다. 그 중에서도 가장 인기 있는 번들러가 웹팩이다. 웹팩의 정의 webpack은 모던 JavaScript 애플리케이션을 위한 정적 모듈 번들러 이다. 모듈 번들..

대표적으로 자바스크립트는 '단일 스레드' 기반의 언어이다. 스레드가 하나라는 말은 동시에 하나의 작업만을 처리할 수 있다는 의미이다. 하지만 모두 알다시피 자바스크립트에서는 비동기 처리가 가능하다. 우리는 특정 웹 페이지에서 애니메이션 효과를 보여줌과 동시에 마우스나 키보드의 입력을 받아 처리하고 웹 페이지상에서 여러 개의 작업을 동시에 할 수 있다는 것을 잘 알고 있다. 또한, Node.js 기반의 웹 서버에서 동시에 여러개의 HTTP 요청을 처리하기도 한다. 이는 브라우저 위에서 동작하는 자바스크립트라는 언어가 HTML과 CSS를 핸들링하며 동적인 웹 페이지를 만들기 때문이라 생각한다. 위에서 단일 스레드로 동시의 하나의 작업만을 처리 할 수 있다고어떻게 이러한 비동기 처리가 가능한 걸까? 결론부터 ..

명령형 프로그래밍과 선언형 프로그래밍 명령형 프로그래밍은 우리가 익히 해왔던 방식과 같이 컴퓨터가 수행할 명령들을 순서대로 기술해 놓은 것이다. 즉, "어떻게 구현하는가"를 디테일하게 기술하는 관점에 중점을 두는 프로그래밍 기법이다. // 명령형 // "어떻게" 처리하는지에 대한 묘사 function double(arr){ let res = []; for (let i = 0; i < arr.length; i++){ res.push(arr[i] * 2) } return res // } 선언형 프로그래밍은 대표적으로 SQL Query 문과 HTML이 있다. 우리가 약속된 태그들을 쭉 나열하면서 실제로 어떻게 랜더링 되느냐에 대해서는 크게 신경 쓰지 않아도 된다. 무엇을 나타내야 하는지만 선언하면 브라우저가 ..

this 관련하여 잘 틀리는 예제 1 function Cat(name, age){ this.name = name; this.age = age; } const A = Cat('nana', 7); console.log(A.name) 이 결과는 에러가 발생함 이유는 this 때문이다. 자바스크립트에서는 this는 함수가 실행될 때 결정되는 부분이 있다. 따라서, Cat 함수를 실행을 하면 놀랍게도 this는 window를 가리키게 된다. 또한, Cat 함수는 결과를 리턴하는 로직이 없기 때문에 A는 undefined가 되고 undefined.name에 접근하기 때문에 에러가 나는 것이다. 따라서 window.name 을 할 경우 아래와 같이 출력되며 의도치 않게 전역 윈도우 객체를 수정하는 상황이 발생한다. ..

Promise가 특별하게 callback과 다른 차이를 가지는 점은 than 메서드를 통해 결과를 꺼내 보는 것이 아니라!! 비동기 상황을 일급 값으로 다룬다는 점이 가장 중요한 차이이다. 프로미스는 프로미스라는 클래스를 통해서 만들어진 인스턴스를 반환한다. 그 프로미스라는 값은 대기, 성공, 실패를 다루는 일급 값으로 이루어져 있다는 게 핵심이다. 대기와 일을 끝내는 것들을 코드, 컨텍스트로 만! 다루는 게 아니라 대기되어지고 있다는 어떤 값을 만든다는 점에서 콜백과 가장 큰 차이를 가지며 이점이 정말 정말 정말 정말 핵심이다. 콜백 비동기적인 상황을 다루는것이 오직 코드로만 표현이 되며 function addCall(a, callback){ setTimeout(() => callback(a + 10)..

자바스크립트에서는 코드를 값으로 다루는 go, pipe, curry라는 함수들 있다. go 함수 함수를 위에서부터 아래로, 왼쪽에서부터 오른쪽으로부터 평가하면서 연속적으로 함수를 실행하고 이전에 실행된 함수의 결과를 다음 함수에 전달하는 함수 인자들을 받는데, 인자들을 통해서 하나의 값으로 축약을 해나가는 로직으로 구현되어 있다. 이 인자들을 이용해서 인자의 1번째 인자를 그 다음 인자(함수) 에게 전달을 하고 그 함수의 결과를 또 다음 함수의 인자로 전달을 해야한다. 즉, 해당 로직은 reduce이다. args를 축약해서 하나의 값으로 만드는 과정이다. 앞서 알아보았듯 초기값을 전달하지 않고 args를 그대로 전달해도 첫번째 값이 뽑혀 초깃값으로 사용이 될 것이다. const go = (...args)..

Virtual DOM 앞서 DOM에서는 자바스크립트를 이용해 DOM 객체를 제어하고 이를 통해 클라이언트와 상호작용을 할 수 있는 웹 페이지를 구현할 수 있다고 하였다. DOM이 있는데 굳이 Virtual DOM이라는 개념이 나오게 된 배경을 먼저 살펴보자. jQuery가 등장하면서 JS를 이용해 AJAX 개발을 용이하게 하고 DOM을 동적으로 조작해 많은 기능을 수행할 수 있는 웹 페이지들이 등장하였다. 하지만, 트위터, 페이스북과 같이 스크롤을 조금만 조작해도 몇 천개의 elemennt 들이 생성되는 거대한 서비스들에게 DOM을 처음부터 다시 그리는 것은 극심한 성능 저하를 야기시켰고, 모바일 브라우저 환경에서는 더욱 취약했다. 또한, 당시 jQuery를 이용한 개발 방법이 MVC 등의 데이터 모델들..

Generator 이터레이자이자 이터레이터를 생성하는 함수를 말한다. 즉, 제너레이터는 이터레이터를 리턴하는 함수이다. 이때 이터레이터는 Well formed Iterator이다. 또한, 제너레이터는 순회할 특정 값을 문장으로 표현하는 방법이자 함수라고 부르기도 한다. 자바스크립트에서는 이터러블이면 순회할 수 있다. 그런데, 제너레이터는 이러한 문장을 순회 할 수 있는 값으로 만들 수 있기 때문에 제너레이터를 통해서 어떠한 상태나 어떠한 값이든 순회 할 수 있게 만들 수 있다고 한다!!! 제너레이터 함수를 사용하면 Iteration protocol (이터레이션 프로토콜 = 이터레이터/이터러블 프로토콜)을 준수하며 보다 더 간편하게 이터러블을 구현할 수 있으며, 비동기 처리시 유용하게 사용된다. 제너레이터..