TypeScript 공부일지: 타입 단언  ❗️주의지극히 개인 공부한 내용을 올린 거기 때문에 이해하지 못할 수도 있음 ❗️타입 단언/** * 타입 단언 */type Person = { name: string; age: number;};// 아래와 같이하면 Person 타입이 지금 초기화 값인 빈 객체를 기준 값으로 추론되어 버리기 때문에// person 변수의 타입이 그냥 빈 객체로 추론되어 버림// 그래서 name 과 age 프로퍼티가 없다는 경고가 나옴// let person = {};// person.name = "이정환";// person.age = 27;// 이렇게 우리 의도와 다르게 변수의 타입이 추론 되어버리기 때문에// 원하는 기능을 만들기 어려울때는 초기화 값의 타입을 단언 해주면 ..

TypeScript 공부일지: 타입 추론  ❗️주의지극히 개인 공부한 내용을 올린 거기 때문에 이해하지 못할 수도 있음 ❗️타입 추론이란? - 변수의 초기값을 가지고 타입 추론을 한다. - 함수의 반환값 타입을 추론할 때는 초기화하는 값이 아니라 리턴문 다음에 오는 반환값을 가지고 추론한다. - 만약에 매개변수에 기본값이 설정되어 있다면 기본값이 설정된 매개변수의 타입도 기본값을 기준으로 타입을 추론한다. - 딱봐도 우리가 봐도 타입이 추론되면 당연히 TS도 타입 추론 똑같이 함 /** * 타입 추론 * - 변수의 초기값을 가지고 타입 추론을 한다. * - 함수의 반환값 타입을 추론할 때는 초기화하는 값이 아니라 리턴문 다음에 오는 반환값을 가지고 추론한다. * - 만약에 매개변수에 기본값이 설정되어 있..

TypeScript 공부일지: 대수 타입  ❗️주의지극히 개인 공부한 내용을 올린 거기 때문에 이해하지 못할 수도 있음 ❗️대수 타입이란?- 여러개의 타입을 합성해서 새롭게 만들어낸 타입 - 합집합, 교집합 타입이 존재함 /** * 1. 합집합 타입(Union 타입) */let a: string | number | boolean;a = "hello";a = 1;a = true;let arr: (number | string | boolean)[] = [1, "hello", true];type Dog = { name: string; color: string;};type Person = { name: string; language: string;};type Union1 = Dog | Person;let..

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 ..