분류 전체보기

읽게 된 계기지금 다니고 있는 회사에서는 독서를 매우 권장한다.되도록 많은 구성원들을 독서 문화에 참여시키기 위해 노력한다.심지어 3주가량 되는 온보딩 때 8권을 책을 읽었어야 했다.그 3주 동안은 독서만 하고, 일은 하지 않아도 된다. 아니 일을 안 준다. 그만큼 독서에 진심인 회사이다.어쨌든 우리 회사에서는 매달 두 권씩 책을 읽는 모임이 있는데, 그 모임의 온보딩 도서가 김봉진의 "책 잘 읽는 방법"이다.그 모임에 합류하면서 이 책을 읽어보게 되었다.술술 읽힌다온보딩 도서를 읽으면서 사실 글이 잘 읽히지 않았다.읽었던 문장을 다시 읽고 또 읽고를 반복하면서 내가 집중력에 문제가 있나 의심도 했다.근데 이 책은 좀 달랐다.페이지 상위 50%만 글이 작성되어 있었고 그 아래는 텍스트가 없었다. 또 기분..

전반적으로 관리자는 어떻게 생각하면서 일하는지, 관리당하는 입장에서 어떤 자세를 취해야 하는지 알 수 있었다.책에 있는 많은 내용을 읽으며 요즘 관심이 가는 주제에 대해 드문드문 감상을 적어보았다.내 능력을 넘어서는 일먼저 처리능력을 넘어서는 일은 거부해야 한다는 문장이 와닿았다. 업무에 투입된지 이제 한달째가 되어 가는데, 작업 티켓을 가져갈 때 가장 어려운 일을 하고싶다는 욕심이 생기곤 했다. 이해도가 낮은 지금 그 일을 가져가서 실패한다면 손실이 클것이고, 해결하더라도 시간이 많이 걸릴 것이라고 생각했다. 하지만 반대로 늘 하던, 자신있는 작업만 하지않도록 경계해야겠다.일대일 면담일대일 면담은 상사와 정보 교환을 할 수 있는 중요한 창구이다. 또한 업무를 하면서 생기는 이슈를 솔직하게 터놓을 수 ..

폰트 스타일을 적용한 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..