이전에 React Query meets React Router라는 글을 읽고 데이터를 효율적으로 가져올 수 있는 방법이라고 생각되어 노션에 정리해 두었는데, 최근 사용자 경험을 개선하는 작업을 하면서 적용해 보았습니다. 이 과정에서 알게 된 내용과 고민했던 지점들을 공유하려고 합니다. Preloading? Prefetching? 필요한 리소스를 미리 다운로드한다는 의미에서 preload와 prefetch가 헷갈릴 수 있다고 생각되어 먼저 알아보겠습니다. 브라우저의 리소스 로드 우선순위 지정 유형 가운데 link 태그의 preload와 prefetch를 살펴보겠습니다. preload는 현재 페이지에서 즉시 필요로 하는 리소스를 우선적으로 가져오는 작업입니다. 이 리소스는 브라우저의 주요 렌더링 절차 이전..
최근 Context API와 Recoil을 비교하면서 위 주제에 대해 이야기하게 되었다. 이에 대한 의견이 나뉘어서 이에 대해 직접 확인해 보는 시간을 가졌다. 먼저 Context의 개념을 알아보고, 코드를 보면서 상태 변화에 따른 렌더링이 어떻게 발생하는지 알아보자. 그 이후에 useMemo, memo 등을 적용해 보면서 최적화하고, Context가 상태 관리 라이브러리를 대체할 수 있는지 생각해 보자. Context 알아보기 Context란 props drilling: 상위 컴포넌트에서 제공하는 데이터를 하위 컴포넌트로 필요한 위치까지 계속해서 넘기는 것 Context API는 이를 극복하기 위해 등장한 개념이다. 명시적 props 전달 없이도 하위 컴포넌트 모두에서 자유롭게 원하는 값을 사용할 수 ..
들어가며 기업 과제에서 필수 요구 사항이었던 테스트에 어려움을 겪고, 글또에서 진행하는 TDD 스터디에 참여하면서 프로젝트 환경에 따른 Jest 설정에 대해 공부하였습니다. 이 과정에서 그동안 대략적으로만 알고 사용했던 Vite, TypeSciprt, ESlint의 환경 설정과 새롭게 알게 된 Jest, React Testing Library(이하 RTL) 관련 설정을 전체적으로 살펴 보고 이해하는 시간을 가졌습니다. 이를 통해 ESM과 CJS의 차이를 이해하고, 설치하는 패키지 간 의존성과 버전 호환의 중요성을 깨닫게 되었습니다. 해당 포스팅에서는 [1편]에서 먼저 각 패키지를 설정할 때 알아두면 유용한 점들과 주의할 점들을 살펴 보고, [2편]에서 패키지 간 의존성과 패키지 버전 및 설정 파일 문제로..
문제 다음과 같이 여러 단위의 동전들이 주어져 있을때 거스름돈을 가장 적은 수의 동전으로 교환 해주려면 어떻게 주면 되는가? 각 단위의 동전은 무한정 쓸 수 있다. 풀이 function solution(m, coin) { let dy = Array.from({ length: m + 1 }, () => 1000); // 가장 작은 동전으로 금액 m 만들 때보다 크게 설정 dy[0] = 0; // 각 동전을 사용할 경우 for (let i = 0; i < coin.length; i++) { // 해당 동전 사용 시 금액마다 필요한 동전 개수 세기 for (let j = coin[i]; j
문제 현수네 반 선생님은 반 학생들의 수학점수를 향상시키기 위해 멘토링 시스템을 만들려고 합니 다. 멘토링은 멘토(도와주는 학생)와 멘티(도움을 받는 학생)가 한 짝이 되어 멘토가 멘티의 수학공부를 도와주는 것입니다. 선생님은 M번의 수학테스트 등수를 가지고 멘토와 멘티를 정합니다. 만약 A학생이 멘토이고, B학생이 멘티가 되는 짝이 되었다면, A학생은 M번의 수학테스트에서 모두 B학생보다 등수가 앞서야 합니다. M번의 수학성적이 주어지면 멘토와 멘티가 되는 짝을 만들 수 있는 경우가 총 몇 가지 인지 출력하는 프로그램을 작성하세요. 풀이 // 학생들이 각각 멘토, 멘티가 될 수 있는지 확인 ex) (1, 2) (3, 4) function solution(arr) { const N = arr[0].len..
