최근 Context API와 Recoil을 비교하면서 위 주제에 대해 이야기하게 되었다. 이에 대한 의견이 나뉘어서 이에 대해 직접 확인해 보는 시간을 가졌다. 먼저 Context의 개념을 알아보고, 코드를 보면서 상태 변화에 따른 렌더링이 어떻게 발생하는지 알아보자. 그 이후에 useMemo, memo 등을 적용해 보면서 최적화하고, Context가 상태 관리 라이브러리를 대체할 수 있는지 생각해 보자. Context 알아보기 Context란 props drilling: 상위 컴포넌트에서 제공하는 데이터를 하위 컴포넌트로 필요한 위치까지 계속해서 넘기는 것 Context API는 이를 극복하기 위해 등장한 개념이다. 명시적 props 전달 없이도 하위 컴포넌트 모두에서 자유롭게 원하는 값을 사용할 수 ..
이전에 React Query meets React Router라는 글을 읽고 데이터를 효율적으로 가져올 수 있는 방법이라고 생각되어 노션에 정리해 두었는데, 최근 사용자 경험을 개선하는 작업을 하면서 적용해 보았습니다. 이 과정에서 알게 된 내용과 고민했던 지점들을 공유하려고 합니다. Preloading? Prefetching? 필요한 리소스를 미리 다운로드한다는 의미에서 preload와 prefetch가 헷갈릴 수 있다고 생각되어 먼저 알아보겠습니다. 브라우저의 리소스 로드 우선순위 지정 유형 가운데 link 태그의 preload와 prefetch를 살펴보겠습니다. preload는 현재 페이지에서 즉시 필요로 하는 리소스를 우선적으로 가져오는 작업입니다. 이 리소스는 브라우저의 주요 렌더링 절차 이전..
코드 트리는 진단 평가를 기반으로 단계별 학습 가이드를 따라 알고리즘 실력을 증진시킬 수 있는 플랫폼입니다. 이 단계별 가이드 덕분에 처음 알고리즘을 접하거나 평소 해설을 읽어도 이해에 어려움이 있는 경우 큰 도움이 될 수 있습니다. 뿐만 아니라, 제목에서 언급했던 대로 네이버, 카카오, SK 등의 대기업 코테 문항이 유형별로 준비되어 있어 차근차근 따라가면서 유형을 익힐 수 있습니다. 코드 트리를 두 달간 사용해 본 후기를 공유하고자 합니다. 좋았던 점 확실히 실력이 쌓여가는 것을 체감할 수 있다. 이번 한 달간은 구현 능력을 기르기 위해 구현 파트에 집중해서 풀었습니다. 코드 트리 이전에는 백준에서 구현 실버~ 정도를 풀 때도 헤매고 있었다면, 이제 골드 이상을 풀 때 어느 정도 방향에 대한 감이 잡..
지난주 모던 리액트 딥다이브 스터디에서 Next.13에서 도입된 서버 컴포넌트를 소개하였는데, 서버의 부담을 줄여줄 수 있지만 비용이 늘어날 수 있어 서버와 클라이언트 간 작업을 균형 있게 분배 해야 한다는 결론이 나왔습니다. 이에 SSR과 서버 컴포넌트를 효율적으로 도입할 수 있는 방안으로 중간 서버인 CDN의 캐싱을 적절히 활용해 볼 수 있겠다고 생각하였고, 캐시에 대한 전반적인 내용과 CDN에 대해 정리해 보았습니다. 캐시캐시란 데이터나 값을 미리 복사해 놓은 임시 저장소를 뜻합니다. 캐시는 원본 데이터에 접근하는 시간이 오래 걸리거나 값을 다시 계산하는 시간을 절약하고 싶은 경우에 사용할 수 있습니다. 이렇게 캐시에 데이터를 미리 복사해두면 계산이나 접근 시간 없이 빠른 속도로 필요한 데이터에..
혹시 개발 중에 앱이 에러를 잡지 못해 발생하는 아래의 에러 화면을 보신 적이 있으신가요?위 에러의 내용을 살펴보면 React Router는 더 나은 UX를 위해 ErrorBoudary를 제공할 것을 권장하고 있습니다. 그렇다면 ErrorBoundary는 어떻게 동작하고, 어떤 방식으로 사용하면 좋을까요? 최근에 진행한 개인 프로젝트와 과제에서 더 나은 사용자 경험을 위해 ErrorBoundary를 통한 에러 핸들링을 하는 과정에서 가졌던 의문점과 고민, 그리고 해결 방법을 공유하고자 합니다. 해당 포스팅은 React 공식 문서와 React-Query 공식 블로그를 바탕으로 ErrorBoundary의 역할과 ErrorBoundary가 잡을 수 있는 에러 유형, React Query에서의 에러 핸들링 전략..
