comtK

안녕하세요! 1주일만에 작성하는거같네요ㅠ

게을터러져서 참... 이러면 안돼는데 왜이럴까..ㅠ

헛소리 그만하고 바로 시작하겠습니다ㅠ!

화면을 구성하는데 있어서 하나의 파일이 아닌 여러부분을 따로 작업해서 하나로 묶어 화면에 보여주는것을 말합니다.

예를들어서 한 화면에 레이아웃이 header, content, footer로 구성되어 있으면 각 부분을 파일로 만들어서 여러 페이지에서 내용만 바꿔가면서 모든페이지에 header와 footer를 보여주는것이 가능합니다.

물론 하나의 파일에 전부 때려박아도 가능은하지만.. 뭔가 수정할때 페이지수만큼 수정이 필요합니다.

JSP에는 이미 include 기능이 있는데 굳이 tiles를 쓰는 이유가 있을까요?

저도 tiles를 전부 이해한게 아니라서 뭐라 설명은 못드리는데... 일단 include보다 편합니다.

그대신 사용하기전에 설정이 필요해요. 레이아웃 요소들부터 레이아웃의 틀까지 만들어줘야합니다.

편리함으로 예시를 하나 들어보면, 만약에 페이지수가 50장정도 되는 웹사이트가 있다고 가정합니다.

이 웹사이트의 header부분에 수정이 필요해서 header에 해당하는 jsp파일을 수정했습니다.

이럴경우 include와 tiles를 사용했을때 둘다 나머지를 따로 수정할필요가 없습니다.

알아서 모든 페이지들에 수정한 header가 적용되기 때문이죠. 그러나, 수정사항으로 header파일이 하나 더 생기게 된다면 어떻게될까요? 특정 페이지들에 대해서 새로만든 header파일이 적용되어야 한다면, 그페이지들 모두를 수정해야 할겁니다. 하지만 tiles를 사용하면 이런경우에도 크게 작업이 들어가지 않습니다. 이유는 설정부분을 설명하면서 차차 알아가보겠습니다.

자 이전에 올렸던 글에 이어서 계속 작업하도록 하겠습니다.

이전글은 아래 따로 링크를 걸어두었습니다.

[Spring] 03. Spring 프로젝트 생성 : http://comtk.tistory.com/7

 파일구조 입니다.

빨간 점이 찍혀있는 파일 및 폴더는 이번에 설정하면서 수정 혹은 생성되는 파일들입니다.

먼저 pom.xml을 보겠습니다.

pom.xml 에서 <dependencies></dependencies> 사이에 tiles dependency를 추가해주세요.

자 여기서  pom.xml은 뭐고 dependency를 선언하는이유는 무엇일까요??

pom.xml은 간단하게 설명하면 필요한 라이브러리를 추가하는곳 이라고 말씀드리고싶네요. 라이브러리들의 버전관리 등을 할수있어요. 그런데 사실 저도 잘 몰라요..ㅠ 공부할게 산더미입니다ㅠㅜ 일단 당장 필요한 부분만 설명드리면서 넘어가고있어요ㅠ 이후에 저도 다시 살펴볼 예정입니다ㅠㅜ!! 필요한 라이브러리를 추가하는 방법은 pom.xml의 <dependencies></dependencies> 사이에 필요한 라이브러리의 dependency를 추가해주면 됩니다. 그럼 나머지는 maven이 알아서 얍얍 하고 추가해줄겁니다.(인터넷 저장소에서 다운받아줘요!!)

배포판으로 export하면 라이브러리들이 추가되어서 쨔쟌! 하고 나옵니다.

이미지가 가로로 좀 길어서 잘 보이실지 모르겠네요ㅠ

자 이번엔 root-context.xml입니다. root-context.xml를 열어보시면 아마 엄청 깨끗할겁니다. 저는 그랬어요.

자 그럼 아래 공간을 좀 주시고 <!-- tiles --> 아랫부분부터 </beans> 사이의 내용을 적어주시면 됩니다.

다 일일이 타이핑하셔도 되는데, 오타나면 에러나잖아요ㅠ ctrl+space 사용해서 자동완성으로 얍얍 하고 추가해주세요.

자 이번엔 servlet-context.xml 입니다.

<beans:beans></beans:beans> 사이에 주석처리된 부분 아래 내용을 추가해주세요.

첫번째 bean은 아직 좀 더 공부해봐야 뭔가 말을해드리기 좀 애매하네요ㅠ 제가 아직 많이 못알아봤으니 패스ㅠ

두번째 bean은 tiles의 설정에 대한 class입니다. 아래 value 경로에 tiles에 대한 설정파일이 들어있다는것을 정의해주고 있습니다.

이번엔 tiles.xml 입니다.

tiles에 대해 정의되어있는 내용입니다.

하나씩 살펴보면 먼저 맨 첫줄 name이 layout인 줄부터 보겠습니다.

definition의 template는 만드신 파일에 맞게 작성해주시면 됩니다. name은 편하신대로 해주시면 돼는데 이왕이면 의미있는걸로 지어주세요. aaa, asd 이런거 하지 마시구요.

