LuceteMango:)

-- 위 설정을 보면 세 개의 빈은 이름만 다를 뿐 <bean> 에서 가지고 있는 <property> 값이 대부분 동일하다.
   이렇게 중복되는 설정을 갖는 빈이 다수 존재할 경우, 중복되는 설정 정보를 담고 있는 부모빈을 정의한 뒤, 부모 빈 정보를
   재사용하도록 설장할 수 있다. 부모 빈으로 부터 설정 정보를 상속받는 예
<bean id="doorMonitor" class="madvirus.spring.chap02.SystemMonitor">
  <property name="periodTime" value="10" />
  <property name="sender" ref="smsSender" />
</bean>

<bean id="lobbyMonitor" class="madvirus.spring.chap02.SystemMonitor">
  <property name="periodTime" value="10" />
  <property name="sender" ref="smsSender" />
</bean>

<bean id="roomMonitor" class="madvirus.spring.chap02.SystemMonitor">
  <property name="periodTime" value="10" />
  <property name="sender" ref="smsSender" />
</bean>


<bean id="commonMonitor" class="madvirus.spring.chap02.SystemMonitor" abstract="true">
  <property name="periodTime" value="10" />
  <property name="sender" ref="smsSender" />
</bean>
※ abstract 속성 값을 "true" 지정하면 스프링 컨테이너는 해당 빈 객체를 생성하지 않는다.
  commonMonitor 빈은 설정정보만 존재할 뿐 실제로 객체는 생성되지 않는다.

<bean id="lobbyMonitor" parent="commonMonitor">
</bean>
<bean id="roomMonitor" parent="commonMonitor">
</bean>
<bean id="doorMonitor" parent="commonMonitor">
  <property name="periodTime" value="20" />
</bean>
※ 자식 빈에서는 parent 속성을 사용하여 클래스 및 프로퍼티 설정 정보를 물려 받을 부모빈을 설정한다.
   그래서 자식 빈에서는 class명 설정이 없어도 부모빈의 class 설정정보를 물려받는다.
   변경하고자 하는 값이 있다면, 추가로 입력해주면된다.( property , class 모두 공통 )

 - java.util.Properties 클래스는특별한 타입의 Map으로서 키와 값이 모두 String 인 Map 이다.

보통 Properties 클래스는 환경변수나 설정 정보와 같이 상황에 따라 변경되는 값을 저장

하기 위한 용도로 주로 사용된다.

스프링에서 <props> 태그를 이용하여 Properties 타입의 프로퍼티설정 방법

예제)

-- properties 설정

<bean naem="client" class="madvirus.spring.chap02.bookClient">

<property name="config">

<props>

<prop key="server">192.168.1.100</prop>

<prop key="connectionTimeout">5000</prop>

</props>

</property>

</bean>

-- properties 사용

public class BookClient {

private Properties config;

public void setConfig(Properties config) {

this.config = config;

}

public void connect() {

String serverIp = config.getProperty("server");

...

}

}

- 자주 값이 바뀌는 정보를 Properties 를 사용해서 설정을 한다는데..

그냥 <value> 로 해서 가져다가 쓰는거랑 모가 다른지는...

어떨때 저걸써야되는지는 확~ 느낌이 오진 않는다...

- vi(m) 복사와 붙여넣기

부연설명 : "vim" mode 에서 "v"를 누르고 블럭지정한 다음 "y" 를 누르면 블럭지정된 단어가 복사가 되고

               복사한 내용을 붙여넣기할 커서로 이동 후 "p"를 누르면 자동 붙여넣기

- vi(m) 기본 단축키

- vi(m) 블럭 지정시 사용하는 단축키

- vi(m) 저장과 종료 명령

- 이정도면 알아도 대박(!) 일듯...

웹이 점점 화려해 지고 인터넷속도가 빨라지면서 웹페이지들은 점점 빨라지고 있고 디자인은 갈수록 중요해지고 있기 때문에 웹사이트에는(특히 국내에서) 정말 많은 이미지가 들어가고 있다. 근데 HTML 코드를 보다보면 정말 흔히 볼 수 있는 이미지버튼의 형태가

