Vanilla JS로 구현하는 실시간 인도 통화 형식 포매팅 및 원시 값 저장

핵심 기술

이 글은 외부 라이브러리 없이 순수 JavaScript만을 사용하여 사용자 인터페이스(UI)에서 인도 통화 표기 방식(예: 1,00,000)을 실시간으로 보여주면서, 백엔드 전송 시에는 원시 숫자 값(예: 100000)을 유지하는 방법을 제시합니다.

기술적 세부사항

• 실시간 인도 통화 형식: 1,00,000과 같이 인도 특유의 천 단위 구분 기호를 입력 중에 동적으로 표시합니다.
• 원시 값 저장: 100000과 같이 쉼표가 제거된 순수한 숫자 값을 별도의 숨겨진 입력 필드(rawAmount)에 저장합니다.
• JavaScript 구현: addEventListener를 사용하여 input 이벤트를 감지하고, 정규 표현식(replace)을 활용하여 숫자 형식을 변환합니다.
• HTML 구조: 시각적으로 보이는 입력 필드(formattedAmount)와 실제 값을 저장할 숨겨진 입력 필드(rawAmount)를 함께 사용합니다.
• 폼 제출: 폼 제출 시 숨겨진 필드에 저장된 원시 값이 백엔드로 전송되도록 합니다.
• 예외 처리: 입력값에서 쉼표 및 숫자가 아닌 문자를 제거하고 소수점 처리도 일부 고려합니다.

개발 임팩트

• 사용자 경험(UX) 향상: 사용자가 익숙한 통화 표기 방식으로 편리하게 입력할 수 있도록 합니다.
• 백엔드 개발 간소화: 백엔드에서 별도의 파싱 과정 없이 즉시 사용할 수 있는 깨끗한 숫자 데이터를 제공합니다.
• 코드 경량화: 외부 라이브러리 의존성을 제거하여 프로젝트 파일 크기를 줄이고 성능을 최적화합니다.
• 유연한 제어: 순수 JavaScript를 사용하므로 구현 방식을 필요에 따라 유연하게 수정하고 확장할 수 있습니다.

커뮤니티 반응

언급된 커뮤니티 반응은 없으나, 이 기술은 특히 인도 시장을 대상으로 하는 서비스에서 흔히 요구되는 기능으로, 개발자 커뮤니티에서 높은 실용성을 가질 것으로 예상됩니다.

톤앤매너

전문적이고 실용적인 개발 가이드라인을 제공하며, 코드 예제와 함께 명확하고 간결한 설명을 통해 IT 개발 실무에 바로 적용할 수 있도록 안내합니다.