자바스크립트로 카드 게임 로직을 구현하던 중 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)..

이 글에서는 자바스크립트로 구현된 보드게임의 로직을 개선하는 과정을 다루며,개선 과정은 함수명 개선 → 중복 제거 → 책임 분리의 단계로 이루어져 있다.작동하지만 개선이 필요한 코드주어진 코드는 기능적으로는 문제없이 동작했지만, 더 나은 방식을 고민하다 보니 여러 개선점을 찾을 수 있었다.function checkLadder(position) { switch (position) { case 4: return 14; case 8: return 30; case 21: return 42; // ... default: return null; }}function checkSnake(position) { switch (position) { case 32: return 10; ..

aria-label을 쓰다 보면 헷갈리는 부분이 있다. 텍스트 콘텐츠와 aria-label을 함께 넣었을 때, 스크린 리더가 둘 다 읽을지 아니면 하나만 읽을지 애매한 것이다. 예를 들어 버튼에 "삭제"라고 써있고 aria-label="이 리뷰 삭제하기"를 추가하면 "이 리뷰 삭제하기 삭제"로 읽힐까? 아니면 둘 중 하나만 읽힐까? 정답은 요소마다 다르다. 어떤 요소는 aria-label이 텍스트를 완전히 대체하고, 어떤 요소는 텍스트와 함께 읽힌다.aria-label이 텍스트를 대체하는 요소들상호작용하는 요소들버튼, 링크, 입력 필드처럼 사용자가 클릭하거나 입력하는 요소들은 aria-label이 기존 텍스트를 대체한다.삭제수정여기에 해당하는 요소: , , , , 페이지 구조 요소들헤더, 네비게이션, ..