CSS white-space 속성   ❗️white-space 속성이란?- white-space 속성은 요소 내부의 공백 문자(Whitespace) 처리와 줄바꿈 규칙을 지정합니다. ❗️사용예시white-space: normal;- normal은 초깃값 입니다!- 연속되는 공백을 하나로 합치는 속성이 있습니다  white-space: nowrap;- normal 값의 경우와 마찬가지로, 연속되는 공백을 하나로 합칩니다.  white-space: pre;-  요소에서 초깃값입니다.- 연속되는 공백을 인위적으로 하나로 합치지 않으며, 소스(소스 코드를 의미함)에서 줄바꿈 또한 그대로 유지하여 인위적인 공백의 축소를 하지 않습니다.- 텍스트가 콘텐츠 박스의 끝에 도달했을 때 자동으로 줄바꿈시키지 않습니다. 하..

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) {}