메인 컨텐츠로 가기

developerWorks 이용 약관에 동의하시는 경우 제출을 클릭하십시오. 이용 약관 보기.

developerWorks에 처음 로그인하면 developerWorks프로파일이 생성됩니다.귀하의 프로파일에서 동의하신 내용이 공개되지만 이 사항은 언제든지 변경 가능합니다. 귀하의 성명(숨김으로 체크되어 있어도 표시됩니다)과 디스플레이 이름은 게시한 컨텐츠나 사이트 엑세스시 표시됩니다.

모든 정보가 안전하게 전송되었습니다.

  • 닫기 [x]

처음 developerWorks에 로그인할 때 프로파일이 작성되므로, 이를 위해 디스플레이 이름을 선택해야 합니다. 선택하신 디스플레이 이름은 developerWorks에 게시한 컨텐츠에 표시됩니다.

3글자 이상 31글자 이하의 길이로 사용 가능합니다. dW커뮤니티 내에서는 보안상 이메일주소를 제외한 다른 이름을 지정하셔야 합니다.

developerWorks 이용 약관에 동의하시는 경우 제출을 클릭하십시오. 이용 약관 보기.

모든 정보가 안전하게 전송되었습니다.

  • 닫기 [x]

팁: XSLT의 핵심

XSLT를 작성할 때 질문하게 되는 기본적인 사항

Doug Domeny, Senior Software Engineer, 프리랜서
Doug Domeny는 비즈니스 사용자에게 적합한, 브라우저 기반의 다국어 XML 편집기를 개발했으며 이 편집기는 XSLT, W3C XML Schema, DHTML, JavaScript, jQuery, 정규식 및 CSS를 사용하여 작성되었다. 그는 미국 매사추세츠주 웬햄에 있는 고든 대학에서 전산학과 수학 학사학위를 받았으며 수년 동안 XLIFF(XML Localization Interchange File Format) 및 OAXAL(Open Architecture for XML Authoring and Localization)과 같은 OASIS 기술 위원회에서 일했다. 소프트웨어 엔지니어로서는 소프트웨어 엔지니어링과 아키텍처, UI 설계 및 기술, 테크니컬 라이팅 분야의 중요한 기술을 개발했다.

요약:  코딩을 시작하는 데는 XSLT가 위협적인 존재가 될 수 있지만, 두 가지 간단한 질문에 대답할 수 있으면 제대로 하고 있는 것입니다. 이 팁에서 소개하는 간단한 방식을 사용하고 약 10분을 투자한다면 독자는 기초적인 변환 과정을 훨씬 더 명확하게 이해할 수 있습니다.

원문 게재일:  2011 년 1 월 11 일 번역 게재일:  2011 년 5 월 10 일
난이도: 중급 원문:  보기 PDF:  A4 and Letter (100KB | 10 pages)Get Adobe® Reader®
페이지뷰:  2461 회
의견:  


XSLT가 비교적 생소했던 10년 전, 필자는 XSLT를 이해하려고 전력을 다했다. XSLT는 사용하기가 너무 어려웠으며 디버그하기도 매우 힘들었다. 그러나 XSLT의 강점과 약점 그리고 더욱 중요한 패러다임, XSLT를 사용하는 방법과 시점을 이해하게 되면서 XSLT는 필자가 즐겨 사용하는 도구가 되었다. XSLT는 XSLT에 적합한 태스크에 잘 적용할 때 매우 강력하고 유용한 도구가 된다.

자주 사용하는 약어

  • CSS: Cascading style sheet
  • HTML: Hypertext Markup Language
  • RSS: Really Simple Syndication
  • SQL: Structured Query Language
  • URL: Uniform resource locator
  • W3C: World Wide Web Consortium
  • XHTML: Extensible Hypertext Markup Language
  • XML: Extensible Markup Language
  • XSLT: Extensible Stylesheet Language Transformations

