기로그 기로그

목차 1.객체 타입 정의하기 객체 리터럴 인터페이스 타입별칭 클래스 2.객체 프로퍼티 옵션 인덱스 시그니처 옵셔널 프로퍼티 읽기 전용 프로퍼티 1.객체 타입을 지정하는 여러가지 방법 1️⃣객체 리터럴 타입 :단일로 사용되는 작은 객체를 선언할 때 사용 let user:{ id:string; name:string; } = { id:"아이디", name:"이름", } 2️⃣인터페이스 :재사용 가능한 타입 정의를 위해 주로 사용된다. type User ={ id:string; name:string; } const user:User = { id:"아이디", name:"이름", } 3️⃣타입 별칭 type User ={ id:string; name:string; } const user:User = { id:"아이..

기본타입 기본 타입이란 타입스크립트가 제공하는 기본 내장타입을 말한다. JavaScript의 슈퍼셋 언어인 TypeScript는 JS의 거의 동일한 데이터 타입을 지원하며, 이외에 추가적인 타입을 제공한다. 그 중 기본타입에 대한 내용들을 정리한다. 목차 1.원시타입과 리터럴 타입 2.배열과 튜플 3.Enum타입 4.any타입과 unknown타입 5.void타입과 never타입 1.원시타입과 리터럴 타입 ✨원시 타입(Primitive Type) 하나의 값만 저장할 수 있는 타입. number , string , boolean , null , undefined 등의 속성이 존재한다. let str:string = "문자열"; let num:number = 1; let bool:boolean = true; ..

1.대수 타입(Algebraic Types)이란? 대수 타입이란 여러 타입을 조합하여 새로운 타입을 만들 수 있는 기능을 말한다. 종류로는 유니온 타입(Union Types),인터섹션 타입(Intersection Types)이 있다. 타입을 집합으로 생각할 때, 집합 간의 연산을 표현하는 방식으로 이해할 수 있다. 유니온 타입은 합집합에 해당하고 인터섹션 타입은 교집합에 해당한다. 1️⃣인터섹션 타입-교집합 인터섹션 타입은 &을 이용해서 교집합 타입을 만든다. 이러한 교집합 타입은 객체타입에서 많이 사용된다. 일반 원시값으로 사용하면 서로 교집합 하는 부분이 없기 때문에 never를 반환하게 된다. 👉🏻원시 타입 let variable : number & string 👉🏻객체 타입 Type Dog = {..

제네릭은 C#,JAVA같은 언어에서 재사용 가능한 컴포넌트를 생성하는 도구로 사용된다. Generic은 타입의 generalize(일반화)하는 방법을 제공한다. 타입스크립트에서도 이 제네릭을 사용하여 다양한 타입을 갖는 함수,클래스,인터페이스 등을 만들 수 있다. 모든 타입을 받을 수 있는 any타입과 비교하여 제네릭을 사용해야하는 이유를 알아보려고한다. 제네릭 함수 만들기 function identify(arg:number):number{ return arg; } function identify(arg:any):any{ return arg; } 이렇게 number와 any타입을 반환하는 함수가 있다. any타입은 어떤 타입이든 받을 수 있지만 함수가 반환할 때 어떤 타입인지 정보를 잃게된다. 어떤 타입..

타입 캐스팅은 크게 두 가지 상황에서 사용된다. 1️⃣정확한 타입 추론 타입스크립트가 값의 타입을 추론하지 못할 때 명시적으로 타입을 지정하여 컴파일러에게 알려준다. 2️⃣타입 변환 특정 타입의 기능과 속성을 사용하려고 할 때 사용할 수 있다. 즉, 타입스크립트에서 컴파일러가 직접 감지하지 못하는 특정 타입의 값을 타입스크립트에게 알려주는 역할을 한다. 예를들어 DOM에 있는 HTML요소를 조작한다고 가정해보자. // //app.ts const htmlElement = document.querySelector('p'); htmlElement는 HTML요소나 null로 추론하고 있다.HTML요소를 사용해서 텍스트 내용에 접근하거나, 다른 DOM을 조작하는 작업도 할 수 있겠지만, input의 value값을..

Type Guard란? 타입 가드(Type Guard)는 런타임에서 변수의 타입을 체크하고 해당 변수를 사용할 때 타입을 확실하게 추론할 수 있도록 타입을 좁혀 주어 안정성을 보장해 준다. 조건문을 사용하여 변수의 타입을 검사하고, 타입스크립트 컴파일러에게 해당 타입으로 인식되도록 알려주는 역할을 한다. 주로 유니언 타입을 다룰 때 사용된다. type CombineType = string | number; function add(a:CombineType , b:CombineType){ a+b } 이렇게 유니언 타입을 이용해 함수를 만들면 에러가 발생한다. a와 b는 union type으로 숫자일 수도 문자일 수도 있기 때문이다. function add(a:CombineType, b:CombineType)..

인터프리터 언어와 컴파일 언어는 실행방식에 관련된 개념 동적 언어와 정적 언어는 변수의 타입 시스템과 관련된 개념 1.인터프리터 언어 소스코드를 한 줄씩 읽고 해석하여 동시에 실행하는 프로그래밍 언어이다. 소스코드는 인터프리터에 의해 바로 실행되며, 별도의 컴파일 단계가 없다. Python,JavaScript,Ruby,PHP 등 특징 😇컴파일 과정이 없으므로 간단하고 빠른 개발과 디버깅이 가능하다. 💀소스 코드가 직접 실행되기 때문에 코드의 보안이 취약할 수 있다. 💀한 줄씩 해석하고 실행하므로 컴파일 언어에 비해 실행 속도가 느릴 수 있다. 동적 타입 언어의 특징 변수의 타입이 런타임에 결정된다. 변수를 선언할 때 타입을 명시적으로 선언하지 않고 할당되는 값에 따라 동적으로 타입이 결정된다. 변수의 타..

background속성은 배경에 관련된 스타일과 속성을 설정할 수 있다. 주로 사용되는 속성에 대해서 정리를 해 보았다. 1️⃣background-image 요소에 배경 이미지를 지정한다. 이미지 파일 경로나 url을 사용하여 배경 이미지를 지정할 수 있다. ⚠️background-image 속성 주의사항 url()을 사용하여 이미지를 배경으로 사용하는 경우 웹 접근성에 영향을 미칠 수 있다. 배경 이미지는 스크린 리더기 등의 기술에 읽히지 않기 때문에 배경 이미지 외에 img태그를 추가해 사이즈를 1px로 줄여 숨기는 방식을 사용할 수 있다. 2️⃣background-size 이미지의 사이즈를 조절한다. 값으로 %,px이 올 수 있지만, 보통 cover나 contain속성을 사용한다. 이런 원본이미지가..