본문 바로가기

전체 글34

React Query v5에서 에러처리하기 똑똑한개발자 내부 코드리뷰의 외부 공개용 재정리 파일입니다. @24.05.16이후 후속코드까지 포함되어 내용이 추가되었습니다. @24.06.25 React Query 4이전까지는 useQuery 내부에서 onError라는 Props를 제공했습니다.그러나 캐싱관련 문제를 해결하지 못하고, 결국 v5 이후로는 useQuery의 onError는 deprecated 되었습니다.자세한 사항은 아래 번역본 을 참고해주세요. 아무튼, onError는 없어졌지만 에러처리는 하지 않을 수 없기 떄문에 권장하는 qeuryCache를 이용한 방법으로 새로 에러처리를 적용했습니다.이렇게 한번 적용해 놓으니 기본 에러부터 커스텀 에러까지 더 좋은 DX를 보장받을 수 있었습니다. 0. 공통 에러 핸들링 함수 작성우선 v4부터 현.. 2024. 10. 1.
전역으로 로딩처리하기 똑똑한개발자 내부 코드리뷰의 외부 공개용 재정리 파일입니다. @24.02.20 개발을 진행할수록 로딩처리를 챙기게 되고, 또 관리 방법에 대해 고민이 많아집니다.여러 방법이 있지만 DX와 속도 향상을 위해 전역 로딩도 종종 쓰곤 했는데요,이전에 처리했던 두가지 방법을 소개합니다. 1. isMutating과  전역 로딩 컴포넌트로 처리하기import React from 'react';import { StyleSheet } from 'react-native';import { Box, Spinner } from 'native-base';import { QUERY_KEY } from '@constants/query-keys';import { useIsFetching, useIsMutating } from '@t.. 2024. 10. 1.
Utils 폴더 정리하기 똑똑한개발자 내부 코드리뷰의 외부 공개용 재정리 파일입니다. @23.12.14 코드 재사용성을 위해 공통 로직을 분리합니다. 이를 utils 폴더에 모아놓고 추후 사용하게 되는데,프로젝트 진행기간이 길어질수록 재사용을 위해  분리한 코드들이 어지럽게 나열되어 사용하기 더 어려울 때가 많았습니다. 그래서 이번엔 기존 보일러플레이트의 폴더 구조와는 다른 규칙을 적용하여 폴더를 정리해봤습니다.다른 분들의 의견이 궁금합니다. 0. 이전 구조의 유틸파일 살펴보기 보일러 플레이트에 적용되어있던 로직과 추가된 로직들이 어지럽게 섞여있어, 매우 복잡하게 느꼈습니다.그래서 이를 해소하기 위해 다음과 같은 순서로 진행되었습니다 1. 기존 로직과 분리하기기존 보일러플레이트에는 여러 유틸 함수들이 존재합니다.나름의 규칙을 갖.. 2024. 10. 1.
Mock Mutate로 API 연동시 코드수정 줄이기 똑똑한개발자 내부 코드리뷰의 외부 공개용 재정리 파일입니다. @23.10.11 이전에 한글코딩(링크넣자)으로 서버 API가 늦게 나왔을 때 퍼블리싱 단계에서 고민이 일부 해결되었지만, 또 다른 문제가 생겼습니다.저는 보통 퍼블리싱 단계에서도 API 통신 부분을 제외하고는 각 컴포넌트의 상태 설계와 로직을 대부분 구현해 놓습니다. 단순히 레이아웃과 스타일링만 하는 것 보다 시간은 더 걸리지만 이렇게 했을 때 API연결시 고려할 부분이 확 줄어들기도 하고,디자이너나 PM 분들께 미리 전달하여 기획 요구사항이 명확하게 구현되었는지도 미리 피드백을 받을 수 있습니다. 그러나 실제로 API를 붙여보니 예상보다 API 연결 시간이 훨씬 더 소요되었습니다.이유는 React Query 사용으로 인해 코드 구조가 대부분.. 2024. 10. 1.
컴포넌트를 Props로 넘길 때, Props 제어 따로하기 똑똑한개발자 내부 코드리뷰의 외부 공개용 재정리 파일입니다. @23.10.11 Icon + Title 로 이루어진, 비슷한 형태의 UI 코드를 작성할 때 종종 배열로 작성합니다.이전까지 저와 팀원 분들의 코드에서 아래와 같은 코드를 종종 볼 수 있었습니다.const iconList = [ { label: '검색', icon: , }, { label: '선물하기', icon: , }, { label: '내정보', icon: , },];  실제로 사용할 때에는 문제가 없는 코드이지만, 같은 Style Props가 중복되었습니다.또한 상수로 배열을 분리했을때, 상태를 전달받기 어렵다는 단점도 있었습니다. 때문에 아래와 같은 방식으로 리팩토링이 가능했습니다.const .. 2024. 10. 1.
한글코딩 활용하기 (feat. MOCK) 똑똑한개발자 내부 코드리뷰의 외부 공개용 재정리 파일입니다. @23.08.18  개발을 시작할 때 부터 한글 코딩에 관심이 있었으나, 개발 문화의 생태계에서 꺼리는 환경 때문에 잘 사용하지 못했었습니다.그러나 이전에 토스에서 공개한 세종대왕 프로젝트에 힘입어서버 개발이 클라이언트 개발보다 한참 늦게 진행되어야 했던 이번 프로젝트를 기점으로 적극적으로 아래와 같은 한글 코딩을 적용했습니다. 여러 실험 결과 가장 적절한 사용법은 퍼블리싱시 더미 데이터(MOCK) 구성 단계에서는 한글 코딩의  활용이었습니다.예시는 아래와 같습니다.const MOCK = { 유저: { 사번: 'k00123', 부서: '개발팀', 소속팀: 'FE', 성명: '홍길동', }, } interface User.. 2024. 10. 1.

티스토리툴바