728x90 반응형 source-code229 useQuery data type 지정하기 (feat. 관심사 분리) 현 서비스에서는 react-query를 통해 서버 데이터를 관리하고 있다. https://tanstack.com/query/v4/docs/react/reference/useQuery useQuery | TanStack Query Docs const { data, tanstack.com get 요청을 통해 받아온 데이터는 useQuery hooks를 통해 관리한다. 이때 해당 useQuery는, useQuery를 반환하는 custom hooks를 작성해 재사용할 수 있도록 했다. // useGetPetDetailQuery.tsx export const useGetPetDetailQuery = ( pet_id: number, ) => useQuery( petQueryKey.detail(pet_id), asy.. 2023. 8. 16. react-query와 error 전파 handling 작년 초 쯤이었을까? api 요청 및 응답 상태 관리를 redux-thunk에서 react-query로 변경해나가기 시작했다. const getBookApi = async () => { const response = await axios.get(URL) return response.data }; const {data} = useQuery('book', getBookApi) 의식의 흐름대로 다음과 같이 썼었는데... 디버깅을 하다보니, 응답에 실패했는데도 아무 곳에서도 에러를 감지할 수가 없었다. 분명 useQuery의 onError 옵션을 통해, 에러 발생을 catch할 수 있다고 되어있는데도! 하지만 곰곰히 생각해보면, 당연한 일이다. 왜? useQuery는 두번째 인자로 넘겨준 queryFn이 반환하.. 2023. 8. 16. KeyboardAvoidingView 관련 troubleshooting 문제 상황 android와 IOS는 같은 속성이라도 다르게 적용되는 값들이 존재한다. 대표적 예시가 keyboard와 관련된 순간! position absolute의 bottom 0인 element의 경우 android에서는 키보드가 올라올 경우 자동적으로 키보드를 제외한 화면 높이를 100%로 계산하지만(adjustResize), IOS는 키보드가 올라오더라도 전체 높이가 조절되지 않는다. 이러한 상황을 해결하기 위해 React Native에서 제공하는 기본 컴포넌트가 → KeyboardAvoidingView 되시겠다. ... 현 앱에서도 KeyboardAvoidingView를 사용해 input이 있는 페이지의 UI를 구성해주고 있었다. 그런데 문제..! bottom 0에 위치하는 absolute한 버.. 2023. 8. 16. Suspense를 통한 Render-as-you-fetch waterfall problem 현 애플리케이션에서 비동기 통신 관련 로직은 다음과 같이 작성되어 있다. const Detail = ({id}) => { const {data, isLoading} = useQuery(fetchDetail) if(isLoading){ return } return } react-query를 통해 비동기 통신을 제어하며, 이 때 해당 요청의 상태에 맞는 UI를 render한다. (로딩 중일 경우 로딩 컴포넌트를, 완료된 경우 해당 데이터를 전달) 여기서 문제점. const Detail = ({id}) => { const {data, isLoading} = useQuery(fetchDetail) if(isLoading){ return } return ( } 위와 같은 상황에서 .. 2023. 8. 16. react-native-webview ↔ web 데이터 송수신 웹으로 구현한 채팅방 페이지를 앱 내부에 띄워주는 상황. import WebView from "react-native-webview"; RN에서 기본적으로 제공하는 WebView 컴포넌트를 통해 앱 내부에서도 WEB_URL에 해당하는 웹페이지를 띄울 수 있다. 여기서 문제. 서비스 대상자인 미용사와 보호자 모두 동일한 WEB_URL로 채팅방에 접속한다는 사실! 따라서 현 사용자가 미용사인지, 보호자인지 구분하는 flag가 필요했다. → 현 도매인 상황을 고려했을 때 앱에서 해당 URL에 접근했을 경우, 이를 미용사로 판단해야했다. 그렇다면... 어떻게 앱에서 WEB_URL에 해당하는 웹페이지에 특정 데이터를 전달할 수 있을까? https://github.com/react-native-webview/rea.. 2023. 8. 16. React Hook Form 기반 유효성 버튼 구현 약 1년이 조금 넘는 기간 동안, 샵 관리 프로그램을 개발했다. 대부분의 데이터가 사용자의 입력을 통해 생성되는 관리 프로그램의 특성상... form과 관련된 로직을 정말로 많이 다뤘다. 온갖 요구 사항, 예외 케이스들과 마주했고, 이를 구현하기 위해 수많은 방법을 탐구했다. https://react-hook-form.com/ Home React hook for form validation without the hassle react-hook-form.com 그리고 내린 결론 → react에서 form 관련 로직을 다룰 때, 이만한 라이브러리는 없다. 유효성 버튼 구현 유효성 버튼이란? → (내 맘대로) 특정 조건이 완료되기 전까지 비활성, 특정 조건 완료 시 활성화 되는 버튼. 필수인 데이터 입력이 완.. 2023. 8. 16. react에서 long press 구현하기 웹에서 long press를 구현할 일이 생겼다. 원했던 기능은 타임 테이블에서 꾹 누르기 + 드래그를 통해 예약하고자 하는 날짜를 지정하는 것! PC에서는 drag만 있어도 해당 기능을 구현할 수 있지만, tablet에서는 스크롤 이벤트와 drag 기능이 중첩되어 의도한 동작이 이뤄지지 않기 때문에... long press를 추가해 이를 해결하고자 했다. 기본적인 long press의 개념은 1. 사용자가 화면을 누른 상태에서, 지정 시간이 지난 후에야, 특정 동작이 수행된다. 2. 지정 시간이 흐르기 전에 사용자가 화면에서 손을 떼면, 특정 동작이 수행되지 않는다. 우선, 화면을 눌렀을 때/손을 땠을 때는 pointer event를 통해 감지할 수 있다! https://ko.javascript.inf.. 2023. 8. 16. Inversion of Control 하루 내내(그리고 지금도) 고민하는 문제. 컴포넌트의 제어권을 어디까지 위임할 것인가! 0부터 시작해 모든 것을 만들어가는 스타트업의 특성 상, 애플리케이션 UI나 기능은 시시각각 변하기 마련이다. 이전에는 이런 변화가 생기면 승질부터 났었다. 유지보수의 어려움을 들며 변경 사항을 (최대한) 막으려 한다던지... 당장 해당 변경사항만을 반영하기 위해 주먹구구식으로 컴포넌트를 작성한다던지... 하지만 클린 아키텍처를 읽은 후 부터, 소프트웨어 개발을 다른 시각으로 바라보게 되었다. → 소프트웨어는 변화에 빠르게 대응하기 위해 존재하는 것! → 수정사항과 변화는 항상 생길 수 있다! 따라서 중요한 건, 해당 변경사항을 빠르고, 안전하게 반영하는 것! 그리고 이를 위한 수단으로... 컴포넌트 제어의 역전에 대.. 2023. 8. 16. Reconciliation (재조정) React의 비교(diffing)알고리즘 why? render = 해당 함수가 처음부터 끝까지 실행되는 것 = React element tree를 만드는 것 state, props가 갱신되면 render()함수는 새로운 React element tree를 반환 React → 가장 효과적인 방법으로 생성된 element tree에 맞는 UI 갱신! 하나의 트리를 다른 트리로 변환하기 위한 최소 연산? → O(n3)… 굉장히 비싼 연산… React는 두 가지 가정에 기반한 O(n) 복잡도의 알고리즘 구현! 서로 다른 타입의 두 엘리먼트는 서로 다른 트리를 만들어낸다. 개발자가 key prop을 통해, 여러 렌더링 사이에서 어떤 자식 엘리먼트가 변경되지 않아야 할지 표시해줄 수 있다. 비교 알고리즘(Diffi.. 2023. 8. 16. 이전 1 ··· 10 11 12 13 14 15 16 ··· 26 다음 728x90 반응형
