s e o p p o r t . l o g

TypeScript 4

스프레드 연산자로 효율적인 리듀서 만들기

상태 관리 리팩토링: 효율적인 리듀서 구현 DB에 정보를 넣기 위해서는 각각의 컴포넌트에서 store로 값을 받아와야 했는데, 기존에는 setClassId, setDateAndTime, setPriceAndQuantity와 같이 각각의 컴포넌트에서 값을 따로 받아와야 했기 때문에 상태 업데이트를 위한 리듀서를 각각 만들었다. setClassId: (classId) => { set((state) => ({ reserveInfo: { ...state.reserveInfo, classId: classId } })); }, setDateAndTime: (date, time) => { set((state) => ({ reserveInfo: { ...state.reserveInfo, reserveDate: date..

Today I Learned 2024.03.29

2024. 03. 21. TIL

'Promise' 형식은 '(searchTerm: string) => void' 형식에 할당할 수 없습니다. 'Promise' 형식에서 '(searchTerm: string): void' 시그니처에 대한 일치하는 항목을 제공하지 않습니다.ts(2322) SearchBox 컴포넌트를 import하여 사용하려고 했는데 타입에러가 떴다. SearchBox에 들어가는 프롭스 타입은 return void 타입으로 아무것도 반환하지 않아야 한다. interface SearchBoxProps { onSearch: (searchTerm: string) => void; } 내가 searchBox에 넣으려는 함수인 filterDatta는 을 return하고 있다. export con..

Today I Learned 2024.03.21

타입스크립트의 제네릭 이해하기

제네릭은 TypeScript에서 코드의 유연성을 높이고 코드 재사용성을 향상시키는 데 사용된다. 이해를 위해 제네릭을 "왜", "어디에", "어떻게" 사용하는지 알아보자. 왜 제네릭을 사용하는가? 유연성: 제네릭을 사용하면 함수, 클래스 또는 인터페이스를 특정 유형에 종속되지 않도록 만들 수 있다. 이는 여러 유형의 데이터를 처리할 수 있게 해준다. 코드의 재사용성 향상 : 동일한 코드를 다양한 유형의 데이터에 적용할 수 있다. => 코드의 재사용성 향상 재사용 가능한 컴포넌트 : 현재의 데이터와 미래의 데이터 모두를 다룰 수 있는 컴포넌트를 생성할 수 있다 => 시스템 구성에 있어 유연성 제공 => 즉, 단일 타입이 아닌 다양한 타입에서 작동하는 컴포넌트를 작성할 수 있다. + any가 아닌 제네릭을 ..

Today I Learned 2024.03.05

2024.03.04 TIL

타입스크립트 컴파일러 타입 검사를 해주는 것이 컴파일러 타입스크립트 컴파일러는 TS -> JS 코드 변환함(C언어는 C => 기계어) 컴파일러를 이해하면 디버깅 과정에 도움이 된다. 컴파일러는 코드를 최적화하여 앱 실행 시간을 단축시킨다. 튜플 튜플은 서로 다른 타입의 원소를 순서에 맞게 가질 수 있는 특수한 형태의 배열 const person: [string, number, boolean[ = ['spartan', 25, true]​ push로 데이터를 추가할 수 있으나 권장되지 않음 enum 열거형 데이터 타입 다양한 상수를 더 이해하기 쉬운 문자열로 접근하고 사용할 수 있게하는 타입 명확하게 관련된 상수 값들을 그룹화할 때 사용하는게 좋다. readonly 클래스의 속성이나 인터페이스의 속성을 변경..

Today I Learned 2024.03.04