볼트에서 너트를 풀기 위해 드라이버와 망치를 사용한 적이 있는가? 드라이버 날을 육각 너트의 한쪽 면에 대고 망치로 드라이버의 손잡이를 두드린다. 드라이버가 회전함에 따라 너트도 함께 돌아간다. 드라이버가 회전하지 않으면 드라이버 손잡이를 더 강하게 두드린다. 이제 소켓 렌치를 사용하는 경우를 생각해 보자. 소켓 렌치는 망치처럼 작아 보이지만, 실제 망치를 사용하는 것만큼 효과적이지는 않다. 그래도 망치와 드라이버를 내려놓고 너트 위에 소켓을 대고 돌린다. 불행히도 소켓이 너무 큰 경우에는 소켓이 너트에 밀착되게 해야 한다. 결국, 소켓 렌치를 사용하는 것을 포기하고 다시 망치를 사용하게 된다.

소켓 렌치를 사용할 때의 성공 요인은 소켓이 너트와 일치해야 한다는 패턴 일치에 있다. 소켓이 너트와 일치하는 경우, 볼트에서 너트를 풀기에는 망치보다는 소켓 렌치가 훨씬 더 효과적이다. 또한, XSLT는 패턴에 의존하는 패턴 일치 언어인 반면에 Java™와 C# 언어는 명령형 언어이다. XSLT를 소켓 렌치라고 하면, 필수 언어는 망치라고 할 수 있다. 이러한 언어에는 각각 적합한 용도가 있다.

XSLT는 프로그래밍 언어이다.

웹 개발을 하려면 매우 다양한 언어를 익혀야 한다. 물론, 그 첫 번째는 마크업 언어인 HTML이다. 그 후에는 프론트 엔드 언어로 CSS와 Javascript를 배우고 PHP나 Microsoft® ASP.NET과 같은 서버 스크립트를 익힌다. 백엔드 언어로는 Java, C#이나 Microsoft Visual Basic.NET과 같은 언어를 습득한다. 마지막으로 데이터베이스 레벨에서는 SQL을 배운다. SQL을 아는 경우에는 두 언어가 모두 선언형 언어이기 때문에 XSLT를 배우기가 수월해진다.

대부분의 프로그래머와 마찬가지라면 독자도 C++과 같은 명령형 언어로 일을 시작했을 것이다. 이러한 언어는 명령으로 코딩되며 함수가 조치를 수행한다. 함수의 이름은 동사-명사 형태를 취한다(예: GetValueUpdateContactInfo). 선언형 언어는 명령을 실행한다기 보다는 원하는 결과를 명시하거나 선언한다. 표 1에는 명령형 언어와 선언형 언어로 분류된 몇 가지 일반적인 프로그래밍 언어가 표시되어 있다.


표 1. 프로그래밍 언어 스타일
명령형선언형
절차형오브젝트 지향형함수형논리형
C, PascalJava, C++LISP, XPathProlog, SQL, XSLT

XSLT의 핵심: 패턴 일치

XSLT는 XML을 XML이나 HTML, 평문으로 변환하는 데 필요한 선언형 언어이다. 변환은 템플리트가 선택된 입력 XML에 있는 패턴을 출력할 내용과 일치시키는 과정을 통해 이루어진다. 그림 1에서와 같이 핵심은 패턴 일치이다. 명령을 코딩하는 대신 패턴을 코딩한다. 일부 패턴은 입력과 일치하고 다른 패턴은 출력 템플리트로 작동한다.

목록 1에는 <item> 요소와 일치하는 단순한 XSLT 템플리트가 표시되어 있다.


목록 1. XSLT 템플리트 예제

<xsl:template match="item">
     <li><a href="{link}"><xsl:value-of select="title"/></a></li>
</xsl:template>

match 속성은 입력과 일치하는 패턴(이 경우에는 <item> 태그)을 지정한다. <xsl:template> 태그 사이에 있는 마크업은 출력 템플리트이다. 이 템플리트에는 플레이스홀더가 있으며 여기에서 입력값이 대체된다. 목록 1에서는 <link> 요소의 값이 URL을 href 속성에 제공하며 <title> 요소는 표시되는 하이퍼링크 텍스트에 해당한다.

