이전에 React Query meets React Router라는 글을 읽고 데이터를 효율적으로 가져올 수 있는 방법이라고 생각되어 노션에 정리해 두었는데, 최근 사용자 경험을 개선하는 작업을 하면서 적용해 보았습니다. 이 과정에서 알게 된 내용과 고민했던 지점들을 공유하려고 합니다. Preloading? Prefetching? 필요한 리소스를 미리 다운로드한다는 의미에서 preload와 prefetch가 헷갈릴 수 있다고 생각되어 먼저 알아보겠습니다. 브라우저의 리소스 로드 우선순위 지정 유형 가운데 link 태그의 preload와 prefetch를 살펴보겠습니다. preload는 현재 페이지에서 즉시 필요로 하는 리소스를 우선적으로 가져오는 작업입니다. 이 리소스는 브라우저의 주요 렌더링 절차 이전..
문제 https://www.acmicpc.net/problem/10798 10798번: 세로읽기 총 다섯줄의 입력이 주어진다. 각 줄에는 최소 1개, 최대 15개의 글자들이 빈칸 없이 연속으로 주어진다. 주어지는 글자는 영어 대문자 ‘A’부터 ‘Z’, 영어 소문자 ‘a’부터 ‘z’, 숫자 ‘0’ www.acmicpc.net 풀이 const input = require("fs") .readFileSync("/dev/stdin") .toString() .trim() .split("\n"); const maxLength = Math.max(...input.map(row => row.length)); let vertical = ""; for (let i = 0; i < maxLength; i++) { for (..
크롬 개발자 도구 사용 중에 실수로 불편을 겪을 수 있는 문제라고 생각되어 공유하게 되었습니다. 문제 상황 리액트 애플리케이션이 잘 동작하는데 리로드만 하면 자꾸 react-dev-tools에서 다음과 같은 에러가 발생하며 페이지가 무한 로딩 되는 문제가 있었습니다. Looks like this page doesn't have React, or it hasn't been loaded yet 그리고 네트워크 탭을 확인했을 때 아래와 같이 스크립트 로드가 실패하는 것을 확인할 수 있었습니다. 분명히 리액트로 만들어진 페이지고, DevTools를 끄면 잘 동작하는데 왜 이런 걸까요..? 해결 스택오버플로우의 이 글에 따르면 크롬 DevTools 디버거가 breakpoints에서 멈추는 경우 페이지를 리로드 하..
✅ 들어가기 전 테스트를 왜 작성하는가? 에 대해 다시 생각해 보기 요구 사항 분석과 철저한 이해 → 코드 설계 사용자 입장에서 코드를 작성 → 내부 구현보다는 인터페이스 위주의 코드 작성 TDD의 본질은 빠른 피드백 TDD는 아니지만, 각 컴포넌트가 수행하기를 기대했던 동작, 즉 요구 사항을 다시 생각해 보고, 테스트를 작성하자. 🤔 고민 폴더 구조 루트에 mocks, tests 폴더를 두고 내부에 프로젝트 구조 폴더를 나누기 ✅ 각 폴더 내부에 mocks, tests 폴더 → 관련 있는 코드 가까이 두는 것이 유지보수 측면에 좋을 것으로 판단 깃허브에서 React, React Query, MSW, RTL, Vitest 등에서 테스트 폴더 구조를 살펴봤을 때 각 관련된 폴더 내부에 tests 폴더를 따..
문제: K번째 수 https://school.programmers.co.kr/learn/courses/30/lessons/42748?language=javascript 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 풀이 function solution(array, commands) { // (i-1)부터 j까지 자르고 정렬 -> k번째 숫자 return commands.map(([i, j, k]) => array.slice(i-1, j).sort((a, b) => a - b)[k-1]) } 문제: 가장 큰 수 https://school.programmer..
