- 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) 복사와 붙여넣기

복사/붙여넣기

설 명

yw

 커서 위치부터 단어의 끝까지 복사

y2w

 커서 위치부터 두 단어 복사

y0

 커서 위치부터 줄의 처음까지 복사

y$

 커서 위치부터 줄의 끝까지 복사

yy

 커서가 있는 줄을 복사

2yy

 커서가 있는 줄 아래로 두 줄을 복사

yj

 커서가 있는 줄과 그 다음 줄을 복사

yk

 커서가 있는 줄과 그 앞줄을 복사

yG

 현재 위치에서 파일의 끝까지 복사

p

 커서의 다음 위치에 붙여넣기

P

 커서가 있는 위치에 붙여넣기

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

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


- vi(m) 기본 단축키

단축키 

설 명

a

 커서 위치의 다음 칸부터 문자 삽입(append)

A

 커서가 있는 줄의 끝에서부터 문자 삽입하기

 i

 커서 위치부터 문자 삽입하기

 I

 커서가 있는 줄의 맨 앞에서부터 문자 삽입하기

o

 커서 바로 아래에 줄을 만들고 문자 삽입하기(open Line)

O

 커서바로 위에 줄을 만들고 문자 삽입하기

x, dl

 커서 위치의 글자 삭제하기

x, dh

 커서 바로 앞의 글자 삭제하기

dw

 한 단어 삭제하기

d0

 커서 위치부터 행의 처음까지 삭제하기

D, d$

 커서 위치부터 행의 끝까지 삭제하기

dd

 커서가 있는 행 전체를 삭제하기

dj

 커서가 있는 행과 그 다음 행을 삭제하기

dk

 커서가 있는 행과 그 앞 행을 삭제하기


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

단축키

설 명

 ~

 대소문자 전환

 y

 복사

 >

 행 앞에 탭 삽입

 :

 선택 영역에 대해 Command mode

 U

 대소문자 변환

 d

 삭제

 c

 치환

 <

 행 앞에 탭 제거

 J

 행을 합침

 u

 소문자로 변환


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

단축키

설 명

:w

저장한다

 :w test.txt

 test.txt 파일로 저장한다

 :w >> test.txt

 test.txt 파일에 덧붙여서 저장한다

 :q

 vi 편집기를 종료한다

 ZZ

 저장 후 종료한다

 :wq!

 저장 후 강제로 종료한다

 :e test.txt

 text.txt 파일을 불러온다

 :e

 현재 파일을 불러온다


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

웹이 점점 화려해 지고 인터넷속도가 빨라지면서 웹페이지들은 점점 빨라지고 있고 디자인은 갈수록 중요해지고 있기 때문에 웹사이트에는(특히 국내에서) 정말 많은 이미지가 들어가고 있다. 근데 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를 사용하면 금방 해결할 수 있다.

 

1
2
3
4
<style>
.btn {cursor:pointer;}
</style>
<img src="경로" alt="" class="btn" onclick="clickBtn(); />



커서의 모양을 바꾸는 것은 스타일로 해버리면 된다. (보통은 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태그에 경로를 주자!!

'공부 > ETC' 카테고리의 다른 글

ETC_[ Win7 Telnet 설정 ]  (0) 2014.11.04
ETC_[Apache Error Code]  (0) 2013.08.24
학교숙제자료  (0) 2013.04.16
주저리_[날짜 약자]  (0) 2013.01.08
NHN_NEXT 학교(?)를 설립하다  (0) 2012.06.30

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>

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

<!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 () {
            // 이벤트 연결
            J("h1").one("click", function () {
                J(this).html("CLICK");
                alert("이벤트가 발생하였습니다.");
            });
        });
    </script>
    <title>Untitled Page</title>
</head>
<body>
    <h1>Header-0</h1>
    <h1>Header-1</h1>
    <h1>Header-2</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로만 읽습니다.


이름 name id 
중복사용 여부  O  X
주 용도  GET/POST 방식으로 서버에 전달하는 parameter JavaScript에서 다룰려고 지정
사용법 예  equest.getParameter(parameterName)  document.getElementById("")

 

'공부 > HTML' 카테고리의 다른 글

HTML_[ optgroup ]  (0) 2014.05.26
HTML_ [ 링크 <A> 태그 Target 속성 ]  (1) 2013.03.26

- Filter 란?

필터란, 서블릿 2.3버전에 추가된 것으로, 클라이언트의 요청을 서블릿이 받기 전에 

가로채어 필터에 작성된 내용을 수행하는 것을 말한다.

따라서, 필터를 사용하면 클라이언트의 요청을 가로채서 서버 컴포넌트의 추가기능 수행


- Filter 기능

      1. 인증(사용자 인증)

2. 로깅 및 감사필터

3. 이미지 변환

4. 데이터압축

5. 암호화 필터

6. 토크나이징(Toknizing) 필터

7. XML 컨텐츠를 변경하는 XSLT 필터

8. Mime-Type 체인필터

9. URL 및 기타정보들을 캐시하는 필터


- 필터 적용 순서

1. 필터인터페이스 구현하는 자바 클래스 생성

2. /WEB-INF/web.xml 에 FIlter 엘리먼트를 사용해서 필터 클래스 등록


- 필터의 라이프 사이클

필터는, 서블릿과 비슷한 라이프 사이클을 가지며 생성, 초기화, 필터, 종료 4단계로 이루어진다.

또한, 서블릿 컨테이너 필터 객체가 초기화 파라미터에 접근하는데 사용하는 환결설정 객체

(FilterCOnfig) 의 레퍼런스를 제공한다.


서블릿 컨테이너가 필터의 init() 메서드를 호출하면 필터 인스턴스는 바로 요청을 처리할수 있는

상태가 된다.

service() 메서드를 이용해서 요청을 처리한 것처럼 필터는 doFilter() 메서드를 통해서 요청을

처리한다.

모든 요청에 대한 처리가 끝나면 destory() 메서드가 호출되면서 필터는 피활성 상태로 변경된다.


- 필터 클래스

필터 클래스는 javax.servlet.Filter 인터페이스를 구현해야 한다.

Filter 인터페이스는 init(), doFilter(), destory() 메서드를 정의 되어 있다


- init(FIlterConfig config) : void throws ServletException

서블릿 컨테이너가 필터 인스턴스를 초기화 하기 위해서 호출하는 메서드

- doFilter(ServletRequest req, ServletResponse res, FilterChain chain)

: viod throws IOException, ServletException

필터의 조직을 작성하는 메서드

- destory() : void

필터 인스턴스를 종료시키기 전에 호출하는 메서드

+ Recent posts