Hi

자바스크립트를 사용하다 보면 var는 사용하지 말라고 한다.그 이유는 무엇인지 var, let, const의 차이와 함께 정리해 보았다.📌 Scope스코프는 변수에 접근할 수 있는 범위를 의미한다.자바스크립트에서는 크게 3개의 스코프로 나눌 수 있다. 1. Function Scope (함수 스코프)함수 스코프에 선언된 변수는 해당 함수 내에서만 접근 가능하다.var로 선언한 변수는 함수 스코프를 갖는다.function main() { var x = "hi"; console.log(x); // hi 출력}main();console.log(x); // Error 함수 내부에서 var를 사용한다면?var는 블록 스코프를 무시하기 때문에 변수 값이 덮어씌워진다. function main() { ..

TypeScript에서 인터페이스(Interface)는 객체의 구조를 정의하는 기능을 제공한다. 이는 타입을 명확하게 정의하고, 코드의 가독성과 유지보수성을 높이는 데 유용하다.  1. 인터페이스의 기본 개념interface Person { readonly name: string; age?: number; sayHi(): void; sayHi(a: number, b: number): void;}const person: Person = { name: "이정환", sayHi: function () { console.log("hi"); },};person.sayHi();person.sayHi(1, 2); ✅ 인터페이스에서 중요한 개념들읽기 전용(readonly) 속성: 한 번 값을 설정하면 ..

사전 렌더링(Pre-Rendering)사전 렌더링은 브라우저의 요청에 대해 미리 렌더링된 HTML을 응답하는 방식으로, Client Side Rendering(CSR)의 단점을 효율적으로 해결하는 기술이다. 사전 렌더링의 과정사용자가 브라우저를 통해 서버로 초기 접속 요청을 보냄웹서버가 자바스크립트를 실행하여 HTML 파일로 변환 (렌더링)완성된 HTML 파일을 브라우저에 응답이 방식은 초기에 완성된 HTML을 제공하기 때문에 초기 로딩 속도(FCP, First Contentful Paint)가 빠르고 SEO(검색 엔진 최적화)에 유리하다. Client Side Rendering(CSR)CSR은 React.js의 기본적인 렌더링 방식으로, 클라이언트(브라우저)에서 직접 화면을 렌더링하는 방식이다. 장점페..

0. 함수 타입📌 함수 타입 정의타입스크립트의 함수어떤 [타입]의 매개변수를 받고, 어떤 [타입]의 결과값을 반환하는지즉, 함수의 타입은 매개변수의 반환값의 타입으로 결정된다function func(a: number, b: number): number { return a + b;} 함수의 반환값 타입은 자동으로 추론된다📌 화살표 함수의 타입 정의함수선언식과 동일한 방식const add = (a: number, b: number): number => a + b; 역시 반환값 타입은 자동으로 추론된다📌 함수의 매개변수1. 기본값 설정매개변수의 기본값을 설정할 수 있으면 타입이 자동으로 추론된다.function introduce(name = "이정환") { console.log(`name: ${nam..

타입 추론타입 추론이란타입이 정의되어 있지 않은 변수의 타입을 자동으로 추론한다.let a = 10;// number 타입으로 추론  모든 타입을 추론하는 것은 아님함수의 매개 변수 타입은 자동으로 추론할 수 없다.// 오류 발생function func(param) {} 타입 추론이 불가능한 변수에는 암시적으로 any 타입이 추론 됨. 타입 추론이 가능한 상황1. 변수 선언일반적인 변수 선언시 초기값을 기준으로 추론된다.let a = 10;// number 타입으로 추론let b = "hello";// string 타입으로 추론let c = { id: 1, name: "이정환", profile: { nickname: "winterlood", }, urls: ["https://winterlo..

기본 타입의 호환성let num1: number = 10;let num2: 10 = 10;num1 = num2; // ✅ OK => 업캐스팅num2 = num1; // ❌ NO => 다운캐스팅 객체 타입의 호환성type Animal = { name: string; color: string;};type Dog = { name: string; color: string; breed: string;};let animal: Animal = { name: "기린", color: "yellow",};let dog: Dog = { name: "돌돌이", color: "brown", breed: "진도",};animal = dog; // ✅ OKdog = animal; // ❌ NO Animal 타입 ..

타입과 집합타입은 여러 개의 값을 포함하는 "집합" ex)number 타입 : 여러 개의 숫자 값들을 묶어 놓은 집합number literal 타입 : 딱 하나의 값만 포함하는 집합 number → 슈퍼타입(부모타입)number literal type → 서브타입(자식타입)  타입 계층도   타입 호환성: 어떤 타입을 다른 타입으로 취급해도 괜찮은지 판단하는 것 업 캐스팅 : 서브타입의 값을 슈퍼 타입의 값으로 취급 ↔ 다운캐스팅업캐스팅은 모든 상황에 가능하지만 다운 캐스팅은 대부분 불가능    unknown 타입 (전체 집합)모든 타입의 값 할당 가능(모든 타입은 unknown 타입으로 업 캐스트 가능) unknown 타입의 값은 any를 제외한 어떤 타입의 변수에도 할당할 수 없음function un..

2025.01.24 - [Frontend/TypeScript] - [TypeScript] 타입(type) (1)2025.01.26 - [Frontend/TypeScript] - [TypeScript] 타입(type) (2)2025.01.26 - [Frontend/TypeScript] - [TypeScript] 타입 별칭 / 인덱스 시그니쳐열거형 (Enum) 타입자바스크립트 존재 X여러 개의 값을 나열하는 용도// enum 타입// 여러가지 값들에 각각 이름을 부여해 열거해두고 사용하는 타입enum Role { ADMIN = 0, USER = 1, GUEST = 2,}const user1 = { name: "이정환", role: Role.ADMIN, //관리자};const user2 = { na..