본문 바로가기

웹개발 수업정리

1_타일즈1(tiles)

 

톰캣 :  로컬웹서버. 웹컨테이너

 

 

webapp(웹어플리케이션)폴더안에 css, js 등의 폴더가 있는데 이것들을 정적웹어플리케이션이라고 한다.

정적어플리케이션을 동적서비스(웹컨테이너 :  톰캣) 이용 -> 구현 

 

톰캣 안엔 서블릿이 있다.

 

 

실행순서

 

1, 서버라는 폴더 안에 가면 context.xml 이 있다. 이 안엔 여러 태그가 있고 

watched resource 라는 태그 안에 보면 web-inf/web.xml 을 가리키고 있다.

 

 

 

2, first프로젝트에 web.xml로 가보면 welcome-file-list 태그가 있고 welcome-file이라는 태그가 있다.

그 안에는 index.jsp가 있다.

 

 

3, 파일을 찾아가서 파일에 적혀있는 내용을 보면 첫 줄에 페이지 디렉티브, 둘째 줄에 jsp디렉티브 (<%디렉티브.)

page 초록색 글씨는 디렉티브 명. 그래서 이것은 페이지 디렉티브 / 자주색은 속성, 파란색으로 되어있는 것은 속성의 값

 

 

utf-8을 적지않으면 다국어처리가 되지 않아서 한글을 사용할 수 없다.

이것은 jsp파일마다 무조건 최상위에 하나씩 붙어있다.

 

두번째 줄에 jsp:forward는 페이지 속성이 있고 값이 있는데 이 값을 논리적 주소라고 한다.

이 논리적 주소로 이동하라는 의미이다.

/main.do 가 논리적 주소이고 여기로 이동하라는 것.

 

 

 

 

업무폴더 main으로 찾아가 보면 web 파일이 있고 그 안에 MainController 라는 파일이 있다.

컨트롤러 파일은 업무폴더마다 하나씩 있다.

 

화면에서 올린 논리적 주소는 컨트롤러 안에 들어가 있다.

메인컨트롤러 안을 보면 

 

@ :  어노테이션

 

 

value라는 속성안에 값과 화면에서 올린 논리적 주소(index.xml에서 설정)와 동일하면 해당 메서드 안으로 들어간다.

 

화면에서 올린 논리적 주소는 똑같은 문자열인지만 확인한다.

그러므로 논리적주소인 문자열은 하나의 프로젝트에서 유니크한 문자열이어야 한다.

 

메서드 구현부안에 return 옆에 "main/main" 이 적혀있다고 가정하면

/ 를 기준으로 jsp 업무폴더명, 오른쪽이 jsp파일명으로 이동하라는 의미이다.

 

스프링은 java쪽, jsp 쪽에 업무폴더 한 개씩 존재해야 한다.

 

WEB-INF폴더는 외부에서 접근이 불가한 파일이다. 톰캣의 도움이 있어야지만 실행이 가능하다.

 

화면과 화면사이에서 이동되기 위해서는 서블릿이 필요하고 그것을 톰캣이 갖고 있으므로

톰캣이 없으면 불가능하다.

 

 

타일즈란 파일들이 모여있는 판.

 

 

최소한의 전자정부프레임워크에 필요한 파일을 받도록 체크해준다.

 

first파일과 내가 생성한 파일에 있는 pom.xml 파일을 연다.

 

pom.xml을 메이븐이라고 한다.

역할 : dependency들이 모여져 있는 곳이다. 

이 dependency들은 Package Explorer 탭에 Maven Dependencies 폴더에서 폴 수 있다.

 

 

jar는 압축파일 이름이고 자바만 읽을 수 있다.

스프링에 필요한 자바파일들, 클레스 파일들로 이뤄져 있다.

그 자바파일들을 읽어서 프로그램개발을 하는 것이다.

 

디펜던시 한 묶음씩 지울때 마다 우유병들이 몇 개씩 사라질 것이다.

디펜던시를 다 지우면 이 부분에 우유병모양의 파일들은 다 사라질 것이다.

 

 

스프링프레임워크에 필요한 파일들을 한 개의 xml파일로 관리하는 부분이 pom.xml 파일이다.

 

 

