LuceteMango:)

- 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 리턴 받는 건

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

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