개발자는 가끔 "RSS 피드를 링크 목록으로 표시하는 작업"과 같은 태스크를 맡게 된다. 그림 1에서 최종 제품의 모습을 상상할 수 있다.


그림 1. 렌더링된 출력
링크 목록의 렌더링된 HTML 출력

그러나 바로 코딩을 시작하게 되면 소켓의 크기가 맞지 않는 소켓 렌치를 사용할 때와 같이 좌절하게 된다. 코딩을 시작하기 전에 자신에게 다음과 같은 두 가지 질문을 하자.

  • 무엇을 갖고 있는가(입력)?
  • 무엇을 하고 싶은가(출력)?

해당 태스크에 필요한 입력 결정

입력에 대한 질문에 답변을 할 때는 다음과 같은 질문을 고려한다.

  • XML은 어떤 모습을 하고 있나?
  • 요소는 무엇인가?
  • 어느 것이 반복 가능한가?
  • 구조란 무엇인가?
  • 속성이란 무언인가?
  • 네임스페이스란 무엇인가?

그림 2에는 XML 구조의 일반적인 용어가 표시되어 있다.


그림 2. 일반적인 XML 용어
XML 요소는 열기 태그(속성을 가질 수 있음)와 하위 노드, 닫기 태그로 구성된다.

입력 XML 샘플을 가져온다. 사용 가능한 경우에는 스키마도 가져온다. 스키마에는 선택적인 요소와 속성은 물론이고 가능한 모든 태그와 속성값, XML 문서의 구조에 대한 정보가 포함되어 있다. XSLT를 테스트하고 디버깅하고 패턴을 일치시키는 과정을 코딩하는 데는 샘플 입력 문서가 반드시 필요하다. 예를 들어, 목록 2에 있는 IBM® developerWorks® 기술 라이브러리 RSS 피드를 생각해 보자.


목록 2. 입력 XML 문서 샘플

<?xml version="1.0"?> 
<rss version="2.0"> 
<channel> 
    <title>IBM developerWorks : Technical library</title> 
    <link>http://www.ibm.com/developerworks/</link> 
    <description>The latest content from IBM developerWorks</description> 
    <pubDate>27 Nov 2010 16:48:48 +0000</pubDate> 
    <language>en</language> 
    <copyright>Copyright 2004 IBM Corporation.</copyright> 
    <image> 
        <title>developerWorks</title> 
        <url>http://www.ibm.com/developerworks/i/dwlogo-small.gif</url> 
        <link>http://www.ibm.com/developerworks/</link> 
    </image> 

    <item> 
        <title><![CDATA[IBM Cognos Proven Practices: Enterprise Planning - 
User Lockdown in DB2]]></title> 

        <description><![CDATA[This document describes methods to limit 
database permission in DB2 for IBM Cognos Planning 8.]]></description> 

        <link><![CDATA[http://www.ibm.com/developerworks/data/
library/cognos/infrastructure/databases/page535.html?ca=drs-]]></link> 

        <pubDate>25 Nov 2010 05:00:00 +0000</pubDate> 
    </item> 

    <item> 
        <title><![CDATA[Monitoring in DB2 9.7, Part 2: Relational access to 
XML event monitor data in DB2 9.7]]></title> 

        <description><![CDATA[Learn how you can get relational access to 
the subset of monitor data that is captured in the form of an XML document 
by an activity or statistics event monitor in IBM DB2 for Linux, UNIX, and 
Windows Version 9.7 (DB2).]]></description> 

        <link><![CDATA[http://www.ibm.com/developerworks/data/
library/techarticle/dm-1011db2mpart2/index.html?ca=drs-]]></link> 

        <pubDate>24 Nov 2010 05:00:00 +0000</pubDate> 
    </item> 

</channel> 
</rss>

출력을 결정한다.

