숫자를 예쁘게 만드는 마법 같은 코드 이야기 ✨
안녕하세요! 오늘은 자바스크립트로 정말 유용하면서도 재미있는 기능을 만들어볼 거예요. 혹시 이런 경험 있으세요? 숫자가 쭉 이어져 있으면 잘 안 읽히고, "이게 얼마야?" 하고 한참 고민하게 되는 거요. 그래서 준비했어요! 숫자에 콤마를 딱딱 넣어주는 코드와, 숫자를 한글로 바꿔주는 기능이에요.
읽고 나면 "오, 이거 써먹어야겠다!" 싶은 마음이 들지도 몰라요. 그럼, 천천히 시작해 볼까요? 😊
첫 번째 준비물: HTML 🛠️
먼저, 숫자를 입력할 공간과 결과를 보여줄 자리를 만들어야겠죠? 브라우저에서 볼 수 있도록 HTML부터 짜볼게요.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>숫자 마법사</title>
</head>
<body>
<h1>💫 숫자 마법사</h1>
<p>금액을 입력해 보세요. 제가 알아서 예쁘게 바꿔 드릴게요!</p>
<input id="moneyInput" placeholder="여기에 숫자를 적어주세요!" />
<p id="formattedMoney">👉 금액이 콤마와 함께 여기에 나올 거예요.</p>
<p id="moneyInWords">👉 금액이 한글로 여기에 표시될 거예요.</p>
<script src="script.js"></script>
</body>
</html>
입력창 하나, 결과 보여주는 두 칸. 간단하지만 이 안에서 엄청난 일이 벌어질 거예요.
두 번째 단계: 자바스크립트로 마법 부리기 🪄
이제 자바스크립트 차례예요! 조금만 집중해서 따라 해보세요. 어렵지 않아요, 진짜예요!
// 숫자에 콤마를 넣어주는 함수예요.
function formatWithComma(amount) {
return amount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
// 숫자를 한글로 바꿔주는 함수도 있어요.
function convertToKoreanNumber(amount) {
const units = ["", "만", "억", "조"];
const nums = ["영", "일", "이", "삼", "사", "오", "육", "칠", "팔", "구"];
let result = "";
let unitIndex = 0;
while (amount > 0) {
const chunk = amount % 10000;
if (chunk > 0) {
const chunkStr = chunk
.toString()
.split("")
.reverse()
.map((num, idx) => (nums[+num] + (idx > 0 ? "십백천".charAt(idx - 1) : "")))
.reverse()
.join("");
result = chunkStr + units[unitIndex] + result;
}
unitIndex++;
amount = Math.floor(amount / 10000);
}
return result || "영";
}
// 입력창에 숫자를 입력하면 자동으로 작동해요!
document.getElementById("moneyInput").addEventListener("input", function (e) {
const rawValue = e.target.value.replace(/,/g, ""); // 콤마를 제거하고 숫자만 남겨요.
const numericValue = parseInt(rawValue, 10) || 0;
// 콤마 추가
const formatted = formatWithComma(numericValue);
document.getElementById("formattedMoney").textContent = `포맷팅된 금액: ${formatted}`;
// 한글로 변환
const korean = convertToKoreanNumber(numericValue);
document.getElementById("moneyInWords").textContent = `한글로: ${korean}`;
});
세 번째 단계: 해보면 신기해요! 🤩
자, 이제 브라우저에서 코드를 열고 숫자를 입력해 보세요.
예를 들어 123456789를 입력해볼까요?
- 포맷팅된 금액: 123,456,789
- 한글로: 일억이천삼백사십오만육천칠백팔십구
어때요? 진짜 신기하지 않나요? 몇 줄의 코드로 이런 일이 가능하다니, 코딩의 매력을 새삼 느끼게 돼요.
이게 끝이 아니에요! 🎉
이 코드는 정말 다양한 곳에 쓸 수 있어요. 쇼핑몰 가격 표시, 금융 앱의 금액 계산, 아니면 친구들한테 "내가 이런 거 만들었다!" 하고 자랑하기에도 딱이에요.
물론 여기서 멈추지 말고, 더 발전시킬 수도 있어요:
- 소수점 처리: 소수점 이하도 한글로 변환해 볼까요?
- 입력 제한: 숫자가 아닌 값이 들어가면 경고를 띄워주는 기능은 어떨까요?
- 디자인 추가: 결과 화면을 더 예쁘게 꾸며보면 사용자 경험이 훨씬 좋아질 거예요.
코딩은 이렇게 하나씩 재미를 더하며 발전해 나가는 거랍니다. 작은 코드를 통해 여러분의 세상을 더 재미있고 편리하게 만들어 보세요! 😊
'개발 > Javascript&Jquery' 카테고리의 다른 글
| [JS&jQuery] Ajax 통신? Javascript 와 jQuery 사용법을 알아보자!! (2) | 2024.11.29 |
|---|---|
| [Javascript] 한글,숫자,영어만 입력 가능 and 특수문자 제거 함수를 쉽게 만들자! (2) | 2024.11.26 |
| [Javascript] Javascript 의 split() 함수와 join() 함수를 이용하여 문자열을 배열로 분할 및 결합하는 방법에 대해 알아보자. (0) | 2023.03.10 |
| [jQuery] jQuery 로 selectbox 선택된 값 가져오기, 체크되었는지 확인하는 방법을 알아보자. (1) | 2023.03.10 |
| [jQuery] jQuery로 radio 선택된 값 가져오기. (0) | 2023.03.10 |
댓글