전체 글

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. 어떻게 일을 해나갈까 컨셉비 팀은 생긴 지 꽤 오래되었는데, 개발 쪽에서 아직 성과를 내지 못해 아쉬운 상황인 것..

1. 서론 서버에서 데이터를 불러오기까지 보여줘야 할 대체 UI로 Skeleton을 가끔 사용하곤 한다. 그럴 때마다 그저 다른 사람의 코드를 긁어오곤 했는데, 직접 만들어보며 Skeleton에 주로 쓰이는 css 속성을 학습하고자 한다. Skeleton을 만들 때 사용하는 핵심 css 속성은 다음과 같다. background: 배경색 linear-gradient: 색상을 그러데이션으로 만든다. background-size: 배경의 크기를 조절한다. background-position: 배경의 위치를 조절한다. animation: 애니메이션을 정의한다. keyframes: 애니매이션 시작점과 끝점의 css 속성을 정의하고, 이를 부드럽게 연결시켜 준다. background-position을 이용해 배경을..

1. 들어가기 Form은 회원가입, 개인정보수정 등 데이터를 업데이트해야 하는 상황에서 자주 쓰인다. 데이터를 가져오는 것(Query), 수정하는 것(Mutation)를 편하게 하기 위해 React Query를 사용한다면, Form과의 통합은 피할 수 없다. 데이터를 변경하고 싶을 때 서버 상태와 클라이언트 상태의 경계가 약간 모호해지기 시작하고, 여기서 복잡하다고 느낄 수 있다. 2. 서버 상태와 클라이언트 상태 비교 서버 상태는 클라이언트가 소유하지 않은 상태로, 비동기 스냅샷 데이터이다. 여기서 비동기는 서버와 통신을 해야 한다는 의미이고, 스냅샷은 서버로부터 응답을 받은 그 시점의 데이터를 의미한다. 클라이언트 상태는 프론트엔드가 모든 권한을 가지고 있고, 동기 정확 데이터이다. useState를..