# typescript
[TS] 이넘이란?
이넘(enum)은 특정 값의 집합을 의미하는 데이터 타입입니다.이넘으로 이름이 있는 상수들의 집합을 정의할 수 있습니다. 여기서 상수란 변하지 않는 고정된 값을 말합니다. 이넘으로 변하지 않는 값들의 집합을 정의할 수 있습니다.문법여러 개의 상수를 하나의 단위로 묶으면
split 메소드를 이용해 YouTube 링크를 Embed 형식으로 변환하기 (iframe) (문제 해결)
개요 > 페이지에서 props로 받은 각각의 데이터에 해당하는 유튜브를 iframe 태그를 이용해 삽입해야하는 상황이다. 하지만 어째서인지, 해당 페이지에서 오류 메세지가 나오는 것을 발견했다. 코드를 살펴보자. 문제상황 부모 컴포넌트에서 youtubeData를
[리액트 마스터 클래스] react-hook-form을 사용한 폼 만들기
아래와 같은 form을 만들고 submit하려면, input 태그와 그에 따른 onChange 이벤트 핸들러, state, errorState를 각각 만들어줘야 한다. react-hook-form을 이용하면 이 모든 것들과 validation은 유지하되, 코드를 효율적
[React]uuid 생성하기
해당 데이터 중 값의 고유된 key를 갖고 싶은때 uuid를 사용하면 된다원하는 데이터 객체의 key 값을 uuid함수를 사용해서 unique 값을 생성한다. 해당 값의 type은 string이므로 지정을 string으로 하면 된다.
TS) infer에 대해서 짧게 알아보자
infer 키워드는 쉽게 말해서, ts 타입 추론에 의한 값을 사용하겠다는 것을 의미한다. 즉, infer R에서 R은 ts가 추론한 타입을 갖는다.ReturnType이라는 유틸리티 타입의 정의를 살펴보자ReturnType은 제네릭으로 (...args: any) =>
gif error - declarations.d.ts 선언 파일
TypeScript는 기본적으로 이미지 파일이나 다른 정적 자원들을 모듈로 인식하지 않습니다. 이를 해결하기 위해 TypeScript에게 이러한 파일들을 어떻게 처리할지 알려주어야 합니다.이 문제를 해결하는 한 가지 방법은 TypeScript 선언 파일(.d.ts)을
TypeScript로 React Router 사용 시 에러 발생
React Router를 이용해 페이지 라우팅 구현 중 main.tsx에서 에러 발생하여 <RouterProvider> 컴포넌트의 자식 요소 제거하여 문제 해결
Electron 무작정 시작하기
Electron을 시작해보려고한다 :)공식 홈페이지에서 빠른 시작을 보다가, npx electorn . 으로 설치하는 줄 알고 꽤나 애를 먹었다 ㅠ일단 무작정 투토리얼부터 보고 따라해보려고한다..!내가 임시로 사용할 디렉토리를 만들고 해당 디렉토리로 이동한다.사용할 디
type alias VS interface : 도대체 뭐를 사용해야 할까?
type alias 와 interface 둘 중 어떤 것을 쓰는게 좋을까? 서론 타입스크립트는 0.8 버전부터 시작해서 굉장히 급속도로 많은 버전들이 나오기 시작했다. 그래서 초창기에는 type alias(type으로 줄여 말하기도 함)와 interface는 많이 달랐고 interface가 할 수 있는 것들이 더 많았다. 그래서 예전부터 배웠던 사람...
[리액트 마스터 클래스] Recoil을 이용한 다크모드 구현
Recoil을 이용해서 리액트 프로젝트에 다크모드를 적용해보려고 한다!🌙 Atom 생성 먼저, atom을 생성하여 테마모드를 저장하는 상태를 만든다. RecoilRoot 설정 App 전체에서 Recoil을 사용할 수 있도록 RecoilRoot로 감싸준다. the
[리액트 마스터 클래스] React Query 사용하여 효율적으로 데이터 관리하기
기존 코드 분석 기존에는 useState와 useEffect를 사용하여 데이터를 가져오고, coins와 loading의 상태를 직접 관리하고 있다. React Query 설정 React Query를 사용하기 위해 먼저 QueryClient를 생성하고, QueryCli
[TS] Element implicitly has an 'any' type because expression of type 'string' can't be used to index.
[TS] Element implicitly has an 'any' type because expression of type 'string' can't be used to index 에러를 해결하자
[TypeScript] as const 의 활용
유니온 타입은 타입스크립트에서 아마 가장 흔히 사용하는 타입중 하나일 것 입니다. 여러 타입을 조합하여 병합된 형태인데 특정 변수가 여러 형태의 타입을 가질 경우 유용하게 사용할 수 있다.특히 Mapped Type을 정의할 때, key 의 타입을 유니온으로 지정하는 경
TypeScript-Factory Pattern with Generics(디자인 패턴)
객체를 생성하는 인터페이스만 미리 정의하고, 인스턴스를 만들 클래스의 결정은 서브 클래스가 내리는 패턴이다.여러 개의 서브 클래스를 가진 슈퍼 클래스가 있을 때, 입력에 따라 하나의 서브 클래스의 인스턴스를 반환한다.이 디자인 패턴은 객체의 생성과정을 캡슐화하여 클라이
TypeScript-제약조건(Constraints/keyof)
제너릭에는 원하지 않는 속성에 접근하는 것을 위해 제약조건을 사용할 수 있다. 1\. Constraints: 특정 타입들로만 동작하는 제너릭 함수를 만들 때 사용한다.keyof: 두 객체를 비교할 때 사용한다.제너릭 T에 제약 조건을 설정할 때 사용한다.(문자열이나
TypeScript-유니온 타입
"|"를 사용해 두개 이상의 타입을 선언하는 방식이다.유니온과 제너릭은 둘다 여러 타입을 다룰 수 있다는 공통점이 있다. 단, 유니온은 선언한 공통된 메소드만 사용할 수 있고, 리턴 값이 하나의 타입이 아닌 선언된 Union 타입으로 지정된다.다음 코드는 유니온 타
Promise.all 타입 정의
Typescript Promise.all 타입 정의에 대한 개인 학습 내용 입니다. 인프런 [리뉴얼] 타입스크립트 올인원 : Part1. 기본 문법편 강의를 참고 하였습니다.
타입스크립트 - 제네릭
Generics 타입을 미리 정의하지 않고 사용하는 시점에 원하는 타입을 정의해서 쓸 수 있는 문법 제네릭 기본 문법 위 예시 코드처럼 괄호 안에 타입을 적는다. 함수의 파라미터의 역할을 유사하게 하기 때문에 만약 지정된 타입과 다른 타입을 넘긴다면 아래와 같은 에