자바스크립트에서 배열을 초기화하려고 new Array(4).map(() => [])을 사용했는데 의도대로 동작하지 않았다. 원인을 찾아보니 JavaScript의 빈 슬롯과 undefined의 차이, 그리고 map() 메서드가 빈 슬롯에 대해 콜백을 실행하지 않는다는 특성 때문이었다. 문제 상황특정 크기의 배열을 만들고 각 요소를 []로 초기화하려고 했다.const result = new Array(4).map(() => []);console.log(result); // 기대: [[], [], [], []] 하지만 실제 결과는 달랐다.console.log(result); // [empty × 4]console.log(result[0]); // undefined 원인 분석빈 슬롯 vs undefined자바스..

자바스크립트로 카드 게임 로직을 구현하던 중 TypeError: Cannot read properties of undefined라는 에러를 만났다. 코드가 복잡하고 짐작가는 부분이 단번에 떠오르지 않아 막막했는데, 에러 메시지와 스택 트레이스를 차근차근 분석해가며 원인을 찾아낸 과정을 기록해본다. 에러 발생게임 로직을 테스트하던 중 특정 입력에서 다음과 같은 에러가 발생했다.TypeError: Cannot read properties of undefined (reading 'array') at getLastElement (03.debug.js:45:19) at submitCard (03.debug.js:85:7) at processPlayerAction (03.debug.js:103:3)..

문제 상황프로젝트를 진행하던 중 사용자가 팔로우/언팔로우 버튼을 클릭할 때, 프로필 정보가 즉시 업데이트되지 않고 페이지를 새로고침해야만 변경 사항이 반영되는 문제가 발생했다.이 문제는 사용자 경험을 저하시키는 상황이기때문에 반드시 개선이 필요했다.원인 분석팔로우 버튼을 클릭하면 팔로우 상태를 변경하는 함수가 Sanity의 데이터를 업데이트한다. 하지만 이 변경 사항이 클라이언트 화면에 즉시 반영되지 않았다.Next.js는 성능 최적화를 위해 서버에서 가져온 데이터를 캐싱한다. 팔로우 상태가 변경되어도 Next.js는 여전히 이전에 캐싱된 데이터를 사용하고 있었기 때문에, 사용자가 보는 화면은 업데이트되지 않은 상태로 유지되었다.서버 사이드에서 데이터 변경이 발생한 후, 클라이언트의 캐시를 재검증(rev..

문제 상황Vercel로 프로젝트를 배포한 후, '/profile/edit'과 같은 하위 라우터에서 새로고침을 하니 404 Not Found 오류가 발생했다. 원인 분석SPA와 전통적인 웹 애플리케이션의 차이전통적인 웹 애플리케이션사용자가 각 페이지에 접근할 때마다 서버에서 해당 페이지의 HTML을 제공한다.'/posts', '/profile' 등의 페이지를 요청하면, 서버는 각각의 요청에 맞는 HTML 파일을 찾아서 보내주는 방식이다. 싱글 페이지 애플리케이션(SPA)초기 접근 시 단 하나의 HTML 파일인 index.html을 로드하고, 그 이후의 모든 페이지 전환은 브라우저에서 JavaScript를 사용하여 동적으로 내용을 변경한다.사용자가 '/profile/edit' 같은 URL로 이동하더라도 실제..

문제 상황일기 목록의 정렬 기능을 구현하면서 Array.prototype.sort대신 Array.prototype.toSorted를 사용하려고 했는데, 타입스크립트가 이 메서드를 인식하지 못하는 문제가 발생했다.sort vs toSortedsort: 배열을 정렬하고 원본 배열을 변경toSorted: 배열을 정렬하되 원본을 변경하지 않고 새 배열 반환불변성을 유지하기 위해 toSorted를 사용하려 했지만, 타입스크립트에서 타입 오류가 발생했다. 원인 분석tsconfig.json의 EXMAScript 버전 설정을 확인해보니, ES2020으로 설정되어 있었다.{ "compilerOptions": { "target": "ES2020", "module": "ES2020", // ... }}E..

문제 상황Vite + TypeScript 환경에서 tsconfig.json에 정의된 절대 경로 별칭(@) 을 사용하여 모듈을 import했는데 오류가 발생했다. 원인 분석절대 경로를 설정할 때 기존에 CRA에서 사용하던 방식과 똑같이 tsconfig.json에 설정을 해주었었다.{ "paths": { "pages/*": ["pages/*"], "components/*": ["components/*"], "util/*": ["util/*"] },}그런데 알고보니 이 설정이 타입스크립트에만 유효하고, Vite는 이를 직접적으로 해석하여 모듈을 로드하지 않는다고 한다. 각각의 역할tsconfig.json의 paths: 타입스크립트가 타입 검사를 위해 사용vite.config.ts의 reso..