Frontend/TypeScript14 [ 타입스크립트(TypeScript) ] Incorrect (variable) is specified more than once, so this usage will be overwritten 에러 해결하기 📍 Incorrect (variable) is specified more than once, so this usage will be overwritten 에러 해결하기 typescript로 작업하다 다음과 같은 오류를 마주했다. 오류가 발생한 원인은 getListHref를 props로 내려준 위치가 잘못되었기 때문인데, 바로 {...props} 앞에 선언했기 때문이다. 하단의 AS-IS코드를 살펴보면 {...props} 앞에 getListHref를 선언했는데, 이것은 의미가 없다. 왜냐하면 ...props로 내려오는 getListHref을 최종적으로 적용하기 때문에 처음에 선언한 getListHref를 항상 override하기 때문이다.이럴 때는 TO-BE 코드처럼 내가 적용하고 싶은 getListHre.. 2022. 12. 28. [ 타입스크립트(TypeScript) ] ComponentProps로 props type 선언하기 📍 ComponentProps로 props type 선언하기 React에서 Component를 작성하다 고차 컴포넌트를 사용하기 위해 상위 단계에서 props를 받고 하위 단계에서 최종적으로 컴포넌트를 return 할 때 props의 타입을 명시해줘야 하는 경우가 있다.(그렇지 않으면 타입스크립트가 props의 타입을 모르기 때문에 컴파일 에러를 일으킨다.) 그럴 때 props의 타입을 전부 가져와서 재 선언하는 것은 번거롭다. 이럴 때 React.ComponentProps를 사용하면 타입을 다시 작성하는 번거로움을 피할 수 있다. React.ComponentProps의 자세한 설명은 다음과 같다. 만약, Ref를 사용하면 ComponentPropsWithRef를 사용하자. /** * NOTE: pref.. 2022. 12. 21. [ 타입스크립트(TypeScript) ] PropsWithChildren으로 children 짧게 작성하기 📍 PropsWithChildren으로 children 짧게 작성하기 React에서 Component를 작성하다 보면 props에 children을 선언하는 경우가 종종 있다. 그런데, 매번 children과 해당 타입을 명시해주는 것은 번거롭지 않은가? 그래서 children의 타입을 따로 명시해주지 않아도 되는 react에서 지원하는 PropsWithChildren문법이 있다. PropsWithChildren은 React.PropsWithChildren로 사용하거나 혹은 import { PropsWithChildren } from 'react'로 사용 할 수 있고 타입은 다음과 같다. type PropsWithChildren = P & { children?: ReactNode | undefined }.. 2022. 9. 23. [ 타입스크립트(TypeScript) ] 핸들러 함수내부에서 중복으로 사용되는 함수 리팩토링하기 📍 핸들러 함수 내부에서 중복으로 사용되는 함수 리팩토링 하기 React로 컴포넌트가 아닌 컴포넌트 내부에서 onClick시 동작하는 handler함수를 만들다 보면, handler 함수 내부에서 사용되는 함수를 조건으로 분기할 때 해당 함수가 중복으로 사용하는 경우가 종종 있다. 이번 포스팅은 애자일 소프트웨어 개발 방법의 하나인 페어 프로그래밍(Pair programming)으로 작업을 하다가 네비게이터(navigator)를 맡고 계신 헤일리가 발견해주신 케이스인데, 조건에 의해 인자 값이 바뀌어도 함수는 동일하게 사용할 때 중복되는 코드를 어떻게 하나로 합쳤는가에 대해 작성해보려 한다. 하단 코드는 리팩토링 전 clickEventHandler 함수의 코드이다. 이 코드로 컴파일하는데 에러는 없지만 .. 2022. 9. 19. [ 타입스크립트(TypeScript) ] query문의 value값에 key값과 동일한 값이 들어가있을 때 📍 query문의 value값에 key값과 동일한 값이 들어가있을 때 본인인증 기능을 구현하던 중 query에 key1=value1&key2=value2값이 추가된 상태로 다른 페이지를 방문하고 마지막에 query문을 변수로 사용하려고 할 때 겪었던 일이다. 당시 URL은 http://localhost:3001/foo/bar?returnUrl=returnUrl=/foo&id=baz와 같았는데 query문을 분석하면 returnUrl=returnUrl=/foo가 한 묶음 id=baz가 한 묶음인 총 2개의 query가 나왔다. 두번째 query값은 별 이상이 없었으나, 첫번째 query가 이상했는데, 바로 첫번째 query의 key값인 returnUrl이 value값에도 들어가있다는 점이었다. 당시 va.. 2022. 7. 12. 이전 1 2 3 다음
