악덕고용주의 개발 일기

타일즈와 유사하게 header, footer, body 등의 형식을 지원하는 sitemesh 설정 방법

[ SiteMesh 설정하기 ]

1. pom.xml에 dependency 추가

<dependency> <groupId>opensymphony</groupId> <artifactId>sitemesh</artifactId> <version>2.4.2</version> </dependency>

2. web.xml에 한글처리 filter 위에 filter 추가

이때, 모든 경로가 siteMesh의 영향을 일단 받을 수 있도록 /*로 설정한다.

<filter> <filter-name>sitemesh</filter-name> <filter-class>com.opensymphony.module.sitemesh.filter.PageFilter</filter-class> </filter> <filter-mapping> <filter-name>sitemesh</filter-name> <url-pattern>/*</url-pattern> </filter-mapping>

3. /WEB-INF 폴더 밑에 sitemesh.xml 파일을 만들고 다음 코드를 붙여넣는다.

sitemesh 라이브러리를 추가했다면, WEB-INF 폴더 밑에 sitemesh.xml 파일을 자동으로 인식한다.

이 곳에서 sitemesh 설정파일의 위치를 등록해준다.

여기서는 /WEB-INF/decorators.xml 로 sitemesh의 설정파일을 사용하겠다는 것을 알 수 있다.

<?xml version="1.0" encoding="UTF-8"?> <sitemesh> <property name="decorators-file" value="/WEB-INF/decorators.xml"/> // sitemesh 의 환경설정 파일을 이 걸로 사용하겠다는 지정 <excludes file="${decorators-file}"/> <page-parsers> <parser content-type="text/html" class="com.opensymphony.module.sitemesh.parser.FastPageParser"/> </page-parsers> <decorator-mappers> <mapper class="com.opensymphony.module.sitemesh.mapper.PageDecoratorMapper"> <param name="property.1" value="meta.decorator"/> <param name="property.2" value="decorator"/> </mapper> <mapper class="com.opensymphony.module.sitemesh.mapper.FrameSetDecoratorMapper"> </mapper> <mapper class="com.opensymphony.module.sitemesh.mapper.AgentDecoratorMapper"> <param name="match.MSIE" value="ie"/> <param name="match.Mozilla" value="ns"/> <param name="match.Opera" value="opera"/> <param name="match.Lynx" value="lynx"/> </mapper> <mapper class="com.opensymphony.module.sitemesh.mapper.PrintableDecoratorMapper"> <param name="decorator" value="printable"/> <param name="parameter.name" value="printable"/> <param name="parameter.value" value="true"/> </mapper> <mapper class="com.opensymphony.module.sitemesh.mapper.RobotDecoratorMapper"> <param name="decorator" value="robot"/> </mapper> <mapper class="com.opensymphony.module.sitemesh.mapper.ParameterDecoratorMapper"> <param name="decorator.parameter" value="decorator"/> <param name="parameter.name" value="confirm"/> <param name="parameter.value" value="true"/> </mapper> <mapper class="com.opensymphony.module.sitemesh.mapper.FileDecoratorMapper"> </mapper> <mapper class="com.opensymphony.module.sitemesh.mapper.ConfigDecoratorMapper"> <param name="config" value="${decorators-file}"/> </mapper> </decorator-mappers> </sitemesh>

4. 위에서 설정파일로 사용할 xml 파일을 WEB-INF 폴더 하위에 decorators.xml로 만들고 다음 코드를 붙여넣는다.

/WEB-INF/decorators.xml

<?xml version="1.0" encoding="utf-8"?>  <decorators defaultdir="/WEB-INF/views/layout"> // 데코레이터 기본 폴더로 sitemesh의 layout 관련 파일은 /WEB-INF/view/layout 폴더로 추가 할 것이다.  //여기 패턴은 sitemesh를 사용하지 않을 URL 패턴을 입력하면 된다. //아직 만들어진 것이 없어 추가할 내용은 없지만, 추후 login 문자열이 들어간 URL은 sitemesh를 사용하지 않겠다는 것이다. <excludes> <pattern>*login*</pattern> </excludes> // 이 부분이 데코레이터를 정의하는 부분이다. //여기서는 아래와 같이 header와 footer가 고정으로 들어가고 본문내용만 바뀌는 데코레이터를 만들 생각이다. // header // body // footer <decorator name="header-footer-layout" page="header-footer-layout.jsp"> <pattern>*</pattern> </decorator> </decorators>

5. 데코레이터 기본 폴더에 decorator로 등록한 파일을 생성하자

/WEB-INF/views/layout/header-footer-layout.jsp 를 만들고 다음 코드를 붙여넣자.

<%@ page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%> <%@ taglib prefix="decorator" uri="http://www.opensymphony.com/sitemesh/decorator" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <head> <title>테스트 페이지</title>   <decorator:head /> </head> <div>공통 헤더</div> <hr /> <div> <decorator:body /> </div> <hr /> <div>공통 푸터</div>

6. 그 외의 설정

여기서는 4번에서 header-footer-layout.jsp 하나만을 등록하고 *(모든 요청)시 작동하도록 하였는데,

그 외에 다른 적용이 필요한 경우 이 부분에 다른 layout 설정 파일을 등록해서 사용할 수 있다.

그 외에도, layout 파일 내에도 별도의 header.jsp 등을 만든 것을

<c:import 태그를 이용해서 등록해서 사용할 수 있다.

저작자표시 비영리

'개발 > 스프링' 카테고리의 다른 글

AJAX를 동기화, 비동기화 지정하는 방법(동기<순서대로>로 작업하는 예제) (0)	2017.05.31
handlebars js 라이브러리를 이용한 View 표현하기 (1)	2017.05.31
게시글 페이징 처리하기(페이지 처리 쪽 처리) (11)	2017.05.07
스프링 환경설정 (2)	2017.05.06
쿠키와 세션을 이용한 자동 로그인 처리 (4)	2017.05.06

[ 비슷한 코드를 반복적으로 "렌더링"하는 방법 ]

데이터 배열 처리시

map() 메서드는 파라미터로 전달된 함수를 통하여 배열 내의 각

요소를 처리해서 그 결과로 새로운 배열을 생성한다.

arr.map(callback,[thisArg])

callback : 새로운 배열의 요소를 생성하는 함수로서, 다음 세가지 인수를 가진다.

- currentValue : 현재 처리되고 있는 요소

- index : 현재 처리되고 있는 요소의 index 값

- array : 메소드가 불려진 배열

thisArg(선택항목) : callback 함수 내부에서 사용할 this 값을 설정

ex) var numbers = [1,2,3,4,5]; // 처음 값 1,2,3,4,5

var processed = numbers.map(function(num){

return num*num;

});

//processed가 갖고 있는 값 : 1,4,9,16,25

이걸 ES6 문법으로 작성해 보면(arrow function)

let numbers = [1,2,3,4,5];

let result = numbers.map((num) => {

return num * num;

});

ES6의 arrow 문법 예제)

- 파라미터 한개인 경우 : let one = a => console.log(a)

이건 )

var one = function one(a){

return console.log(a);

}

와 같음

- 파라미터가 두개인 경우 :

let two = (a,b)=>console.log(a,b);

- 함수의 내부가 여러줄인 경우

let three = (c,d)=>{

console.log(c);

console.log(d);

}

- 파라미터가 없는 경우

let four = ()=>{

console.log("no params");

}

*/

