분류 전체보기

폰트 스타일을 적용한 div 태그로 감싸주자. 원인은 아마 `rem` 계산을 편하게 하기위해 글로벌 `html` 폰트 사이즈를 `10px`로 설정해서 그럴 확률이 높다. 전역 폰트 사이즈를 크게 설정했다면 반대로 커졌을듯..

1. 쿼리 상태와 페치 상태 React Query는 현재 상태를 알려주는 플래그를 제공한다. 내부 상태 머신에서 파생된 여러가지 boolean 플래그 값을 제공하는데, 선언된 타입을 보면 `쿼리`상태, `페치`상태가 각각 3가지씩 존재한다. `쿼리`상태 : 데이터(캐시)에 대한 정보 `success`: 쿼리가 성공했고, 이에 대한 `data`가 쿼리캐시에 설정된다. `error`: 쿼리가 실패했고, `error`가 설정된다. `pending`: 쿼리캐시에 데이터가 없다. `페치`상태: Fn에 대한 정보 `fetching`: `queryFn` 요청이 실행중이고 데이터를 기다리고 있다. `paused`: `queryFn`, `mutationFn` 이 실행중이지 않고 다시 인터넷에 연결될 때 까지 일시중지된 ..

1. 들어가기 현재 React에서 선언적으로 에러처리를 하려면 사용해야 하는 `ErrorBoundary` 컴포넌트를 정리하려고 한다. Class Component로 선언해서 사용하는 법 문서에서 알려주는 라이브러리를 이용해 Function Component로 사용하는 법 두 가지 방법을 알아보자. 근본 원리부터 차근차근 알고 싶다면 1번부터, 지금 바로 적용해야 한다면 2번부터 읽으면 된다. 2. Class Component 방식 에러바운더리를 사용할 때 가장 전통적인 방법이다. 다음은 문서에 나와있는 예시 코드이다. 주석으로 각 메서드 위에 호출 순서를 적어두었다. 간단하게 이런 과정을 거친다. `ErrorBoundary`로 감싸진 자식 컴포넌트에서 에러 발생 (`throw new Error`) `ge..

이 글을 읽고 queryOptions API 글을 읽는 걸 추천합니다1. 들어가기Query Keys는 React Query에서 아주 중요한 핵심 개념이다.`queryKey` 덕분에 라이브러리 내부적으로 데이터를 올바르게 캐싱하고 `queryKey` dependency가 변경될 때 자동으로 refetch 할 수 있다.또한 mutations 후 수동으로 쿼리 무효화(invalidate)를 하기위해 필요하다. 밑줄 친 위 기능들을 하나씩 살펴보고,각 기능을 효과적으로 수행하기 위해 필요한 효율적인 `queryKey` 선언 방법에 대해 알아보자.2. `queryKey` 관련 기능2.1. 데이터 캐싱내부적으로 Query 캐시는 javascript 객체이다.key: 직렬화된 `queryKey` , value: Qu..

1. 들어가기 컨셉비에 합류하고 총 5개의 PR을 머지하며 1차 스프린트를 마무리했다. 그 과정을 간단히 정리하고자한다. 2. 프로젝트 정리 합류했을 당시 프로젝트의 프론트엔드는 초창기 수준이었다. 마크업만 되어있고, api를 비롯한 기능이 붙여지지 않은 상태였다. 제일 먼저 도메인 분석을 하며 고칠 부분들을 정리해보았다. 2.1. 파일 코로케이션 먼저 파일의 배치를 코로케이션으로 적용하면 어떨지 제안했다. 코로케이션이란 어떤 페이지가 있을때 해당 페이지에서 쓰이는 컴포넌트나 훅, 타입 등을 그 페이지 폴더에 선언해두는 방법이다. 즉 가까운데서 쓰이는 것은 가까운데 배치한다로 정도로 받아들이면 된다. 개발자들은 파일을 분리하고 배치하는 것에 스트레스를 받는데, 이렇게 하면 일단 파일을 분리할때 가까운데 ..

1. 들어가기 에러 핸들링은 비동기 작업(데이터 fetch)에서 필수적이다. Request가 항상 성공하는 것이 아니기 떄문이다. React Query가 오류처리를 위해 어떤 옵션을 제공하는지 알아보자. 1.1. 전제조건 React Query가 에러를 핸들링하려면 rejected Promise가 필요하다. axios 라이브러리는 4xx 나 5xx 상태코드에서 rejected Promise를 사용해서 문제가 없겠지만, fetch는 4xx나 5xx에서 rejected Promise를 제공하지 않기 때문에, queryFn에서 직접 변환해야한다. 이 부분은 공식문서에서 찾아볼 수 있다. 2. 기본예시 function TodoList() { const todos = useQuery({ queryKey: ['to..

1. 하루? 하루 우테코를 함께했던 나 이외 2명의 크루를 포함, 3명이서 진행하는 출석부 프로젝트이다. 프로젝트 동기와 기획에 관해서는 다음 글에 잘 정리되어 있다. 출석부 웹 서비스 만들기 — 1. 프로젝트 동기 이번 신년 맞이 기념으로 새로운 프로젝트를 해보려고 한다. 나는 주로 실생활에서 반복적이고 시간이 걸리는 작업을 프로그램으로 해결하는 것을 좋아한다. 물론 프로그램을 만드는데 시간이 echo724.medium.com 출석부 웹 서비스 만들기 — 2.기획 지난번 동기편에 나온 작업 방식을 기반으로 서비스를 기획했다. 사실 처음에는 개발자 나 혼자, 그리고 디자이너 친구와 둘이서 서비스를 제작하려고 했다. 하지만 동기편을 공유하고 나서 같 echo724.medium.com 2. 개발 전 고려사항..

1. 합류 컨셉비 팀에 프론트엔드 개발자로서 중간 합류하게 되었다. 맨날 집에서 칼만 갈고있지 실제로 써먹을 일이 없었어서, 이번 합류는 나에게 되게 긍정적이다. 2. 도메인 분석 팀 합류 전 가장 먼저 해본 일은 레포를 받아 실행하는 일이었다. 팀 합류 결정 이후 기존 멤버에게 대충 구두로 설명을 듣고 초대받은 피그마와 코드를 보며 도메인을 분석했다.(피그마에 많은 정책들이 쓰여 있었다.) 예전 인턴할때도 느꼈지만, 기존에 있는 도메인을 분석하는 일은 꽤 힘든 일이다. 관련 지식이 없다면 더 그럴것이고.. 하지만 이 프로젝트는 전문적인 지식을 요구하는 것이 아니라서 이해하기는 편했다. 3. 어떻게 일을 해나갈까 컨셉비 팀은 생긴 지 꽤 오래되었는데, 개발 쪽에서 아직 성과를 내지 못해 아쉬운 상황인 것..