sy_develop_note

JavaScript 애플리케이션의 개발 및 배포 후 Out of Memory (OOM) 오류가 발생했다...😥이 글에서는 OOM 오류의 원인과 이를 해결하기 위한 접근 방법을 중심으로 정리해 보겠습니다. JavaScript Heap Out of Memory 오류란?JavaScript Heap은 애플리케이션이 동적으로 생성하는 객체들이 저장되는 메모리 공간을 의미합니다.JavaScript 애플리케이션의 힙 메모리는 고정된 크기를 가지고 있으며, 이 크기를 초과하면 Heap Out of Memory 오류가 발생하게 됩니다.이 오류는 일반적으로 다음과 같은 상황에서 발생합니다.데이터가 지나치게 많이 로드될 때반복문 안에서 대규모 객체를 생성하고 해제하지 않을 때메모리 누수가 발생할 때 오류 발생 및 문제 파..

TypeScript에서 Type과 Interface의 차이점에 대해 알아보겠습니다. Type vs Interface // Object 선언할 때 interface IObject { x: number; y: number; } type TObject = { x: number; y: number; } // Function 선언할 때 interface IFunction { (x: number, y: number): number; } type TFunction = (x: number, y: number) => number; interface와 type은 객체나 함수의 타입을 선언하는 데 사용될 수 있습니다. type은 할 수 있지만 interface에서는 할 수 없는 것들 primitive 타입 선언하기 type..

type predicate (타입 프레디케이트) type predicate는 TypeScript에서 특정 타입에 대한 동적인 체크를 수행하는 함수입니다. 이 함수는 입력된 값이 특정 타입인지 여부를 불리언으로 반환합니다. 이를 통해 TypeScript는 실행 시간에 변수의 타입을 검사할 수 있게 됩니다. 단순한 숫자 타입 체크 function isNumber(input: any): input is number{ return typeof input === 'number'; } console.log(isNumber(10)); 'isNumber' 함수는 입력값이 숫자인지 여부를 검사하는 타입 프레디케이트입니다. 'input is number' 형태는 TypeScript에게 이 함수가 실행되면 'input'이 ..

TypeScript 관점에서 statement와 experssion의 차이 그리고 expression(표현식)을 사용하는 게 더 좋은지에 대해서 한번 알아보도록 하겠습니다. Statement(문장) 프로그램에서 어떤 작업이 이루어져야 하는지를 나타냅니다. 주로 어떤 동작이나 조건을 수행하도록 컴퓨터에게 명령하는 역할을 합니다. function addTwoNumbers(x: number, y: number): number { return x + y; } 반환 값이 있을 수도, 없을 수도 있습니다. 주로 함수나 조건문, 반복문 등이 Statement의 예시입니다. 장점 명시적인 반환 명시적으로 return 키워드를 사용하여 반환값을 지정할 수 있어, 함수가 무엇을 반환하는지 명확하게 드러낼 수 있습니다. ..

오버로딩이라는 개념은 많은 언어에 존재하는 개념입니다. 하지만 자바스크립트에는 없고 타입스크립트에는 존재합니다. 타입스크립트의 오버로딩에 대하여 알아보겠습니다. Overloading 오버로딩은 동일한 함수 이름으로 다양한 매개변수 및 반환 타입을 가진 여러 버전의 함수를 정의하는 것을 말합니다. 이를 통해 다양한 형태의 입력을 받아들이고 그에 따라 다양한 출력을 반환할 수 있습니다. 함수 시그니처 function stringOrStrings(members: string): string; function stringOrStrings(member1: string, member2: string, member3: string): string; 첫 번째 시그니처: 문자열 하나를 받아서 문자열을 반환합니다. 두 번..

함수를 타입으로 정의하는 방법에 대해 알아보겠습니다. Function Type type Mapper = (x: string) => string; Mapper는 문자열을 받아 다른 문자열을 반환하는 함수 타입을 정의합니다. 예를 들어, (x: string) => string는 문자열을 받아 "멤버: 문자열" 형태의 새로운 문자열을 반환하는 함수를 의미합니다. const runner = (callback: Mapper) => { return ['잘자세연', '누구세연', '안녕하세연'].map(callback); } console.log(runner((x) => `멤버 : ${x}`)); runner 함수는 Mapper 타입의 콜백 함수를 인자로 받아, 문자열 배열에 각 요소에 대해 콜백 함수를 적용한 결과..

TypeScript의 함수에 대해 알아보겠습니다. 함수 정의하기 function returnTwoCouples(person1: string, person2: string): string { return `${person1}과 ${person2}은 닉네임 입니다.` } console.log(returnTwoCouples('잘자세연', '누구세연')); // 잘자세연과 누구세연은 닉네임 입니다. 위의 예시는 TypeScript에서 함수를 정의하는 기본적인 형태입니다. 함수 이름과 파라미터 타입 명시 - function 키워드를 사용하여 함수를 선언합니다. - 함수 이름을 정의하고 괄호 안에 파라미터와 각 파라미터의 타입을 명시합니다. (파라미터 타입은 콜론(:) 다음에 명시!) 리턴 타입 명시 - 콜론(:)..

Narrowing(내로잉) TypeScript에서 특정 코드 블록 내에서 변수의 타입을 더 구체적으로 좁히는 것을 의미합니다. 예를 한번 들어보겠습니다. numberOrString이라는 변수는 number 또는 string이 될 것이라고 선언해 두었습니다. 그리고 값도 입력을 해두었습니다. 이렇게 선언을 하면 string 또는 number가 될 수 있지만 값을 넣어두었기 때문에 마우스를 올려보면 더 구체적인 타입으로 유추되는 것을 확인할 수 있습니다. 이것이 내로잉의 가장 기본이 되는 개념입니다. 우리가 타입을 선언했다고 해도 값을 통해서 TypeScript는 어떤 타입이 될지를 정확하게 유추할 수 있습니다. Narrowing의 종류 1) Assignment Narrowing 변수에 값을 할당함으로써 타..

Intersection 두 개 이상의 타입을 합쳐 새로운 타입을 만드는 것을 말합니다. Intersection은 '&' 기호를 사용하여 타입을 결합합니다. 이것은 여러 타입의 속성을 모두 갖는 새로운 타입을 생성하는 데 사용됩니다. 간단한 예를 들어보겠습니다. 아래의 두 인터페이스가 있다고 가정해 봅시다. interface Human{ name: string; age: number; } interface Contacts{ phone: string; address: string; } 그리고 Intersection을 사용하여 새로운 타입을 만들어봅시다. type HumanAndContacts = Human & Contacts; let humanAndContacts: HumanAndContacts = { na..

Union TypeScript의 Union(유니온) 타입은 둘 이상의 타입을 허용하도록 하는 타입으로, 여러 종류의 값을 가질 수 있는 변수를 선언할 때 유용합니다. 유니온 타입은 '|' 기호를 사용하여 표시할 수 있습니다. 예를 들어, 다음과 같이 유니온 타입을 사용할 수 있습니다. let val: number | string; // number 또는 string을 가질 수 있는 변수 선언 val = 123; // 숫자 할당 console.log(val); // 123 val = "hello"; // 문자열 할당 console.log(val); // hello 위 예시에서 'val' 변수는 number 또는 string 타입을 가질 수 있습니다. 이를 통해 여러 가지 타입의 값을 단일 변수에 할당하여 ..