Ella 프론트엔드일지

0. 글을 쓴 이유(문제 원인) react-hook-form 라이브러리와 타입스크립트를 적용해서 아래와 같은 회원가입 창을 만드는 중이었다. 입력값이 내가 설정한 정규표현식에 안맞을 경우, 아래와 같이 에러 메세지를 띄우기로 했다. 하지만, 아래와 같이 타입스크립트 에러가 났다. 에러메세지 : React 컴포넌트에서 전달된 props의 타입이 일치하지 않을 때 발생한다. 라는 스타일 컴포넌트 안에는 같은 종류의 타입인 ReactNode가 들어가야한다. 하지만, errors 는 FieldErrors 타입이다. FieldError와 ReactNode와 타입이 일치하지 않아서 생긴 오류다. FieldError는 react-hook-form 에서 생성된 오브젝트이며, ReactNode는 React에서 렌더링 되..

0. 글을 쓴 계기 - 오픈마켓 프로젝트를 하던 중, 아래와 같이 객체를 원소로 가지고 있는 배열을 타입 지정할 일이 생겼다. 저 OPTIONS 상수를 SelectPhoneBox 에 props로 내려줘야해서 props 에 타입을 지정해야하는 일이 생겼다. interface 로 객체타입 지정은 많이 해봤는데 배열안에 객체라... 1. 배열 안 객체 타입 지정 방법 - interface 로 선언하는 방법 1단계 : {value:'010' , name : '010'} 의 객체만 나타낼 수 있는 interface를 생성한다. 2단계 : OPTIONS 전체를 나타낼 수있는 interface를 생성하고 ObjectProps 를 불러와서 뒤에 [] 배열 표시를 해준다. 3단계 : props 옆에 붙여주면 된다. 2...

✅에러원인 - 공통 버튼 컴포넌트를 만들고 있었다. theme.tsx 에서 colors를 props 로 받아오는 걸로 설정했는데 아래와 같이 에러가 생겼다. 에러메세지 : Type 'undefined' cannot be used as an index type. index 타입에는 undefined가 들어갈수 없다는 것이었다. interface ButtonProps에서 color 부분이 ? 옵션으로 설정되어있어서 string | undefined 로 인식될 것이다. ✅에러 해결 - 따라서, undefined 값을 처리해주는 Narrowing 기법을 삼항연산자로 표시했다. const colorStyles = css` /* 색상 */ ${({ theme, color }) => { const selected =..

✅경축 🏌️25시간만에 에러 해결 ㅠㅠㅠㅠ 타입스크립트 + 리액트 프로젝트를 하던 중 버튼 공통컴포넌트를 만들면서 타입스크립트에서 에러가 났다... 타입스크립트를 안썼다면 금방 만들었을 버튼...25시간만에 에러를 해결해서 너무 행복하다😂 1) 해결한 에러 메세지 Type 'undefined' cannot be used as an index type. 2) 원인 인덱스 시그니처(Object[key]) 형태로 객체 접근 시 에러 ✅에러 해결 과정 지난 시간에(아래 블로그 참고) 버튼 컴포넌트를 만들었다. https://ella951230.tistory.com/entry/%EB%A6%AC%EC%95%A1%ED%8A%B8-%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%..

✅as const 설명 첫번째 예시 아래처럼 person 이라는 객체를 만들었다. 그리고 myFunc라는 함수의 매개변수로 '선은혜' 라고 리터럴 타입을 지정해주었다. myFunc에 person.name을 매개변수로 넣어줬는데 에러가 났다.. 왜일까? 에러메세지 : Argument of type 'string' is not assignable to parameter of type '"선은혜"' person.name 은 string 타입이라는 것이다. 즉 '선은혜' 리터럴 타입이 아니고, string 타입이라는 것이다. person 객체의 name 키에 마우스를 가져다 보면 (property) name: string 라고 나온다. 즉, 엄격한 리터럴 타입이 아니라 넓은 개념의 string 타입이기에 타입 ..

✅ 타입 선언 // 타입스크립트는 변수, 매개변수, 리턴값에 타입을 붙이는 것이다. const a: string = "5"; const b: number = 5; const c: boolean = true; const d: undefined = undefined; const e: null = null; const f: any = "123"; // 아무타입이나 다 된다. any를 쓰면 자바스크립트가 되버림. any가 없어야함. 타입스크립트에서 any라는 걸 없애버리면됨 // 정확한 원시값 타입도 지정 가능하다 const g: true = true; // true만 값으로 할당할거야. const h: 5 = 5; // 숫자로 5만 값으로 할당할거야 const i: "고정원시값" = "고정원시값"; //con..