ChatGPT 복붙으로 터진 첫 버그, 그리고 배운 것들
- 02 Dec, 2025
ChatGPT 복붙으로 터진 첫 버그, 그리고 배운 것들
알람이 울린다. 9시 5분.
출근하면 슬랙부터 본다. 어제 올린 PR에 선배가 뭔가 남겼나 싶어서. 손가락이 떨린다. 항상 이 시간이 제일 두렵다.
“이신입, PR 봤어? 페이지 에러 나는데.”
화면이 하얀색으로 변한다. 앞뒤가 안 맞는다.
어제는 분명 잘 돌아갔었는데.
어제는 분명 잘 돌아갔는데
PR을 올린 건 어제 6시 50분.
퇴근 15분 전이었다. 로컬에서는 돌아갔다. 충분히 테스트했다고 생각했다. 아니, 테스트를 제대로 한 건 아니고 새로고침 한 두 번 했으니까 괜찮겠지, 이 정도 생각했다.
기능은 간단했다.
사용자가 버튼을 클릭하면 데이터를 받아와서 화면에 띄우는 거. 페이지네이션도 들어가고 필터링도 들어가고. 그런데 시간이 없었다.
ChatGPT를 켰다.
“React에서 페이지네이션 구현하는 코드 보여줘.”
2초 만에 100줄이 떴다.
복사. 붙여넣기.
폴더 구조에 맞게 좀 수정했다. 임포트 경로 몇 개, 컴포넌트 이름 몇 개. 나머지는 그대로였다.
뭘 하는 코드인지는 정확히 모르겠지만, 일단 로컬에서는 돌아갔다. 그게 기준이었다.
“이거 봤어?”
선배 목소리가 무섭다.
모니터를 본다. 빨간 에러 메시지가 가득하다. 뭐가 뭔지 모른다.
에러 메시지는 외계어다
“TypeError: Cannot read property ‘map’ of undefined”
이 문장 자체가 문제다.
뭐가 undefined라는 거지?
코드를 본다. ChatGPT가 생성한 코드. 100줄.
나는 2줄 밖에 이해 못 한다.
“이거 어디가 문제야?”
선배가 물어본다.
“아… 네네. 제가 확인해보겠습니다.”
이 문장을 말하고 나면 마음이 더 심란해진다. 기한을 정했기 때문이다. 자존심 때문에.
선배는 다시 자기 자리로 돌아간다.
나는 코드를 본다. 또 본다. 또 본다.
뭐가 문제인지 모르겠다.
일단 에러 메시지를 구글에 검색한다.
“Cannot read property map of undefined react”
블로그 글이 많다. 다 이해 못 한다.
스택오버플로우를 본다. 사람들이 답변해준 코드들. 나의 코드와는 다르다.
내 코드의 어느 줄이 문제인지 모르겠다.
그냥 ChatGPT에 다시 물어본다.
“위 코드에서 map 에러가 나는데 어떻게 해?”
ChatGPT가 또 다른 코드를 준다.
복사. 붙여넣기.
돌린다.
에러가 달라진다.
이건 진전이다.
3시간 돌다가 된 건 아무것도 없다
12시 30분.
점심 전이다.
아직도 에러다.
내가 한 거는 ChatGPT에 계속 물어보고 계속 복붙한 거다. 뭐가 다른지, 뭐가 나아졌는지도 모르고.
에러 메시지는 계속 바뀐다.
마치 내가 진전을 이루고 있는 것 같은 착각을 준다.
하지만 정말로는 아무것도 고쳐진 게 아니다. 그냥 다른 에러가 난 거다.
선배가 커피를 마시러 나온다.
“아직?”
“네… 거의 다 됐습니다.”
거짓이다.
선배는 웃는다. 약간 씁쓸한 웃음이다.
“뭘 했는데 안 돼?”
이 질문을 받으면 정신이 든다.
뭘 했는데 안 돼? 좋은 질문이다.
나는 대답할 수 없다. 정말로 뭘 한 건지 모르기 때문이다.
“아… 일단 에러 메시지를 다시 확인해보겠습니다.”
선배는 내 모니터 화면을 본다.
2초.
“여기 봐. 이 state가 여기서는 배열이어야 하는데, 너는 뭘 넣었어?”
손가락이 가리키는 곳.
코드의 한 부분.
나는 그 부분을 본다.
아, 맞다. 내가 ChatGPT에 준 건 사용자 정보 배열이었는데, 여기서는 상품 데이터를 받아오는 API를 쓰고 있다. 구조가 다르다.
“아… 네. 알겠습니다.”
“이게 뭘 하는 코드인지 알고 썼어?”
“네…”
거짓이다.
코드를 읽기 시작했다
선배가 나간 후.
나는 ChatGPT가 생성한 코드를 다시 본다.
이번엔 다르게.
한 줄씩.
첫 번째 줄.
const [data, setData] = useState([]);이건 안다. State를 선언하는 거다. 빈 배열로 시작한다.
두 번째 줄.
const [page, setPage] = useState(1);페이지도 state인가. 숫자다. 1부터 시작.
네 번째 줄.
useEffect(() => {
// API 호출
}, [page])useEffect다. 의존성 배열에 page가 있다.
아, 페이지가 바뀔 때마다 이 함수가 실행되는 거구나.
그 안에 API 호출 코드가 있다.
fetch(`/api/products?page=${page}`)아, 그래서 page 값이 URL에 붙는 구나.
그리고 받아온 데이터를 setData로 저장한다.
.then(res => res.json())
.then(data => setData(data.items))아. data.items. 그래서 상품 배열이다.
그런데 내 API에서는 응답이 다르게 생겼다.
{
result: [...]
}data.items가 아니라 data.result다.
그래서 undefined가 난 거다.
map을 undefined에서 실행했으니까.
처음으로 에러가 이해가 된다.
나는 코드를 수정한다.
data.result로 바꾼다.
.then(data => setData(data.result))돌린다.
에러가 없다.
페이지가 뜬다.
상품 목록이 보인다.
5개.
페이지네이션 버튼도 있다.
2번을 클릭한다.
다른 상품 5개가 보인다.
된다.
진짜 된다.
배운 게 뭔지 자꾸 잊는다
내가 오늘 배운 것들.
첫 번째. ChatGPT가 주는 코드는 만능이 아니다.
당연하지만 당연하지 않다.
두 번째. 코드를 알고 써야 한다.
ChatGPT가 준 코드도, 유튜브 강의도, 블로그도 마찬가지다.
뭘 하는 건지 모르면, 뭐가 잘못됐을 때 못 고친다.
세 번째. 에러 메시지는 절대 거짓을 말하지 않는다.
“Cannot read property ‘map’ of undefined”
이 메시지는 정확했다. 내가 이해를 못 한 거다.
네 번째. 선배한테 물어보는 게 빠르다.
3시간을 ChatGPT와 싸우고 있었는데, 선배 한 마디에 2분 만에 원인을 찾았다.
하지만 내일은 또 까먹을 것 같다.
그래서 메모를 남긴다. 노션에.
“State와 API 응답 구조를 맞춰야 한다. 내 API는 data.result다.”
그리고.
“코드를 읽자. 한 줄씩.”
메모를 하고 나면 뭔가 된 것 같은 기분이 든다.
하지만 이 기분도 금요일엔 사라질 거다.
퇴근하고 생각한 것
맥주잔을 들었다.
동기 태영이가 물었다.
“너 오늘 뭐 했어?”
“버그 고쳤어.”
“뭐가?”
“ChatGPT 코드 때렸다.”
태영이가 웃는다.
“아, 나도 그런 경험 있어. 진짜. 내가 준 코드가 production에서 터진 적 있어.”
또 다른 동기 지훈이가 끼어든다.
“근데 지금 와야 ChatGPT 코드를 쓰면서도 자기 것처럼 행동해야 할 때가 있잖아?”
모두 웃는다.
이상한 웃음이다.
태영이가 맥주를 마신다.
“그래도 너는 고쳤으니까 다행이지. 내 동생은 지금도 못 고쳤대. PR이 1주일 동안 열려 있대.”
“선배가 뭐라고?”
“그냥 ‘이거 뭐 한 거야?‘만 물어본다고.”
우리는 계속 마신다.
맥주는 쓰다.
이건 맥주의 맛이 아니라, 우리 일의 맛인 것 같다.
내일 또 같은 실수를 할 거다
알 수 있다.
내일 또 새로운 기능이 생길 것이고.
시간이 부족할 것이고.
ChatGPT를 켤 것이고.
또 복붙할 것이다.
하지만 오늘은 조금 다를 것 같다.
어쨌든 코드를 읽어야 한다는 걸 안다.
한 줄씩.
뭘 하는지는 모르겠지만, 적어도 어디가 문제인지는 찾을 수 있을 것 같다.
선배 앞에서 당황하지도 않을 것 같다.
아니, 당황할 거다.
하지만 이번엔 그냥 넘어가지 않을 것 같다.
이게 제일 중요한 거 같다.
내일도 버틴다. 오늘보다 조금 똑똑해져서.