바이브코딩을 하다 보면 에러 디버깅이 전체 작업 시간의 상당 부분을 차지할 때가 있어요. 개발자들도 그렇고, AI와 함께 코딩을 해도 에러는 피할 수 없어요. 중요한 건 에러가 왜 생기는지 이해하고, 어떻게 접근하는지 아는 거예요.
에러는 왜 생기나요
에러는 크게 세 종류예요.
문법 에러(Syntax Error): 코드의 문법이 틀린 경우예요. 괄호를 빠뜨렸거나, 따옴표를 안 닫았거나, 오타가 있는 경우예요. 대부분 코드 에디터가 빨간 줄로 바로 알려줘요.
런타임 에러(Runtime Error): 코드 문법은 맞는데 실행하다가 문제가 생기는 경우예요. “null인 객체의 속성을 읽으려 했다”처럼, 존재하지 않는 것에 접근하려 할 때 자주 발생해요.
논리 에러(Logic Error): 코드는 에러 없이 실행되는데 결과가 기대한 것과 다른 경우예요. 이게 가장 찾기 어려운 에러예요.
에러 메시지를 읽는 법
에러 메시지가 영어로 가득하면 당황스럽지만, 중요한 부분만 읽으면 돼요. 보통 에러 메시지에는 세 가지 정보가 있어요.
첫째, 에러 이름: TypeError, ReferenceError, SyntaxError처럼 어떤 종류의 에러인지 알려줘요.
둘째, 에러 설명: “Cannot read properties of undefined”처럼 구체적으로 무엇이 문제인지 설명해요.
셋째, 파일명과 줄 번호: “at UserCard.jsx:42:15″처럼 에러가 발생한 위치를 알려줘요.
이 세 가지를 모두 AI에게 전달하면 에러 해결이 훨씬 빨라져요.
에러 유형 3가지와 읽는 법
1. 문법 에러 (SyntaxError)
예: “SyntaxError: Unexpected token ‘)'”
괄호, 세미콜론, 따옴표가 맞지 않을 때 발생해요. 에러 메시지에 줄 번호가 나오므로 그 줄 주변을 확인해요. AI에게 에러 메시지와 코드를 같이 보여주면 바로 찾아줘요.
2. 타입 에러 (TypeError)
예: “TypeError: Cannot read properties of undefined (reading ‘name’)”
없는 값에 접근하려 할 때 가장 많이 발생해요. user가 undefined인데 user.name을 읽으려 한 거예요. “어떤 경우에 undefined가 될 수 있는지”를 AI에게 물어보면 원인을 찾을 수 있어요.
3. 네트워크 에러 (Network Error / 404 / 500)
예: “GET https://api.example.com/users 404”
API 주소가 틀렸거나, 서버가 응답하지 않는 경우예요. 404는 경로 오류, 500은 서버 내부 오류예요. 브라우저 개발자 도구의 Network 탭에서 요청·응답을 직접 확인할 수 있어요.
디버깅 접근법
에러가 났을 때 무작정 코드를 수정하는 건 좋지 않아요. 체계적인 접근이 필요해요.
1단계: 에러 메시지를 읽고, 어떤 종류의 에러인지 파악해요.
2단계: 에러가 어떤 상황에서 발생하는지 정확히 재현해봐요.
3단계: 에러가 발생한 코드 부분을 찾아요.
4단계: AI에게 에러 메시지, 상황, 코드를 함께 보여주고 원인을 물어봐요.
코드가 실행되는 원리를 조금씩 이해하면 에러 메시지도 점점 읽히기 시작해요.
AI와 디버깅할 때 주의사항
AI가 에러를 수정해줬는데 새로운 에러가 생기는 경우가 있어요. 이걸 “whack-a-mole 현상”이라고 해요. 두더지 잡기처럼 하나 잡으면 다른 데서 튀어나오는 거예요.
이런 상황이 반복되면 한 발짝 물러서서 큰 그림을 봐야 해요. “지금 고치는 게 올바른 방향인가?”를 AI에게 물어보세요. “지금 이 에러들의 근본 원인이 무엇인지 분석해줘. 땜질식으로 고치는 게 아니라 구조적으로 해결하고 싶어”라고 하면 AI가 더 깊이 분석해줄 거예요.
에러는 배움의 기회예요
바이브코딩 초반에 만나는 에러들은 비슷한 패턴이 반복돼요. null 처리, 비동기 처리, 타입 불일치 같은 것들이요. 처음엔 낯설어도 같은 에러를 몇 번 만나고 나면 자연스럽게 “아, 이 패턴이구나”가 돼요. 에러를 피하는 게 아니라 익숙해지는 게 목표예요.
댓글 0