들어가며 기업 과제에서 필수 요구 사항이었던 테스트에 어려움을 겪고, 글또에서 진행하는 TDD 스터디에 참여하면서 프로젝트 환경에 따른 Jest 설정에 대해 공부하였습니다. 이 과정에서 그동안 대략적으로만 알고 사용했던 Vite, TypeSciprt, ESlint의 환경 설정과 새롭게 알게 된 Jest, React Testing Library(이하 RTL) 관련 설정을 전체적으로 살펴 보고 이해하는 시간을 가졌습니다. 이를 통해 ESM과 CJS의 차이를 이해하고, 설치하는 패키지 간 의존성과 버전 호환의 중요성을 깨닫게 되었습니다. 해당 포스팅에서는 [1편]에서 먼저 각 패키지를 설정할 때 알아두면 유용한 점들과 주의할 점들을 살펴 보고, [2편]에서 패키지 간 의존성과 패키지 버전 및 설정 파일 문제로..
혹시 개발 중에 앱이 에러를 잡지 못해 발생하는 아래의 에러 화면을 보신 적이 있으신가요?위 에러의 내용을 살펴보면 React Router는 더 나은 UX를 위해 ErrorBoudary를 제공할 것을 권장하고 있습니다. 그렇다면 ErrorBoundary는 어떻게 동작하고, 어떤 방식으로 사용하면 좋을까요? 최근에 진행한 개인 프로젝트와 과제에서 더 나은 사용자 경험을 위해 ErrorBoundary를 통한 에러 핸들링을 하는 과정에서 가졌던 의문점과 고민, 그리고 해결 방법을 공유하고자 합니다. 해당 포스팅은 React 공식 문서와 React-Query 공식 블로그를 바탕으로 ErrorBoundary의 역할과 ErrorBoundary가 잡을 수 있는 에러 유형, React Query에서의 에러 핸들링 전략..
NutriNotes의 목표했던 기능들을 모두 마무리하고 회고를 쓰려고 노션에 항목들을 정리해 두었지만, 쓰고 싶은 내용이 너무 많아 엄두가 나지 않았다. 프로젝트를 진행하며 마주했던 문제와 해결책들을 기록하며, 다시 한번 복기해 보는 시간을 가지기로 했다. 라이브러리 선택 이유 및 이전에 구현된 기능은 중간 회고에 작성되어 있다. 중간 회고 이후로 약 3개월이 지났는데, 약 2개월은 프로젝트를 더 발전시켰고, 그 이후에는 가끔 필요한 부분만 수정하였다. 밤새 끙끙대다 배포를 성공해서 내가 만든 사이트에 접속되었을 때의 기쁨을 잊을 수 없다..>! (내용이 길어져서 빈 부분은 차차 채워나갈 예정입니다..!) 프로젝트 소개(+배포 링크): NutriNotes NutriNotes는 건강에 관심을 기울이는 현대..
문제 https://school.programmers.co.kr/learn/courses/30/lessons/92343 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 풀이 이진 트리를 탐색하면서 양이 늑대에게 잡아먹히지 않도록 하는 양의 최댓값을 구하는 문제이다. 방문한 늑대 노드의 수가 방문한 양 노드 수 이상인 경우 늑대는 양을 모두 잡아먹는다. 트리 전체를 탐색하면서 방문한 양과 늑대 개수를 세야하고 info의 최댓값도 작기 때문에 DFS 문제이다. 하지만 일반적인 DFS와 다르게 노드를 재방문해야 하는 경로가 있기 때문에 어려웠다. 예를 들어, 예..
문제 https://school.programmers.co.kr/learn/courses/30/lessons/43164# 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 풀이 주어진 항공권을 모두 이용해 여행경로를 짤 때, 방문하는 공항 경로를 구하는 문제이다. 이때 주의할 점은 가능한 경로가 여러 개 있다면, 알파벳 순서가 앞서는 경로를 반환해야 한다는 것이다. 이 조건을 만족하기 위해 tickets 배열을 먼저 정렬해준다. 자바스크립트 sort는 기본적으로 알파벳 오름차순 순서로 배열을 해주고, 2차원 배열의 경우 첫 번째 요소가 같은 경우, 두 번째 ..
문제 https://school.programmers.co.kr/learn/courses/30/lessons/92342 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 풀이 문제를 반복해 읽으면서 라이언이 화살을 (어피치 개수 + 1) 또는 0개의 화살을 쏠 수 있을 거라고 생각했다. 이 경우, 화살을 쏘거나 쏘지 않거나의 2가지 경우^최대 레벨 = 10으로 1024가 최대 가지수이므로, DFS를 생각했지만 어려워서 이 블로그를 참고해 이해하였다. 크게 보면, 1. 화살을 쏠 때마다 현재 점수와 정답 배열(점수 당 사용한 라이언의 화살 개수 배열)을 갱신하..
문제 https://school.programmers.co.kr/learn/courses/30/lessons/150369 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 풀이 트럭에 최대 cap개의 택배를 실을 수 있고, 집마다 배달/수거할 택배 상자의 개수가 있을 때, 모든 택배를 처리할 수 있는 최소 이동 거리를 구하는 문제이다. 배달/수거가 필요한 가장 먼 지점까지 이동하고, 이후 초기 지점으로 돌아와야 하기 때문에 이동 거리는 Math.max(배달 최대 거리, 수거 최대 거리)의 2배가 된다. deliveryP와 pickupP는 각각 배송/수거해야하..
문제 https://school.programmers.co.kr/learn/courses/30/lessons/150368?language=javascript 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 풀이 function solution(users, emoticons) { /** 1. 이모티콘마다 다른 할인율을 적용했을 때, 유저 이모티콘 구매 비용과 서비스 가입 여부를 확인 2. 전체 구매 비용, 서비스 가입자 수를 확인 3. 서비스 가입자 수가 더 많거나 || (가입자 수는 같고 && 이모티콘 구매비용 더 많으면) 답 교체 */ const disc..
