본문 바로가기
728x90
반응형

TypeScript4

TS와 Zode 비교하기 목차 JS를 쓰고 있는 나는 타입 정의를 위해 TS를 사용하고 있다. 근데 팀원 중 한 분이 Zod를 쓰고 싶어하시길래 도대체 장점이 뭐길래? 라는 의문점이 생겨 알아보기 시작했다. 엄격한 유효성 검증을 위해 사용되는 Zod Zod가 TS보다 강력한 이유는 엄격한 유효성 검증을 하기 때문이라고 생각한다. 하지만 그 만큼 TS보다 작성해야하는 코드가 많다는 생각이 들었다. 어떤면에서 볼때는 강력하지만, 또 다른면에서 볼때는 오히려 난잡하다는 느낌이 들었기 때문이다. 하지만 그럼에도 불구하고 TS에 비해 강력하다고 느낀 강점은 아래와 같다. 1. 데이터 스키마, 즉 데이터 구조와 형식을 정의하기 때문에 TS보다 더 강력한 타입 검증이 가능하다. 컴파일 시 스키마에서 정의한 수준의 타입 검사가 발생하기 때문이.. 2024. 1. 17.
[TS] 타입스크립트 문법을 무시하는 법 타입스크립트를 사용할 때 npm으로 설치하는 패키지들의 타입이 정의되지 않는 경우들이 있다. 대부분의 경우 시도하라는 npm i --save-dev @types/패키지명 을 시도하면 해결이 되지만, 그렇지 않은 경우도 다수 있다. 많은 사람들이 사용하지 않는 패키지의 경우 정의가 되어 있지가 않은 듯하다. 이럴 때는 그냥 타입스크립트 문법을 무시해버리는 것이 가장 간단한 해결방법이다. 무시하고 싶은 코드 바로 윗 줄에 // @ts-ignore을 작성해주면 된다. 질문이나 잘못된 점은 댓글로 남겨주세요 :)💖 2023. 2. 28.
[TS-오류] but has no corresponding defaultProps declaration react/require-default-props 아래 사진에서 onClick props를 선택적으로 입력할 수 있도록 ?을 붙여서 작성했었다. 이때 기본 값을 선언해주지 않아 발생된 오류다. 해당 오류를 해결하기 위해서는 아래의 코드처럼 규칙을 warn으로 변경하거나 해당 컴포넌트에게 defaultProps를 지정해줘야 한다. 방법 1(warn으로 변경) // .eslintrc.js "rules": { 'react/require-default-props': 'warn', } 방법2(defaultProps 지정) Button.defaultProps = { onClick: null, } 2023. 2. 14.
[TS-오류] Visible, non-interactive elements with click handlers must have at least one keyboard listener jsx-a11y/click-events-have-key-events div 태그한테 onClick 이벤트를 줘서 생긴 에러였다. div 태그는 non-interactive 한데 onClick은 interactive한 요소라고 에러를 내고 있었다. 그래서 div 태그한테 role=”none”라는 속성을 줬다. 그랬더니 오류는 사라졌다. 여기서 role=”none”은 적용된 요소의 기본 의미 체계와 필수 하위 요소를 제거해주는 속성이다. 2023. 2. 14.
728x90
반응형