삼바의 성장 블로그

들어가기 오픈소스 스터디에서 setTimeout을 들여다보며 알게된 것을 공유합니다. Event Loop http://latentflip.com/loupe/ 이벤트루프를 설명하기 위한 서비스입니다. Call Stack, Web Apis, Task Queue(Callback Queue) 세 영역으로 나누어 좌측의 코드가 실행되는 동안 어떠한 영역에서 작업이 이루어지고 이동하는지 설명하고 있습니다. setTimeout 과 같이 비동기적으로 실행되는 함수는 콜백이 실행되기 전까지 Web Apis에서 대기하고 실행되기 전에 Task Queue에 담겼다가 Call Stack이 비면 실행됩니다. V8, Blink Chromium은 우리가 작성한 Javascript 코드를 실행하기 위해 V8이라는 엔진을 사용합니다...

BFCache(Back-Foward Cache)는 브라우저의 뒤로, 앞으로 버튼을 사용할 때 페이지를 즉시 로드할 수 있도록 도와주는 역할을 합니다. 이는 느린 네트워크, 장치를 사용하는 사용자의 경험을 향상시켜줍니다. 따라서 사용자의 경험을 위해 bfcache 최적화에 대해 이해하는 것이 중요합니다. bfcache란? bfcache는 사용자가 다른 곳으로 이동할 때 JS의 힙 메모리 영역을 포함한 전체 스냅샷을 저장하는 캐시입니다. 이를 통해 사용자가 이전페이지로 돌아가고자 했을 때 빠르게 전체 페이지를 보여줄 수 있습니다. 말 그대로 스냅샷이기 때문에, 리소스를 다시 다운로드 할 필요가 없습니다. 네트워크 요청이 일어나지 않고 스크롤 위치 또한 복원해줍니다. Task Queue에 대기 중이었던 작업 ..

처음 HTML에서 Javascript를 사용하여 프로그래밍을 할때는 대부분의 스크립트가 독립적인 작업을 수행하여 일반적으로 큰 스크립트가 필요하지 않았습니다. 하지만 프로젝트의 규모가 커지고 기능이 복잡해지면서 자바스크립트 커뮤니티에서 라이브러리를 공유하여 이를 프로젝트에 적용할 수 있는 형태로 발전했습니다. 자바스크립트 프로그램을 필요에 따라 가져올 수 있게 하기 위해서 코드를 모듈 단위로 구성해주는 다양한 시도를 하게 됩니다. 그리고 그 시도는 다음과 같은 모듈 시스템으로 이어졌습니다. CJS(CommonJS) JS 생태계를 브라우저뿐만 아니라 범용 언어로 사용할 수 있도록 만든 모듈시스템입니다. AMD(Asynchronous Module Definition) 가장 오래된 모듈 시스템 중 하나로 re..

자바스크립트는 기본적으로 C 스타일의 for(;;) 와 for ... in이 있다. 하지만 ES6에서 반복문으로 for ... of 를 추가하였다. for(;;) 과 for ... in 의 어떤 단점때문에 for ... of 를 사용하는지 알아보자. for(;;) for ([initialization]; [condition]; [final-expression]) statement 우리가 익히 알고있는 for(;;) 에는 단점 두 가지가 존재합니다. 인덱스를 사용해야만 한다. (;;) 의 코드가 길다. for ... in for (variable in object) { ... } for ... in 문은 상속된 열거 가능한 속성들을 포함하여 객체에서 문자열로 키가 지정된 모든 열거 가능한 속성에 대해 반복..

모든 언어에서 프로그래밍을 하기 위해서는 메모리 공간을 사용해야합니다. 그리고 그 메모리 공간에 데이터는 할당하고 사용한 후에 해제해야합니다. JS에서 데이터를 할당한 후에 사용하는 것은 개발자가 코드에서 명시적으로 작성합니다. 하지만 해제하는 행위는 Garbage Collection(GC)라는 자동 메모리 관리 기법을 사용합니다. Reference Counting 레퍼런스 카운팅은 메모리 할당과 해제가 한 블럭 이내에서 이뤄질 수 없는 경우 사용합니다. GC를 구현하는 방법중 원리가 어렵지 않고 간단하며 프로세스에 연산 / 메모리 부하를 많이 주지 않아 초기버전의 GC나 Rust의 Rc/Arc 객체등에서 사용하고 있습니다. 레퍼런스 카운트는 동적으로 할당된 메모리를 참조하는 객체의 수를 의미합니다. 레..

