Develop Note by J.S.

1. Function Pipelineconst addFive = (x) => x + 5;const double = (x) => x * 2;const minusOne = (x) => x - 1;const result = minusOne(addFive(double(10)));특정 값을 여러 함수에 순차적으로 전달하여 결과를 사용하는 코드는 가독성이 떨어집니다. Pipe를 정의하고 이를 사용해 코드 리팩토링 시 가독성이 좋아질 것입니다. 1) 코드 정의 // common.tsexport const _ = { filter(predicate) { return (array) => array.filter(predicate); }, sort(compareFn) { return ..

1. 개요- 프로그래밍 언어는 실행 방법에 따라 컴파일 언어와 인터프리터 언어로 구분할 수 있습니다.- 컴파일러(Compiler)는 개발자가 작성한 고급언어를 기계가 이해할 수 있는 저급언어로 번역하는 프로그램을 뜻합니다. - 어느 시점에 기계어로 번역이 되어 실행되는 지에 따라 컴파일 언어, 인터프리터 언어로 나뉘게 됩니다.1) 컴파일 언어 (정적 컴파일러)원시코드(개발자가 작성한 코드)를 컴파일 타임에 모든 소스를 기계어로 변환하여 실행파일로 만들고 컴파일은 단 한번 수행됩니다. 런타임 시점에는 이미 기계어로 변경된 소스코드를 수행할 뿐입니다. - 컴파일 언어 : C, C++, C#, JAVA 등2) 인터프리터 언어컴파일 언어와 반대로 컴파일 과정없이 런타임에 소스코드를 한줄씩 해석하며 즉시 실행하는..

1. 무한 Pending 상태 Async Await 함수를 이용하여 비동기 로직을 구현할 때 도중에 한 Api 가 무한 pending 상태에 빠진다면 어떻게 빠져나올 것인지에 대한 고민이 필요할 것 입니다. async function initComponent() { try { await testApi1(); //만약 pending에서 빠져나오지 않는다면 initComponent()는 영원히 종료되지 않는다. await testApi2(); } catch (e) { console.err(e); } } 2. AbortSignal 사용 - 이런 문제가 발생했을 때 AbortSignal은 async await를 취소할 수 있는 방법 중 하나일 수 있습니다. 다만 취소 Trigger를 직접 지정해야함에 있어 완벽..

1. Javascript의 동작 자바스크립트는 Single Thread기반이며 *Non-Blocking 방식으로 동작됩니다. 하지만 콜 스택, 이벤트 루프, 콜백 큐가 독립적으로 동작되는 것이 아니며 웹 브라우저, Node.js 와 같은 Multi Thread 환경에서 실행되고 각 기능이 적절하게 사용됨으로써 Multi Thread와 같은 사용이 가능합니다. * Non-Blocking : A함수가 B함수를 호출할 때 제어권을 잃지 않음 (블로킹 되지 않음) 2. Javascript Event Loop JS Engine에서 제공하는 Memory Heap과 Call Stack은 각 변수와 참조를 저장하고, 콜스택에 저장된 실행 컨텍스트를 통해 자바스크립트 코드가 실행 됩니다. 추가적으로 코드를 실행시키기 위..

1. Prototype이란? Prototype은 Class가 없는 Javascript에서 객체 기반 프로그래밍을 구현할 수 있도록 객체의 원형을 뜻하는 prototype 객체를 뜻합니다. 기존의 객체를 복사하여 새로운 객체를 생성할 수 있으며 복사된 객체는 기존 객체의 원형인 proptotype 객체를 참조합니다. 참조된 prototype 객체는 __proto__ 프로퍼티에서 확인 할 수 있습니다. 2. 함수의 prototype 예를들어 test라는 이름의 함수를 정의하면 test의 prototype 속성은 javascript의 function기능이 제공하는 객체 원형인 prototype 객체를 참조합니다. 또한 함수를 정의하면 함수 객체로 표현할 수 있으며, 해당 함수 객체의 prototype 프로퍼티..

This란? Javascript의 this 키워드는 함수를 호출한 방법에 따라 this가 가리키는 객체가 변경됩니다. 일반적으로 this는 브라우저에서는 window 전역객체를 가리키고, Node에서는 global 전역객체를 가리킵니다. // 브라우저 this === window; // true // Node.js this === global; // true this 값 할당 전역 범위내에서의 this는 전역객체를 가리키는데 Custom한 객체 내의 프로퍼티 Value로 정의한 함수내에서의 this는 자신이 속한 Custom 객체를 가리킵니다. var Obj = { whatsThis : function () { return this; } } Obj.whatsThis() === Obj // true 또한 ..

Javascript 언어의 가장 중요한 개념 중 실행 컨텍스트를 다뤄보겠습니다. 1. 실행 컨텍스트란? 실행할 코드에 제공할 환경 정보들을 모아놓은 객체를 뜻합니다. 각 환경에 있는 정보를 모아놓은 실행 컨텍스트가 콜스택에 쌓여 실행이 되기 때문에 실행되는 코드의 환경정보와 순서를 보장할 수 있게 합니다. 실행 컨텍스트가 활성화 될 때 호이스팅, 환경정보 구성, this 값이 설정됩니다. 2. 실행 컨텍스트의 구성 1) 변수객체 (variable environment) 현재 컨텍스트 내부에서 사용하는 식별자(변수) 들의 대한 정보가 생성되며, 외부 환경 정보 및 선언 시점의 렉시컬 환경(Lexical Environment)의 스냅샷 정보를 담습니다. 렉시컬 환경이란 변수객체에 호이스팅된 변수 및 함수들의..

개발을 하다보면 "Object에 들어있는 원시값만 사용하고싶어!" 또는 "a객체의 메모리를 공유하는 다른 이름의 객체를 만들고 싶어" 등의 목적으로 코딩을 하다보면 원치않는 동작을 할때가 있습니다. 가장 기본적인 것이지만 한번 제대로 공부해놓지 않고 대충 보고 넘어가다보면 항상 문제가 생기게 되어 정리해 보았습니다. 1. 얕은복사 (메모리 복사) let obj = {}; newObj = obj; let arr = []; newArr = arr; Object와 Array는 1, '1', true(boolean) 등의 리터럴 값이 아닌, 리터럴 값이 저장된 메모리 주소들의 묶음을 새로운 이름으로 재할당하여 사용하는 것입니다. obj와 arr처럼 메모리 주소들의 묶음 자체를 newObj, newArr에 할당하..