🔥 발생한 에러 Uncaught Error: [Immer] An immer producer returned a new value and modified its draft. Either return a new value or modify the draft. 에러를 번역하자면 immer 제작자는 새로운 값을 리턴하거나 기존 상태를 수정하거나 둘 중 하나만 해야된다는 것이다. 원인이 되는 코드 분석 immer 라이브러리를 사용하여 불변성 상태의 트리를 손쉽게 변경하던 중 위와 같은 에러가 발생했다. updatePerson((person) => person.mentors.push({ name, title })); 화살표 함수는 중괄호를 써주지 않으면 자동으로 return 키워드가 붙는다. 즉, 위의 코드는 기존..

인터셉터(Interceptors)란? then 또는 catch로 처리되기 전에 요청과 응답을 가로챌 수 있다. Axios 인터셉터를 적용하려는 이유❓ 토이 프로젝트를 진행하면서 서버에 토큰 인증을 필요로 하는 API 요청을 할때마다 HTTP Authorization 요청 헤더에 토큰을 넣어줘야하고 401(Unauthorized) 에러가 서버로부터 들어오면 토큰을 갱신해준 후 재요청을 보내는 과정을 한 곳에서 모두 처리하여 중복 코드를 제거하고 유지보수성을 향상시키기 위해 Axios 인터셉터를 적용하기로 했다. 사용자 지정 config로 새로운 Axios 인스턴스를 생성하여 사용하니 더욱 편리했다. (baseURL, timeout 설정) 적용하는 과정 1) Axios 인스턴스 생성 const instanc..

정규 표현식(Regular Expression)은 문자열에서 특정 문자 조합을 찾기 위한 패턴이다. RegExp RegExp 생성자는 패턴을 사용해 텍스트를 판별할 때 사용한다. 리터럴 표기법의 매개변수는 두 빗금으로 감싸야 하며 따옴표를 사용하지 않는다. 생성자 함수의 매개변수는 빗금으로 감싸지 않으나 따옴표를 사용한다. // 정규 표현식 생성하기 /ab/g new RegExp(/ab/, 'g') // 리터럴 new RegExp('ab', 'g') // 생성자 동적으로 정규 표현식 생성하기 const 변수 = 'JS'; const regex = new RegExp(`${변수}`, 'g'); console.log(regex); // /JS/g 🧐 응용하기 match() 메서드는 문자열이 정규식과 매치되는..

큐(Queue)란? 큐는 데이터를 일시적으로 저장하는 자료구조 중 하나로, 먼저 입력된 데이터가 먼저 출력되는 "선입선출(FIFO: First-In-First-Out)" 원칙을 따릅니다. 큐(Queue)의 구현 방법 2가지 큐는 배열(Array)이나 연결 리스트(Linked List)를 사용하여 구현할 수 있습니다. 1️⃣ 배열 배열을 사용할 경우, 크기가 고정되어 있어서 데이터의 추가 및 제거에 제한이 있을 수 있지만, 연산 속도가 빠릅니다. 2️⃣ 연결 리스트 연결 리스트를 사용할 경우, 크기에 제한이 없어서 데이터를 유동적으로 추가 및 제거할 수 있지만, 연산 속도가 느립니다. 🧐 배열로 큐(Queue)를 구현해도 되지만 굳이 ? 연결 리스트로 구현해야 하는 이유 JavaScript에서 배열을 사용..

📌 문제 N장의 카드가 있다. 각각의 카드는 차례로 1부터 N까지의 번호가 붙어 있으며, 1번 카드가 제일 위에, N번 카드가 제일 아래인 상태로 순서대로 카드가 놓여 있다. 이제 다음과 같은 동작을 카드가 한 장 남을 때까지 반복하게 된다. 우선, 제일 위에 있는 카드를 바닥에 버린다. 그 다음, 제일 위에 있는 카드를 제일 아래에 있는 카드 밑으로 옮긴다. 예를 들어 N=4인 경우를 생각해 보자. 카드는 제일 위에서부터 1234 의 순서로 놓여있다. 1을 버리면 234가 남는다. 여기서 2를 제일 아래로 옮기면 342가 된다. 3을 버리면 42가 되고, 4를 밑으로 옮기면 24가 된다. 마지막으로 2를 버리고 나면, 남는 카드는 4가 된다. N이 주어졌을 때, 제일 마지막에 남게 되는 카드를 구하는 ..

📌 최대점수 구하기(냅색 알고리즘) 이번 정보올림피아드대회에서 좋은 성적을 내기 위하여 현수는 선생님이 주신 N개의 문제를 풀려고 한다. 각 문제는 그것을 풀었을 때 얻는 점수와 푸는 데 걸리는 시간이 주어지게 된다. 제한 시간 M 안에 N개의 문제 중 최대점수를 얻을 수 있도록 해야 한다. (해당 문제는 해당 시간이 걸리면 푸는 걸로 간주한다. 한 유형당 한 개만 풀 수 있다.) 입력설명 첫 번째 줄에 문제의 개수 N(1

📌 동전교환(냅색 알고리즘) 다음과 같이 여러 단위의 동전들이 주어져 있을때 거스름돈을 가장 적은 수의 동전으로 교환해주려면 어떻게 주면 되는가? 각 단위의 동전은 무한정 쓸 수 있다. 입력설명 첫 번째 줄에는 동전의 종류개수 N(1

📌 최대 부분 증가수열(LIS) N개의 자연수로 이루어진 수열이 주어졌을 때, 그중에서 가장 길게 증가하는(작은 수에서 큰 수로) 원소들의 집합을 찾는 문제이다. 예를 들어, 원소가 2, 7, 5, 8, 6, 4, 7, 12, 3이면 가장 길게 증가하도록 원소들을 차례대로 뽑아내면 2, 5, 6, 7, 12를 뽑아내어 길이가 5인 최대 부분 증가 수열을 만들 수 있다. 입력설명 첫째 줄은 입력되는 데이터의 수 N(1= 0; j--) { if (arr[j] < arr[i] && max < dy[j]) { max = dy[j]; } } dy[i] = max + 1; } answer = Math.max(...dy); return answer; } let arr = [2, 7, 5, 8, 6, 4, 7, 12,..