const Text = styled.div` white-space: nowrap; // 줄바꿈 없이 한 줄로 유지 overflow: hidden; // 넘치는 텍스트는 숨김 text-overflow: ellipsis; // 숨겨진 텍스트는 ...으로 표시`;이 세 가지 속성은 세트로 자주 사용되며, 줄바꿈 없이 텍스트를 한 줄로 유지하면서 넘칠 경우 ...으로 처리해준다.✅ 2. 글자 크기를 자동으로 줄이기: clamp()font-size: clamp(12px, 4vw, 16px);clamp(최소값, 중간값, 최대값) 형태4vw: 뷰포트 너비의 4%에 따라 크기가 자동으로 조절됨예시 설명:화면이 넓을 때는 최대 16px좁을 때는 12px까지 작아짐그 사이에서는 뷰포트에 따라..

# 🧾 Enum(열거형) 타입 정리TypeScript의 `enum` 타입은 여러 값을 직관적으로 정의하고 관리하기 위한 전용 타입입니다.---## 🔸 1. 열거형(Enum) 타입이란?- JavaScript에는 없고 **TypeScript에서만 제공**되는 타입입니다.- 여러 개의 값을 **이름 있는 상수로 나열**하여 가독성과 안전성을 높입니다.- 숫자 또는 문자열 값을 그룹으로 정의할 수 있습니다.---## 🔹 2. 기본 문법```tsenum Role { ADMIN, USER, GUEST,}Role.ADMIN → 0Role.USER → 1Role.GUEST → 2 (자동 증가)🔸 3. 숫자 열거형 (Numeric Enum)✅ 숫자값 직접 할당enum Role { ADMIN = 10, //..

# 🧾 타입 별칭(Type Alias)과 인덱스 시그니처(Index Signature) 정리TypeScript의 타입 별칭과 인덱스 시그니처는 유연하고 가독성 높은 코드 작성을 도와주는 중요한 타입 기능입니다.---## 🔸 1. 타입 별칭 (Type Alias)타입 별칭은 타입을 변수처럼 선언하여 **코드의 재사용성과 가독성**을 높일 수 있습니다.### ✅ 선언 방법```tstype User = { id: number; name: string; nickname: string; birth: string; bio: string; location: string;};✅ 사용 예시let user: User = { id: 1, name: "이정환", nickname: "winterlood", ..

# 📚 배열(Array)과 튜플(Tuple) 정리TypeScript에서 배열과 튜플을 사용하는 방법을 예제와 함께 정리합니다.---## 🔹 1. 배열 (Array)### 📌 배열 타입 정의 방법- 요소 타입 뒤에 `[]`를 붙여 배열을 정의합니다.- 또는 제네릭 문법인 `Array`을 사용할 수 있습니다.```tslet numArr: number[] = [1, 2, 3]; // 숫자 배열let strArr: string[] = ["hello", "im", "winterlood"]; // 문자열 배열let boolArr: Array = [true, false, true]; // 제네릭을 이용한 정의📌 다양한 타입 요소를 갖는 배열여러 타입이 섞인 배열은 유니온 타입을 사용합니다.let multiAr..

---## 🔹 1. 원시 타입 (Primitive Types)### 📌 특징- **단일 값만 저장 가능**: 숫자, 문자열, 논리값 등.- **엄격한 타입 검사**: 지정된 타입 외 값은 할당할 수 없음.### 📦 종류별 설명#### ✅ number 타입- 모든 숫자 값 포함: 정수, 소수, `Infinity`, `NaN` 등.```tslet num1: number = 123;let num2: number = -123;let num3: number = 0.123;let num4: number = Infinity;let num5: number = NaN;num1 = 'hello'; // ❌ 오류num1.toUpperCase(); // ❌ 오류 ✅ string 타입문자열 표현 (큰..

📌 컴파일러 옵션이란?**타입스크립트 컴파일러(tsc)**가 코드를 어떻게 검사하고 변환할지 정의하는 설정입니다.tsconfig.json 파일에 작성하며, 옵션을 조합하여 프로젝트 맞춤 설정이 가능합니다.🗂️ tsconfig.json 생성하기tsc --init해당 명령어를 실행하면 tsconfig.json 파일이 생성됩니다.대부분의 설정은 주석 처리되어 있으며, 필요한 옵션만 활성화해서 사용하면 됩니다.🔧 주요 컴파일러 옵션 정리1️⃣ include{ "include": ["src"]}컴파일할 파일 경로를 지정합니다.예: src 폴더 내의 .ts 파일만 컴파일2️⃣ target{ "compilerOptions": { "target": "ES5" }}변환될 자바스크립트 버전 지정예: ES5..