이번 실습에서 만들 결과
웹사이트에 목표 달성률을 표시한다고 가정합니다. 전체 200개 중 25개를 완료했다면 결과는 12.5%여야 합니다. 그럴듯하지만 틀린 수식을 고치고, 정상 입력만 눌러 보는 데모가 놓치는 경우까지 확인합니다. 텍스트 편집기와 현재 지원되는 Node.js가 있으면 따라 할 수 있습니다. 계정, API 키, 유료 강의, 외부 패키지 설치는 필요 없습니다.
빈 실습 폴더에 percentage-check.mjs 파일을 만드세요. 먼저 앱과 분리된 파일에서 계산 규칙을 검증합니다. 함수는 HTML 입력창의 문자열이 아닌 숫자를 받습니다. 입력창의 값을 변환하는 일은 화면과 함수를 연결할 때 처리합니다.
수정하기 전에 오류를 재현하기
기존 함수가 total / part * 100을 반환한다고 해 봅시다. 25와 200을 넣으면 12.5가 아닌 800이 나옵니다. 기대값을 먼저 직접 계산하세요. 25 ÷ 200은 0.125이고, 여기에 100을 곱하면 12.5입니다. 기대값까지 잘못된 수식으로 자동 생성하면 코드와 테스트가 함께 틀려도 통과할 수 있습니다.
이번 규칙은 전체 수량은 양수, 완료 수량은 0 이상, 두 값 모두 유한한 숫자입니다. 목표 200개에 300개를 달성한 경우에는 150%를 허용합니다. 100%를 넘을 수 없는 진행 표시가 필요하다면 별도의 요구사항으로 정하세요. 모든 백분율 함수에 상한을 몰래 적용하면 다른 용도에서는 오류가 됩니다.
함수를 수정하기
function percentage(part, total) {
if (!Number.isFinite(part) || !Number.isFinite(total)) {
throw new TypeError("Use finite numbers");
}
if (total <= 0 || part < 0) {
throw new RangeError("Use a nonnegative part and a positive total");
}
return (part / total) * 100;
}
첫 번째 조건은 문자열, NaN, Infinity를 계산 전에 거절합니다. 두 번째 조건은 0으로 나누는 상황과 음수 수량을 막습니다. 반환값은 반올림하지 않습니다. 화면에서 12.5%처럼 표현할 수 있지만, 계산 함수가 일찍 반올림하면 다음 계산에 필요한 자릿수를 잃습니다.
독립적인 기대값으로 실행하기
같은 파일에서 함수 아래에 다음 코드를 붙이고 터미널에서 node percentage-check.mjs를 실행하세요. 성공하면 8 checks passed가 출력됩니다. 기대값과 다르면 assertion 오류로 명령이 실패합니다. TypeError와 RangeError 검사는 잘못된 입력을 거절하는 동작까지 확인합니다.
import assert from "node:assert/strict";
assert.equal(percentage(25, 200), 12.5);
assert.equal(percentage(0, 200), 0);
assert.equal(percentage(300, 200), 150);
assert.throws(() => percentage(1, 0), RangeError);
assert.throws(() => percentage(-1, 100), RangeError);
assert.throws(() => percentage("25", 200), TypeError);
assert.throws(() => percentage(NaN, 200), TypeError);
assert.throws(() => percentage(1, Infinity), TypeError);
console.log("8 checks passed");
검사가 원래 버그를 잡는지도 확인해야 합니다. return 수식을 잠깐 total / part * 100으로 되돌린 뒤 다시 실행하면 첫 번째 검사가 실패해야 합니다. 올바른 수식을 복구하고 재실행하세요. 버그를 다시 넣어도 통과하는 검사는 원하는 동작을 검증하지 못합니다.
화면 입력과 연결할 때 놓치기 쉬운 점
HTML 입력창의 값은 문자열입니다. 공백을 정리한 원문이 비어 있는지 먼저 검사한 뒤 Number로 변환하세요. Number("")는 0이므로 먼저 변환하면 빈칸을 사용자가 의도한 0으로 오해합니다. 잘못된 값에는 입력창 옆에 이유를 보여 주고 결과를 임의의 숫자로 대체하지 마세요. 쉼표가 있는 숫자나 지역별 소수점 표기는 지원 규칙을 정한 뒤 처리해야 합니다.
브라우저에서는 25와 200 입력, 전체 수량 0, 완료 수량 빈칸, 올바른 값 재입력을 차례로 확인하세요. 오류가 사라지고 결과가 갱신되는지, 키보드로 컨트롤에 접근할 수 있는지도 살펴봅니다. 함수 검사 8개가 통과했다고 화면 연결까지 검증된 것은 아닙니다.
AI에게 요청할 범위 정하기
“이 백분율 함수의 수식을 고쳐 줘. part는 0 이상, total은 양수이고 둘 다 유한한 숫자여야 해. 100% 초과는 허용해. 함수 이름을 유지하고 변경한 줄과 아래 8개 검사 실행 결과를 보여 줘.”처럼 요구사항을 구체적으로 적으세요. diff에서 관련 없는 수정이 섞이지 않았는지 확인하고 실행한 명령과 실제 종료 상태를 기록합니다. 완료했다는 문장만으로 명령 실행 여부를 판단하지 않습니다.
한계와 다음 실습
이 코드는 학습 예제이며 금융용 정밀 계산 라이브러리가 아닙니다. 자바스크립트 부동소수점 계산은 소수에서 반올림 오차가 생길 수 있습니다. 폼 보안, 번역, 배포도 이 검사 범위 밖입니다. 계산 정확성, 브라우저 동작, 운영 접근 가능 여부를 각각 기록하세요.
다음에는 소수 입력 하나를 직접 고르고 기대값을 손으로 계산하세요. 함수 결과를 유지하면서 화면에는 몇 자리까지 보여 줄지 정해 보세요.