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. 브라우저 - HTTP(하이퍼 텍스트 전송 프로토콜)를 사용하여 텍스트, 이미지, 비디오 등의 콘텐츠를 송수신하여 브라우저를 통해 사용자와의 Interation 및 사용자가 원하는 정보를 제공합니다. - 브라우저는 대표적으로 Mozilla Firefox, Google Chrome, Microsoft Edge, Apple Safari가 있어 서로 다른 다양한 기능을 제공하지만, 브라우저에 관계없이 사용자에게 동일한 경험을 제공할 수 있도록 웹 표준이 있습니다. 2. 브라우저의 기본 구조 1) 사용자 인터페이지 : 주소창, 뒤로가기, 새로고침, 북마크 등의 기능을 포함하며, 웹 페이지의 표시부분 (Document)를 제외한 모든 것을 뜻합니다. 2) 브라우저 엔진 : 렌더링 엔진과 상호작용을 하며 조작하..

1. Enum - Enum은 열거형 변수를 객체행태로 정의한 상수의 집합을 생성합니다. 임의의 숫자 또는 문자열을 상수화하여 관리하는 기능입니다. // 숫자 타입(열거형) enum Fruit { apple, // 1 banana, // 2 carrot, // 3 } // 문자열 타입 enum Fruit { apple = 'apple', banana = 'banana', carrot = 'carrot' } function setFruit(fruit :Fruit) { // ... } setFruit(Fruit.apple); - 이렇게 편리해보이는 Enum도 3가지 문제로 인해 대부분의 커뮤니티에서는 Enum 대신 Union Type 사용을 권장하고 있습니다. 1) 타입 오염 (Heterogeneous enu..

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. AND 선택자다중 조건을 모두 만족하는 엘리먼트를 선택하는 경우// 공백 없이 선택자를 붙여서 사용.class1#id2 { color : red;}div.className1.className2 { color : black;}2. OR 선택자다중 조건 중 1개라도 만족하는 경우// , 기호로 구분.class1, id2 { color : red;}div.className1, .className2 { color : black;}3. 중첩 선택자 (자손 선택자)특정 부모요소 안에 있는 특정 자손을 모두 선택하는 경우/* scss */.container { div { .child { .name { color: red; ..

verbatimModuleSyntax Typescript 5.0 부터 Module elision(생략)를 명확하게 할 수 있는 옵션입니다. 만약 Type 지정만을 위한 import일 경우 빌드 시 해당 import가 삭제(elision)되는데, 해당 옵션으로 인해, type지정을 위한 import인 경우 type-only 형식으로 import해야 합니다. 1) Error Message 2) Type 키워드 사용