입력에 대한 개념이 제대로 되어 있으면 완료된 제품이 어떠한 형태를 갖추어야 하는지에 마음을 돌릴 수 있다. 자신에게 다음과 같은 질문을 해보자.

  • 출력의 형식이 XML과 HTML, 텍스트 중에서 어떤 것이 되어야 하나?
  • 태그 이름과 속성이란 무엇인가?
  • 구조란 무엇인가?

XSLT는 둘 이상의 XML 문서를 다음 형식 중 하나로 변환한다.

  • HTML
  • XML, 다양한 어휘
  • XML, 동일한 어휘(동일 템플리트 사용)
  • XHTML(특별히 고려된 XML)
  • XSLT(XSLT는 XML 어휘이지만, 네임스페이스 별명을 사용함)
  • 텍스트(예: Javascript)

출력 마크업을 설계할 때는 먼저, 출력이 어떤 형태가 되어야 하는지 생각해 본 다음, 다음 단계로 넘어가서 마크업을 작성한다. 예를 들면, 목록 3에는 하이퍼링크 목록을 처리하는 HTML 마크업이 표시되어 있다.


목록 3. 원하는 출력

<html>
    <head><title>the title</title></head>
    <body>
        <ul>
            <li><a href="some-url">hyperlink text</a></li>
            <li><a href="some-url">hyperlink text</a></li>
        </ul>
    </body>
</html>

XSLT 작성

입력과 출력에 대한 질문에 답변하고 나면, XSLT를 작성할 준비가 된 것이다. 독자의 경험이 대부분 일반적인 프로그래밍 언어와 관련된 경우에는 "그래, 헤더를 작성하고 for 루프를 사용하여 목록을 생성한 다음, 푸터를 작성해야지"라고 생각할 수도 있다. 그 대신 패턴을 생각하자. 입력 <item> 요소는 출력 <li> 요소와 일치한다. 각 <item> 내에서는 <link> 요소가 <a href> 속성과 일치하며 <title> 요소는 <a> 태그 사이에 있는 텍스트와 일치한다. 이제 XSLT를 작성할 준비가 되었다. 다음 단계를 수행한다.

  1. 출력 형식은 HTML이므로 여기에는 HTML을 지정하는 <xsl:output> 요소가 포함된다.
  2. 루트 템플리트, 즉 <xsl:template match="/">를 추가하고 이 템플리트를 헤더와 푸터가 포함된 HTML 문서의 패턴으로 채운다.
  3. <xsl:apply-templates> 요소를 해당 목록이 속하는 위치에 배치한다.
  4. <item> 요소가 출력 <li> 요소와 일치하도록 템플리트를 작성한다.

목록 4에는 완료된 XSLT가 표시되어 있다.


목록 4. 완료된 XSLT

<?xml version='1.0'?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:output method="html"/>

<xsl:template match="/">
     <html>
          <head><title>Zen of XSLT</title></head>
          <body>
               <ul>
                    <xsl:apply-templates select="rss/channel/item"/>
               </ul>
          </body>
     </html>
</xsl:template>

<xsl:template match="item">
     <li><a href="{link}"><xsl:value-of select="title"/></a></li>
</xsl:template>

<xsl:template match="text()"/>

</xsl:stylesheet>


핵심 사항을 기억하자.

XSLT 코딩의 핵심은 함수를 호출하는 데 있지 않고 패턴을 일치시키는 데 있다. 다음과 같은 두 가지 핵심 질문에 대답해야 한다.

  • 무엇을 갖고 있는가?
  • 무엇을 하고 싶은가?

이러한 질문에 대답을 할 수 있으면, 입력과 출력을 일치시키는 XSLT 템플리트를 작성할 수 있다. 그렇지 않은 경우에는 소켓 렌치를 볼트에서 너트를 풀기 위해 드라이버 손잡이를 두드리는 망치로 사용하고 있는 것처럼 느끼게 될 것이다.


참고자료

교육

제품 및 기술 얻기