버전을 적어주는 곳이다.

 

기존에 있던 first파일은 세줄인데 지금 새로 생성한 파일은 두줄이다.

적혀잇지 않은 부분은 tiles이다.

 

인젝션 : 필요한 파일을 다운받는것을 인젝션한다고 한다.

인젝션한것을 사용하는 것을 눅업한다고 표현한다.

 

디펜던시 2개 추가한다.

 

 

java 폴더 안에는 .java 

resource 안에는 .xml파일이 있다.

 

*resource는 2가지 역할 

1. 스프링 설정파일이 있다.

2. sql 파일들이 있다.

 

web-app 에는 view관련이 있다. js, img, web-inf > jsp, 

 

config 폴더 안에 egovframework에 springmvc 폴더 안에 dispatcher-servlet.xml 

이 파일은 화면관련된 설정과 컨트롤러 쪽 관련 내용이 적힌 파일이다.

 

타일즈는 view관련된 것이므로 타일즈 설정은 dispatcher-servlet.xml에서 해주어야 한다.

 

jsp파일에 기본경로를 적어놓은 곳이다.

 

기본적으로 jsp파일이라고 적혀있기 때문에

컨트롤러의 return 에 main/main이라고 적기만 해도 파일을 찾아갈 수 있다.

 

 

 

타일즈 설정을 해주는 파일을 가리키는 내용이다.

실질적인 작업은 default-layout.xml

 

타일즈 설정에 order는 우선순위를 가리킨다.

47번째 줄에는 우선순위가 또 적혀있다. 이 부분을 2로 변경해준다.

 

우선순위의 최고는 0 이다.

 

layout.jsp파일은 합친 판

 

 

value로 되어있는 경로가 너무 길어서 put-attribute의 name속성으로 짧게 사용하도록 설정되어있다.

 

나머지 파일들의 경로들은 변경되지 않지만 contents는 경로가 동적으로 변경이 되야하기 때문에 어떠한 업무폴더 명이 오던 어떠한 파일명이 오던 뒤에 .jsp파일이 오면 실행이 된다.

 

왼쪽, 오른쪽에 어떤 것을 적든 뒤에 .tiles 가 붙으면 실행된다.

 

jsp 업무폴더를 갖고 온다. 

 

그리고 index.jsp파일에 논리적주소를 main.do로 변경한다.

 

 

 

tiles-difinition을 복사해서 같은 태그 안에 복붙해준다.

필요한 타일즈만 냅두고 name=.login

 

타일즈를 사용하지 않는 경우

프로젝트 하나를 움직여서 변경해야 할 사이즈가 크다. 

 

 

html : hyper text markup language.

 

문서상에서 글자를 클릭하면 다른곳으로 이동가능한 것이 hyper text

markup 은 태그로 이뤄진 문서를 말한다.

태그의 표준은 소문자.

<!doctype html>는 문서의 유형을 표현하는 태그. html5임을 뜻한다.

 

 

화면이 완성된 상태에서 다시 dashboard 메뉴를 클릭하면 다시 화면이 깨지는 현상이 나타난다.

 

 

li 리스트.

a 는 손가락 표시 되는 태그

p 는 문단

i 는 아이콘

 

href 속성 :  ~로 이동해라.

 

 

main.do로 바꾸면 호출되고 main컨트롤러로 가고 메서드로 들어가서 main/main 적혀있고 

맞는 업무파일로 가기때문에 main업무폴더에 main.jsp 파일로 이동하게 되서 다시 main화면이 뜬다.

 

 

i태그 입장에서 a태그는 부모태그이다.

a태그 입장에서 i태그는 자식태그이다.

i 태그 입장에서 li태그는 조상태그이다.

li태그 입장에서 i태그는 자손태그이다.

i태그 입장에서 p태그는 형제태그이다.

 

 

 

하이라이트 표시.

클레스로 작업하는 것이 일반이다.

 

 

active 를 지워주고 나니 하이라이트가 없어졌다.

 

 

 

메뉴를 두개로 늘리고 one, two 로 하고 논리적주소도 동일하게 변경시켜준다.

 

그리고 그와 같이 컨트롤러에 논리적주소도 변경.

 

 

