CSS letter-spacing 속성    ❗️letter-spacing 속성이란?letter-spacing 속성은 텍스트의 문자와 문자 사이 간격을 지정하는 속성입니다! ❗️사용 예시letter-spacing: normal;letter-spacing: 2px;letter-spacing: -2px;letter-spacing: 0.5em;letter-spacing: -0.2rem; ❗️참고자료https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing letter-spacing - CSS: Cascading Style Sheets | MDNThe letter-spacing CSS property sets the horizontal spacing beh..

aspect-ratio에 대해 알아보자!    ❗️aspect-ratio란?- aspect ratio(종횡비)는 요소의 크기를 비율대로 조정할 수 있게 한다. ❗️사용법❗️1. width/height 지정할 때!- /를 이용하여 width/height 비율을 지정할 수 있습니다 예시.box { width: 100px; aspect-ratio: 2 / 1; /* 100px, 50px */} 해석width를 100px;aspect-ratio: 2/1; 2대1 비율이므로 width는 100px이고 height는 50px이다! ❗️2. 한 개의 값만 지정할 때!- 앞에 width/height를 지정할때와 비슷하다- 하나의 값만 지정하면 height를 1로 간주한다 ❗️3. auto, / 두개 동시에 사용할..

URL.createObjectURL, URL.revokeObjectURL    사용자가 업로드한 파일을 미리보기하거나, 서버에서 받은 데이터를 로컬에서 처리할 때 유용한 두 가지 메서드 URL.createObjectURL, URL.revokeObjectURL에 대해 설명하겠습니다! ❗️URL.createObjectURLURL.createObjectURL 메서드는 File, Blob, MediaSource 객체를 가리키는 임시 URL을 생성합니다.이 URL을 통해 해당 객체에 쉽게 접근할 수 있으며, 웹 애플리케이션에서 이미지, 동영상, 오디오 등의 미디어 파일을 미리보기할 때 유용하게 사용할 수 있습니다. 예제// 파일 입력 요소에서 파일을 선택할 때const fileInput = document.que..

Axios 사용법    ❗️소개 Axios를 간단히 소개하자면 fetch() 함수처럼 리퀘스트를 보내고 리스폰스를 받을 수 있는 라이브러리입니다!fetch() 함수랑 사용법은 비슷한데요. 조금 더 편리하게 쓸 수 있는 라이브러리라고 생각하시면 됩니다. Axios를 설치하고 사용하는 방법에 대해 간단히 설명드릴게요. Axios를 아주 간단하게만 사용해 볼 거니까, 쉽게 따라 하실 수 있을 겁니다. ❗️Axios 설치방법npm install axios package.json 파일의 dependencies 안에 아래처럼 axios 가 추가될 겁니다."dependencies": { ... "axios": "^1.2.2", ...}  ❗️Fetch와 Axios 사용법 비교 - 요약1. 우선 GET..

TypeScript 공부일지: 타입 호환성 예시  ❗️주의지극히 개인 공부한 내용을 올린 거기 때문에 이해하지 못할 수도 있음 ❗️타입 호환성 예시// 객체 타입의 호환성/** * 기본타입간의 호환성 */let num1: number = 10;let num2: 10 = 10;num1 = num2;/** * 객체 타입간의 호환성 * -> 어떤 객체타입을 다른 객체타입으로 취급해도 괜찮은가? */type Animal = { name: string; color: string;};type Dog = { name: string; color: string; breed: string;};let animal: Animal = { name: "기린", color: "yellow",};let dog: Dog ..

TypeScript 공부일지: 계층도 살피기 ❗️주의지극히 개인 공부한 내용을 올린 거기 때문에 이해하지 못할 수도 있음 ❗️계층도 살피기/** * Unknown 타입 - 모든 */function unknownExam() { let a: unknown = 1; // Up Cast로 가능, 반대로 Down Cast는 불가능 let b: unknown = "hello"; let c: unknown = true; let d: unknown = null; let e: unknown = undefined; let unknownVar: unknown; // let num: number = unknownVar; // let str: string = unknownVar; // let bool: bool..

TypeScript 공부일지: 타입 호환성  ❗️주의지극히 개인 공부한 내용을 올린 거기 때문에 이해하지 못할 수도 있음❗️타입 호환성// 타입은 집합이다// 타입호환성 - 어떤 타입을 다른 타입으로 취급해도 괜찮은지 판단하는 것// ex) number type --->(x) number literal type// number type

TypeScript 공부일지: void, never  ❗️주의지극히 개인 공부한 내용을 올린 거기 때문에 이해하지 못할 수도 있음❗️voidvoid -> 공허 -> 아무것도 없다.void -> 아무것도 없음을 의미하는 타입// 리턴값 타입 지정 가능function func1(): string { return "hello";}function func2() { console.log("hello");}let a: void;// a = 1;// a = "hello";a = undefined; ❗️nevernever -> 존재하지 않는불가능한 타입// while (true) {}

TypeScript 공부일지: any, unknown  ❗️주의지극히 개인 공부한 내용을 올린 거기 때문에 이해하지 못할 수도 있음❗️any특정 변수의 타입을 우리가 확실히 모를때 사용let anyVar: any = 10;anyVar = "hello";JS처럼 타입 상관없이 아무 값이나 담게 하려면 any type 사용anyVar = true;anyVar = {};anyVar = () => {};anyVar.toUpperCase();anyVar.toFixed();let num: number = 10;num = anyVar; ❗️unknownlet unknownVar: unknown;unknownVar = "";unknownVar = 1;unknownVar = () => {};num = unknownVa..