썬이의 IT세상

react-query의 onError를 사용하거나, Axios로 API를 호출할 때 에러 콜백의 타입은 AxiosError로 선언하게 되는데서버에서 에러코드에 따라 title, msg 등 response를 내려주는 경우에 onError : (error : AxiosError) => { onAddModal(error.reponse.data.msg) //  위와 같이 response를 가져오려고 하면 타입 에러가 생긴다 (컴파일단에서는 당연히 문제가 없지만, 우리는 빨간줄을 혐오하니까) 이럴 때는 간단하게, AxiosError를 상속받는 타입을 선언해주면 된다. interface IErrorDataProps extends AxiosError { data: { message?: string; st..

보통 서버에서 데이터를 받아와서 화면에 뿌려줄 때, 정해진 디자인 형식대로 오지 않아 프론트단에서 수정해야 하는 경우가 생긴다. 예를 들어, temp_dt : 'yyyy-mm-dd' 이런 식으로 들어오는 Date 데이터가 있다고 가정해보자. 서버에서는 yyyy-mm-dd 로 날려주는데 기획 상에서는 yyyy.mm.dd 형식을 원한다면 이 때마다 백엔드 팀에 형식을 고쳐달라고 말하기 애매할 때 (당연히 프론트에서 수정해야죠!) 이를 수정하기 위해 data.temp_dt.replace('-','.') 으로 코딩한다면 결과값은 아래와 같을 것이다. result : 'yyyy.mm-dd' ㅎㅎ.. 문자열 전체를 검증하고 모든 값을 바꾸려고 할때는 replace보다 split과 join을 같이 사용하면 간단히 해..

RN으로 개발하다보면 거의 필수적으로 쓰게되는 ScrollView와 FlatList. 그중 나는 FlatList를 사용하여 스크롤이 있는 UI에 배열로 들어오는 데이터들을 화면에 그려주곤 하는데, RenderItem의 {item}에 타입을 지정해주기가 여간 까다로운게 아니다. 알고보니 이건 인수를 넣는 쪽에 타입을 지정해주려는 나의 습관과 고정관념의 문제였고 RN에서는 RenderItem에 타입을 지정해주는 아주 간단한 Type Props를 제공해준다. import {FlatList, ListRenderItem} from 'react-native'; ... type TRenderItemProps = { a : string; b : number; ... } const RenderItem : ListRend..