// [ react에서 배열을 Component로 매핑 ]

// 우선, 반복되는 작업을 직접 수동으로 하는 안좋은 예제

class Contact extends React.Component{

render(){

return(

<div>

<div>Betty 101-0000-0001</div>

<div>Charlie 101-0000-0001</div>

<div>David 101-0000-0001</div>

</div>

);

}

};

class App extends React.Component{

render(){

return(

);

}

};

ReactDOM.render(<App/>,document.getElementById("root"));

// 반복작업하는 부분을 따로 컴포넌트로 만들어 보자.

class ContactInfo extends React.Component {

render() {

return (

<div>{this.props.contact.name} {this.props.contact.phone}</div>

);

}

class Contact extends React.Component {

constructor(props) {

super(props);

this.state = {

contactData: [

{ name: 'Abet', phone: '010-0000-0001' },

{ name: 'Betty', phone: '010-0000-0002' },

{ name: 'Charlie', phone: '010-0000-0003' },

{ name: 'David', phone: '010-0000-0004' }

]

}

render() {

const mapToComponent = (data) => { // 전달받은 데이터 배열을 컴포넌트 배열로

return data.map((contact, i) => {

return (<ContactInfo contact={contact} key={i}/>);

});

};

return (

<div>

{ mapToComponent(this.state.contactData) }

</div>

);

}

class App extends React.Component {

render() {

return (

);

}

};

ReactDOM.render(

<App></App>,

document.getElementById("root")

);

저작자표시 비영리

'개발 > ReactJs' 카테고리의 다른 글

3. 유동적인 데이터를 넣는 state (0)	2017.05.10
2.Props와 Type, DefaultProps (0)	2017.05.10
1.ES6 기본문법과 JSX 기본 문법 (0)	2017.05.10

/*
  [ state ]
  : 컴포넌트에서 유동적인 데이터를 보여줄 때 사용됨.
  : JSX 내부에 {this.state.stateName}
  : 초기값 설정이 필수, 생성자(constructor)에서 
    this.state = {}으로 설정
  : 값을 수정할 때에는 this.setState({...}), 렌더링 된 다음엔
    this.state = 절대 사용하지 말 것!
*/

class Counter extends React.Component{
  // 생성자
  constructor(props){
    super(props); // 상속받은 부모 생성자를 통해 초기화
    this.state = { // 생성자에서 초기값 설정해주는 것(필수임...)
      value:0
    };
    this.handleClick = this.handleClick.bind(this);
  }
  
  // 클릭됐을 때 동작할 메서드 정의
  // 이 메서드를 클릭할 때 동작하도록 하려면 onClick으로 지정하면 된다.
  handleClick(){
    this.setState({
      value:this.state.value + 1
    });
  }
  
  
  //랜더링
  render(){
    return(
      <div>
        <div>{this.state.value}</div>
        <!--
          클릭이벤트 메서드를 지정할 때 연결시켜줘야대는대 이때, this를 써줘야함(어떤 this인지 모르는걸 방지하기 위해)
: onCLick={this.handleClick.bind(this)}
근대 이 태그에서 직접 바인드하는 것보다 생성자에서 
바인딩시켜주는 것이 좋다. 생성자 쪽을 보자.
this.handleClick = this.handleClick.bind(this); 를 적용해주고 사용하자

그럼, [this.handleClick() 이렇게하면 어떻게 되나?]
  : 함수가 실행되긴하지만, 무한반복되며 실행되니까
    절때 () 넣지 말자!
        -->
        <button onClick={this.handleClick}>Press Me</button>
      </div>
    );  
  }
};

class App extends React.Component{
  render(){
    return(
      <Counter />
    );
  }
};
ReactDOM.render(<App/>,document.getElementById("root"));

html 쪽에서

저작자표시 비영리

'개발 > ReactJs' 카테고리의 다른 글

4. 반복되는 부분 컴포넌트 매핑 (0)	2017.05.10
2.Props와 Type, DefaultProps (0)	2017.05.10
1.ES6 기본문법과 JSX 기본 문법 (0)	2017.05.10

악덕고용주의 개발 일기

sitemesh 추가하기

'개발 > 스프링' 카테고리의 다른 글

4. 반복되는 부분 컴포넌트 매핑

'개발 > ReactJs' 카테고리의 다른 글

3. 유동적인 데이터를 넣는 state

'개발 > ReactJs' 카테고리의 다른 글

+ Recent posts

티스토리툴바