영벨롭 개발 일지

📌 들어가며...오늘 포스팅은 자바스크립트의 실행 컨텍스트(Execution Context) 입니다.대체 실행 컨텍스트는 무엇이고, 어떤 역할을 하며 어떠한 것들을 담고 있는지 살펴보겠습니다.🤔 자바스크립트의 실행 컨텍스트(Execution Context)실행 컨텍스트는 소스코드를 실행하는 데 필요한 환경을 제공하고, 코드의 실행 결과를 실제로 관리하는 영역이다. 본격적으로 학습하기에 앞서 요약 내용부터 보고 들어가겠습니다.참고로 실행 컨텍스트는 공부할 내용이 엄청나기에 이번 포스팅은 상당히 길어질 것으로 보입니다...하지만 당장은 매우 어렵고 이해하기 힘드실지라도... 함께 으쌰으쌰! 반드시 할 수 있습니다!(이 포스팅은 '모던 자바스크립트 Deep Dive' 교재를 기반으로 작성되었습니다) 📌 ..

📌 typeof 연산자 우리는 이미 자바스크립트에서 변수의 타입을 얻기 위해 typeof 연산자를 한 번 쯤은 사용해 봤을 것 입니다. const num: number = 1; const str: string = "Hello World"; console.log(typeof num); // number console.log(typeof str); // string 타입스크립트에서도 typeof 연산자가 사용되는데, 다음 3가지 상황에서 사용될 수 있습니다. 1. 객체 데이터를 객체 타입으로 변환 2. 함수를 타입으로 변환 3. 클래스를 타입으로 변환 ✅ 객체 데이터를 객체 타입으로 변환 객체 데이터에 대해 typeof 연산자를 사용하면, 해당 객체를 구성하는 타입 구조를 독립된 타입으로 가져와 사용할 수 ..

📌 타입 단언 Type Assertions 타입 단언은 타입스크립트가 타입 추론을 통해 판단할 수 있는 타입의 범주를 넘는 경우, 더 이상 추론하지 않도록 지시하는 것입니다. 즉, 개발자가 타입스크립트에게 '이 타입이 맞아!'라고 알려주는 것입니다. 런타임에는 영향을 미치지 않고, 오직 컴파일 과정에서 사용됩니다. 타입 단언은 강제 형변환과는 다른 개념입니다. 단지 컴파일러에게 타입을 주장할 뿐, 실제로 데이터 자료를 변환시키는 것은 아닙니다. 타입 단언을 하는 방법에는 as 문법과 꺽쇠문법이 있습니다. 다만, 꺽쇠 문법은 태그 엘리멘트와 헷갈릴 수 있어, TSX 파일에서는 사용이 불가능합니다. let val: any = 1.23; (val as number).toFixed(2); // as 문법 (va..

📌 타입스크립트 제네릭(Generics) 변수, 함수의 매개변수 등을 정의할 때, number, string 과 같이 항상 타입을 고정하여 사용하였습니다. 하지만 이는 프로그래밍을 함에 따라 유연성과 재사용성이 떨어지게 되는 단점이 있습니다. 물론, any 나 union 타입을 통해 좀 더 유연하게 타입을 사용할 수 있지만, 이는 오류를 쉽게 찾지 못하며 가독성 또한 떨어지게 됩니다. 따라서 타입을 고정하여 명시하지 않고, 언제든 변할 수 있는 유연한 타입으로 표현할 수 있는 장치가 필요합니다. 이를 우리는 제네릭(generic)이라고 부릅니다. 즉, 제네릭(generic)이란 타입을 변수화 한 것이라고 할 수 있습니다. 개발자는 제네릭을 통해 코드의 유연성과 재사용성을 높일 수 있습니다. ✅ 제네릭을 ..

📌 호출 시그니쳐(Call Signature) Call Signature란 함수의 매개변수와 반환 값의 타입을 type 또는 interface 로 미리 선언하는 것입니다. 즉, 함수의 구현이 아닌, 함수의 타입을 정의하는 것입니다. 일반적인 함수 선언 방법은 다음과 같습니다. function add(a: number, b: number): number { return a + b; } const sub = (a: number, b: number): number => { return a - b; }; 이를 호출 시그니쳐를 이용하여 표현하면 다음과 같습니다. type Operation = (a: number, b: number) => number; const add: Operation = (a, b) => a..

📌 Interface 타입스크립트의 인터페이스는 객체가 가질 수 있는 다양한 구조들을 직접 타입으로 만들 수 있는 방법입니다. 즉, 객체의 틀 또는 설계도라고 할 수 있습니다. interface 키워드를 통해 인터페이스를 정의할 수 있습니다. 구분자로는 세미콜론(;) 또는 콤마(,) 를 사용하며, 아예 구분자를 사용하지 않을 수도 있습니다. 인터페이스 내부는 속성과 메서드에 대한 타입만 정의할 뿐, 구현은 하지 않습니다. interface Person { name: string; age: number; greeting(): void; } let john: Person = { name: "John", age: 20, greeting: () => { console.log("Hello"); }, }; 또한 인..