토론

  • XML 영역 토론 포럼: 여러 XML 관련 토론에 참여해 볼 수 있다.

  • developerWorks 커뮤니티: 개발자가 운영하고 있는 블로그, 포럼, 그룹 및 위키를 살펴보면서 다른 developerWorks 사용자와 의견을 나눌 수 있다.

필자소개

Doug Domeny는 비즈니스 사용자에게 적합한, 브라우저 기반의 다국어 XML 편집기를 개발했으며 이 편집기는 XSLT, W3C XML Schema, DHTML, JavaScript, jQuery, 정규식 및 CSS를 사용하여 작성되었다. 그는 미국 매사추세츠주 웬햄에 있는 고든 대학에서 전산학과 수학 학사학위를 받았으며 수년 동안 XLIFF(XML Localization Interchange File Format) 및 OAXAL(Open Architecture for XML Authoring and Localization)과 같은 OASIS 기술 위원회에서 일했다. 소프트웨어 엔지니어로서는 소프트웨어 엔지니어링과 아키텍처, UI 설계 및 기술, 테크니컬 라이팅 분야의 중요한 기술을 개발했다.

잘못된 도움말 신고

부정사용 신고

감사합니다. 이 항목은 운영자가 관심을 표시했습니다.


잘못된 도움말 신고

부정사용 신고

제출실패 신고. 나중에 다시 실행해주세요.


디벨로퍼웍스 로그인


IBM ID가 필요하세요?
IBM ID를 잊으셨습니까?


비밀번호를 잊으셨습니까?
비밀번호 변경

developerWorks 이용 약관에 동의하시는 경우 제출을 클릭하십시오. 이용 약관.

 


developerWorks에 처음 로그인하면 developerWorks프로파일이 생성됩니다.귀하의 프로파일에서 동의하신 내용이 공개되지만 이 사항은 언제든지 변경 가능합니다. 귀하의 성명(숨김으로 체크되어 있어도 표시됩니다)과 디스플레이 이름은 게시한 컨텐츠나 사이트 엑세스시 표시됩니다.

화면상에 보여지는 닉네임을 정하세요.

처음 developerWorks에 로그인할 때 프로파일이 작성되므로, 이를 위해 디스플레이 이름을 선택해야 합니다. 선택하신 디스플레이 이름은 developerWorks에 게시한 컨텐츠에 표시됩니다.

3글자 이상 31글자 이하의 길이로 사용 가능합니다. dW커뮤니티 내에서는 보안상 이메일주소를 제외한 다른 이름을 지정하셔야 합니다.

3개의 &이나 대쉬를 포함해주시고 31글자내로 제한해주세요.


developerWorks 이용 약관에 동의하시는 경우 제출을 클릭하십시오. 이용 약관.

 


아티클 순위

의견

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=20
Zone=XML, 웹 개발
ArticleID=656257
ArticleTitle=팁: XSLT의 핵심
publish-date=01112011
author1-email=doug.domeny@gmail.com
author1-email-cc=nancy_hannigan@us.ibm.com

태그

Help
검색 필드를 사용하여 My developerWorks 내에서 해당 태그가 사용된 모든 종류의 컨텐츠를 검색하십시오.

태그를 더 많이 보거나 적게 보기 위해 슬라이더 막대를 사용하십시오.

인기 태그는 특정 컨텐츠 존(예를 들어, 자바, 리눅스, WebSphere)의 최고 인기 태그를 보여줍니다.

내 태그는 특정 컨텐츠 존(예를 들어, 자바, 리눅스, WebSphere)의 귀하의 태그를 보여줍니다.

검색 필드를 사용하여 My developerWorks 내에서 해당 태그가 사용된 모든 종류의 컨텐츠를 검색하십시오. 인기 태그는 특정 컨텐츠 존(예를 들어, 자바, 리눅스, WebSphere)의 최고 인기 태그를 보여줍니다. 내 태그는 특정 컨텐츠 존(예를 들어, 자바, 리눅스, WebSphere)의 귀하의 태그를 보여줍니다.