Consolelog

• 05 Dec, 2025
• • 프론트엔드

console.log 10개의 기도: 문제를 찾는 신입의 방식

console.log 10개의 기도: 문제를 찾는 신입의 방식 오늘도 에러가 났다. Uncaught TypeError: Cannot read property 'map' of undefined이게 뭐지. 어제까지 잘 됐는데. 일단 console.log부터 박는다. 첫 번째 기도 console.log('여기는 됨');함수 맨 위에 찍어본다. 이게 안 나오면 함수 자체가 안 도는 거니까. 콘솔에 '여기는 됨'이 뜬다. 좋아. 함수는 돈다. 그럼 문제는 안에 있다.두 번째부터 다섯 번째까지 console.log('데이터:', data); console.log('데이터 타입:', typeof data); console.log('데이터 길이:', data?.length); console.log('첫 번째 아이템:', data?.[0]);data를 온갖 방법으로 뜯어본다. 콘솔을 확인한다. 데이터: undefined 데이터 타입: undefined 데이터 길이: undefined 첫 번째 아이템: undefined아. data가 없다. 그럼 왜 없는데. 여섯 번째 useEffect(() => { console.log('useEffect 돌아감'); fetchData(); }, []);데이터를 가져오는 함수 전에 찍어본다. 'useEffect 돌아감'은 나온다. 그럼 fetchData는? 일곱 번째 const fetchData = async () => { console.log('fetchData 시작'); const response = await api.getData(); setData(response); };이것도 나온다. fetchData는 돈다. 그럼 api 응답이 문제인가. 여덟 번째 const fetchData = async () => { console.log('fetchData 시작'); const response = await api.getData(); console.log('응답:', response); setData(response); };콘솔을 본다. fetchData 시작 응답: {data: Array(0), message: "success"}어? 데이터가 빈 배열이다. 근데 성공은 했다고 나온다. 뭐지.아홉 번째 API 문서를 다시 본다. const response = await api.getData(); console.log('response.data:', response.data); console.log('response.result:', response.result);둘 다 찍어본다. response.data: [] response.result: Array(10)아. data가 아니라 result였다. 설마. 열 번째 const fetchData = async () => { const response = await api.getData(); console.log('최종 확인:', response.result); setData(response.result); };새로고침. 화면에 데이터가 뜬다. 된다. 에러가 사라졌다. 그리고 정리 console.log 10개를 지운다. 커밋 전에 전부 삭제. const fetchData = async () => { const response = await api.getData(); setData(response.result); };깔끔하다. 아무 일도 없었던 것처럼. 근데 PR 올릴 때 한 개가 남아있었다. console.log('여기는 됨');선배가 댓글 남겼다. "console.log 지워주세요" 얼굴이 빨개진다. "네 죄송합니다"왜 이러는가 디버거를 쓰면 된다는 걸 안다. breakpoint 찍고, step over 하고, 변수 값 실시간으로 보고. 근데 무섭다. 디버거 켜면 뭔가 잘못 건드릴 것 같다. console.log는 편하다. 찍고, 보고, 지우면 끝. 틀려도 상관없다. 아무도 모른다. 10개 찍든 20개 찍든. 내 화면에서만 보이니까. 선배는 안 그런다 옆자리 선배는 console.log를 안 쓴다. 에러 나면 일단 코드를 쳐다본다. 5분 정도. 그리고 정확히 문제 되는 줄로 간다. 고친다. 끝. 어떻게 아는 거지. 나는 30분 동안 console.log 10개 찍어서 찾은 걸. 언젠가는 나도 그렇게 되려나. 코드만 봐도 어디가 문제인지 아는. console.log 없이도 디버깅하는. 지금은 아니다. 지금은 console.log가 내 전부다. 10개든 20개든 찍는다. 그래도 문제를 찾는다. 그게 중요한 거다.오늘 저녁 퇴근 전에 한 개 더 찍었다. console.log('왜 안 돼'); 이건 내일 지우자.