index.jsp파일에서도 논리적주소 변경해준다.

첫화면인 main.do 가 one으로 변경되었기 때문에 맨 처음에 뜨는 화면인 

one.do를 적어줘야한다.

 

 

 

 

main업무폴더에 있는 main.jsp파일을 복붙해서 파일이름을 two로 변경한다.

 

 

그리고 controller에도 메서드를 추가해준다.

 

떠야하는 화면 경로도 변경하고 논리적주소 부분도 변경해준다.

매서드명도 유니크해야하기때문에 initTwo로 변경해준다.

 

 

 

 

[화면실행순서]

 

 서버폴더안에 server.xml 파일 -> context.xml 파일안에 watched Resource 태그 안에 적혀있는 web-inf/web.xml -> welcome-file-list 안에 welcome-file태그 안에 index.jsp가 적혀있고 index.jsp로 가면 첫줄에 페이지 디렉티브.

두번째 줄에 jsp:forward로 논리적주소가 적혀있다. 이 논리적주소는 java폴더쪽 업무폴더에 controller파일에 리퀘스트맵핑 어노테이션에 value라는 속성에 적혀있다. 그 논리적 주소가 일치하면 해당 구현부로 들어가고 그 안에 return이 적혀있고 그 리턴 옆에 main/main 이 적혀있는데 왼쪽은jsp업무폴더명, 오른쪽은 jsp파일명이다. webapp > web-inf폴더 하위에 jsp폴더 안에 main이라는 업무폴더 아래에 main.jsp파일을 찾아가서 첫 화면이 뜬다.

 

 

[타일즈 셋팅 순서]

1, pom.xml 파일에 property태그에 버전정의태그 추가하고 dependency 태그 2개 추가한다. 이것을 인젝션이라 한다.

2, webapp > web-inf > config > egov > springmvc 에 dispatcher-servlet.xml 파일에 (뷰설정) bean태그 2개 추가. 하나는 jsp 파일 경로 설정, 두번째는 default-layout.xml파일을 가리키는 태그.

3, web-inf > tiles > default-layout.xml(각 화면 경로 설정) > main만 동적세팅.

4, put-attribute 태그에 value값으로 경로 설정되어있고 해당 경로에 있으면서 definition name="*/*.tiles" 어떤 업무폴더명에 어떤 업무파일명이든 .tiles가 붙으면 화면에 타일즈 적용 (* 를 아스트리크 라고 한다.)

5, index.jsp폴더에 가서 jsp:forward 태그에 논리적 주소값에 컨트롤러에 논리적 주소값과 동일하게 준다.

 

 

 

 

실행순서. 

  1. 톰캣구동

  2. server.xml

  3. context.xml

  4. watched-resource태그에 web-inf/web.xml파일로 간다.

  5. web.xml파일안에 welcome-file-list태그안에 welcome-file태그에 index.jsp

  6. index.jsp파일안에 페이지디렉티브 (디렉티브, 페이지디렉티브, 다국어처리.) 되어있고 jsp:forward 는 page 속성의 값을 이동할 논리적 주소를 적는다. 

  7. 이 논리적주소는 java > egov > example > main업무폴더에 web > mainController안에 @RequestMapping 안에 value라는 속성에 적힌 논리적주소값과 화면에서 올린 문자열이 일치하면 해당 메서드안으로 들어간다. value라는 속성에 값이 동일하게 있으면 안된다.(하나의 프로젝트에서 유니크해야한다.) 메서드 구현부 안에 return옆에 main/main 이라고 적혀있는데 왼쪽은 jsp폴더명, 오른쪽은 jsp파일명이다. 

  8. webapp > web-inf > jsp> main > main.jsp를 찾아간다. 

  9. 첫화면이 뜬다. 

 

 

 

'웹개발 수업정리' 카테고리의 다른 글

7_@RequestParam, hashMap, modelMap  (1) 2020.05.03
6_컨트롤러에서 데이터 넘기는 방식 4가지(Map, EgovMap, String, VO)  (1) 2020.05.03
5_sql  (0) 2020.04.30
3_form 태그  (0) 2020.04.30
2_타일즈2(tiles)  (0) 2020.04.13