<a href="#"><img src="경로" alt="" /></a>

이런 형태이다. 나도 회사처음 들어왔을때 내 바로 윗사람이 이렇게 쓰는것을 권고하기도 했었고 대부분의 사람들이 이런 형태로 이미지 버튼을 만들고 있는데 이건 정말 잘못된 형태의 html이다. 무엇보다 이렇게 써서 얹을 수 있는 잇점이 단 한개도 없다고 생각한다.

저렇게 허위 a태그를 거는 상황은 100% 이미지를 버튼으로, 즉 클릭용으로 사용하기 위함이다. 그래서 img에 onclick 속성을 사용하고 있다.

<a href="#"><img src="경로" alt="" onclick="clickBtn();" /></a>

이렇게 이벤트까지 추가된 형태가 일반적이다.(물론 onclick도 인라인으로 하지 않고 따로 빼는게 표현과 기능의 분리면에서 더 낫기는 하지만 이건 여기서 논할 얘기는 아니니...) IMG태그 만으로도 클릭은 되는데 굳이 이렇게 A태그를 걸어준 단하나의 이유는 다른이미지랑 다르게 버튼처럼 보이게 하기 위해서 이다. 즉 이미지위로 마우스 커서가 이동했을때 클릭이 가능하다는 걸 사용자에게 알려주기 위해서 마우스 커서가 화살표에서 손모양으로 바뀌게 하기 위함이다. 그냥 이미지태그만 있어도 되는걸 커서바꾸자고 a태그로 감싸버린 것이다.

그럼 이렇게 하면 끝이냐... 브라우저마다 특성이 있긴 하지만 기본적으로 이미지에 A태그를 걸면 IE에서는 보기싫은 파란색의 테두리가 생겨버린다. 하이퍼링크가 달렸다는 것을 알려주기 위해서인데 요즘은 이걸 쓰는 사람이 없기 때문에 대부분은 border="0"을 주어서 해결한다.

<a href="#"><img src="경로" alt="" onclick="clickBtn();" border="0" /></a>

그럼 코드가 이렇게 되어버린다. 이미지버튼하나인데 코드가 너무 길어져버렸다. 단지 커서 바꾸자고???

이건 CSS를 사용하면 금방 해결할 수 있다.

커서의 모양을 바꾸는 것은 스타일로 해버리면 된다. (보통은 img에도 border:0을 기본적으로 주기는 하지만 이 상황에서 꼭 필요한건 아니다.) 그리고 심플한 img태그만 사용하면 된다. CSS를 사용한게 훨씬 많아 보인다면 웹사이트에 버튼이 한 100개쯤 있다고 생각해봐라. CSS는 공통적으로 쓸수 있으니 이미지 태그부분만 작성하면 끝이다.





A태그를 이미지를 감싸줄 필요가 없음을 얘기했고 그냥 하던대로만 하기에도 A태그를 사용했을 때의 문제가 있다. 좀 원론적인 웹표준얘기대로 A태그는 하이퍼링크를 위한 것이기 때문에 A태그는 하이퍼링크만 사용해 주는 것이 좋다. 이건 머 웹표준을 동의하지 않는 사람들에게는 그리 통하지 않을 논리고....

A태그의 구조를 보면 Anchor를 사용한 것임을 할 수 있다. Anchor는 다들 알고 있을꺼라고 생각하지만 간단히 설명하자면

<a href="#title">제목으로 이동</a>
........중간내용.............
<h3 id="title">제목</h3>

과 같이 사용하는 것이 Anchor이다. #과 같이 사용하며 #이 있으면 해당경로로 페이지를 이동시키는 것이 아니라 현재페이지에서 해당 id를 가지고 있는 엘리먼트를 찾아서 이동한다. 이걸 이용해서 #은 주고 id는 null을 주어버린 것이다. 그래서 페이지는 다른페이지로 이동하지 않고 현재 페이지에서 Anchor를 찾지만 찾지 못하는 허위 Anchor를 사용한 것이다.

