-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathatom.xml
More file actions
121 lines (68 loc) · 128 KB
/
Copy pathatom.xml
File metadata and controls
121 lines (68 loc) · 128 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title>DEVPOOL</title>
<subtitle>All about software development.</subtitle>
<link href="/atom.xml" rel="self"/>
<link href="https://indra818.github.io/"/>
<updated>2018-08-14T02:53:33.871Z</updated>
<id>https://indra818.github.io/</id>
<author>
<name>Kyeongjin Kim</name>
</author>
<generator uri="http://hexo.io/">Hexo</generator>
<entry>
<title>Maven Plugin을 활용한 Docker Container 이미지 배포 환경 구성</title>
<link href="https://indra818.github.io/2018/08/07/jib-maven-plugin-manual/"/>
<id>https://indra818.github.io/2018/08/07/jib-maven-plugin-manual/</id>
<published>2018-08-07T06:15:56.000Z</published>
<updated>2018-08-14T02:53:33.871Z</updated>
<content type="html"><![CDATA[<img src="/2018/08/07/jib-maven-plugin-manual/jib-build-docker-java-container-image.png" title="Jib"><p>본 문서는 Google Container Tools 에서 제공하는 메이븐 플러그인 중 <a href="https://github.com/GoogleContainerTools/jib/tree/master/jib-maven-plugin" rel="external nofollow noopener noreferrer" target="_blank">Jib</a> 을 활용하여 각 프로젝트별 Docker 이미지를 메이블으로 생성 및 배포하는 환경 구축에 대해 기술한다.</p><div class="toc"><!-- toc --><ul><li><a href="#baepo-hwangyeongbyeol-seoljeong-mic-guseong">배포 환경별 설정 및 구성</a><ul><li><a href="#amazon-ecr">Amazon ECR</a></li><li><a href="#private-docker-registry-on-nexus">Private Docker Registry on Nexus</a></li></ul></li><li><a href="#pom-pail-naee-peulreogeuin-seoljeong-naeyong-cuga">POM 파일 내에 플러그인 설정 내용 추가</a></li><li><a href="#maven-profile-byeol-seoljeong">Maven Profile 별 설정</a></li></ul><!-- tocstop --></div><p>대상으로 하는 클라우드 환경은 AWS와 Nexus를 활용한 자체 구축 Private Docker Registry이다.</p><h2><span id="baepo-hwangyeongbyeol-seoljeong-mic-guseong">배포 환경별 설정 및 구성</span></h2><h3><span id="amazon-ecr">Amazon ECR</span></h3><h4><span id="aws-cli-seolci-mic-guseong">AWS CLI 설치 및 구성</span></h4><h5><span id="aws-cli-seolci">AWS CLI 설치</span></h5><ul><li><p>Windows 환경</p><p>AWS에서 제공하는 <a href="https://docs.aws.amazon.com/ko_kr/cli/latest/userguide/awscli-install-windows.html#install-msi-on-windows" rel="external nofollow noopener noreferrer" target="_blank">MSI 설치 관리자</a> 페이지에서 본인 환경에 맞는 MSI 설치 파일을 다운 받아 설치 후 해당 페이지에서 안내하는 가이드라인을 따른다.</p></li><li><p>Unix (Linux or macOS) 환경</p><ol><li><p>터미널에서 아래 명령을 실행하여 설치 스크립트를 다운로드</p><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">curl "https://bootstrap.pypa.io/get-pip.py" -o "get-pip.py"</span><br><span class="line">sudo python get-pip.py</span><br></pre></td></tr></table></figure></li><li><p>Pip를 사용하여 AWS CLI를 설치</p><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">sudo pip install awscli</span><br></pre></td></tr></table></figure></li><li><p>정상 설치 여부 확인</p><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">aws help</span><br></pre></td></tr></table></figure></li></ol><blockquote><p>AWS CLI 설치를 위해서는 Python 2.6.5 버전 이상이 필요하며 macOS의 경우 pip를 사용한 설치가 안 될 수도 있다. 이 경우 아래 링크를 참조하여 수동 설치하도록 한다.</p><p><a href="https://docs.aws.amazon.com/ko_kr/cli/latest/userguide/cli-install-macos.html" rel="external nofollow noopener noreferrer" target="_blank">macOS에서 AWS Command Line Interface 설치</a></p></blockquote></li></ul><h5><span id="aws-cli-guseong">AWS CLI 구성</span></h5><p>터미널 또는 CMD 화면에서 아래 명령을 실행한다. 아래 명령은 기본 설정이 변경되지 않는 한 최초 1회만 필요하다.</p><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">aws configure</span><br><span class="line">AWS Access Key ID [None]: [AWS로부터 발급 받은 액세스 키 입력]</span><br><span class="line">AWS Secret Access Key [None]: [AWS로부터 발급 받은 시크릿 액세스 키 입력]</span><br><span class="line">Default region name [None]: ap-northeast-2</span><br><span class="line">Default output format [None]: json</span><br></pre></td></tr></table></figure><blockquote><p>AWS Access Key와 Secret Access Key에 대해서는 아래 링크를 참조한다.</p><ul><li><a href="https://docs.aws.amazon.com/ko_kr/general/latest/gr/managing-aws-access-keys.html" rel="external nofollow noopener noreferrer" target="_blank">AWS 계정에 대한 액세스 키 관리</a></li><li><a href="http://wildpup.cafe24.com/archives/929" rel="external nofollow noopener noreferrer" target="_blank">AWS Access Key와 Secret Key를 만들고 CLI 사용해보기</a></li></ul></blockquote><h4><span id="amazon-ecr-docker-credential-helper-seolci-mic-guseong">Amazon ECR Docker Credential Helper 설치 및 구성</span></h4><p>Amazon ECR Docker Credential Helper는 Docker 이미지를 Amazon Elastic Container Registry (이하 ECR)에 손쉽게 배포하기 위해 AWS에서 만든 툴로써 AWS 인증 처리와 이미지 배포를 담당한다.</p><blockquote><p><a href="https://github.com/awslabs/amazon-ecr-credential-helper" rel="external nofollow noopener noreferrer" target="_blank">https://github.com/awslabs/amazon-ecr-credential-helper</a></p></blockquote><h5><span id="seolci">설치</span></h5><p>설치를 위해서는 go 언어 1.6버전 이상이 시스템에 설치되어 있어야 하며, <code>git</code> 및 <code>make</code> 모듈도 설치되어 있어야 한다.</p><p>위 환경이 갖추어진 상태라면 터미널 창에서 아래 명령어를 실행하여 모듈 소스코드를 다운로드한다.</p><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">go get -u github.com/awslabs/amazon-ecr-credential-helper/ecr-login/cli/docker-credential-ecr-login</span><br></pre></td></tr></table></figure><p>다운로드를 완료 한 후 아래 경로로 이동하여 make 명령을 실행한다.</p><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">cd ~/go/src/github.com/awslabs/amazon-ecr-credential-helper</span><br><span class="line">make docker TARGET_GOOS=darwin # for macOS</span><br><span class="line">make docker TARGET_GOOS=windows # for Windows</span><br></pre></td></tr></table></figure><blockquote><p>위 명령은 macOS에서 실행한 경우이고 시스템 및 사용자 환경에 따라 상이할 수 있다.</p></blockquote><p>빌드를 완료한 후 생성된 <strong>바이너리 파일의 경로를 시스템 환경변수의 PATH 설정에 추가하여 어느 경로에서도 실행 가능하도록 구성</strong>한다.</p><h5><span id="hwangyeongseoljeong">환경설정</span></h5><p>Docker 환경설정 파일(<code>~/.docker/config.json</code>)에 아래 내용을 추가 후 Docker를 재기동한다.</p><figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">{</span><br><span class="line"> <span class="attr">"credsStore"</span> : <span class="string">"ecr-login"</span>,</span><br><span class="line"> <span class="attr">"credHelpers"</span> : {</span><br><span class="line"> <span class="attr">"{ECR 식별 번호}.dkr.ecr.ap-northeast-2.amazonaws.com"</span>: <span class="string">"ecr-login"</span></span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h5><span id="gwanryeon-camjomunseo">관련 참조문서</span></h5><ul><li><a href="https://github.com/awslabs/amazon-ecr-credential-helper" rel="external nofollow noopener noreferrer" target="_blank">https://github.com/awslabs/amazon-ecr-credential-helper</a></li><li><a href="https://aws.amazon.com/ko/blogs/compute/authenticating-amazon-ecr-repositories-for-docker-cli-with-credential-helper/" rel="external nofollow noopener noreferrer" target="_blank">https://aws.amazon.com/ko/blogs/compute/authenticating-amazon-ecr-repositories-for-docker-cli-with-credential-helper/</a></li></ul><h3><span id="private-docker-registry-on-nexus">Private Docker Registry on Nexus</span></h3><h4><span id="maven-setting-pail-nae-seobeo-injeungjeongbo-cuga">Maven Setting 파일 내 서버 인증정보 추가</span></h4><p><a href="http://teddykwon.com/2017/01/12/docker-nexus-docker-registry.html" rel="external nofollow noopener noreferrer" target="_blank">NEXUS 서버를 이용해 구축한 Private Docker Registry</a>의 경우 HTTPS를 지원하지 않고 있으므로 Maven 환경설정 파일(<code>settings.xml</code>)에 서버 인증정보를 아래와 같이 추가하여 플러그인 사용 시 인증정보를 사용할 수 있도록 설정한다.</p><figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">settings</span>></span></span><br><span class="line"> ...</span><br><span class="line"> <span class="tag"><<span class="name">servers</span>></span></span><br><span class="line"> ...</span><br><span class="line"> <span class="tag"><<span class="name">server</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">id</span>></span>img.example.com:12000<span class="tag"></<span class="name">id</span>></span> <span class="comment"><!-- 식별자는 서버 URL로 설정 --></span></span><br><span class="line"> <span class="tag"><<span class="name">username</span>></span>admin<span class="tag"></<span class="name">username</span>></span> <span class="comment"><!-- 로그인 아이디 --></span></span><br><span class="line"> <span class="tag"><<span class="name">password</span>></span>test!@<span class="tag"></<span class="name">password</span>></span> <span class="comment"><!-- 패스워드 --></span></span><br><span class="line"> <span class="tag"></<span class="name">server</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">servers</span>></span></span><br><span class="line"><span class="tag"></<span class="name">settings</span>></span></span><br></pre></td></tr></table></figure><blockquote><p>플러그인 메뉴얼 페이지에서는 적절한 docker credential helper가 없을 경우 사용하도록 권고하고 있으며, setting.xml 파일에 인증정보를 그대로 노출할 경우 보안에 취약할 수 있으므로 주의해야 한다.</p></blockquote><h4><span id="docker-daemon-seoljeonge-insecure-registry-jeongbo-deungrog">Docker Daemon 설정에 insecure registry 정보 등록</span></h4><p>macOS는 <a href="https://docs.docker.com/docker-for-mac/install/#install-and-run-docker-for-mac" rel="external nofollow noopener noreferrer" target="_blank">Docker 공식 설치 가이드 라인</a>에 따라 설치한 경우 아래 링크에 첨부된 스크린샷을 참고하여 insecure registry 정보 등록을 완료한다.</p><ul><li><a href="https://stackoverflow.com/a/39492340" rel="external nofollow noopener noreferrer" target="_blank">https://stackoverflow.com/a/39492340</a></li></ul><p>다른 OS의 경우에는 아래 링크를 참고한다.</p><ul><li><a href="https://docs.docker.com/registry/insecure/" rel="external nofollow noopener noreferrer" target="_blank">Test an insecure registry</a></li><li><a href="https://github.com/Juniper/contrail-docker/wiki/Configure-docker-service-to-use-insecure-registry" rel="external nofollow noopener noreferrer" target="_blank">Configure docker service to use insecure registry</a></li></ul><h4><span id="meibeun-keomaendeu-silhaeng-si-httpsonly-obsyeon-bihwalseonghwa">메이븐 커맨드 실행 시 HttpsOnly 옵션 비활성화</span></h4><p><code>jib-maven-plugin</code> 사용 시 대상 Docker Registry가 HTTPS를 지원하지 않을 경우, 플러그인 명령 실행 시 아래와 같이 <code>sendCredentialsOverHttp</code> 옵션을 <code>true</code>로 하여 실행해야 한다.</p><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">compile jib:build -DsendCredentialsOverHttp=true</span><br></pre></td></tr></table></figure><h2><span id="pom-pail-naee-peulreogeuin-seoljeong-naeyong-cuga">POM 파일 내에 플러그인 설정 내용 추가</span></h2><p>플러그인 사용을 위한 모든 환경 설정을 마친 후 Docker 이미지로 생성 및 배포할 프로젝트의 pom.xml 파일에 아래와 같이 플러그인 사용 설정을 추가한다.</p><figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">project</span>></span></span><br><span class="line"> ...</span><br><span class="line"> <span class="tag"><<span class="name">build</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">plugins</span>></span></span><br><span class="line"> ...</span><br><span class="line"> <span class="tag"><<span class="name">plugin</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">groupId</span>></span>com.google.cloud.tools<span class="tag"></<span class="name">groupId</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">artifactId</span>></span>jib-maven-plugin<span class="tag"></<span class="name">artifactId</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">version</span>></span>0.9.7<span class="tag"></<span class="name">version</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">configuration</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">to</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">image</span>></span>myimage<span class="tag"></<span class="name">image</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">to</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">configuration</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">plugin</span>></span></span><br><span class="line"> ...</span><br><span class="line"> <span class="tag"></<span class="name">plugins</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">build</span>></span></span><br><span class="line"> ...</span><br><span class="line"><span class="tag"></<span class="name">project</span>></span></span><br></pre></td></tr></table></figure><p>배포 환경에 따라 위 내용 중 configuration 노드의 내용을 달리한다.</p><h5><span id="aws">AWS</span></h5><figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">configuration</span>></span></span><br><span class="line"><span class="tag"><<span class="name">to</span>></span></span><br><span class="line"><span class="tag"><<span class="name">image</span>></span>{ECR 식별 번호}.dkr.ecr.ap-northeast-2.amazonaws.com/[Repo 명]:[태그명]<span class="tag"></<span class="name">image</span>></span></span><br><span class="line"><span class="tag"></<span class="name">to</span>></span></span><br><span class="line"><span class="tag"></<span class="name">configuration</span>></span></span><br></pre></td></tr></table></figure><h5><span id="private-docker-registry">Private Docker Registry</span></h5><figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">configuration</span>></span></span><br><span class="line"><span class="tag"><<span class="name">to</span>></span></span><br><span class="line"><span class="tag"><<span class="name">image</span>></span>img.example.com:12000/[이미지 명칭]:[태그명]<span class="tag"></<span class="name">image</span>></span></span><br><span class="line"><span class="tag"></<span class="name">to</span>></span></span><br><span class="line"><span class="tag"><<span class="name">allowInsecureRegistries</span>></span>true<span class="tag"></<span class="name">allowInsecureRegistries</span>></span></span><br><span class="line"><span class="tag"></<span class="name">configuration</span>></span></span><br></pre></td></tr></table></figure><h2><span id="maven-profile-byeol-seoljeong">Maven Profile 별 설정</span></h2><p>배포 상황에 맞게 이미지 생성 및 배포를 쉽게 하기 위해서 Maven Profile을 아래와 같이 추가 후 플러그인 설정부 역시 변경한다.</p><p><strong>Maven Profile 추가</strong></p><figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">project</span>></span></span><br><span class="line"> ...</span><br><span class="line"><span class="tag"><<span class="name">profiles</span>></span></span><br><span class="line"><span class="tag"><<span class="name">profile</span>></span></span><br><span class="line"><span class="tag"><<span class="name">id</span>></span>local<span class="tag"></<span class="name">id</span>></span></span><br><span class="line"><span class="tag"><<span class="name">activation</span>></span></span><br><span class="line"><span class="tag"><<span class="name">activeByDefault</span>></span>true<span class="tag"></<span class="name">activeByDefault</span>></span></span><br><span class="line"><span class="tag"></<span class="name">activation</span>></span></span><br><span class="line"><span class="tag"><<span class="name">properties</span>></span></span><br><span class="line"><span class="tag"><<span class="name">docker.repository</span>></span>img.example.com:12000/${project.artifactId}:${deploy.tag.name}<span class="tag"></<span class="name">docker.repository</span>></span></span><br><span class="line"><span class="tag"><<span class="name">docker.allow.insecure</span>></span>true<span class="tag"></<span class="name">docker.allow.insecure</span>></span></span><br><span class="line"><span class="tag"></<span class="name">properties</span>></span></span><br><span class="line"><span class="tag"></<span class="name">profile</span>></span></span><br><span class="line"><span class="tag"><<span class="name">profile</span>></span></span><br><span class="line"><span class="tag"><<span class="name">id</span>></span>local-dev<span class="tag"></<span class="name">id</span>></span></span><br><span class="line"><span class="tag"><<span class="name">properties</span>></span></span><br><span class="line"><span class="tag"><<span class="name">docker.repository</span>></span>img.example.com:12000/${project.artifactId}:${deploy.tag.name}<span class="tag"></<span class="name">docker.repository</span>></span></span><br><span class="line"><span class="tag"><<span class="name">docker.allow.insecure</span>></span>true<span class="tag"></<span class="name">docker.allow.insecure</span>></span></span><br><span class="line"><span class="tag"></<span class="name">properties</span>></span></span><br><span class="line"><span class="tag"></<span class="name">profile</span>></span></span><br><span class="line"><span class="tag"><<span class="name">profile</span>></span></span><br><span class="line"><span class="tag"><<span class="name">id</span>></span>aws<span class="tag"></<span class="name">id</span>></span></span><br><span class="line"><span class="tag"><<span class="name">properties</span>></span></span><br><span class="line"><span class="tag"><<span class="name">docker.repository</span>></span>{ECR 식별 번호}.dkr.ecr.ap-northeast-2.amazonaws.com/${project.artifactId}:${deploy.tag.name}<span class="tag"></<span class="name">docker.repository</span>></span></span><br><span class="line"><span class="tag"><<span class="name">docker.allow.insecure</span>></span>false<span class="tag"></<span class="name">docker.allow.insecure</span>></span></span><br><span class="line"><span class="tag"></<span class="name">properties</span>></span></span><br><span class="line"><span class="tag"></<span class="name">profile</span>></span></span><br><span class="line"><span class="tag"></<span class="name">profiles</span>></span></span><br><span class="line"> ...</span><br><span class="line"><span class="tag"></<span class="name">project</span>></span></span><br></pre></td></tr></table></figure><blockquote><p>위 내용중 ${<a href="http://deploy.tag.name" rel="external nofollow noopener noreferrer" target="_blank">deploy.tag.name</a>}은 또 다른 메이븐 플러그인인 Git 플러그인으로 Git 레포지토리로 부터 tag명 및 커밋 메세지 등 다양한 정보를 취득할 수 있다. 관련 정보 및 사용법은 아래 링크를 참고한다.</p><ul><li><a href="https://github.com/ktoso/maven-git-commit-id-plugin" rel="external nofollow noopener noreferrer" target="_blank">https://github.com/ktoso/maven-git-commit-id-plugin</a></li></ul></blockquote><p><strong>플러그인 설정 수정</strong></p><figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">configuration</span>></span></span><br><span class="line"><span class="tag"><<span class="name">to</span>></span></span><br><span class="line"><span class="tag"><<span class="name">image</span>></span>${docker.repository}<span class="tag"></<span class="name">image</span>></span></span><br><span class="line"><span class="tag"></<span class="name">to</span>></span></span><br><span class="line"><span class="tag"><<span class="name">allowInsecureRegistries</span>></span><span class="tag"><<span class="name">configuration</span>></span></span><br><span class="line"><span class="tag"><<span class="name">to</span>></span></span><br><span class="line"><span class="tag"><<span class="name">image</span>></span>img.example.com:12000/[이미지 명칭]:[태그명]<span class="tag"></<span class="name">image</span>></span></span><br><span class="line"><span class="tag"></<span class="name">to</span>></span></span><br><span class="line"><span class="tag"><<span class="name">allowInsecureRegistries</span>></span>true<span class="tag"></<span class="name">allowInsecureRegistries</span>></span></span><br><span class="line"></configuration</allowInsecureRegistries></span><br><span class="line"><span class="tag"></<span class="name">configuration</span></span></span><br></pre></td></tr></table></figure>]]></content>
<summary type="html">
<img src="/2018/08/07/jib-maven-plugin-manual/jib-build-docker-java-container-image.png" title="Jib">
<p>본 문서는 Google Container Tools 에서 제공하
</summary>
<category term="DevOps" scheme="https://indra818.github.io/categories/DevOps/"/>
<category term="Docker" scheme="https://indra818.github.io/categories/DevOps/Docker/"/>
<category term="jib" scheme="https://indra818.github.io/tags/jib/"/>
<category term="maven" scheme="https://indra818.github.io/tags/maven/"/>
<category term="docker" scheme="https://indra818.github.io/tags/docker/"/>
<category term="delivery" scheme="https://indra818.github.io/tags/delivery/"/>
<category term="devops" scheme="https://indra818.github.io/tags/devops/"/>
</entry>
<entry>
<title>Thymeleaf 태그 레퍼런스 (2.1.4 버전 기준)</title>
<link href="https://indra818.github.io/2017/11/23/thymeleaf-tag-reference/"/>
<id>https://indra818.github.io/2017/11/23/thymeleaf-tag-reference/</id>
<published>2017-11-23T11:40:33.000Z</published>
<updated>2018-08-07T05:40:56.333Z</updated>
<content type="html"><![CDATA[<img src="/2017/11/23/thymeleaf-tag-reference/thymeleaf-logo.png" title="Thymeleaf"><blockquote><p>본 문서는 아래 링크에 기재된 내용을 번역한 문서이다.</p><p><a href="http://qiita.com/rubytomato@github/items/ac65c2203d16d1a1bbd7" rel="external nofollow noopener noreferrer" target="_blank">http://qiita.com/rubytomato@github/items/ac65c2203d16d1a1bbd7</a></p></blockquote><h2><span id="gaeyo">개요</span></h2><p>Thymeleaf를 Spring-Boot의 뷰 템플릿 엔진으로서 사용하는 경우의 사용법을 기술한다.</p><h3><span id="hwangyeong">환경</span></h3><ul><li>Windows 7 (64bit)</li><li>Java 1.8.0_65</li><li>Spring-Boot 1.3.0<ul><li>Thymeleaf 2.1.4</li></ul></li></ul><h3><span id="camgo">참고</span></h3><ul><li><p><a href="http://www.thymeleaf.org/index.html" rel="external nofollow noopener noreferrer" target="_blank">Thymeleaf Home</a></p></li><li><p><a href="http://www.thymeleaf.org/whatsnew21.html" rel="external nofollow noopener noreferrer" target="_blank">What’s new in Thymeleaf 2.1</a></p></li><li><p><a href="http://www.thymeleaf.org/doc/tutorials/2.1/usingthymeleaf_ja.html" rel="external nofollow noopener noreferrer" target="_blank">Tutorial : Using Thymeleaf (일본어)</a></p></li></ul><h2><span id="byeonsu">변수</span></h2><h3><span id="text-th-text">text (th:text)</span></h3><p>변수 값을 태그의 텍스트로 표시할 때에는 <code>th:text</code> 속성과 <code>${...}</code> 구문(변수식)을 사용한다.</p><figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* Java */</span></span><br><span class="line">String username = <span class="string">"kyeongjin"</span>;</span><br><span class="line">model.addAttribute(<span class="string">"username"</span>, username);</span><br></pre></td></tr></table></figure><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"><!-- Thymeleaf 템플릿 --></span></span><br><span class="line"><span class="tag"><<span class="name">p</span> <span class="attr">th:text</span>=<span class="string">"${username}"</span>></span>name<span class="tag"></<span class="name">p</span>></span></span><br></pre></td></tr></table></figure><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"><!-- HTML 출력 결과 --></span></span><br><span class="line"><span class="tag"><<span class="name">p</span>></span>kyeongjin<span class="tag"></<span class="name">p</span>></span></span><br></pre></td></tr></table></figure><h3><span id="unescape-text-th-utext">unescape text (th:utext)</span></h3><p>변수의 값을 escape 처리하지 않고 표시할 때에는 <code>th:utext</code> 속성을 사용한다.</p><blockquote><p>th:text 구문은 escape 처리를 하고 텍스트를 출력하기 때문에 변수 내 태그 문자가 들어있어도 무시하고 텍스트로 표시함.</p></blockquote><figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* Java */</span></span><br><span class="line">String message = <span class="string">"<p>Hello World!</p>"</span>;</span><br><span class="line">model.addAttribute(<span class="string">"message"</span>, message);</span><br></pre></td></tr></table></figure><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"><!-- Thymeleaf 템플릿 --></span></span><br><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">th:text</span>=<span class="string">"${message}"</span>></span><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">th:utext</span>=<span class="string">"${message}"</span>></span><span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"><!-- HTML 출력 결과 --></span></span><br><span class="line"><span class="tag"><<span class="name">div</span>></span>&lt;p&gt;Hello World!&lt;/p&gt;<span class="tag"></<span class="name">div</span>></span> <span class="comment"><!-- 실제 브라우저에서는 '<p>Hello World!</p>'로 표시됨 --></span></span><br><span class="line"><span class="tag"><<span class="name">div</span>></span><span class="tag"><<span class="name">p</span>></span>Hello World!<span class="tag"></<span class="name">p</span>></span><span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure><h3><span id="inrain-ceori-th-inline">인라인 처리 (th:inline)</span></h3><p>태그 내 텍스트 중 일부를 Controller로부터 전달된 변수 값으로 표시하려 할 경우 <code>th:inline</code> 속성을 사용하고 표시할 변수를 <code>[[…]]</code>로 묶는다.</p><blockquote><p>일반적인 태그에서는 잘 사용되지 않으며 script 태그에서 주로 사용된다. 일반적으로 여러 줄의 코드를 가진 javascript 코드의 내 변수에 Controller로부터 받은 파라미터 값으로 초기화할 때 사용한다.</p></blockquote><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"><!-- Thymeleaf 템플릿 --></span></span><br><span class="line"><span class="tag"><<span class="name">p</span> <span class="attr">th:inline</span>=<span class="string">"text"</span>></span>Hello, [[${session.user.name}]]!<span class="tag"></<span class="name">p</span>></span></span><br></pre></td></tr></table></figure><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"><!-- HTML 출력 결과 --></span></span><br><span class="line"><span class="tag"><<span class="name">p</span>></span>Hello, kyeongjin<span class="tag"></<span class="name">p</span>></span></span><br></pre></td></tr></table></figure><h3><span id="munjayeol-yeongyeol">문자열 연결</span></h3><p>문자열과 변수를 + 연산자로 연결할 수 있다.</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"><!-- Thymeleaf 템플릿 --></span></span><br><span class="line"><span class="tag"><<span class="name">p</span> <span class="attr">th:text</span>=<span class="string">"'Hello, ' + ${username}"</span>></span><span class="tag"></<span class="name">p</span>></span></span><br></pre></td></tr></table></figure><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"><!-- HTML 출력 결과 --></span></span><br><span class="line"><span class="tag"><<span class="name">p</span>></span>Hello, kyeongjin<span class="tag"></<span class="name">p</span>></span></span><br></pre></td></tr></table></figure><h3><span id="cihwanceori">치환처리</span></h3><p><code>|${…}|</code>를 사용하면 텍스트 내에 변수 값을 포함시킬 수 있다.</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"><!-- Thymeleaf 템플릿 --></span></span><br><span class="line"><span class="tag"><<span class="name">p</span> <span class="attr">th:text</span>=<span class="string">"|Hello, ${username}|"</span>></span><span class="tag"></<span class="name">p</span>></span></span><br></pre></td></tr></table></figure><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"><!-- HTML 출력 결과 --></span></span><br><span class="line"><span class="tag"><<span class="name">p</span>></span>Hello, kyeongjin<span class="tag"></<span class="name">p</span>></span></span><br></pre></td></tr></table></figure><h3><span id="gibongabs-seoljeong">기본값 설정</span></h3><p>변수 값이 null일 경우, null 대신에 표시할 기본값을 설정할 수 있다.</p><p>기본값을 정의하는 방법으로는 <code>?:</code> 또는 <code>#string</code> 이라는 표현 도구 객체(Expression Utility Object)를 사용한다.</p><h4><span id="samhangyeonsanja">?: (삼항연산자)</span></h4><figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* Java */</span></span><br><span class="line">String username = <span class="keyword">null</span>;</span><br></pre></td></tr></table></figure><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"><!-- Thymeleaf 템플릿 --></span></span><br><span class="line"><span class="tag"><<span class="name">p</span> <span class="attr">th:text</span>=<span class="string">"${username}?: 'unknown'"</span>></span><span class="tag"></<span class="name">p</span>></span></span><br></pre></td></tr></table></figure><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"><!-- HTML 출력 결과 --></span></span><br><span class="line"><span class="tag"><<span class="name">p</span>></span>unknown<span class="tag"></<span class="name">p</span>></span></span><br></pre></td></tr></table></figure><h4><span id="strings-defaultstring">#strings.defaultString</span></h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"><!-- Thymeleaf 템플릿 --></span></span><br><span class="line"><span class="tag"><<span class="name">p</span> <span class="attr">th:text</span>=<span class="string">"${#strings.defaultString(username, 'unknown')}"</span>></span><span class="tag"></<span class="name">p</span>></span></span><br></pre></td></tr></table></figure><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"><!-- HTML 출력 결과 --></span></span><br><span class="line"><span class="tag"><<span class="name">p</span>></span>unknown<span class="tag"></<span class="name">p</span>></span></span><br></pre></td></tr></table></figure><h2><span id="pyohyeon-hyeongsig-format">표현 형식 (Format)</span></h2><p>변수 값을 일정한 형식에 맞추어 표시할 때에는 표현 도구 객체(Expression Utility Object)를 사용한다.</p><h3><span id="naljja-dates">날짜 (#dates)</span></h3><figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* Java */</span></span><br><span class="line">Date date = <span class="keyword">new</span> Date();</span><br><span class="line">model.addAttribute(<span class="string">"date"</span>, date);</span><br></pre></td></tr></table></figure><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"><!-- Thymeleaf 템플릿 --></span></span><br><span class="line"><span class="tag"><<span class="name">p</span> <span class="attr">th:text</span>=<span class="string">"${#dates.format(date, 'yyyy/MM/dd HH:mm:ss')}"</span>></span><span class="tag"></<span class="name">p</span>></span></span><br><span class="line"><span class="tag"><<span class="name">p</span> <span class="attr">th:text</span>=<span class="string">"|${#dates.day(date)}일|"</span>></span><span class="tag"></<span class="name">p</span>></span></span><br><span class="line"><span class="tag"><<span class="name">p</span> <span class="attr">th:text</span>=<span class="string">"|${#dates.month(date)}월|"</span>></span><span class="tag"></<span class="name">p</span>></span></span><br><span class="line"><span class="tag"><<span class="name">p</span> <span class="attr">th:text</span>=<span class="string">"${#dates.monthName(date)}"</span>></span><span class="tag"></<span class="name">p</span>></span></span><br><span class="line"><span class="tag"><<span class="name">p</span> <span class="attr">th:text</span>=<span class="string">"|${#dates.year(date)}년|"</span>></span><span class="tag"></<span class="name">p</span>></span></span><br></pre></td></tr></table></figure><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"><!-- HTML 출력 결과 --></span></span><br><span class="line"><span class="tag"><<span class="name">p</span>></span>2016/12/02 20:26:07<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"><span class="tag"><<span class="name">p</span>></span>14일<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"><span class="tag"><<span class="name">p</span>></span>12월<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"><span class="tag"><<span class="name">p</span>></span>12월<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"><span class="tag"><<span class="name">p</span>></span>2016년<span class="tag"></<span class="name">p</span>></span></span><br></pre></td></tr></table></figure><h3><span id="hyeonjae-naljja-dates-createnow">현재 날짜 (#dates.createNow())</span></h3><p>현재 날짜는 #dates.createNow()로 취득한다.</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"><!-- Thymeleaf 템플릿 --></span></span><br><span class="line"><span class="tag"><<span class="name">p</span> <span class="attr">th:text</span>=<span class="string">"${#dates.format(#dates.createNow(), 'yyyy년MM월dd일 HH시mm분ss초')}"</span>></span><span class="tag"></<span class="name">p</span>></span></span><br></pre></td></tr></table></figure><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"><!-- HTML 출력 결과 --></span></span><br><span class="line"><span class="tag"><<span class="name">p</span>></span>2016년12월02일 20시26분08초<span class="tag"></<span class="name">p</span>></span></span><br></pre></td></tr></table></figure><h3><span id="sucipyohyeon-numbers">수치표현 (#numbers)</span></h3><p>정수 값 표현에는 <code>#numbers.formatInteger</code>를, 부동소수점 표현에는 <code>#numbers.formatDecimal</code>을 사용한다.</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"><!-- Thymeleaf 템플릿 --></span></span><br><span class="line"><span class="tag"><<span class="name">p</span> <span class="attr">th:text</span>=<span class="string">"${#numbers.formatInteger(1000000, 3, 'COMMA')}"</span>></span><span class="tag"></<span class="name">p</span>></span></span><br><span class="line"><span class="tag"><<span class="name">p</span> <span class="attr">th:text</span>=<span class="string">"${#numbers.formatDecimal(123456.789, 3, 'COMMA', 2, 'POINT')}"</span>></span><span class="tag"></<span class="name">p</span>></span></span><br></pre></td></tr></table></figure><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"><!-- HTML 출력 결과 --></span></span><br><span class="line"><span class="tag"><<span class="name">p</span>></span>1,000,000<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"><span class="tag"><<span class="name">p</span>></span>123,456.79<span class="tag"></<span class="name">p</span>></span></span><br></pre></td></tr></table></figure><h2><span id="mesiji-risoseu">메시지 리소스</span></h2><p>메시지 리소스 파일의 값을 표시할 때에는 <code>#{…}</code> 구문이라든지, <code>#messages</code>라는 표현 도구 객체(Expression Utility Object)를 사용한다.</p><h3><span id="mesiji-pyohyeon">메시지 표현</span></h3><p>메시지 리소스에 placeholder가 있는 경우, 메시지 키 값 뒤에 (param1, param2, param3, …)의 형태로 기술한다.</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"># message properties file</span><br><span class="line">app.message1=Hello</span><br><span class="line">app.message2=Hello, {0}!</span><br><span class="line">app.message3=Hello, {0}{1}</span><br></pre></td></tr></table></figure><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"><!-- Thymeleaf 템플릿 --></span></span><br><span class="line"><span class="tag"><<span class="name">p</span> <span class="attr">th:text</span>=<span class="string">"#{app.message1}"</span>></span><span class="tag"></<span class="name">p</span>></span></span><br><span class="line"><span class="tag"><<span class="name">p</span> <span class="attr">th:text</span>=<span class="string">"#{app.message2(${username})}"</span>></span><span class="tag"></<span class="name">p</span>></span></span><br><span class="line"><span class="tag"><<span class="name">p</span> <span class="attr">th:text</span>=<span class="string">"#{app.message3(${username},${suffix})}"</span>></span><span class="tag"></<span class="name">p</span>></span></span><br></pre></td></tr></table></figure><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"><!-- HTML 출력 결과 --></span></span><br><span class="line"><span class="tag"><<span class="name">p</span>></span>Hello<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"><span class="tag"><<span class="name">p</span>></span>Hello, kyeongjin!<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"><span class="tag"><<span class="name">p</span>></span>Hello, kyeongjin!?<span class="tag"></<span class="name">p</span>></span></span><br></pre></td></tr></table></figure><h3><span id="mesiji-ki">메시지 키</span></h3><p>메시지 키의 전부 또는 일부를 변수로 지정할 수 있다.</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"># message properties file</span><br><span class="line">app.am.message=Good morning!</span><br><span class="line">app.pm.message=Good afternoon!</span><br></pre></td></tr></table></figure><figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* Java */</span></span><br><span class="line">String messageKey =<span class="string">"app.am.message"</span>;</span><br><span class="line">model.addAttribute(<span class="string">"messageKey"</span>, messageKey);</span><br><span class="line">String ap = <span class="string">"pm"</span>;</span><br><span class="line">model.addAttribute(<span class="string">"ap"</span>, ap);</span><br></pre></td></tr></table></figure><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"><!-- Thymeleaf 템플릿 --></span></span><br><span class="line"><span class="tag"><<span class="name">p</span> <span class="attr">th:text</span>=<span class="string">"#{${messageKey}(${username})}"</span>></span><span class="tag"></<span class="name">p</span>></span></span><br><span class="line"><span class="tag"><<span class="name">p</span> <span class="attr">th:text</span>=<span class="string">"#{|app.${ap}.message|(${username})}"</span>></span><span class="tag"></<span class="name">p</span>></span></span><br></pre></td></tr></table></figure><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"><!-- HTML 출력 결과 --></span></span><br><span class="line"><span class="tag"><<span class="name">p</span>></span>Good morning! kyeongjin<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"><span class="tag"><<span class="name">p</span>></span>Good afternoon! kyeongjin<span class="tag"></<span class="name">p</span>></span></span><br></pre></td></tr></table></figure><h3><span id="messages-gaegce">#messages 객체</span></h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"><!-- Thymeleaf 템플릿 --></span></span><br><span class="line"><span class="tag"><<span class="name">p</span> <span class="attr">th:text</span>=<span class="string">"${#messages.msg('app.message1')}"</span>></span><span class="tag"></<span class="name">p</span>></span></span><br><span class="line"><span class="tag"><<span class="name">p</span> <span class="attr">th:text</span>=<span class="string">"${#messages.msg('app.message2', username)}"</span>></span><span class="tag"></<span class="name">p</span>></span></span><br><span class="line"><span class="tag"><<span class="name">p</span> <span class="attr">th:text</span>=<span class="string">"${#messages.msg('app.message3', username, suffix)}"</span>></span><span class="tag"></<span class="name">p</span>></span></span><br><span class="line"><span class="tag"><<span class="name">p</span> <span class="attr">th:text</span>=<span class="string">"${#messages.msg(messageKey, username)}"</span>></span><span class="tag"></<span class="name">p</span>></span></span><br><span class="line"><span class="tag"><<span class="name">p</span> <span class="attr">th:text</span>=<span class="string">"${#messages.msg('app.' + ap + '.message', username)}"</span>></span><span class="tag"></<span class="name">p</span>></span></span><br></pre></td></tr></table></figure><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"><!-- HTML 출력 결과 --></span></span><br><span class="line"><span class="tag"><<span class="name">p</span>></span>Hello<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"><span class="tag"><<span class="name">p</span>></span>Hello, kyeongjin!<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"><span class="tag"><<span class="name">p</span>></span>Hello, kyeongjin!?<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"><span class="tag"><<span class="name">p</span>></span>Good morning! kyeongjin<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"><span class="tag"><<span class="name">p</span>></span>Good afternoon! kyeongjin<span class="tag"></<span class="name">p</span>></span></span><br></pre></td></tr></table></figure><h2><span id="url-ringkeu-pyohyeon">URL 링크 표현</span></h2><p>URL 링크를 표현할 때에는 <code>@{…}</code> 구문을을 사용하면 편리하다.</p><h3><span id="ringkeu-hyeongsig">링크 형식</span></h3><p>변수 값을 링크의 파라미터로 사용할 때에는 <code>(파라미터명=${'변수명'})</code> 형태로 표현한다. 여러 개의 파라미터가 있는 경우에는 콤마로 구분하여 기술한다.</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"><!-- Thymeleaf 템플릿 --></span></span><br><span class="line"><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"/user/profile"</span> <span class="attr">th:href</span>=<span class="string">"@{/user/profile(id=${'ab123'})}"</span>></span>profile<span class="tag"></<span class="name">a</span>></span></span><br><span class="line"><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"/user/profile"</span> <span class="attr">th:href</span>=<span class="string">"@{/user/profile(id=${'ab123'},role=${'admin'})}"</span>></span>profile<span class="tag"></<span class="name">a</span>></span></span><br></pre></td></tr></table></figure><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"><!-- HTML 출력 결과 --></span></span><br><span class="line"><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"/user/profile?id=ab123"</span>></span>profile<span class="tag"></<span class="name">a</span>></span></span><br><span class="line"><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"/user/profile?id=ab123&amp;role=admin"</span>></span>profile<span class="tag"></<span class="name">a</span>></span></span><br></pre></td></tr></table></figure><h3><span id="rest-hyeongsig">REST 형식</span></h3><p>변수 값을 URL의 일부로서 사용할 때에는 placeholder를 <code>{placeholder명}</code>으로 정의하고, 그곳에 끼워넣을 값을 <code>(placeholder명=${'변수명'})</code> 형태로 표현한다.</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"><!-- Thymeleaf 템플릿 --></span></span><br><span class="line"><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"index.html"</span> <span class="attr">th:href</span>=<span class="string">"@{/user/profile/{id}/{seq}(id=${'abc'},seq=${'1000'})}"</span>></span>profile<span class="tag"></<span class="name">a</span>></span></span><br></pre></td></tr></table></figure><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"><!-- HTML 출력 결과 --></span></span><br><span class="line"><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"/user/profile/abc/1000"</span>></span>profile<span class="tag"></<span class="name">a</span>></span></span><br></pre></td></tr></table></figure><h2><span id="seontaegbyeonsu-pyohyeon">선택변수 표현</span></h2><p>일반적으로 변수 값을 표현할 때에는 <code>${…}</code> 구문을 사용하지만, <code>*{…}</code> 구문(선택변수식)으로도 변수 값을 표시할 수 있다. (단, 이 경우에는 선택된 객체가 없는 경우만 해당)</p><p>하기의 템플릿은 같은 결과 값이 출력된다.</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"><!-- Thymeleaf 템플릿 --></span></span><br><span class="line"><span class="tag"><<span class="name">p</span> <span class="attr">th:text</span>=<span class="string">"${username}"</span>></span><span class="tag"></<span class="name">p</span>></span></span><br><span class="line"><span class="tag"><<span class="name">p</span> <span class="attr">th:text</span>=<span class="string">"*{username}"</span>></span><span class="tag"></<span class="name">p</span>></span></span><br></pre></td></tr></table></figure><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"><!-- HTML 출력 결과 --></span></span><br><span class="line"><span class="tag"><<span class="name">p</span>></span>kyeongjin<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"><span class="tag"><<span class="name">p</span>></span>kyeongjin<span class="tag"></<span class="name">p</span>></span></span><br></pre></td></tr></table></figure><p><code>th:object</code> 속성으로 객체를 지정하면, 선택표현식은 해당 객체 내에 멤버 변수를 대상으로 한다.</p><figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* Java : Model class */</span></span><br><span class="line"><span class="keyword">public</span> <span class="class"><span class="keyword">class</span> <span class="title">Item</span> </span>{</span><br><span class="line"> <span class="keyword">private</span> Long id;</span><br><span class="line"> <span class="keyword">private</span> String name;</span><br><span class="line"> <span class="keyword">private</span> Integer price;</span><br><span class="line"> <span class="keyword">private</span> Date createAt;</span><br><span class="line"></span><br><span class="line"> <span class="function"><span class="keyword">public</span> <span class="title">Item</span><span class="params">(Long id, String name, Integer price, Date createAt)</span> </span>{</span><br><span class="line"> <span class="keyword">this</span>.id = id;</span><br><span class="line"> <span class="keyword">this</span>.name = name;</span><br><span class="line"> <span class="keyword">this</span>.price = price;</span><br><span class="line"> <span class="keyword">this</span>.createAt = createAt;</span><br><span class="line"> }</span><br><span class="line"> ...getter/setter는 생략...</span><br><span class="line">}</span><br></pre></td></tr></table></figure><figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* Java : Controller */</span></span><br><span class="line">Item item = <span class="keyword">new</span> Item(<span class="number">10000L</span>, <span class="string">"맥스봉"</span>, <span class="number">500</span>, <span class="keyword">new</span> Date());</span><br><span class="line">model.addAttributes(<span class="string">"item"</span>, item);</span><br></pre></td></tr></table></figure><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"><!-- Thymeleaf 템플릿 --></span></span><br><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">th:object</span>=<span class="string">"${item}"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">dl</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">dt</span>></span>ID<span class="tag"></<span class="name">dt</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">dd</span> <span class="attr">th:text</span>=<span class="string">"*{id}"</span>></span><span class="tag"></<span class="name">dd</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">dt</span>></span>NAME<span class="tag"></<span class="name">dt</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">dd</span> <span class="attr">th:text</span>=<span class="string">"*{name}"</span>></span><span class="tag"></<span class="name">dd</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">dt</span>></span>PRICE<span class="tag"></<span class="name">dt</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">dd</span> <span class="attr">th:text</span>=<span class="string">"*{price}"</span>></span><span class="tag"></<span class="name">dd</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">dl</span>></span></span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"><!-- HTML 출력 결과 --></span></span><br><span class="line"><span class="tag"><<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">dl</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">dt</span>></span>ID<span class="tag"></<span class="name">dt</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">dd</span>></span>10000<span class="tag"></<span class="name">dd</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">dt</span>></span>NAME<span class="tag"></<span class="name">dt</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">dd</span>></span>맥스봉<span class="tag"></<span class="name">dd</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">dt</span>></span>PRICE<span class="tag"></<span class="name">dt</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">dd</span>></span>500<span class="tag"></<span class="name">dd</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">dl</span>></span></span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure><p>위의 코드 중 Thymeleaf 템플릿에서 <code>th:object</code> 속성을 사용하지 않고 기술한다면 다음과 같이 기술해야 한다.</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">dl</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">dt</span>></span>ID<span class="tag"></<span class="name">dt</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">dd</span> <span class="attr">th:text</span>=<span class="string">"*{item.id}"</span>></span><span class="tag"></<span class="name">dd</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">dt</span>></span>NAME<span class="tag"></<span class="name">dt</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">dd</span> <span class="attr">th:text</span>=<span class="string">"*{item.name}"</span>></span><span class="tag"></<span class="name">dd</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">dt</span>></span>PRICE<span class="tag"></<span class="name">dt</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">dd</span> <span class="attr">th:text</span>=<span class="string">"*{item.price}"</span>></span><span class="tag"></<span class="name">dd</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">dl</span>></span></span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure><h2><span id="banbog-ceori-th-each">반복 처리 (th:each)</span></h2><p><code>th:each</code> 속성을 사용해서 컬렉션을 제어할 수 있다.</p><figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* Java */</span></span><br><span class="line">List<Item> items = <span class="keyword">new</span> ArrayList<>();</span><br><span class="line">items.add(<span class="keyword">new</span> Item(<span class="number">10000L</span>, <span class="string">"맥스봉"</span>, <span class="number">10</span>, <span class="keyword">new</span> Date()));</span><br><span class="line">items.add(<span class="keyword">new</span> Item(<span class="number">10001L</span>, <span class="string">"감자칩"</span>, <span class="number">30</span>, <span class="keyword">new</span> Date()));</span><br><span class="line">items.add(<span class="keyword">new</span> Item(<span class="number">10002L</span>, <span class="string">"믹스넛"</span>, <span class="number">10</span>, <span class="keyword">new</span> Date()));</span><br><span class="line">items.add(<span class="keyword">new</span> Item(<span class="number">10003L</span>, <span class="string">"기네스"</span>, <span class="number">40</span>, <span class="keyword">new</span> Date()));</span><br><span class="line">model.addAttribute(<span class="string">"items"</span>, items);</span><br></pre></td></tr></table></figure><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"><!-- Thymeleaf 템플릿 --></span></span><br><span class="line"><span class="tag"><<span class="name">table</span> <span class="attr">class</span>=<span class="string">"table table-sprite"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">tr</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">th</span>></span>count<span class="tag"></<span class="name">th</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">th</span>></span>id<span class="tag"></<span class="name">th</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">th</span>></span>name<span class="tag"></<span class="name">th</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">th</span>></span>price<span class="tag"></<span class="name">th</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">th</span>></span>create<span class="tag"></<span class="name">th</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">th</span>></span>current.id<span class="tag"></<span class="name">th</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">tr</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">tr</span> <span class="attr">th:each</span>=<span class="string">"item, stat : ${items}"</span> <span class="attr">th:object</span>=<span class="string">"${item}"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span> <span class="attr">th:text</span>=<span class="string">"*{id}"</span>></span>id<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span> <span class="attr">th:text</span>=<span class="string">"*{name}"</span>></span>name<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span> <span class="attr">th:text</span>=<span class="string">"*{price}"</span>></span>price<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span> <span class="attr">th:text</span>=<span class="string">"*{createAt}"</span>></span>createAt<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span> <span class="attr">th:text</span>=<span class="string">"${stat.current.id}"</span>></span><span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">tr</span>></span></span><br><span class="line"><span class="tag"></<span class="name">table</span>></span></span><br></pre></td></tr></table></figure><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"><!-- HTML 출력 결과 --></span></span><br><span class="line"><span class="tag"><<span class="name">table</span> <span class="attr">class</span>=<span class="string">"table table-sprite"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">tr</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">th</span>></span>count<span class="tag"></<span class="name">th</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">th</span>></span>id<span class="tag"></<span class="name">th</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">th</span>></span>name<span class="tag"></<span class="name">th</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">th</span>></span>price<span class="tag"></<span class="name">th</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">th</span>></span>create<span class="tag"></<span class="name">th</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">th</span>></span>current.id<span class="tag"></<span class="name">th</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">tr</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">tr</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>1<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>10000<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>맥스봉<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>10<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>Sun Jan 10 00:39:13 KST 2016<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>10000<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">tr</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">tr</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>2<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>10001<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>감자칩<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>30<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>Sun Jan 10 00:39:13 KST 2016<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>10001<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">tr</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">tr</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>3<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>10002<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>믹스넛<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>10<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>Sun Jan 10 00:39:13 KST 2016<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>10002<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">tr</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">tr</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>4<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>10003<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>기네스<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>40<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>Sun Jan 10 00:39:13 KST 2016<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>10003<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">tr</span>></span></span><br><span class="line"><span class="tag"></<span class="name">table</span>></span></span><br></pre></td></tr></table></figure><h3><span id="numbers-sequence">#numbers.sequence</span></h3><p><code>#numbers.sequence</code>는 인수로 지정한 2개의 수 범위에서 배열을 생성한다.</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"><!-- Thymeleaf 템플릿 --></span></span><br><span class="line"><span class="tag"><<span class="name">th:block</span> <span class="attr">th:each</span>=<span class="string">"seq : ${#numbers.sequence(1,10)}"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span> <span class="attr">th:text</span>=<span class="string">"${seq}"</span>></span>0<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"><span class="tag"></<span class="name">th:block</span>></span></span><br></pre></td></tr></table></figure><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"><!-- HTML 출력 결과 --></span></span><br><span class="line"><span class="tag"><<span class="name">p</span>></span>1<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"><span class="tag"><<span class="name">p</span>></span>2<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"><span class="tag"><<span class="name">p</span>></span>3<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"><span class="tag"><<span class="name">p</span>></span>4<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"><span class="tag"><<span class="name">p</span>></span>5<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"><span class="tag"><<span class="name">p</span>></span>6<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"><span class="tag"><<span class="name">p</span>></span>7<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"><span class="tag"><<span class="name">p</span>></span>8<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"><span class="tag"><<span class="name">p</span>></span>9<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"><span class="tag"><<span class="name">p</span>></span>10<span class="tag"></<span class="name">p</span>></span></span><br></pre></td></tr></table></figure><h3><span id="sangtaebyeonsu">상태변수</span></h3><table><thead><tr><th>상태변수</th><th>내용</th></tr></thead><tbody><tr><td>index</td><td>0부터 시작되는 현재의 반복 위치</td></tr><tr><td>count</td><td>1부터 시작되는 현재의 반복 위치</td></tr><tr><td>size</td><td>전채 항목 개수</td></tr><tr><td>current</td><td>현재의 객체</td></tr><tr><td>even</td><td>현재의 반복 위치가 짝수인 경우, true</td></tr><tr><td>odd</td><td>현재의 반복 위치가 홀수인 경우, true</td></tr><tr><td>first</td><td>현재의 반복 위치가 최초인 경우, true</td></tr><tr><td>last</td><td>현재의 반복 위치가 최종인 경우, true</td></tr></tbody></table><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"><!-- Thymeleaf 템플릿 --></span></span><br><span class="line"><span class="tag"><<span class="name">table</span> <span class="attr">class</span>=<span class="string">"table table-sprite"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">tr</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">th</span>></span>index<span class="tag"></<span class="name">th</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">th</span>></span>count<span class="tag"></<span class="name">th</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">th</span>></span>size<span class="tag"></<span class="name">th</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">th</span>></span>current<span class="tag"></<span class="name">th</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">th</span>></span>even<span class="tag"></<span class="name">th</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">th</span>></span>odd<span class="tag"></<span class="name">th</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">th</span>></span>first<span class="tag"></<span class="name">th</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">th</span>></span>last<span class="tag"></<span class="name">th</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">th</span>></span>seq<span class="tag"></<span class="name">th</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">tr</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">tr</span> <span class="attr">th:each</span>=<span class="string">"seq, stat : ${#numbers.sequence(1,3)}"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span> <span class="attr">th:text</span>=<span class="string">"${stat.index}"</span>></span><span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span> <span class="attr">th:text</span>=<span class="string">"${stat.count}"</span>></span><span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span> <span class="attr">th:text</span>=<span class="string">"${stat.size}"</span>></span><span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span> <span class="attr">th:text</span>=<span class="string">"${stat.current}"</span>></span><span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span> <span class="attr">th:text</span>=<span class="string">"${stat.even}"</span>></span><span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span> <span class="attr">th:text</span>=<span class="string">"${stat.odd}"</span>></span><span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span> <span class="attr">th:text</span>=<span class="string">"${stat.first}"</span>></span><span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span> <span class="attr">th:text</span>=<span class="string">"${stat.last}"</span>></span><span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span> <span class="attr">th:text</span>=<span class="string">"${seq}"</span>></span><span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">tr</span>></span></span><br><span class="line"><span class="tag"></<span class="name">table</span>></span></span><br></pre></td></tr></table></figure><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"><!-- HTML 출력 결과 --></span></span><br><span class="line"><span class="tag"><<span class="name">table</span> <span class="attr">class</span>=<span class="string">"table table-sprite"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">tr</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">th</span>></span>index<span class="tag"></<span class="name">th</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">th</span>></span>count<span class="tag"></<span class="name">th</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">th</span>></span>size<span class="tag"></<span class="name">th</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">th</span>></span>current<span class="tag"></<span class="name">th</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">th</span>></span>even<span class="tag"></<span class="name">th</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">th</span>></span>odd<span class="tag"></<span class="name">th</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">th</span>></span>first<span class="tag"></<span class="name">th</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">th</span>></span>last<span class="tag"></<span class="name">th</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">th</span>></span>seq<span class="tag"></<span class="name">th</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">tr</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">tr</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>0<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>1<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>3<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>1<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>true<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>false<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>true<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>false<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>1<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">tr</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">tr</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>1<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>2<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>3<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>2<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>false<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>true<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>false<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>false<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>2<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">tr</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">tr</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>2<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>3<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>3<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>3<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>true<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>false<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>false<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>true<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>3<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">tr</span>></span></span><br><span class="line"><span class="tag"></<span class="name">table</span>></span></span><br></pre></td></tr></table></figure><h2><span id="rokeol-byeonsu-th-with">로컬 변수 (th:with)</span></h2><p><code>th:with</code> 속성을 사용하면 블록 내에서 유효한 지역 변수를 정의할 수 있다.</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"><!-- Thymeleaf 템플릿 --></span></span><br><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">th:with</span>=<span class="string">"x=${100},y=${200}"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span> <span class="attr">th:text</span>=<span class="string">"${x}"</span>></span><span class="tag"></<span class="name">p</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span> <span class="attr">th:text</span>=<span class="string">"${y}"</span>></span><span class="tag"></<span class="name">p</span>></span></span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"><!-- HTML 출력 결과 --></span></span><br><span class="line"><span class="tag"><<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span>></span>100<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span>></span>200<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure><h3><span id="yusa-beulrog-th-block">유사 블록 (th:block)</span></h3><p>임의로 블록을 정의하는 <code>th:block</code> 속성은 thymeleaf 버전 2.1부터 도입된 비교적 최신 속성이다.</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"><!-- Thymeleaf 템플릿 --></span></span><br><span class="line"><span class="tag"><<span class="name">th:block</span> <span class="attr">th:with</span>=<span class="string">"x=${100},y=${200}"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span> <span class="attr">th:text</span>=<span class="string">"${x}"</span>></span><span class="tag"></<span class="name">p</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span> <span class="attr">th:text</span>=<span class="string">"${y}"</span>></span><span class="tag"></<span class="name">p</span>></span></span><br><span class="line"><span class="tag"></<span class="name">th:block</span>></span></span><br></pre></td></tr></table></figure><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"><!-- HTML 출력 결과 --></span></span><br><span class="line"><span class="tag"><<span class="name">p</span>></span>100<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"><span class="tag"><<span class="name">p</span>></span>200<span class="tag"></<span class="name">p</span>></span></span><br></pre></td></tr></table></figure><h2><span id="ids-gaegce">#ids 객체</span></h2><p><code>#ids</code> 객체는 입력 폼 내 input 태그의 id 속성과 label 태그의 for 속성을 연결할 경우 편리하다.</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"><!-- Thymeleaf 템플릿 --></span></span><br><span class="line"><span class="tag"><<span class="name">form</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">th:block</span> <span class="attr">th:each</span>=<span class="string">"seq : ${#numbers.sequence(1,3)}"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">name</span>=<span class="string">"hobby"</span> <span class="attr">th:id</span>=<span class="string">"${#ids.seq('id_hobby_')}"</span> <span class="attr">value</span>=<span class="string">""</span> /></span></span><br><span class="line"> <span class="tag"><<span class="name">label</span> <span class="attr">th:text</span>=<span class="string">"|hobby_${seq}|"</span> <span class="attr">th:for</span>=<span class="string">"${#ids.prev('id_hobby_')}"</span>></span>field<span class="tag"></<span class="name">label</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">th:block</span>></span></span><br><span class="line"><span class="tag"></<span class="name">form</span>></span></span><br></pre></td></tr></table></figure><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"><!-- HTML 출력 결과 --></span></span><br><span class="line"><span class="tag"><<span class="name">form</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">name</span>=<span class="string">"hobby"</span> <span class="attr">value</span>=<span class="string">""</span> <span class="attr">id</span>=<span class="string">"id_hobby_1"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">label</span> <span class="attr">for</span>=<span class="string">"id_hobby_1"</span>></span>hobby_1<span class="tag"></<span class="name">label</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">name</span>=<span class="string">"hobby"</span> <span class="attr">value</span>=<span class="string">""</span> <span class="attr">id</span>=<span class="string">"id_hobby_2"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">label</span> <span class="attr">for</span>=<span class="string">"id_hobby_2"</span>></span>hobby_2<span class="tag"></<span class="name">label</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">name</span>=<span class="string">"hobby"</span> <span class="attr">value</span>=<span class="string">""</span> <span class="attr">id</span>=<span class="string">"id_hobby_3"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">label</span> <span class="attr">for</span>=<span class="string">"id_hobby_3"</span>></span>hobby_3<span class="tag"></<span class="name">label</span>></span></span><br><span class="line"><span class="tag"></<span class="name">form</span>></span></span><br></pre></td></tr></table></figure><table><thead><tr><th>function</th><th>description</th></tr></thead><tbody><tr><td>#ids.seq</td><td>시퀀스 값을 반환한 후에 시퀀스 값을 1 증가시킨다.</td></tr><tr><td>#ids.prev</td><td>이전 시퀀스 값을 반환한다.</td></tr><tr><td>#ids.next</td><td>다음 시퀀스 값을 반환한다.</td></tr></tbody></table><h2><span id="spring-bean">Spring Bean</span></h2><p>Spring Framework 에서 관리되고 있는 bean을 Thymeleaf에서 참조할 수 있다.</p><figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* Java */</span></span><br><span class="line"><span class="meta">@Configuration</span>(value=<span class="string">"appConfig"</span>)</span><br><span class="line"><span class="keyword">public</span> <span class="class"><span class="keyword">class</span> <span class="title">AppConfig</span> </span>{</span><br><span class="line"> <span class="meta">@Value</span>(<span class="string">"${app.mode}"</span>)</span><br><span class="line"> <span class="keyword">private</span> String mode;</span><br><span class="line"> <span class="function"><span class="keyword">public</span> String <span class="title">getMode</span><span class="params">()</span> </span>{</span><br><span class="line"> <span class="keyword">return</span> mode;</span><br><span class="line"> }</span><br><span class="line"> <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">setMode</span><span class="params">(String mode)</span> </span>{</span><br><span class="line"> <span class="keyword">this</span>.mode = mode;</span><br><span class="line"> }</span><br><span class="line"> <span class="function"><span class="keyword">public</span> String <span class="title">getCurrentDate</span><span class="params">()</span> </span>{</span><br><span class="line"> FastDateFormat df = FastDateFormat.getInstance(<span class="string">"yyyy/MM/dd"</span>);</span><br><span class="line"> <span class="keyword">return</span> df.format(<span class="keyword">new</span> Date());</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"><!-- Thymeleaf 템플릿 --></span></span><br><span class="line"><span class="tag"><<span class="name">p</span> <span class="attr">th:text</span>=<span class="string">"${@appConfig.getMode()}"</span>></span><span class="tag"></<span class="name">p</span>></span></span><br><span class="line"><span class="tag"><<span class="name">p</span> <span class="attr">th:text</span>=<span class="string">"${@appConfig.getCurrentDate()}"</span>></span><span class="tag"></<span class="name">p</span>></span></span><br></pre></td></tr></table></figure><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"><!-- HTML 출력 결과 --></span></span><br><span class="line"><span class="tag"><<span class="name">p</span>></span>dev<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"><span class="tag"><<span class="name">p</span>></span>2016/01/10<span class="tag"></<span class="name">p</span>></span></span><br></pre></td></tr></table></figure><h2><span id="spring-type-convention">Spring Type Convention</span></h2><p><code>$</code>이나 <code>*</code> 처럼 2중 중괄호를 사용하면 Spring Type Convention을 이용해서 변수 값을 변환하여 표시할 수 있다.</p><figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* Java */</span></span><br><span class="line"><span class="meta">@DateTimeFormat</span>(pattern = <span class="string">"yyyy-MM-dd"</span>)</span><br><span class="line"><span class="keyword">private</span> Date createAt;</span><br></pre></td></tr></table></figure><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"><!-- Thymeleaf 템플릿 --></span></span><br><span class="line"><span class="tag"><<span class="name">td</span> <span class="attr">th:text</span>=<span class="string">"*{{createAt}}"</span>></span>createAt<span class="tag"></<span class="name">td</span>></span></span><br></pre></td></tr></table></figure><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"><!-- HTML 출력 결과 --></span></span><br><span class="line"><span class="tag"><<span class="name">td</span>></span>2016-01-10<span class="tag"></<span class="name">td</span>></span></span><br></pre></td></tr></table></figure>]]></content>
<summary type="html">
<img src="/2017/11/23/thymeleaf-tag-reference/thymeleaf-logo.png" title="Thymeleaf">
<blockquote>
<p>본 문서는 아래 링크에 기재된 내용을 번역한 문서이다.</p>
<p><
</summary>
<category term="Web" scheme="https://indra818.github.io/categories/Web/"/>
<category term="Spring" scheme="https://indra818.github.io/categories/Web/Spring/"/>
<category term="thymeleaf" scheme="https://indra818.github.io/tags/thymeleaf/"/>
<category term="spring" scheme="https://indra818.github.io/tags/spring/"/>
<category term="spring-mvc" scheme="https://indra818.github.io/tags/spring-mvc/"/>
</entry>
<entry>
<title>Github Pages와 Hexo를 이용한 블로그 만들기</title>
<link href="https://indra818.github.io/2017/11/08/github-page-hexo-basic-guide/"/>
<id>https://indra818.github.io/2017/11/08/github-page-hexo-basic-guide/</id>
<published>2017-11-08T06:15:06.000Z</published>
<updated>2018-08-07T05:40:56.332Z</updated>
<content type="html"><![CDATA[<img src="/2017/11/08/github-page-hexo-basic-guide/thumbnail.png" title="test"><p>첫 포스팅으로 Github와 Hexo를 이용한 블로그 개설을 기념하여 블로그 개설시 삽질한 내용을 공유한다.</p><p>필자는 naver blog를 시작으로 tistory, thoth, wordpress 등 웬만큼 유명한 블로그 플랫폼을 지식 저장소 개념으로 이용해 왔으나 항상 포스팅 및 글 편집에 있어서 불만족스러웠다.</p><p>markdown을 지원하는 서비스 형 블로그들이 등장하였으나 소수에다 언제 서비스가 종료될 지 모르고 설치형의 경우 정보전달 보다는 개인 기록물 정도로 블로깅을 하는 필자로서는 서버 호스팅 비용이 부담스럽기에 이 두가지 단점을 모두 해결할 수 있는 Github Pages + Hexo 를 선택하게 되었다.</p><p>블로그를 개설하고 보니 그렇게 어려운 부분은 없었으나 뭐가 됐든 항상 초입은 삽질이 필수였으므로 블로그 개설 시 참고한 자료와 내용을 첫 포스팅으로 기록한다.</p><h2><span id="github-page-gaeseol">Github Page 개설</span></h2><p>Github Page 개설은 Github Pages 홈페이지에 아주 친절하게 설정 과정을 설명하고 있기에 본 포스팅에서는 생략하고 링크로 대신한다.</p><ul><li><a href="https://pages.github.com" rel="external nofollow noopener noreferrer" target="_blank">https://pages.github.com</a></li></ul><h2><span id="hexo">Hexo</span></h2><p>Hexo는 <a href="https://jekyllrb-ko.github.io/" rel="external nofollow noopener noreferrer" target="_blank">Jekyll</a>와 함께 대표적으로 정적 페이지를 쉽게 만들 수 있도록 도와주는 서비스이다. 두 서비스 역시 블로그 지향적인 서비스이며 Hexo의 경우에는 npm을 통해 쉽게 설치가 가능하고 한 줄의 Command Line을 통해 Github에 바로 배포 할 수 있으며, Jekyll과 마찬가지로 다양한 플러그인과 테마를 지원하고 있다.</p><blockquote><p>개인적으론 Jekyll 보다는 Hexo가 블로그용으론 더 강력하다고 생각됨</p></blockquote><h4><span id="seolci-jeon-junbi">설치 전 준비</span></h4><p>Hexo를 이용하기 위해서는 먼저 아래의 구성 요소들이 사전에 설치가 되어 있어야 한다. 이미 설치가 되어 있다면 생략해도 좋다.</p><ul><li><strong>Node.js</strong></li><li><strong>Git</strong></li></ul><h4><span id="hexo-cli-seolci-mic-beulrogeu-saengseong">Hexo CLI 설치 및 블로그 생성</span></h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">$ npm install hexo-cli -g</span><br><span class="line">$ hexo init blog</span><br><span class="line">$ cd blog</span><br><span class="line">$ npm install</span><br></pre></td></tr></table></figure><h4><span id="seoljeongpail-eobdeiteu">설정파일 업데이트</span></h4><p>Command Line을 통해 Hexo를 설치하고 블로그 생성이 완료가 되면 root 디렉토리에 <code>_config.yml</code> 이라는 설정파일이 생성이 되는데 이 곳에 블로그에 대한 대부분의 설정을 할 수 있다. 설정 값에 대한 자세한 정보는 Hexo의 Document를 통해 확인이 가능하다.</p><ul><li>Documentation - <a href="https://hexo.io/docs/" rel="external nofollow noopener noreferrer" target="_blank">https://hexo.io/docs/</a></li></ul><h4><span id="site-jeongbo">Site 정보</span></h4><p>블로그의 이름과 간략한 소개등을 수정 할 수 있다</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">title: 블로그 타이틀 (브라우저의 탭 타이틀로 표시됨)</span><br><span class="line">subtitle: 블로그 부제</span><br><span class="line">description: 블로그 간단 설명</span><br><span class="line">author: 저자명</span><br></pre></td></tr></table></figure><h4><span id="url-jeongbo">URL 정보</span></h4><p>블로그 URL정보를 설정 할 수 있다</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">url: https://USERNAME.github.io</span><br><span class="line">root: /</span><br><span class="line">permalink: :year/:month/:day/:title/</span><br><span class="line">permalink_defaults:</span><br></pre></td></tr></table></figure><blockquote><p>만약 본인의 Custom Domain을 적용하고 싶다면 url값은 이후에 Custom Domain 설정시 CNAME 파일을 생성 할 때도 참조한다.</p></blockquote><h4><span id="github-jeongbo">Github 정보</span></h4><p>자신의 Repository 정보를 입력하면 이후에 손쉽게 배포가 가능하다.</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"># Deployment</span><br><span class="line">deploy:</span><br><span class="line"> type: git</span><br><span class="line"> repo: https://USERNAME@github.com/USERNAME/USERNAME.github.io</span><br></pre></td></tr></table></figure><blockquote><p>위와 같이 설정 후 실제 배포 시에 아래와 같은 에러가 발생하는 경우 추가 플러그인을 설치해야 한다.</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">> ERROR Deployer not found: git</span><br><span class="line">></span><br></pre></td></tr></table></figure></blockquote><blockquote><p>hexo-deployer-git 설치</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">> npm install hexo-deployer-git --save</span><br><span class="line">></span><br></pre></td></tr></table></figure></blockquote><h4><span id="rokeoleseo-teseuteu">로컬에서 테스트</span></h4><p>기본적인 설정이 완료가 되면 아래의 Command Line을 통해 로컬에서 서버를 구동 할 수 있다.</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo server</span><br></pre></td></tr></table></figure><p>서버가 구동이 되면 아래의 주소를 통해 브라우저에서 블로그에 접속 할 수 있다.</p><ul><li><a href="http://localhost:4000" rel="external nofollow noopener noreferrer" target="_blank">http://localhost:4000</a></li></ul><h2><span id="githube-baepo">Github에 배포</span></h2><p>로컬에서 정상적으로 블로그에 접속이 되었다면 이미 생성한 Github Page Repository에 손쉽게 배포가 가능하다.</p><p><strong>Hexo 설정을 통해 정적 리소스 생성하기</strong></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo generate</span><br></pre></td></tr></table></figure><p><strong>배포하기</strong></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo deploy</span><br></pre></td></tr></table></figure><p><strong>Generate와 Deploy 동시 실행</strong></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo deploy --generate</span><br></pre></td></tr></table></figure><p>배포가 완료가 되면 브라우저에서 USERNAME.github.io로 접속해 정상적으로 배포가 되었는지 확인한다.</p><h4><span id="juyisahang">주의사항</span></h4><p>간혹 hexo의 deploy기능을 통해 정상적으로 배포가 되었음에도 불구하고 페이지가 업데이트 되지 않는 현상이 있는데, 이 경우에는 아래와 같이 페이지를 clean후에 배포를 하면 해결된다.</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">$ hexo clean</span><br><span class="line">$ hexo deploy --generate</span><br></pre></td></tr></table></figure><h2><span id="tema-jeogyong">테마 적용</span></h2><p>USERNAME.github.io를 통해 성공적으로 블로그 접속이 되었다면, 멋진 디자인을 적용한 테마(Theme)를 적용하고 싶을 것이다. Hexo에서는 아래의 페이지에서 다양한 Theme가 적용된 페이지를 소개하고 있다.</p><blockquote><p><a href="https://hexo.io/themes/" rel="external nofollow noopener noreferrer" target="_blank">https://hexo.io/themes/</a></p></blockquote><p>구체적인 테마 적용 방법은 아래 링크를 참고한다.</p><ul><li><a href="https://simhyejin.github.io/2016/06/24/hexo-themes" rel="external nofollow noopener noreferrer" target="_blank">https://simhyejin.github.io/2016/06/24/hexo-themes</a></li></ul><h2><span id="poseuteu-jagseong">포스트 작성</span></h2><p>아래의 Command Line을 입력하면, root 디렉토리의 <code>source/_posts</code> 폴더에 Markdown 파일이 하나 생성되는데 Hexo에서는 <code>Markdown</code>문서를 통해 포스트를 작성해 나가면 된다.</p><h4><span id="sae-poseuteu-mandeulgi">새 포스트 만들기</span></h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo new post [post_name]</span><br></pre></td></tr></table></figure><p><strong>예제</strong></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo new post github-page-and-hexo</span><br></pre></td></tr></table></figure><p><strong>아래와 같은 경로에 Markdown 문서가 생성 된다</strong></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">ㄴ source</span><br><span class="line"> ㄴ _posts</span><br><span class="line"> - github-page-and-hexo.md</span><br></pre></td></tr></table></figure><p><strong>생성된 Markdown 문서에서 아래와 같이 제목을 수정 할 수 있다</strong></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">---</span><br><span class="line">title: Github Page와 Hexo를 통해 30분만에 기술 블로그 만들기</span><br><span class="line">date: 2017-04-16 22:37:53</span><br><span class="line">---</span><br></pre></td></tr></table></figure><blockquote><p><a href="https://guides.github.com/features/mastering-markdown/" rel="external nofollow noopener noreferrer" target="_blank">Github Markdown Guide</a></p></blockquote><p>기존 서비스형 블로그와 같이 초안 작성 및 세부 설정과 같은 내용은 아래 링크를 참고한다.</p><ul><li><a href="http://futurecreator.github.io/2016/06/21/hexo-basic-usage" rel="external nofollow noopener noreferrer" target="_blank">http://futurecreator.github.io/2016/06/21/hexo-basic-usage</a></li></ul><h2><span id="camgo-jaryo">참고 자료</span></h2><ul><li><a href="https://www.holaxprogramming.com/2017/04/16/github-page-and-hexo/" rel="external nofollow noopener noreferrer" target="_blank">Github Pages와 Hexo를 통해 30분만에 기술 블로그 만들기</a></li><li><a href="http://futurecreator.github.io/2016/06/21/hexo-basic-usage/" rel="external nofollow noopener noreferrer" target="_blank">Hexo 기본 사용법</a></li><li><a href="https://simhyejin.github.io/2016/06/24/hexo-themes/" rel="external nofollow noopener noreferrer" target="_blank">Hexo 테마 적용하기</a></li></ul>]]></content>
<summary type="html">
<img src="/2017/11/08/github-page-hexo-basic-guide/thumbnail.png" title="test">
<p>첫 포스팅으로 Github와 Hexo를 이용한 블로그 개설을 기념하여 블로그 개설시 삽질한 내용을 공유
</summary>
<category term="Web" scheme="https://indra818.github.io/categories/Web/"/>
<category term="Hexo" scheme="https://indra818.github.io/categories/Web/Hexo/"/>
<category term="github" scheme="https://indra818.github.io/tags/github/"/>
<category term="hexo" scheme="https://indra818.github.io/tags/hexo/"/>
<category term="blogging" scheme="https://indra818.github.io/tags/blogging/"/>
</entry>
</feed>