삼바의 성장 블로그

들어가기 오픈소스 스터디에서 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 문은 상속된 열거 가능한 속성들을 포함하여 객체에서 문자열로 키가 지정된 모든 열거 가능한 속성에 대해 반복..

자바스크립트는 본질적으로 “덕 타이핑” 기반으로 사용자는 타입이 무엇인지 신경쓰지 않게 합니다. 그리고 타입스크립트는 이를 “구조적 타이핑” 기반으로 모델링합니다. 따라서 덕 타이핑과 구조적 타이핑을 이해하지 못한다면 예상하지 못한 결과와 마주할 수 있습니다. 이 두 타이핑을 이해해보도록 합시다. 덕 타이핑 (Duck Typing) 만약 어떤 함수의 매개변수 값이 모두 제대로 주어진다면, 그 값이 어떻게 만들어졌는지 신경 쓰지 않고 사용합니다. 이 말이 조금 어렵게 느껴진다면 덕 타이핑은 아래의 문구로 쉽게 이해할 수 있습니다. “만약 어떤 새가 오리처럼 걷고, 헤엄치고, 꽥꽥거리는 소리를 낸다면, 나는 그 새를 오리라고 부를 것이다.” 어떤 새가 오리로 태어났는지, 정말 오리인지는 중요하지 않습니다. ..

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

React hook form에서 특정 타입을 추론하지 못해 as unkown as 를 통해 특정 타입을 강제로 지정해주는 경우가 있었습니다. 이 과정에서 unknown 에 대한 궁금증이 생겼고 이에 대해 정리해보려 합니다. any unknown 타입을 이야기하기 전에 any 타입을 먼저 살펴보려합니다. Typescript의 모든 타입은 any 는 모든 타입을 할당받을 수 있는 타입입니다. 사용자로부터 받은 데이터 혹은 써드 파티 라이브러리 같은 동적인 컨텐츠로 오는 불특정한 값을 컴파일 검사를 하지 않고 사용하고자 할때 사용합니다. 컴파일 중 타입검사를 하지 않으므로 기존의 Javascript 와 같이 작업하기에 용이합니다. 예시 let notSure: any = 4; notSure = "maybe a ..

모든 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..

코드리뷰를 받던 도중, 명령형인가 선언형인가를 생각하고 가능하면 코드를 선언형으로 생각하고 작성하는 편이 좋다는 코멘트를 받아 이를 정리해보려고 합니다. 코드리뷰 file_array: Array 을 받아 file_array 에 값이 들어가 있는지 확인하는 코드를 아래와 같이 작성하였었습니다. const validateRequiredFile = (file_array?: Array) => { const hasFile =!!file_array ? file_array.length !== 0 : false; return hasFile; }; 이를 해석해보자면, 'file_array 가 undefined 라면 false 를 출력하고 file_array 의 크기가 0 일때는 false 아니면 true 를 리턴한다.'..

Javascript와 다르게 Typescript에서는 Enum을 제공합니다. Enum이 무엇인지, Enum을 사용하면 어떤 이점이 있는지 알아봅시다. Enum? enum 은 enumerated type(열거형)을 의미합니다. Enum은 값들의 집합을 명명하고 이를 사용할 수 있게 합니다. 일반적으로 우리가 사용하고 있는 열거자들은 주로 식별자입니다. 예를들면 boolean 을 들 수 있습니다. 많은 컴퓨터언어들에서 사용자들이 새로운 열거형을 정의할 수 있게 하고있습니다. 기존 JS에서는 Enum을 제공하지 않아 상수들의 집합을 정의하고 싶은 경우 이를 해결하기 어렵기 때문에 Enum이 필요했었습니다. 추가적 이점 추가적으로 Enum을 사용하여 얻을 수 있는 이점들은 다음과 같습니다. 상수를 사용할때보다 ..