말했듯이 Anchor는 현재 페이지의 해당위치로 이동하는데 이건 스크롤이 있어도 이동된다. 여기서 문제가 발생하는데 href="#"을 해 놓으면 무조건 페이지 최상단으로 이동한다. 이미지 버튼이 윗쪽에 있을 경우에는 상관없지만 스크롤 내려서 아래에 있다고 생각하면 버튼을 누를때마다 페이지 스크롤은 맨위로 올라가고 다시 스크롤 내려서 다른걸 해야하는 사용자의 편의성을 무진장 해친다...

거기에다가 Anchor도 URL에 포함되기 때문에 저 버튼을 누르면 주소맨뒤에 #가 붙게 된다. 크게 문제가 있다고 할 수는 없지만 보기에 좋지 않은건 사실이다. 그리고 자바스크립트 펑션을 호출해서 location.href로 페이지 이동만 할꺼라면 그냥 A태그에 경로를 주자!!

1. Spring 에서 Multipart 지원 기능을 사용하려면 먼저 MultipartResolver를 스프링 설정 파일에 등록해 주어야 한다.

MultipartResolver는 Multipart 형식으로 데이타가 전송된 경우, 해당 데이터를 스프링 MVC 에서 사용할 수 있도록

변환해준다.

스프링이 기본으로 제공하는 MultipartResolver는 CommonsMultipartResolver이다.

CommonsMultipartResolver는 Commons FileUpload API를 이용해서 Multipart를 처리해준다.

2. 업로드할 입력폼 예제

입력 폼 생성시 enctype = "multipart/form-data" 꼭 입력하자.

3. Controller 에서 업로드 파일 데이타 전달받기

업로드 파일 데이타 받는 방법은 여러가지가 있는데 내가 처리한 업로드 파일 접근 방식은

@RequestParam 어노테이션 이용

(MultipartHttpServletRequest를 이용한 방법도 있다.)

Controller 에서 파일 접근 방법이 다를 뿐 그 이후 Controller 에서 업로드하는 방법은 모두 같다.

인터넷 뒤져가며 만든건데... 맞는지 옳은지는 모르겠다. 업로드는 된다.

4. Controller 에서 파일 접근 후 업로드를 처리하는 FileWriter

위의 Controller 에서 파일 생성 메서드(fileWriter.writeFile) 에서 String fullPath 리턴 받는 건

파일(엑셀) 업로드 이후에 엑셀 파일 읽으려고 파일이 업로드된 경로를 받아 온 경우이다.

경우에 따라 그건 다르니 모...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <script src="http://code.jquery.com/jquery-1.7.min.js"></script>
        <script>
        $.noConflict();
        var J = jQuery;
        J(function () {
            // trigger() : 이벤트를 강제로 발생시킴

           // 이벤트 연결
            J("h1").click(function () {
                J(this).html(function (index, html) {
                    return html + "★";
                });
            });

            //1초마다 함수를 실행
            setInterval(function () {
                J("h1").first().trigger("click");
            }, 1000);
        });
    </script>
    <title>Untitled Page</title>
</head>
<body>
    <h1>start : </h1>
    <h1>start : </h1>
</body>
</html>

※ 간단한 예제라 설명이 없어도 나중에 보면 딱 이해할수 있겠지? 그래야 되는데...

※ 사용법은 앞에서 설명한 이벤트 기본연결 bind() 와 동일하다.

one() 말고 unbind() 를 사용해서도 가능하다.

위의 one() 이벤트 핸들러를 unbind() 로 바꿔서 구현을 하면

    <script>
        $.noConflict();
        var J = jQuery;
        J(function () {
            // 이벤트 연결
            J("h1").click(function () {

                 //출력

J(this).html("CLICK");

alert("이벤트가 발생하였습니다.");

//이벤트 제거

J(this).unbind();

                 });
            });
        });
    </script>

-    hover() 이벤트

mouseenter (마우스 커서가 대상 element의 위로 올라간 경우)

이벤트와

mouseleave (마우스 커서가 대상 element 에서 벗어난 경우)

