🐠 FrontEnd/JS & TS 13
tanstackQuery에서 useQuery, useMutation 타입 지정하기
React Query는 서버 상태 관리를 간단하고 효율적으로 할 수 있게 해주는 강력한 라이브러리이다React Query는 제네릭 타입 형식으로 지원하고 있다 그래서 제네릭을 잘 사용한다면 타입을 보장 받으면서 편리하게 데이터를 다룰 수 있다 ! 타입 지정을 안하면, 대부분 unknown, any 타입을 사용하고 있기 때문에 명시적으로 타입을 지정해서 비동기 상태의 타입 안정성을 확보하자 useQueryuseQuery 타입은 아래와 같다export function useQuery TQueryFnData , TError queryFn의 리턴값const { data, error } = useQuery(['todo'], getTodo);// data = number | undefined// error = Ax..
2024. 7. 23.
[TS] type과 interface 차이와 index signature
타입스크립트에서 타입을 지정하는 방식에는 2가지가 있다type과 interface를 비교해보자 interface- 확장(extends), (다중)상속이 가능하다- 동일한 이름을 여러번 사용 가능(= 하나로 병합) props를 정의할 때 사용한다interface A { a: string;}interface B { b: string;}interface C extends A, B { c: string;}const example: C = { a: "a", b: "b", c: "c"};interface Car { drive(): void; // 메소드 wheels: number;}interface Boat { sail(): void; sails: number..
2024. 7. 3.
비슷해서 헷갈리는 Rest 파라미터, spread 연산자
function Input({ label, ...props }: InputProps) { return ;} 예시 코드는 props를 받아서 label 속성을 제외하고, 나머지 속성을 props객체로 받아서 input 태그에 전달해 주는 코드이다 리액트에서 컴포넌트는 하나의 객체 (props)를 매개변수로 받기 때문에 구조분해로 가져올 수 있다 매개변수에 사용된 것은 rest 연산자매개변수를 input 태그에 전달하는 spread 연산자이다 생긴 게 비슷하고, 이름을 원하는대로 지을 수 있어서 헷갈리는 개념인 것 같다 Rest 파라미터 (나머지 매개변수)나머지 매개변수들을 하나(배열)로 모으는 역할주로 함수 매개변수, 배열 구조 분해, 객체 구조 분해에서 사용된다. 1. 함수 매개변수 = 매개변수를 ..
2024. 7. 2.
고유 식별자를 생성하는 uuid와 crypto.randomUUID
고유한 id가 필요할 땐 항상 uuid나 Date.now를 사용했었는데 다른 사람의 코드를 보고 crypto.randomUUID라는 것을 알게되었다.둘의 사용법과 특징에 대해 정리해보자 uuiduuid란 범용적으로 사용되는 고유 식별자이다. (UUIDs, Universally Unique Identifier) 우리가 많이 쓰는 uuid라이브러리는 UUID 정의와 같은 이름의 라이브러리이다.uuid는 다양한 버전이 있는데, 보통 무작위로 생성되는 Verson 4를 사용한다.import { v4 as uuidv4 } from 'uuid';console.log(uuidv4()); // '9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d' crypto.randomUUIDcrypto.randomU..
2024. 5. 28.
JS 클래스를 사용해 고정 배열 만들기
export class FixedArray { #arrayLength; // 배열 초기화 시 길이 #array; #currentLength; // 할당된 요소 개수 // #arrayLength와 #array를 알맞게 초기화 // 생성자 파라미터에는 FixedArray의 고정된 길이를 받아야됨. // #array초기화 시 각요소의 값은 undefined constructor(num) { this.#array = []; this.#arrayLength = num; this.#currentLength = 0; for (let i = 0; i 0) { tmp = this.#array[this.#curre..
2024. 5. 21.
자바스크립트에서 모듈 내보내기(export)와 다시 내보내기(re-exporting)
모듈(Module)- 기능 단위로 분리한 코드 조각- 캡슐화- script에서 type=module을 쓴다면, 자동으로 strict mode가 적용된다 (즉 모듈만의 스코프를 만들게 된다)export는 모듈에서 명시적으로 외부에 공개하는 식별자에 사용하는 키워드이다import는 export한 값들을 자신의 모듈 스코프로 가져오는 것을 의미한다 named export (이름이 있는 내보내기)named export는 하나의 모듈에서 여러값을 내보낼 때 사용한다그렇기 때문에 각각의 이름으로 export 하고,import 시 {중괄호}를 사용해서 export한 이름을 그대로 사용해야 가져와야 한다 만약 다른 이름으로 가져오려면 as 를 사용해서 재정의 한다 그러니 익명으로 export가 안된다 export는 2..
2024. 5. 17.