모든 Declarations(function, var, let, const and class)는 JS에서 모두 호이스팅이 됩니다. 하지만 var 가 undefined 로 초기화(initialization)되는 것과 다르게 let , const 는 초기화되지 않은 상태로 남아있습니다. 이를 어떻게 확인할 수 있을지 예시로 알아봅시다. 예시 const foo = 1; { console.log(foo); const foo = 2; } 블록스코프안의 const foo 가 호이스팅 되지 않았다면 console.log(foo); 의 결과로 1 이 출력되었어야 합니다. 하지만, 호이스팅이 되기 때문에 Uncaunght SyntaxError 가 먼저 발생을 합니다. Uncaught ReferenceError: Cann..

Promise, jQuery Deferred Object JS에서 비동기 처리를 할경우, 콜백함수를 사용하곤 합니다. 하지만, 이러한 콜백함수를 사용하는 것은 복잡도를 높입니다. 이를 해결하기 위한 Promise와 jQuery Deferred Object를 알아보도록 합시다. 예시 - 콜백함수 const callback = function() { console.log('Callback!'); } const hellStart = function(one) { setTimeout(function() { one(); }, 3000); } hellStart(callback); 콜백함수를 사용하여 비동기를 처리할경우, 여러 개의 콜백함수가 nesting되어 복잡도가 높아질 수 있습니다. 이를 콜백지옥이라하는데, 콜..

이벤트 루프 먼저 이벤트 루프 가 중요한 개념인 이유를 알아야한다고 생각합니다. 자바스크립트는 '단일 쓰레드' 기반의 언어입니다. 따라서 자바스크립트로 작성한 코드는 동시에 하나의 작업만 처리가 가능합니다. 하지만 자바스크립트를 통해 개발을 해보았다면, 동시에 여러작업이 처리되는 것을 보실 수 있었을겁니다. Node.js, Chrome 에서 사용하는 V8(자바스크립트 엔진)은 단일 호출 스택(Call Stack)을 사용하며, 실행 컨텍스트(실행할 코드에 제공할 환경정보들을 모아놓은 객체) 들을 이 호출 스택에 쌓아두었다가 상단에 있는 컨텍스트부터 실행(First in Last out)합니다. 자바스크립트가 '단일 쓰레드' 기반이라는 말은 맞지만, 실제 자바스크립트가 실행되는 ..

MDN web docs를 참고하여 작성하였습니다. ArrayJavascript Array 는 배열을 생성할 때, 사용하는 객체입니다. 기초예제Array를 사용하기 위한 예제들입니다. // 에 결과값을 표시합니다.​x/* 1. 배열 만들기 */let fruits = ['사과', '바나나'];​/* 2. 인덱스로 배열의 항목에 접근하기 */let first = fruits[0];// 사과let last = fruits[fruits.length - 1];// 바나나​/* 3. 배열의 항목들을 순환하며 처리하기 */fruits.forEach(function (item, index, array) { console.log(item, index); });// 사과 0// 바나나 1​/* 4. 배열 끝에 항목 추가하기..

유인동님의 함수형 자바스크립트 프로그래밍을 시작하며자바스크립트의 함수와 관련된 몇 가지 기능들에 대해 알아보고자 합니다. 고차함수함수를 인자로 받아 대신 실행하는 함수​xfunction callWith10(val, func) { return func(10, val);}function add(a, b) { return a + b;}​callWith10(20, add); // 30위의 예시에서 일반 함수는 add 함수를 인자로 받아 내부에서 대신 실행하는 함수(고차함수)는 callWith10이다. 함수를 리턴하는 함수xxxxxxxxxxfunction constant(val) { return function() { return val; }}​var always10 = constant(10); // 10cons..