이벤트를 동시에 연결한다.

-    toggle() 이벤트

click 이벤트를 여러 이벤트를 핸들러를 번갈아가며 실행 할 수 있게 연결한다.

매개변수로 여러 개의 함수를 입력 할 수 있으며, 입력한 순서대로 함수를 실행한다.

※ 모두 클릭("Click") 이벤트 핸들러와 관련이 있다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <style>
        .reverse
        {
            background : Black;
            color : White;
            }
    </style>
    <script src="http://code.jquery.com/jquery-1.7.min.js"></script>
    <script>
        $.noConflict();
        var J = jQuery;
        J(function () {
            // 이벤트 연결
            // hover 이벤트는 매개변수 2개( 클릭시, 클릭해제시)
            J("h1").hover(function () {
                J(this).addClass("reverse")
            }, function () {
                J(this).removeClass("reverse");
            });

            // 이벤트 연결
            J("h1").toggle(function () {
                J(this).html(function (index, html) {
                    return "★" + html;
                });
            },
                function () {
                    J(this).html(function (index, html) {
                        return html + "★";
                    });
                },
                    function () {
                        J(this).html(function (index, html) {
                            return html.substring(1, html.length - 1);
                        });
                    });
        });
    </script>
    <title>Untitled Page</title>
</head>
<body>
    <h1>Header-0</h1>
    <h1>Header-1</h1>
    <h1>Header-2</h1>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <style>
        .reverse
        {
            background : Black;
            color : White;
            }
    </style>
    <script src="http://code.jquery.com/jquery-1.7.min.js"></script>
    <script>
        $.noConflict();
        var J = jQuery;
        J(function () {
            //이벤트 연결( 해당 태그 클릭시 문자"+" 추가 )
            J("h1").bind("click", function () {
                J(this).html(function (index, html) {
                    return html + "+";
                });
            });
            //이벤트 연결
            J("h1").bind({
                //마우스 올리면(style 적용)
                mouseenter: function () { J(this).addClass("reverse"); },
                //마우스 내리면
                mouseleave: function () { J(this).removeClass("reverse"); }
            });
        });
    </script>
    <title>Untitled Page</title>
</head>
<body>
    <h1>Header-0</h1>
    <h1>Header-1</h1>
    <h1>Header-2</h1>
</body>
</html>

※ 이벤트 메서드 중 한번만 실행시키는 one() 도 bind 와 사용법이 같다

- HTML 속성 id 와 name 의 차이

[HTML] name과 id의 차이점

▶ name
(1) document.폼객체명.폼원소명.value
(2) document.getElementsByName("name")

name은 page 안에서 중복되어 사용이 가능하며 action에 해당하는 페이지로 전달하는 파라미터로 사용된다.

GET/POST 방식으로 값을 전달하고 싶은 TAG에 사용. Form 객체들(input , radio box ,checkbox )에서 전송되어지는 Parameter의 Key값으로 사용이 됩니다. 서버단에서는 request.getParameter(parameterName) 이런 식으로 값을 가져오죠.

▶ id
(1) document.all.id.value
(2) id.value
(3) document.getElementById("폼 id").value

 id는 page 안에서 중복 사용 불가하며 주로 JavaScript에서 다룰려고 지정하는 것이다. name도 자바스크립트로 속성이나 값을 변경 할 수 있으나 중복값을 갖기 때문에 id로 접근하는 것을 주로 사용한다. document.getElementById(id) 를 통해서 해당 엘리먼트Object 를 가져온다.

XML문서(DOM Tree) 내에서 node를 식별하는 용도로 사용되어 페이지 안에 이름이 한개만 존재해야 한다.

보통은 특정 tag를 지정하기 위해서 사용합니다. 태그 내용을 바꾸는 dhtml 작업에서 주로 사용합니다.

참고로 id로 설정된 값은 서버쪽으로 파라미터로 넘어가지 않기 때문에 서버쪽에서 접근이 안된다.

* 파이어 폭스나 크롬에서는 document.getElementById는 id로만 읽습니다.