혹시 개발 중에 앱이 에러를 잡지 못해 발생하는 아래의 에러 화면을 보신 적이 있으신가요?위 에러의 내용을 살펴보면 React Router는 더 나은 UX를 위해 ErrorBoudary를 제공할 것을 권장하고 있습니다. 그렇다면 ErrorBoundary는 어떻게 동작하고, 어떤 방식으로 사용하면 좋을까요? 최근에 진행한 개인 프로젝트와 과제에서 더 나은 사용자 경험을 위해 ErrorBoundary를 통한 에러 핸들링을 하는 과정에서 가졌던 의문점과 고민, 그리고 해결 방법을 공유하고자 합니다. 해당 포스팅은 React 공식 문서와 React-Query 공식 블로그를 바탕으로 ErrorBoundary의 역할과 ErrorBoundary가 잡을 수 있는 에러 유형, React Query에서의 에러 핸들링 전략..
면접에서 과제에 대해 위와 같은 질문을 받았는데, TypeScript에서는 enum 사용을 자제해야한다는 것만 어렴풋이 알고 있어서 정확히 대답하지 못했다. 이에 대해 공부하고 코드에 적용해보는 시간을 가졌다. TypeScript에서 상수를 선언하는 방법에는 1. enum 2. const enum 3. as const가 있다. 세 가지 모두 값에 의미 있는 이름을 부여할 수 있다는 장점이 있다. 즉, 상수를 구체적으로 설명할 수 있는 값을 부여할 수 있다. enum 장점 [숫자형 enum] key-value 양방향 mapping이 가능하다. 연관된 값들의 집합을 하나로 묶어 접근 가능하다. [숫자형 enum이 아닌 경우] 값과 타입 모두 사용 가능해 Object.keys, Object.values를 사용..
시맨틱 태그란? 프로그래밍에서 시맨틱은 코드의 의미를 나타낸다. HTML의 시맨택 태그는 태그만 보고도 역할이나 위치를 알 수 있도록 만든 태그이다. 예를 들어, 은 페이지에서 최상위 제목인 텍스트를 의미한다. HTML은 채워질 데이터를 나타내야 하고, 보이는 것은 CSS의 역할이다. 시맨틱 태그의 이점 검색 엔진 최적화(SEO): 검색 엔진이 웹 사이트 크롤링 시 시맨틱 마크업을 통해 정확한 구조를 분석해 페이지의 검색 랭킹에 영향을 줄 수 있다. 시각 장애가 있는 사용자가 스크린 리더로 페이지를 탐색할 때 시맨틱 마크업을 이용할 수 있다. HTML 문서의 가독성과 유지보수가 쉬워진다. 시맨틱 태그 종류 시맨틱 태그 설명 제목, 로고, 검색 폼, 작성자 이름 등이 요소를 포함하는 페이지 영역. 현재 페..
문제점 가게 상세 페이지에서 해당 가게에 대한 댓글을 렌더링할 때 페이지네이션을 통해 5개씩 가져오도록 구현해야 했다. 댓글 페이지네이션은 queryKey에 현재 페이지를 넣어 새로운 페이지 버튼을 클릭할 때마다 데이터를 fetching하는 방법으로 진행했다. 이 과정에서 페이지 버튼 클릭 시, 새로운 데이터를 가져올 때마다 화면이 깜빡거리는 문제가 발생하였다. 처음에는 전체 댓글 영역이 고정되어 있지 않아 댓글 데이터를 로드하는 중에 화면에 영역이 표시되지 않아서 발생하는 문제라고 생각했다. 따라서 스켈레톤 UI를 먼저 표시하고, 데이터 로드가 완료되면 댓글이 렌더링되도록 했지만 해결되지 않았다. 이후 react query 공식 문서의 Paginated Queries 관련 내용을 읽고, 다음과 같은 원..
쿼리 키는 리액트 쿼리를 사용하는 데 핵심적 역할을 한다. 이 쿼리 키를 잘 이해하지 못하고 사용하면, 캐시를 업데이트하거나, 필요한 캐시를 가져오는 게 내 마음 같지 않다.. 분명히 getQueryData를 하는데 계속 undefined가 출력된다거나 invalidateQueries를 했는데 화면이 원하는대로 업데이트되지 않는다면 쿼리 키를 잘못 사용하고 있을 가능성이 크다. 좌절하지 말고 하나씩 확인해보고 이해가 안 되면 아래를 읽어보자 ! 확인할 사항 쿼리 키를 사용하여 직접적으로 쿼리 캐시에 접근하는 메서드(invalidateQueries, setQueryData, getQueryData 등) 사용 시, useQuery로 받아온 데이터를 캐싱하고 있나요? 변하는 값에 따라 refetch해야 하는 ..
MYCHELIN 프로젝트에서 가게 상세 페이지를 맡아 진행하면서 해당 가게에 대한 댓글과 저장 데이터를 서버에서 받아와 렌더링하고, 추가, 삭제 등의 mutation을 해야 했다. 이때 React Query를 이용해 받아온 데이터를 캐싱해 사용했다. 유저가 해당 가게를 저장하거나 저장을 취소하고, 댓글을 남기거나 삭제했을 때 즉각적인 피드백을 하기 위해 useMutation, setQueryData, 그리고 invalidateQueries를 통한 낙관적 업데이트를 했다. TL;DR useQuery로 고유한 쿼리 키를 사용해 데이터를 캐싱한다. useMutation으로 서버 데이터를 업데이트한다. mutation 이후에 화면을 바로 업데이트할 필요가 없다면 useMutation에 mutationFn을 전달..
mutation이란 ? 일반적으로 mutation은 부수 효과(side effect)가 있는 함수를 말한다. 예를 들어, 배열의 push 메서드는 원본 배열을 변경하는 부수효과가 있는 함수이다. 같은 맥락에서 React Query의 useMutation은 서버에 부수 효과(side effect)를 일으킨다. 데이터 추가, 삭제 또는 유저의 로그인 모두 이 경우에 해당한다. useQuery와 useMutation useQuery와 useMutation을 처음 보면 어떤 상황에서 사용해야 하나 헷갈릴 수 있다. useQuery는 GET 요청과, useMutation은 POST, PATCH, DELETE 요청과 유사하다고 생각하면 된다. 언제 사용하면 될까? useQuery는 고유한 쿼리 키를 기반으로 서버에..
자바스크립트에서 배열을 정렬할 때는 보통 sort() 메서드를 활용한다. sort는 원본 배열을 직접 변경하며 정렬된 원본 배열을 반환한다. Array.prototype.sort(compareFn?: (a: T, b: T) => number): this 즉, 배열.sort([비교함수])의 형태로 사용한다. 비교함수는 보통 요소를 비교해 1, 0, -1을 반환하는 함수이다. 양수를 반환하는 경우 두 요소의 순서를 변경하고, 음수나 0을 반환하면 순서를 유지한다. 두 가지 이상의 기준으로 sort할 때 동일한 값으로 판단되는 0은 유용하다. 0인 경우 다른 값을 기준으로 다시 비교할 수 있기 때문이다. MDN에 나와 있는 sort의 compareFn 정렬 기준에서 확인할 수 있다. 따라서, 오름차순의 경우 ..
