공부
-
[Javascript] Class & Prototype 문법공부/JavaScript 2024. 3. 21. 01:27
Prototype 문법이란? 원래 자바스크립트에는 기존의 객체를 복사해서 새로운 객체로 생성하는 프로토 타입 기반 언어로 Class란 개념이 없었다. 그래서 ES6 버전 이전까지는 기존의 객체를 복사, 새로운 객체로 생성하는 prototype 문법을 이용해왔다. 객체를 만들면 객체에는 Prototype이라는 공간이 존재하게 된다. 이 prototype을 "유전자" 라고 생각하면 이해가 간단하다. (자식은 부모의 유전자를 이어받는다.) function Skill(q,w){ //this = class에서 생성되는 object(instance) this.q = q; this.w = w; } //이렇게 자료를 수정하는것도 가능하다. //이렇게 자료를 수정하면 Skill을 사용한 자식 전부 해당 데이터 사용이 가..
-
[TypeScript]Literal Types, Readonly, const 정리공부/TypeScript 2024. 3. 19. 23:56
Literal Types 미리 들어올 자료를 정하는 타입을 Literal Types 이라고 한다. Literal Types을 쓰는 이유는 변수를 더 엄격하게 관리해서 오류를 방지하기 위해서 사용한다. 함수 입력값, 리턴값 등을 제한하는 용도로도 사용가능하다. const 변수와 유사하게 사용가능하다. //literal types 변수 let blog : 'tistory'; //'tistory'타입이기 때문에 tistory만 들어갈 수 있게 된다. blog = 'tistory'; //에러 발생 blog = 123; 함수에 Literal Types 사용 예 //입력값으로는 Tistory, 리턴값으로는 true | false만 가능해진다. function blog(a: 'Tistory') : true | fal..
-
[TypeScript] TypeAlias ?공부/TypeScript 2024. 3. 19. 21:01
Type Alias type 키워드를 사용해 변수에 타입을 넣어서 사용하는 방법 (타입에 이름을 지정) 주로 타입이 길어져서 복잡해지는 경우 사용한다. 같은 이름의 type 변수는 정의할 수 없다. (중복불가) //기본형식 type 변수 = type지정 type A = stirng | number; let B : A = 123; let B : A= 'Hello'; 예시 Object에 Type Alias 사용하기 type Product = { brand : string, serialNumber : number , model : string[] } //다음과 같이 변수 명 뒤에 입력 let tv_data : Product = { brand : 'LG', serialNumber : 1111, model : [..
-
[TypeScript] Narrowing & Assertion 문법 정리공부/TypeScript 2024. 3. 18. 17:00
1. Type Narrowing ? if문 등을 사용하여 타입을 하나로 정하는(좁히는) 문법을 말한다. 사용하는 이유는 Union type을 사용하면 Narrowing(좁히다)문법을 사용해서 타입을 하나로 정해주거나 Assertion(선언) 문법으로 타입을 선언해주는 것이 필요하기 때문이다. 2. Narrowing 문법 예시 /* 1. type of 연산자를 사용해서 정하기 */ function NarrowingTest ( a : number | string ) { if(typeof a === 'string') { return a + '1'; } else { return 'a는 number입니다.' } /* 2 in 연산자를 사용해서 정하기 */ type Cookie = {choco : string } ..
-
[TypeScript] typeof, keyof 연산자 정리공부/TypeScript 2024. 3. 18. 02:14
1. typeof 연산자 객체 데이터를 객체 타입으로 변환하는 연산자. //1. Type 반환하기 (type of a : a의 type을 반환) let name : string = '엄준식'; let name2 : typeof name = 123; // name2는 string type이기에 오류가 발생하게 됨 //2. Type을 비교하기 function Test( x :number|boolean){ let Array_data : number[] = []; if(typeof x === 'number') { Array_data[0] = x; } } //3. object type으로 재활용하기 let dessert_obj = { Sweet:'', salty : '', spicy: ''}; type desse..
-
[TypeScript] 타입 지정(선언)하기공부/TypeScript 2024. 3. 16. 15:30
TypeScript에서는 변수에 타입을 사전에 지정하는 것이 가능하다. 또한 변수 뿐만 아니라 array, object, class 에도 타입지정이 가능하며 함수에도 지정이 가능합니다. 변수 선언시 기본적인 문법은 다음과 같다. let 변수명 : 기본타입 = 데이터; 기본타입(Primitive types) 변수 지정 //string 타입의 자료만 들어올 수 있다. let chicken :string = 'soy'; //만약 다른자료가 들어온다면 에러가 발생한다. let chicken1 :string = 8282; //error //Boolean 타입의 자료만 들어올 수 있다. let Is_it_chicken :boolean = true; let Is_it_chicken :boolean = flase; /..
-
[TypeScript] TypeScript란?공부/TypeScript 2024. 3. 16. 14:25
1. 정의 TypeScript는 Microsoft에서 개발한 오픈 소스 프로그래밍 언어로, JavaScript의 상위 확장자(슈퍼셋)이다. 즉, JavaScript 코드를 그대로 사용할 수 있으면서도 정적 타입을 지원을 통해 오류를 사전에 방지하는 언어이다. 2. 특징 (장점) JavaScript 같은 경우는 동적타이핑을 지원한다. 즉, 변수 등의 타입을 명시하지 않아도 컴퓨터가 알아서 해석하게납두기 때문에 생각지 못한 오류 등이 발생할 수 있다. TypeScript는 정적타이핑을 지원하여 코드를 작성할 때 부터 컴퓨터적 구조로 명시를 해야하기 때문에 더 엄격하게 코드를 작성하게 되기 때문에 사전에 오류를 방지할 수 있다. 이런점을 바탕으로 타입의 정의를 통해 가독성이 좋고 코드의 유지보수 측면에서 용이..
-
[React] useTransiton 이란?공부/React 2024. 2. 29. 16:38
1. 정의 리액트 18 버전 이후 추가된 기능으로 공식문서에는 useTransiton를 UI를 차단하지 않고 state를 업데이트 할 수 있는 React Hook이라고 설명한다. 예를 들면 극단적으로 무거운 작업을 할 때 다음 입력을 받지 못할 정도의 프레임 저하가 발생하게되면 유저와 상호작용이 불가하고 좋은경험을 제공할 수 없게된다. 이런 문제를 해결하기 위해 작업 (state 변화)에 우선순위를 나누고, 우선순위가 높은 이벤트가 발생 시 그 이벤트를 우선처리하고 이후에 우선순위가 낮은 이벤트를 핸들링하여 앞서말한 문제를 해결하는 기능이다. 즉, state 변화에 우선순위를 부여하는 React Hook이다. (상태변화를 일으키는 함수의 우선순위를 낮추는 hook) useTransition은 [isPen..