먼저, name은 tiles-definitions에서 사용할 이름을 정의해놓은 것입니다. 뒤에 속성에 value나 template에 따라서 사용하는부분이 달라집니다.

template는 말그대로 템플릿 입니다. 레이아웃의 틀이되는 파일을 적어놓은 곳입니다.

어떤 모양으로 어떻게 설정할지는 각자 알아서 작성해주시면 됩니다.

제가만든 파일내용은 잠시후에 보여드리겠습니다.

두번째 <put-attribute/>를 보겠습니다.

보시면 template 안에 속성처럼 들어가있습니다. 이게 무슨말인가 하면, '해당 template에서는 이런 이름으로 이런파일을 가져다 쓰겠다' 라고 정의한 것입니다. 위에서 보시다시피 필요한만큼 정의해주시면 됩니다.

template이 정의되어있는 definition에 <put-attribute/>를 작성하면 해당 템플릿의 레이아웃에서는 고정적으로 보여지게 됩니다. 변화가 없이 모든페이지에 들어가는 header 또는 footer를 이런식으로 많이 설정해서 사용합니다.

그 다음 definition을 보겠습니다.

먼저 name을 보시면 name이 이상합니다. '*/*' 이라고 되어있는데 이게 무슨뜻일까요??

이것은 controller에서 return을 '*/*' 다시말해서 '경로/파일명' 이런식으로 넘겨주는데, 그에대한 패턴을 적어놓은 것입니다. 패턴이 name과 일치할경우 해당 definition이 캐치하여 그에맞는 content를 보여주는것입니다.

다음으로 definition에 template가 아닌 extends 라는 속성이 보입니다. 그 안에 값은 template의 name값이 들어있네요. 이게 무슨의미일까요?

이건 해당 definition은 레이아웃을 설정하지 않고, 이미 설정되어있는 레이아웃을 사용한다는 의미입니다.

name과 extends를 합쳐서 definition을 설명해보면 'name에 해당하는 패턴으로 controller에서 리턴을 해주면 extends의 값과 일치하는 레이아웃에 content를 보여주겠다' 가 되는것입니다.

자 그럼 그 안에 <put-attribute/>를 보겠습니다.

name을 보시면 'content' 라고 적혀있습니다. 그런데 이건 내용만있어요. header나 footer가 따로 없습니다.

그럼 이 파일이 보여질대는 header와 footer가 나오지 않을까요??

그렇지 않습니다. 위 definition에서 어떤 레이아웃을 사용할지 extends에서 정의하였고, 그 레이아웃에는 header와 footer가 설정되어있습니다. 그 레이아웃에 맞는 header와 footer이 같이 나오는겁니다. content는 해당 파일의 내용에 따라 계속 바뀌겠죠.

자 다음은 value를 보시면 '{1}/{2}.jsp' 라는것이 보입니다.

전에는 파일의 경로와 파일명이 적혀있었는데 이건 무슨의미일까요??

아까 definition의 name의 패턴을 보면 '*/*'이었습니다. 이 패턴으로 결과가 오는 친구들을 캐치해서 contnet를 보여주는데, 이때 이 값이 '경로/파일명'이라고 위에 설명하였습니다. 이 경로와 파일명이 {1}과 {2}에 들어가는겁니다. 숫자는 *의 순서에 맞게 적어주시면 됩니다.

먼저 레이아웃이 되는 파일을 보겠습니다.

<tiles:insertAttribute>만 설명드리면 될거같네요.

나머지는 그냥 HTML이니 넘어가겠습니다. id와 <tiles:insertAttribute>의 name이 같아서 헷갈리실수도 있는데 달라도 전혀 지장없습니다.

<tiles:insertAttribute>가 작성된 부분이 아까 정의했던 파일들이 들어가는 부분들입니다.

해당 파일들이 어떻게 자기위치를 찾아가는지는 벌써 감이오신 분들도 있을겁니다.

아까 tiles.xml에서 name을 적어주셨는데, 그 name에 맞게 해당 파일들이 적용됩니다.

설정을 잘 하시면 레이아웃과 tile로 쓸 파일들을 여러개 만드시고 각각 해당 레이아웃에 맞는 각각의 타일들을 적용시키는것도 가능합니다.

tile들(header, footer)과 메인페이지를 보겠습니다.

내용이없으니 설명은 따로 적지않고 이미지만 올리겠습니다.

위에서부터 순서대로 header, footer, home 입니다.

마지막으로 controller에서(controller 하나밖에 없는거 다 알아요. 그거맞으니까 그거 열어보세요 ㅋㅋ) return을 'home' 에서 'main/home'로 바꿔줍니다. 이거는 제가 이미지를 준비 못했네요ㅠ

자 이제 설정은 다 했고, 결과를 보겠습니다.

위에 보시면 각각 파일들은 따로 작성되어 있는데 결과에서는 합쳐져서 나오는것을 볼 수 있습니다.

다음번엔 뭘할지 생각은 해뒀는데 금방 할수있을지 모르겠네요ㅠ

다음번엔 MyBatis를 적용해볼까 합니다.

다음번에도 열심히 적어볼께요!!

몇분이나 보시는지 모르겠지만... 많이들 봐주셨으면합니다 ㅋㅋ 다음시간에봐요!!