사실 너무 어이없는 이유로 에러를 맞닥뜨렸는데 혹.. 미래의 나를 포함한 누군가에게 도움이 될 수 있지 않을까 하여 적어본다.
filter, find 배열 메서드는 오류의 이유가 뻔하다. 메서드 앞의 객체가 배열이 아닌 값이기 때문에 함수를 호출할 수 없는 것이다. 관건은 배열이 아니면 대체 뭐가 담겼느냐! 인데..
값이 undefined 된 경우를 고려해 조건식 등을 걸어두면 해결된다는 글이 꽤 보였지만 그 어떤 걸 적용해도 답을 찾을 순 없었다.
마지막 시도
자포자기하는 심정으로 챗gpt에게 냅다 파일 세 개 보여줄 테니 뭐가 문제인지 찾아달라고 했다.
버그 이유 1순위 : 오탈자
이전엔 정말 에러다운 에러(?)를 만났는데 진짜 글자 하나 뒤바뀐 걸로 이렇게 삽질하는 경험을 하게 되었다. 그래선가. 분노보다는 왠지 모를 웃음이 비집고 나오던데..
무튼 스펠링만 고쳐서
// deatil.js
function Detail (props) {
let {id} = useParams();
let pickProd = props.product.find(function(prod){
return prod.id === id});
return (
// 생략
<h4>{props.product[pickProd.id].title}</h4>
<p>{props.product[pickProd.id].content}</p>
<p>{props.product[pickProd.id].price}원</p>
<button className="btn btn-danger">주문하기</button>
// 생략다시 확인해봤다.
하지만 다시금 만난 에러.
TypeError: Cannot read properties of undefined (reading 'id')
return문의 id는 find 메서드를 사용한 변수(pickProd)의 프로퍼티다. 그럼 find에 달아둔 조건(prod.id === id)에 문제가 있다는 의미겠다.
🔍 왜 일치연산자를 썼나?
- 일치 연산자를 쓰지 않으면 브라우저에서 자꾸 warning이라고 알려주길래 타입까지 제대로 확인하는 게 나으려나 싶었다.
- 일치연산자와 동등연산자의 한끗차이로 에러 나는 상황을 못 만나서 이게 문제가 될 거라곤 크게 생각해보지 못했다.
확인 차 콘솔창을 찍어봤다.
// deatil.js
function Detail (props) {
let {id} = useParams();
let pickProd = props.product.find(function(prod){
return prod.id == id});
console.log(typeof pickProd.id); // number (from data.js)
console.log(typeof id); // string (from url)
id는 url 파라미터로 가져온 값이다. 그래서인지 string 타입이다. 반면 data 파일의 id는 1부터 increment하는 숫자다.
타입을 하나로 맞추어 일치연산자를 고수할 수 있긴 하지만, 타입까지 정확히 맞는 게 중요한 상황이 아니라서 동등 연산자로 충분하다는 생각이 들었다.
느낀점
- 문제가 생기면 구글 검색도 좋지만 디버깅 해보는 습관의 중요성을 배웠다.
콘솔 찍어보라는 말은 많이 들었지만, 확인해보려다가 괜히 새로운 에러에 봉착할 것 같아서 왠지 꺼렸는데 어디에 무엇을 입력해야 할지 잘 모르겠어서 겁이 났던 것 같다. - 스스로 오래 고민할 영역과 빠르고 효율적으로 답만 얻으면 충분한 일을 구분해서 후자에 챗gpt를 사용하면 코딩 공부에 시너지가 될 듯하다.
- 이와 별개로 오늘처럼 냅다 파일을 보여준 게 아주 찝찝하다. 내가 답을 찾지 못하면 늘 이런 애매한 기분이 든다. 게다가 실무에서는 이래선 안 될 테니.. 좋은 교훈이라고 생각한다.
- 에러 만나면 오탈자가 있을 수 있겠다는 생각과 콘솔에 찍어보는 시도를 앞으로 계속 하게 될 것 같아서, 큰 걸 얻은 기분이다.
