오류 | react-router-dom dynamic route & Link component( = useNavigate or redirect)
2022. 12. 25. 22:01
공부/오류
react-router-dom 라이브러리의 Link 컴포넌트( = useNavigate or redirect)를 사용할때, 작동이 제대로 되지 않는 상황 ❓상황 react-router-dom의 dynamic route를 이용하여 id param을 부여하여 URL을 생성하는 Route를 만들었다. dynamic route가 아닌 정적 route에서 URL이 다를 경우에는 Link 컴포넌트가 잘 작동했지만, id param을 가진 URL에서, 다른 id param을 가진 URL로 이동할때, Link 컴포넌트가 작동하지 않는다. 또한, useNavigate hooks와 redirect 함수도 마찬가지로 작동하지 않는다. 🔎 원인 파악 Route 컴포넌트를 이용하여 같은 컴포넌트를 렌더링 할 경우, React는..
오류 | eslint no-unused-vars
2022. 12. 8. 22:38
공부/오류
'변수명' is defined but never used. eslint(@typescript-eslint/no-unused-vars)' ❓상황 처음 eslint 설정할때, 사용되지 않는 변수명이 있다면 typescript 파일 컴파일시 에러를 띄워주도록 했으나, 불가피하게 사용되지 않는 변수명이 있더라도 에러를 띄우지 않도록 @typescript-eslint/no-unused-vars의 값을 0으로 설정했음에도 에러가 발생했다. 🔎 원인 파악 알고보니 eslint 뿐만아니라, tsconfig.ts 파일에도 사용되지 않는 변수가 있다면 에러를 띄우도록 설정을 했다는 것을 뒤늦게 알게 되었다. ✨ 해결 방법 noUnusedLocals를 false로 변경 noUnusedLocals를 false로 변경하니 오류..
공부 | typescript 유틸리티 타입 정리
2022. 12. 4. 22:43
공부/공통
타입스크립트 유틸리티 타입 정리 ❓상황 타입스크립트 기본 개념 중 하나인 유틸리티 타입 정리 📖 유틸리티 타입이란? 기존의 type alias를 쉽게 변환할 수 있게 도와주는 타입을 뜻한다. 쉽게, 하나의 함수라고 생각하면 편하다. 🧮 정리 Partial : Type 타입의 모든 속성이 옵셔널로 변경된 타입을 반환 : 깊은 접근은 안되어 1차 깊이에만 적용된다. 모든 속성을 옵셔널로 바꾸는 것 보단, 일부 속성만 옵셔널로 바꾸는 때가 많아서, Partial 유틸리티 타입은 잘 사용되지 않는다. type Type = { a: string, b: string } /* type newType = { a?: string | undefined, b?: string | undefined } */ type newTy..
공부 | typescript mapped type 정리
2022. 11. 26. 00:41
공부/공통
타입스크립트 맵드 타입 정리 ❓상황 타입스크립트 기본 개념 중 하나인 mapped type 정리 📖 맵드 타입이란? 기존에 정의되어 있던 타입을, 새로운 타입으로 변환해주는 문법이다. 아래는 변환 예시이다. // 기존 타입 type userType = { name: string, email: string } // 새로운 타입 type newUserType = { name: number, email: number } 🧮 정리 개요 위의 변환 예시를 보면, 기존 타입의 key는 동일하나, value는 달라진것을 알 수 있다. 이것을 변환하는 방법을 이해하기 위해서는 typeof, keyof, in 키워드를 알고 있어야한다. typeof 자바스크립트에 typeof 키워드가 존재하는데, 자바스크립트의 typeo..
공부 | typescript 제네릭 정리
2022. 11. 20. 21:25
공부/공통
타입스크립트 제네릭 정리 ❓상황 타입스크립트 기본 개념 중 하나인 제네릭 정리 📖 제네릭이란? 재사용성이 높은 컴포넌트를 만들 때, 자주 활용되는 기법이다. 특히, 한가지 타입보다는 여러가지 타입이 동작하는 컴포넌트를 만들 때 주로 활용된다. 🧮 정리 기본 문법 제네릭은 변수명 뒤쪽에 꺽쇠()와 타입을 넣으면 된다. 이때, 타입은 string, number가 아닌 제네릭 타입 변수를 넣어준다. 주로 알파벳 T를 사용한다. 그리고 제네릭 타입변수 T를 일반 타입(number, string )처럼 활용하면 된다. 제네릭 함수 만약 함수의 인자가 어떤 타입이 들어올지 몰라 any 타입으로 지정한다면, 함수의 return 타입도 또한 any 타입이다. function foo(name: any): any { re..