AI가 코드를 써줘도 JavaScript를 다시 읽는 이유

이 책을 다시 고른 이유

AI가 코드를 만들어 주는 시대라서 JavaScript를 깊게 볼 필요가 없을 것 같았다. 하지만 BUILD & LEARN에 Claude 기반 기능을 붙이고 나서 생각이 바뀌었다. AI가 만들어 준 코드를 그대로 붙이는 것과, 그 코드가 왜 기다리고 실패하며 어떤 데이터를 돌려주는지 이해하는 것은 전혀 다른 일이다.

O’REILLY 『JavaScript 완벽 가이드』는 생성형 AI를 다루는 책은 아니다. 대신 AI 기능을 웹 서비스에 붙일 때 계속 마주치는 비동기 처리, 문자열, 객체와 배열, 모듈, 오류 처리 같은 JavaScript의 기본을 다시 확인하게 해 준다.

이 글은 책의 내용을 옮겨 적은 요약이 아니라, 읽으며 내 프로젝트 코드와 연결해 본 학습 기록이다.

AI 기능과 직접 이어진 세 가지

1. 기다리는 일을 다루는 async / await

AI 요청은 버튼을 누르자마자 결과가 나오지 않는다. 네트워크를 거쳐 서버가 처리하고, 다시 결과가 돌아오는 시간을 기다려야 한다. 그 사이 사용자가 버튼을 여러 번 누르면 같은 요청이 반복되어 비용이 생길 수도 있다.

BUILD & LEARN의 AI 글쓰기 피드백과 공개 AI 코멘트에는 처리 중 상태와 30초 재요청 제한을 넣었다. 처음에는 단순히 버튼 문구를 바꾸는 UI 문제라고 생각했지만, 실제로는 Promise가 끝날 때까지의 상태와 실패를 함께 다루는 문제였다.

async function requestComment() {
  try {
    const result = await generateLogAiComment(logId);
    // 성공 결과를 화면에 보여 준다.
  } catch {
    // 실패했을 때 사용자가 다시 시도할 수 있게 안내한다.
  }
}

코드를 직접 작성하지 않더라도 async / await의 흐름을 이해하면, AI가 만든 코드에서 어디가 기다리는 부분인지와 오류가 어디서 처리되는지를 훨씬 잘 읽을 수 있다.

2. AI 응답도 결국 객체와 배열이다

AI가 "좋은 피드백을 써 달라"는 요청에 언제나 같은 모양으로 답한다고 보장할 수는 없다. 어떤 항목이 빠질 수도 있고, 글자 대신 예상하지 못한 값이 들어올 수도 있다.

그래서 AI 글쓰기 피드백은 받은 값을 바로 화면에 출력하지 않고, 총평이 문자열인지, 장점과 다음 단계가 배열인지, 개선점이 문제와 제안을 모두 가지는지 확인한다. AI의 답변을 믿는 것과, 프로그램이 안전하게 사용할 수 있게 검증하는 것은 별개의 일이라는 점을 배웠다.

3. API 키는 브라우저가 아니라 서버에 둔다

AI 기능을 만들 때 가장 먼저 떠올린 방법은 브라우저에서 곧바로 API를 부르는 것이었다. 하지만 그러면 API 키가 사용자에게 노출될 수 있다.

현재 사이트는 관리자 버튼이 서버 동작을 호출하고, 서버에서 관리자 권한과 글 본문을 확인한 뒤 Claude API를 요청한다. 환경변수에 둔 API 키는 브라우저 코드에 포함하지 않는다. JavaScript의 모듈과 실행 위치를 구분하는 감각이 보안과 연결된다는 사실이 인상적이었다.

책을 읽으며 AI에게 물어볼 수 있는 질문

AI는 책의 내용을 대신 읽어 주는 도구보다, 내가 이해한 내용을 확인하는 보조 도구로 쓰고 싶다.

• 이 async 함수에서 실패할 수 있는 지점은 어디인지
• 이 객체를 화면에 표시하기 전에 어떤 값을 검사해야 하는지
• 이 코드는 브라우저와 서버 중 어디에서 실행해야 하는지
• 설명이 현재 Next.js와 맞는지 공식 문서에서 무엇을 확인해야 하는지

다만 AI의 설명이 그럴듯해도 최신 라이브러리 API나 보안 규칙은 공식 문서와 실제 실행 결과로 다시 확인해야 한다.

다음에 해 볼 것

다음에는 이 책에서 읽은 비동기 처리와 오류 처리를 BUILD & LEARN의 Claude 코멘트 생성 흐름에서 한 줄씩 따라가 보려고 한다. AI가 코드를 작성해 주는 시대일수록, 그 코드의 흐름을 읽고 고칠 수 있는 JavaScript 기본기가 더 중요하다고 느낀다.