왼쪽에 JavaScript를 붙여 넣고 "Convert"를 누르세요 — XML로 바꿔드립니다JavaScript 코드 붙여넣기

이 도구가 하는 일

SOAP 서비스, RSS 피드, 사이트맵, 테스트 픽스처 때문에 JavaScript 객체에 맞는 XML 페이로드를 손으로 짜본 적이 있다면 그 고통을 아실 겁니다. XMLSerializer는 DOM이 필요하고, DOMParser는 반대 방향이고, 요소를 직접 조립하다 보면 처음 세 번은 자식 요소 하나를 꼭 빼먹습니다. JS를 여기에 붙여 넣으면 한 번에 well-formed한 XML을 받을 수 있습니다. 단순 객체, ES6 클래스new 인스턴스, 깊이 중첩된 구조 — 전부 됩니다.

JS 값이 XML로 어떻게 매핑되는지 정확히 이해합니다. 숫자와 불리언은 문자열 형태로 출력됩니다. Date 객체는 ISO-8601로 나오고, BigInt는 10진수 문자열로(접미사 n은 빠진 채) 출력됩니다. nullundefined 필드는 버려지지 않고 빈 요소가 되니까 출력 형태가 안정적으로 유지됩니다. 배열은 컨테이너 요소가 되고, 각 아이템이 자식으로 들어가며, 이름은 부모 키의 단수형으로 — Orderitems 배열은 <items><item>...</item></items>가 됩니다. 배열이 타입이 있는 클래스 인스턴스를 담고 있으면 그 대신 클래스 이름이 쓰입니다.

클래스 정의도 처리합니다. class Order { constructor(...) { this.x = ...; } }const order = new Order(...)가 있으면, 생성자에서 할당된 모든 프로퍼티를 가진 <Order> 루트를 돌려줍니다. 중첩 클래스 인스턴스는 중첩 요소로 펼쳐집니다. 메서드, getter, Symbol 키 프로퍼티, #로 시작하는 프로퍼티(프라이빗 필드)는 건너뜁니다. 그냥 객체 리터럴만 붙여 넣으면 적절한 루트 요소 이름으로 바로 직렬화합니다.

사용법

세 단계. 짧은 리터럴을 붙여 넣든 모듈 전체를 붙여 넣든 똑같이 동작합니다.

1

JavaScript 붙여 넣기 (또는 샘플 실행)

왼쪽 에디터에 JS를 그대로 넣으세요. 일반 객체 리터럴, ES6 클래스 + 인스턴스, 팩토리 함수 반환값, Node.js 모듈 export — 전부 괜찮습니다. 현실적인 Order / OrderItem / Address 예시를 보려면 Load Sample을 누르세요.

const, let, import 문은 그대로 두세요. 떼어낼 필요 없습니다 — 파서가 둘러싼 문법을 무시하고 실제 값만 읽습니다.

2

Convert 누르기

녹색 Convert 버튼을 누르세요. 도구가 JS를 읽고 클래스, 배열, 중첩 객체를 모두 보존하면서 한 번에 XML을 뽑아냅니다. 실행되는 동안 짧은 로딩 표시가 뜹니다.

3

XML 복사

오른쪽 패널에 들여쓰기된 well-formed XML이 채워집니다. 표준을 따르는 어떤 XML 파서도 받아들입니다. SOAP 요청, RSS 템플릿, 테스트 픽스처에 그대로 복사해 가세요.

실제로 유용한 상황

SOAP 요청 본문 만들기

SOAP 요청을 그대로 반영한 JS 객체가 있고 SoapUI, Postman, <code>fetch</code> 호출에 넣을 XML 본문이 필요합니다. 객체 붙여 넣고, XML 복사하고, 끝.

RSS / Atom 피드 생성

title, link, items를 가진 피드 객체를 적절한 RSS 엔벨로프로 감쌀 수 있는 well-formed <a href="https://www.w3.org/TR/xml/" target="_blank" rel="noopener">XML</a> 골격으로 바꾸세요 — 요소를 손으로 짤 필요 없이요.

sitemap.xml 파일 시작

URL 객체 배열을 붙여 넣으면 <code>&lt;urlset&gt;</code> 사이트맵에 필요한 뼈대가 나옵니다. 적절한 네임스페이스로 바꾸면 끝입니다.

통합 테스트 시드 데이터

Jest나 Vitest 셋업에 쓰던 픽스처 객체를, 레거시 시스템, 모크 서버, 아직 XML을 쓰는 컨슈머들을 위한 XML 시드 데이터로 변환합니다.

자주 묻는 질문

일반 객체, ES6 클래스, 배열 모두 되나요?

네, 셋 다 됩니다. 일반 객체 리터럴은 키를 요소 이름으로 써서 바로 직렬화됩니다. ES6 클래스 + new 인스턴스는 클래스 이름을 루트 요소로 씁니다. 배열은 컨테이너 요소가 되고 아이템마다 자식 하나씩, 이름은 요소가 클래스 인스턴스면 그 클래스 이름, 아니면 키의 단수형으로 붙습니다.

Date, BigInt, null은 어떻게 처리되나요?

Date 객체는 ISO-8601 문자열로 나옵니다. BigInt는 10진 문자열로 출력되고(n 접미사는 빠짐), nullundefined 프로퍼티는 조용히 빠지는 대신 빈 요소(<field/>)가 됩니다. 덕분에 그 요소가 있기를 기대하는 하류의 XSD도 문제 없이 검증을 통과합니다.

메서드, getter, 프라이빗 필드는요?

클래스의 메서드와 getter는 건너뜁니다 — 인스턴스에 실제로 할당된 데이터 프로퍼티만 직렬화됩니다. #로 선언한 프라이빗 필드, Symbol 키 프로퍼티, 프로토타입 쪽(인스턴스가 아닌) 프로퍼티도 건너뜁니다. JSON.stringify가 하는 것과 똑같습니다.

클래스 없이 객체 리터럴만 붙여 넣어도 되나요?

네. 그냥 const data = { ... }도 잘 돌아갑니다 — 바깥 변수 이름이 루트 요소로 쓰이고, 바인딩이 없으면 일반적인 <root>가 사용됩니다. 안의 중첩 객체와 배열도 같은 방식으로 중첩 요소가 됩니다.

&amp;, &lt;, &gt; 같은 특수문자는 이스케이프되나요?

네. &, <, >, ", '가 들어간 텍스트 내용은 해당하는 XML 엔터티로 이스케이프되어 출력이 항상 깔끔하게 다시 파싱됩니다. 유니코드 문자는 그대로 두고, 출력은 UTF-8입니다.

제 코드가 저장되나요?

코드는 변환을 위해 백엔드로 전송되고 따로 보관하지 않습니다 — 페이로드를 로그에 남기지도 않습니다. 온라인 도구 전반과 마찬가지로, 정말 민감한 코드라면 붙여 넣기 전에 한 번 훑어보세요.

함께 쓰면 좋은 도구

JavaScript → XML은 전체 그림의 한 조각입니다. 같이 쓰면 잘 맞는 도구들: