My Boundary As Much As I Experienced

무책임한 React Native 팀 녀석들이 flipper를 deprecated시켜버린 다음에 몇 가지 고질적인 문제가 발생한다.xcode는 최신인 상황에서 RN 0.74 출시 이전에 만들어놓은 프로젝트를 실행하면 flipper 관련 에러가 꼭 발생한다는 것이다. 그 결과 flipper가 초기세팅에 기본적으로 들어있던 시절의 프로젝트를 다룰 때podfile에서 flipper 관련 로직을 제거해야되는 지겹고도 시간 아까운 일을 할 수 밖에 없게 만들었다. 그냥 있는거 잘 쓰지 왠 새로운 디버거를 만든답시고 flipper를 deprecated 시킨진 몰겠다.하여튼 flipper를 안 쓰려면 아래처럼 해주면 된다. gpt가 짜준 코드이다. ios/podfile 수정# Resolve react_native_po..

숫자에 세 자리 마다 쉼표를 찍어야 할때가 있다.이럴 때 원래 string으로 만들고, .reverse()하여 세 자리마다 슬라이스해서 ','으로 join()으로 붙이는 함수를 만들어서 썼었는데그냥 toLocaleString()을 하거나 정규표현식을 쓰는게 더 간편하다는 것을 깨달았다. toLocaleString 사용const number = 1234567.89;const formattedNumber = number.toLocaleString();console.log(formattedNumber); // "1,234,567.89"// 옵션 없이 사용 (기본 설정)console.log(number.toLocaleString()); // "1,234,567.89"// 소수점 이하 자릿수 지정console.l..

지금 만드는 토큰 환전 페이지에서 공통 컴포넌트인 Input을 사용해야되는 상황이 있었다.input은 사용자 입력이 올바르지 않을 경우 에러 메시지를 표출한다.이때 인풋의 타입이 NUMBER인지 STRING인지에 따라 에러메시지가 달랐다. 처음에는 이를 아래처럼 유니언 타입으로 설계하였다.message: NUMBER_VALUE | STRING_VALUE;setMessage: (value: NUMBER_VALUE | STRING_VALUE) => void;  유니온 타입의 한계 그런데 위처럼 유니언 타입으로 설계하면 타입스크립트가 항상 다른 타입의 가능성을 경고하게된다.예를 들어 NUMBER_VALUE를 쓸 때 타스가 STRING_VALUE의 가능성을 계~속 경고한다... if (message typeof..

constant객체를 효과적으로 관리하는 방법타입스크립트로 상수 객체를 관리하다보면, 이에 대응하는 타입들이 필요할 때가 있다. 특히 대괄호 접근자 'obj[key]' 형식으로 접근할 때 key가 그냥 string타입이면'string은 KEY1 | KEY2 | KEY3 | ...에 할당할 수 없다'라는 식의융통성 없는 에러 때문에 애먹은 적이 다들 있을 것이다. 옛날에 타입스크립트를 처음 쓸 때는 위 에러를 어떻게 고칠지 몰라 아래처럼 key들을 따로 타입화하여 해결하려했다.그러나 아래 코드는 최선이 아니다. 왜냐하면 CONSTOBJ에 다른 속성이 추가되면ConstObjType과 CONSTOBJ_KEY에도 일일이 한 번 씩 더 써줘야한다는 번거로움이 있기 때문이다.// 초보의 타입스크립트 사용법inter..

백그라운드  고정하는 방법 body { height: 100vh; background-image: url('path/to/your/image.jpg'); background-attachment: fixed; background-size: cover; background-position: center; background-repeat: no-repeat; } background-image: 배경 이미지의 URL을 지정한다.background-attachment: fixed: 배경 이미지를 고정하여 스크롤 시에도 고정하게 만든다.background-size: cover: 배경 이미지가 요소의 전체 크기를 덮도록 조정한다. 이 설정은 이미지가 요소의..

Date 객체는 여러 가지 방법으로 생성할 수 있으며 활용 방법을 알아두면 두고두고 쓸 때가 많다.대충 필요할 때 구글링해서 해결하고 있었는데 한 번 정리해서 장기기억으로 남겨두려고 한다.몰랐던 사용법도 꽤 되는데.. 재밌네  - 현재 날짜와 시간으로 생성:현재의 날짜와 시간을 가진 Date 객체를 생성.let now = new Date();    - 특정 날짜와 시간으로 생성:지정된 날짜와 시간 문자열을 기반으로 Date 객체를 생성.let specificDate = new Date('2024-06-15T12:00:00');   - 연도, 월, 일, 시, 분, 초, 밀리초로 생성:월은 0부터 시작하므로 5는 6월을 의미한다.let detailedDate = new Date(2024, 5, 15, 12,..

이제 그냥 관습적으로 쓰게 된 Axios Instance의 Interceptor..주로 토큰 만료되면 재요청 해주는 기능을 위해 쓴다. Axios Interceptor에 의존하느라전통 방식으로 '토큰 만료 시 재발급 받아 재요청'을 어떻게 구현하는지 고민해보지 않았다.그런데 이번에 듣던 강의에서 위 로직을 전통방식으로 어떻게 구현하는지 경험해봤는데,이참에 둘이 비교해보기로 하였다.   일단 AxiosInstance Interceptor란?Axios 인스턴스는 axios.create()로 생성한, 기본 설정과 인터셉터를 공유하는 Axios 객체이다.이를 통해 애플리케이션 전역에서 일관된 요청 설정을 관리할 수 있다. (모듈화)특히 특정 경로에 대해 토큰을 자동으로 추가하는 등이 대표적인 쓰임새이다.이러한 ..

문제점아래처럼 특정 에러 시 에러 메시지를 표출해주려 했는데타입스크립트가 errorResponse.data의 타입을 추론해내지 못했다. let errorResponse = (error as AxiosError).response; if (errorResponse?.status === 400) { // 'errorResponse.data' is of type 'unknown'.ts(18046) Alert.alert("알림", errorResponse.data.message); dispatch(orderSlice.actions.rejectOrder(item.orderId)); } '뭐 대강 최종 속성인 message는 string이겠지?' 싶어서..

정리해야지 해야지 하면서 안 하고 있던 flex 단축 표기법 공부를 해봤다. 단축 표기되는 속성 목록CSS의 flex 속성은 플렉스 컨테이너에서 플렉스 아이템의 크기와 분포를 정의하는 단축 속성이다.이 속성은 다음과 같은 세 가지 구성 요소를 포함한다. flex-grow: 플렉스 아이템이 컨테이너의 남은 공간을 얼마나 많이 차지할지 결정.flex-shrink: 플렉스 아이템이 컨테이너가 줄어들 때 얼마나 줄어들지 결정.flex-basis: 플렉스 아이템의 기본 크기를 설정.아래처럼 표기된다.flex: [flex-grow] [flex-shrink] [flex-basis];   단축 예시기본값:flex: 0 1 auto;  플렉스 아이템이 남은 모든 공간을 균등하게 차지하게 하려면:flex: 1;이는 fle..

궁금해진 계기어제 백엔드 개발자 분이 주신 데이터를 보고 status, data 부분이 계속 반복된다는걸 깨닫고 ResponseType이란걸 만들어서 재사용하려고 했다.type ResponseType = { status: T, data: ...}  그리고 여느때와 마찬가지로 API함수 안에서 AxiosInstance를 사용해서 호출한 값을 반환하려 했다.그리고 Promise>를 타입지정해주려 했는데res에는 data라는 컬럼이 없다는 에러가 나왔다. export const getAbuserData = async (id: string): Promise> => { if (!id) return false const res = await API.get(`/abuser/${id}`); ..