이전에 React Query meets React Router라는 글을 읽고 데이터를 효율적으로 가져올 수 있는 방법이라고 생각되어 노션에 정리해 두었는데, 최근 사용자 경험을 개선하는 작업을 하면서 적용해 보았습니다. 이 과정에서 알게 된 내용과 고민했던 지점들을 공유하려고 합니다. Preloading? Prefetching? 필요한 리소스를 미리 다운로드한다는 의미에서 preload와 prefetch가 헷갈릴 수 있다고 생각되어 먼저 알아보겠습니다. 브라우저의 리소스 로드 우선순위 지정 유형 가운데 link 태그의 preload와 prefetch를 살펴보겠습니다. preload는 현재 페이지에서 즉시 필요로 하는 리소스를 우선적으로 가져오는 작업입니다. 이 리소스는 브라우저의 주요 렌더링 절차 이전..
MYCHELIN 프로젝트에서 가게 상세 페이지를 맡아 진행하면서 해당 가게에 대한 댓글과 저장 데이터를 서버에서 받아와 렌더링하고, 추가, 삭제 등의 mutation을 해야 했다. 이때 React Query를 이용해 받아온 데이터를 캐싱해 사용했다. 유저가 해당 가게를 저장하거나 저장을 취소하고, 댓글을 남기거나 삭제했을 때 즉각적인 피드백을 하기 위해 useMutation, setQueryData, 그리고 invalidateQueries를 통한 낙관적 업데이트를 했다. TL;DR useQuery로 고유한 쿼리 키를 사용해 데이터를 캐싱한다. useMutation으로 서버 데이터를 업데이트한다. mutation 이후에 화면을 바로 업데이트할 필요가 없다면 useMutation에 mutationFn을 전달..
프론트엔드 프로젝트에 테스트를 적용하면서 가장 어렵게 느껴진 부분이 어떤 순서로, 무엇을 테스트하면 좋을지에 관한 것이었습니다. 이에 대해 Kent C. Dodds와 Tkdodo님의 블로그를 참고하여 이에 대한 생각을 정리해 보았습니다. 🤔 어떤 순서로, 무엇을 테스트할까? 테스트를 작성하는 목적 가운데 하나는 사용자, 즉 애플리케이션 사용자와 개발자가 애플리케이션을 사용할 때 애플리케이션이 제대로 동작할 것이라는 자신감을 주는 것입니다. 따라서 코드 커버리지 자체보다는 유저가 사용하는 유즈 케이스 모두를 코드가 지원하는지를 생각해보면 좋습니다. 무엇을 테스트하면 좋을까? React에서는 어떠한 유즈 케이스가 있을까요? 크게 아래의 3가지 경우를 생각해 볼 수 있습니다. 라이프사이클 메서드: rerend..
기능 구현이 끝난 후 프론트엔드 성능이 사용자 경험에 영향을 미칠 수 있다는 것을 알고, 서비스의 품질 향상을 위해 LightHouse와 번들 분석기를 이용해 성능 지표를 측정하며 개선하고자 했습니다. LightHouse를 통해 성능을 측정하였을 때, FCP와 LCP 지표가 낮게 나온 것을 확인하였고, 이를 개선하였습니다. 먼저 해당 지표들의 의미를 알아보고, 개선점을 살펴보겠습니다. FCP와 LCP FCP(First Contetnful Paint)는 유저가 페이지에 처음 진입했을 때, 콘텐츠가 처음 렌더되기 시작하는 시점을 뜻합니다. 즉, 페이지 콘텐츠가 모두 렌더 되지 않아도 일부가 렌더 되기 시작했다면, 이 시점을 측정합니다. 이때 콘텐츠는 이미지나 텍스트, 요소, 내용이 있는 요소를 뜻합니다. 이..
문제 : 폰켓몬 https://school.programmers.co.kr/learn/courses/30/lessons/1845?language=javascript 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 풀이 function solution(nums) { // 종류(Set.size)와 nums.length/2 를 비교 // 종류가 더 많거나 같으면 길이 리턴, 아니면 종류 리턴. const types = new Set(nums).size const len = nums.length/2 return len = 0) { completion.splice(..
