이전에 React Query meets React Router라는 글을 읽고 데이터를 효율적으로 가져올 수 있는 방법이라고 생각되어 노션에 정리해 두었는데, 최근 사용자 경험을 개선하는 작업을 하면서 적용해 보았습니다. 이 과정에서 알게 된 내용과 고민했던 지점들을 공유하려고 합니다. Preloading? Prefetching? 필요한 리소스를 미리 다운로드한다는 의미에서 preload와 prefetch가 헷갈릴 수 있다고 생각되어 먼저 알아보겠습니다. 브라우저의 리소스 로드 우선순위 지정 유형 가운데 link 태그의 preload와 prefetch를 살펴보겠습니다. preload는 현재 페이지에서 즉시 필요로 하는 리소스를 우선적으로 가져오는 작업입니다. 이 리소스는 브라우저의 주요 렌더링 절차 이전..
혹시 개발 중에 앱이 에러를 잡지 못해 발생하는 아래의 에러 화면을 보신 적이 있으신가요?위 에러의 내용을 살펴보면 React Router는 더 나은 UX를 위해 ErrorBoudary를 제공할 것을 권장하고 있습니다. 그렇다면 ErrorBoundary는 어떻게 동작하고, 어떤 방식으로 사용하면 좋을까요? 최근에 진행한 개인 프로젝트와 과제에서 더 나은 사용자 경험을 위해 ErrorBoundary를 통한 에러 핸들링을 하는 과정에서 가졌던 의문점과 고민, 그리고 해결 방법을 공유하고자 합니다. 해당 포스팅은 React 공식 문서와 React-Query 공식 블로그를 바탕으로 ErrorBoundary의 역할과 ErrorBoundary가 잡을 수 있는 에러 유형, React Query에서의 에러 핸들링 전략..
문제 https://www.acmicpc.net/problem/16439 16439번: 치킨치킨치킨 첫 번째 줄에 고리 회원의 수 N (1 ≤ N ≤ 30) 과 치킨 종류의 수 M (3 ≤ M ≤ 30) 이 주어집니다. 두 번째 줄부터 N개의 줄에 각 회원의 치킨 선호도가 주어집니다. i+1번째 줄에는 i번째 회원의 선 www.acmicpc.net 풀이 const fs = require("fs"); const filePath = process.platform === "linux" ? "/dev/stdin" : "./input.txt"; let [n, ...arr] = fs.readFileSync(filePath).toString().trim().split("\n"); const [N, M] = n.spl..
Git&Github 실무 활용 완벽 가이드프로젝트를 다른 사람들과 함께 진행할 때는 Git과 GitHub가 필수적입니다. 이 도구들은 여러 기능을 동시에 추가하거나, 다양한 버전의 파일을 관리할 필요가 있을 때 특히 유용합니다. 개발을 처음 시작할 때는 당장 눈앞에 있는 언어나 프레임워크를 익히는 것만으로도 벅찬 경우가 많습니다. 그래서 Git에 관한 강의를 들어도 처음에는 필요성이 와닿지 않을 수 있습니다. 그러다 시간이 지나 막상 프로젝트를 시작하고 나면 GitHub를 사용하면서 발생하는 충돌로 당황스러울 때가 있습니다. 필요할 때마다 자주 쓰이는 명령어들을 검색하여 사용하는 것도 유효한 방법이지만, 이 강의를 수강한 후에는 단순히 명령어를 사용하는 것을 넘어 전체적인 흐름이 이해할 수 있을 것입니다..
문제https://www.acmicpc.net/problem/9205 풀이최대 20병이 들어가는 맥주 한 박스를 들고 출발하여 50m마다 맥주를 한 병씩 마시면서 가야 할 때, 상근이네 집에서 페스티벌에 갈 수 있으면 "happy"를, 그렇지 않으면 "sad"를 출력한다.편의점 개수 + 3(편의점 개수, 상근이 집 좌표, 페스티벌 좌표 입력) 씩 인덱스를 증가시키면서 테스트 케이스를 입력받는다.한 박스에 20병을 넣을 수 있고, 50m마다 맥주 한 병을 마셔야 하기 때문에 최대 이동할 수 있는 거리는 20x50=1000m이다. 따라서 서 맥주를 채울 수 있는 편의점까지 이동할 때, 또는 도착지인 페스티벌 좌표까지 이동할 때 거리가 1000m가 넘어가면 갈 수 없다.편의점을 무조건 순서대로 방문하는 것이 ..
