software engineering/javascript

해당 글 15건

당신이 고민하고 있던 Typescript 패턴

2023. 3. 4. 21:55

공통으로 사용되는 타입과 Spreading attributes를 사용할 때 어떻게 하면 좋을까 알아보다 좋은 포스팅이 있었다. WithChildren helper type type WithChildren = T & { children?: React.ReactNode }; type CardProps = WithChildren; // works as well type CardProps = { title: string } & WithChildren; Preset attributes type ButtonProps = Omit; function Button({ ...allProps }: ButtonProps) { return ; } // 💥 This breaks, as we omitted type const z ..

software engineering/javascript

자바스크립트의 비동기

2023. 1. 11. 15:46

자바스크립트는 Call Stack이 1개인 싱글스레드 구조로 작동되는 구조인데 비동기, Non Blocking을 위한 동시성(Concurrency)을 어떻게 처리하는지 알아보자. 자바스크립트 런타임 환경은 메모리 힙과 콜스택으로 구성되어 있다. 콜 스택에는 원시(Primitive)타입의 데이터들이 저장된다. 실행 콘텍스트를 통해 변수 식별자(이름) 저장, 스코프 체인 및 this 관리, 코드 실행순서 관리등을 한다. 메모리 힙은 배열, 객체, 함수와 같은 참조 타입 데이터가 저장된다. 다음 그림은 자바스크립트 엔진과 런타임 환경이 함께 모여있는 그림이다. 여기서 Web Worker APIs는 크롬과 같은 브라우저 환경에서 (Node.js는 비동기 라이브러리 및 api) dom event, ajax, se..

software engineering/javascript

babel, webpack 그리고 polyfill

2023. 1. 8. 23:33

Babel 바벨은 초기에 ES6가 등장하고 대부분의 브라우저에서 지원하지 않는 문법을 사용할 수 있도록 ES5로 변환해주기 위해 등장했다. 하지만 현재에는 리액트의 JSX, 타입스크립트와 같은 정적 언어 그리고 최신 문법에 대한 트랜스파일러 자리잡았다. 그럼에도 바벨이 모든 최신 문법을 사용할 수 있진 않다. 화살표 함수, Promise, JSX 문법들을 트랜스파일 하기 위해선 폴리필과 플러그인에 대한 도움을 받아야한다. 프리셋(preset)이라 하여 목적에 맞는 플러그인의 집합들이 생겨났는데 @babel/plugin-transform-arrow-functions @babel/plugin-transform-template-literals @babel/preset-react @babel/preset-env..

software engineering/javascript

Closure, Currying, Compose

2023. 1. 7. 21:30

Closure 클로저 function welcome(id) { return function () { console.log('hello ' + id); } } const greet = welcome('bruce'); greet(); 클로저를 생성하는 방법은 함수가 다른 함수 내부에서 선언되고, 나중에 실행되는 것입니다. 함수가 실행될 때 새 실행 컨텍스트가 생성되고 실행 스택에 아래 이미지와 같이 쌓입니다. welcome('bruce'); 가 실행되면 해당 컨텍스트가 생성되어 변수와 lexical environment이 실행 스택에 쌓이고 실행이 완료되면 welcome() 실행 컨텍스트가 종료됩니다. 함수가 종료되며 스택에서 해당 실행 컨텍스트가 완전히 떨어저 나가지만 정의된 함수가 있기에 클로저가 활성화..

software engineering/javascript

Array, Map, Set, WeakMap, WeakSet, Object in Javascript

2023. 1. 5. 20:44

[Array] 연속된 메모리에 할당된 데이터 블록(숫자, 객체 등)을 나타내는 구조. 예: [1,2,3,2] var arr = []; //Empty array var arr = [1,2,3]; //Array which contains 1,2,3 var arr = Array.from("123"); //["1","2","3"] [Set] 인덱스에 의해 순서대로 할당될 필요 없이 고유한 요소/개체 만 포함하는 추상 데이터 유형. 예: {1,2,3} var emptySet = new Set(); var exampleSet = new Set([1,2,3]); var set = new Set([1,2,3]); // {1,2,3} var arr = Array.from(set);//[1,2,3] [Array vs Se..

software engineering/javascript