홈으로

AI CODER / LEARNING NOTES

AI가 만든 코드,
배포 전에 확인할 4가지

실행에 성공한 코드도 잘못된 값을 처리하거나 중요한 정보를 노출할 수 있습니다. 작은 금액 계산기를 만들면서, AI에게 받은 코드를 스스로 확인하는 순서를 익혀보세요.

AI Coder 편집 · · JavaScript 기초

01. 원하는 동작부터 적습니다

“금액 계산기를 만들어줘”보다 입력과 출력, 실패 조건을 함께 적으면 결과를 판단하기 쉽습니다. 이번 실습의 요구사항은 “두 입력란의 금액을 더한다. 0은 허용하고, 빈 값·음수·숫자가 아닌 값은 오류로 안내한다”입니다.

두 문자열을 입력받아 합계를 숫자로 반환하는 JavaScript 함수를 작성해줘. 빈 값, 음수, 유한하지 않은 숫자는 오류로 처리해줘. 각 검증이 필요한 이유와 테스트할 입력도 설명해줘.

입력 화면과 함수의 역할도 구분하세요. 화면에 오류 문구를 보여주는 일은 UI가, 계산 가능한 값인지 판단하는 일은 함수가 맡도록 하면 테스트하기 편해집니다.

02. 정상 값 다음에 경계값을 넣습니다

JavaScript에서 Number("")는 0이 됩니다. 숫자로 바꾸기 전에 빈 입력부터 확인해야 “입력하지 않음”과 “0원”을 구분할 수 있습니다. 또한 입력값이 유한해도 두 값을 더한 결과는 범위를 넘을 수 있어 합계도 검사합니다.

JavaScript · 브라우저 개발자 도구 콘솔에서 실행
function addAmounts(left, right) {
  const values = [left, right].map(value => {
    if (typeof value !== "string" || value.trim() === "") {
      throw new Error("금액을 입력해 주세요.");
    }
    const amount = Number(value);
    if (!Number.isFinite(amount) || amount < 0) {
      throw new Error("0 이상의 유한한 숫자를 입력해 주세요.");
    }
    return amount;
  });
  const total = values[0] + values[1];
  if (!Number.isFinite(total)) {
    throw new Error("계산 가능한 범위를 초과했습니다.");
  }
  return total;
}

console.assert(addAmounts("10", "20") === 30);
console.assert(addAmounts("0", "20") === 20);
for (const value of ["", " ", "-1", "abc", "Infinity"]) {
  let rejected = false;
  try { addAmounts(value, "20"); } catch { rejected = true; }
  console.assert(rejected, "거부되어야 하는 입력:", value);
}

정상적으로 실행되면 위 테스트는 오류를 출력하지 않습니다. 검증 조건을 하나씩 지워 어떤 테스트가 실패하는지 확인해 보세요. 이 코드는 학습용 숫자 계산입니다. 실제 결제에서는 원·센트 단위 정수, 통화별 반올림, 최대 금액과 서버 검증을 별도로 설계해야 합니다.

03. 비밀키와 권한은 서버에서 확인합니다

API 키나 데이터베이스 비밀번호를 AI 대화, 화면 코드, 공개 저장소에 붙여 넣지 마세요. 환경변수에 넣었다는 사실만으로 안전해지지는 않습니다. 브라우저에 전달되는 변수나 번들에 포함되면 방문자가 읽을 수 있습니다.

비밀키를 사용하는 요청은 서버에서 처리하고, 서버에서도 로그인과 접근 권한을 검사합니다. 버튼을 숨기는 것은 권한 검사가 아닙니다. 키가 노출됐다면 파일에서 지우는 것에 더해 해당 키를 폐기하고 재발급해야 합니다.

04. 배포한 주소에서 다시 확인합니다

로컬에서 작동해도 운영 환경변수, HTTPS, 데이터베이스 연결이 다르면 실패할 수 있습니다. 배포한 주소를 시크릿 창으로 열고 정상 입력 → 오류 입력 → 수정 → 재시도 순서로 확인하세요. 새로고침과 뒤로 가기, 모바일 키보드로 입력하는 흐름도 점검합니다.

요청 중에는 중복 제출을 막고, 요청이 실패하면 입력을 유지한 채 다시 시도할 수 있어야 합니다. 운영 데이터의 삭제·결제처럼 되돌리기 어려운 동작은 별도 테스트 환경에서 검증하세요.

  • 원하는 결과와 실패 조건을 한 문장씩 설명할 수 있다.
  • 정상 입력뿐 아니라 빈 값·0·음수·잘못된 형식을 확인했다.
  • 비밀키가 브라우저 코드, 저장소, 로그에 노출되지 않는다.
  • 배포한 주소에서 처음 방문한 사람의 흐름을 끝까지 확인했다.

확인에 사용한 공식 자료

언어 동작과 보안 원칙은 공식 문서로 다시 확인하세요. 도구가 제안한 코드의 근거를 읽는 과정도 학습의 일부입니다.