본문으로 건너뛰기

템플릿

시작하기 전에​

템플릿을 호출하는 서비스를 만들기 전에 REST 웹 서비스를 만들 수 있는지 확인하세요. 방법을 모르는 경우 다음 링크를 방문하세요:

또한 이 튜토리얼을 시작하기 전에 JavaScript 기초 지식이 있는지 확인하는 것이 좋습니다.

서비스에서 템플릿 사용​

이 튜토리얼에서는 템플릿 생성과 서비스에서 템플릿을 호출하는 데 필요한 작업을 다룹니다.

Netuno에서 서비스를 생성할 때 직접 만든 템플릿에 접근할 수 있는 옵션이 있습니다. 즉, 결과에 따라 서비스를 데이터가 포함된 HTML 템플릿으로 리디렉션할 수 있습니다.

이 예제에서는 기본 HTML 템플릿을 만들고 서비스의 데이터를 같은 템플릿으로 전달합니다.

템플릿 생성​

템플릿1.png

위 디렉터리에 있는 상태에서 .html 파일을 생성합니다. 이 예제에서는 이름을 템플릿.html로 지정합니다.

다음은 이 페이지의 내용입니다:

<!-- Netuno 헤더 호출 -->
_{include=_|includes/head}

<!-- 스타일 정의 -->

<style>
body, html {
margin: 10px;
}

h1, b {
color: #8182E6;
}
</style>

<!-- HTML body 시작 -->
<h1>템플릿 제목</h1>

<!-- 서비스에서 템플릿으로 데이터를 전달해야 할 때는 _{&변수}를 사용하세요 -->
<p>안녕하세요, 저는 <b>_{&data=이름}</b>이고 서비스에서 <b>_{&data=데이터}</b>를 받고 있습니다!</p>

<!-- HTML body 끝 -->

<!-- Netuno 푸터 호출 -->
_{include=_|includes/foot}

마지막으로 다음 함수로 템플릿을 호출하는 서비스를 생성합니다:

_template.output('템플릿_이름', 변수(선택 사항));

다음은 ‘서비스.js’ 서비스 예제입니다:

// '데이터' 객체를 초기화하여 데이터를 받을 수 있도록 합니다
var 데이터 = _val.init()

// '데이터' 객체에 값 연결
.set("이름", "템플릿")
.set("데이터", "데이터")

// 이 함수는 템플릿 호출을 수행합니다
_template.output("템플릿", 데이터);

템플릿이 하위 디렉터리에 있는 경우 함수에 _template.output('디렉터리/템플릿_이름')와 같이 지정하세요.

마지막으로 브라우저에서 서비스를 호출하면 다음과 유사한 화면이 표시됩니다:

템플릿2.png

사용하는 브라우저에 따라 앞서 제시된 결과가 다를 수 있습니다.

질문이 있으시면 페이지 하단에 안내된 방법으로 주저 없이 문의해 주세요.

즐거운 개발 되세요!