Key Pressed Javascript Key Code Key Pressed Javascript Key Code
backspace 8 tab 9
enter 13 shift 16
ctrl 17 alt 18
pause/break 19 caps lock 20
escape 27 page up 33
page down 34 end 35
home 36 left arrow 37
up arrow 38 right arrow 39
down arrow 40 insert 45
delete 46 0 48
1 49 2 50
3 51 4 52
5 53 6 54
7 55 8 56
9 57 a 65
b 66 c 67
d 68 e 69
f 70 g 71
h 72 i 73
j 74 k 75
l 76 m 77
n 78 o 79
p 80 q 81
r 82 s 83
t 84 u 85
v 86 w 87
x 88 y 89
z 90 left window key 91
right window key 92 select key 93
numpad 0 96 numpad 1 97
numpad 2 98 numpad 3 99
numpad 4 100 numpad 5 101
numpad 6 102 numpad 7 103
numpad 8 104 numpad 9 105
multiply 106 add 107
subtract 109 decimal point 110
divide 111 f1 112
f2 113 f3 114
f4 115 f5 116
f6 117 f7 118
f8 119 f9 120
f10 121 f11 122
f12 123 num lock 144
scrool lock 145 semi-colon 186
equal sign 187 comma 188
dash 189 period 190
forward slash 191 grave accent 192
open bracket 219 back slash 220
close braket 221 single quote 222
Posted by 플라스틱라디오
외부 CSS 파일을 jsp 페이지에 import하는 방법은 link 태그를 사용하는 것과 style 태그 안에 @import 를 사용하는 것 2가지가 있습니다.

<link rel='stylesheet' href='a.css'> <!-- link 태그 사용 -->
<style>@import url('a.css');</style> <!-- import 사용 -->


둘 중 어느것을 사용해도 괜찮지만 link 태그를 사용하는 것이 @import를 사용하는 것보다 더 안정적입니다. link 태그를 이용하면 모든 브라우저에서 병행 다운로드를 보장하기 때문입니다.

link 태그 사용시와 @import 사용시의 속도 차이에 관한 자세한 내용은 아래의 링크를 참조하시면 됩니다.
seye2 님의 이글루 

'웹프로그래밍 > CSS' 카테고리의 다른 글

외부 CSS 파일 임포트하기  (0) 2011.12.26
div 요소를 브라우저 가운데로 수평 정렬하기  (0) 2011.12.26
CSS 수직 정렬  (0) 2011.12.23
Posted by 플라스틱라디오
TAG CSS
div 요소를 브라우저 화면의 가운데로 수평 정렬하려면 가운데 정렬하기를 원하는 div 태그'margin:0px auto' CSS 속성을 추가하면 됩니다.


<body>
    <div style="margin:0px auto"></div>
</body>

'웹프로그래밍 > CSS' 카테고리의 다른 글

외부 CSS 파일 임포트하기  (0) 2011.12.26
div 요소를 브라우저 가운데로 수평 정렬하기  (0) 2011.12.26
CSS 수직 정렬  (0) 2011.12.23
Posted by 플라스틱라디오
TAG CSS, div
출처 : seye2님의 이글루

'웹프로그래밍 > CSS' 카테고리의 다른 글

외부 CSS 파일 임포트하기  (0) 2011.12.26
div 요소를 브라우저 가운데로 수평 정렬하기  (0) 2011.12.26
CSS 수직 정렬  (0) 2011.12.23
Posted by 플라스틱라디오
TAG CSS
IBM developerWorks 에 'Ajax 마스터하기'라는 제목으로 연재된 Ajax 기술자료입니다. Ajax에 대한 개념을 잡는 것부터 시작해서 실제 사용하는 방법까지 상당히 정리가 잘 되어 있는 강좌인 듯 합니다. 이 문서를 보는 것만으로도 Ajax를 마스터하는데 큰 무리는 없을 거 같습니다. 


Ajax 마스터하기, Part 1: Ajax 소개 
Ajax 마스터하기, Part 2: JavaScript와 Ajax를 이용한 비동기식 요청
Ajax 마스터하기, Part 3: Ajax의 고급 요청 및 응답 
Ajax 마스터하기, Part 4: 웹 응답에 DOM 활용하기
Ajax 마스터하기, Part 5: DOM 다루기
Ajax 마스터하기, Part 6: DOM - 기반 웹 애플리케이션 구현하기
Ajax 마스터하기, Part 7: 요청과 응답에 XML 사용하기 
Ajax 마스터하기, Part 8: 요청과 응답에 XML 사용하기
Ajax 마스터하기, Part 9: Google Ajax Search API 사용하기
Ajax 마스터하기, Part 10: 데이터 전송에 JSON 사용하기
Ajax 마스터하기, Part 11: 서버 측의 JSON


IBM developerWorks에는 위의 강좌 말고도 다른 Ajax 관련 강좌들을 비롯한 유용한 웹프로그래밍 강좌들이 올라와 있으니 꼭 한번 방문해 보시기를 추천 드립니다.

'웹프로그래밍 > Ajax' 카테고리의 다른 글

IBM developerWorks에서 제공하는 Ajax 강좌  (0) 2011.12.20
Ajax란?  (0) 2011.12.20
Posted by 플라스틱라디오
TAG AJAX


Ajax 입문 Asynchronous JavaScript + XML에서 발췌한 내용임을 미리 밝힙니다.



Ajax란?  

Ajax는 Synchronous JavaScript And XML(비동기 자바 스크립트와 XML)의 약자로 서버와의 비동기 통신을 이용해 마치 데스크탑 애플리케이션을 사용하는 것과 같은 사용자와 애플리케이션간의 인터랙티브한 사용자 경험을 가능하게 하는 스크립트 언어입니다.

이전의 동기 통신에서는 웹 애플리케이션이 서버와의 인터랙션을 필요로 할 때에 매번 브라우저가 사용자와의 인터랙션을 멈추고, 서버로부터의 응답이 올때까지 기다려야 했습니다. 서버로부터의 응답이 오기 전까지 사용자는 아무것도 할 수 없었죠.
하지만 비동기 통신에서는 서버로부터의 응답을 기다릴 필요 없이 사용자는 계속해서 애플리케이션에서 원하는 작업을 할 수 있습니다. 

Ajax를 이용하는 예로는 구글맵, 검색사이트 검색창에서의 검색어 제시, 네이버 실시간 검색 순위 등이 있습니다.





Ajax의 장점  

Ajax의 주요 장점은 아래와 같습니다.

(1) 페이지 이동없이 고속으로 화면 전환
: Ajax는 페이지의 이전 없이 필요한 부분의 데이터 송수신만을 자유롭게 행할 수 있으므로, 효율적이고 빠르게 페이지를 전환할 수 있습니다.

(2) 서버의 처리를 기다리지 않고 비동기 요청이 가능
: 서버와의 통신시 사용자는 서버로부터의 응답을 기다리지 않고 계속해서 다음 작업을 이어갈 수 있습니다.

(3) 서버에서 처리하는 부분을 클라이언트에서 분담 가능
: Ajax로는 최소의 데이터만을 브라우저에 전달하기 위해 서버에서 하는 작업 중 JavaScript에서 수행 가능한 일을 
클라이언트에서 분담하는 것이 가능합니다. 

(4) 수신하는 데이터의 양을 줄일 수 있음
: 기존의 브라우저가 수신하는 데이터는 HTML이나 XHTML과 같은 마크업 언어로 받는 것이 일반적인데 반해, Ajax로는 수신하는 데이터가 HTML이나 XML에 한정되지 않고 최소한의 텍스트 데이터로도 수신이 가능하기 때문에 수신 데이터이 양을 줄일 수 있습니다.

(5) 실시간 인터렉티브 성능이 증가
: (1) ~ (4) 까지의 장점을 이용해 Ajax에서는 데스크탑 애플리케이션과 유사한 실시간 인터랙티브 성능을 보여줄 수 있습니다.




Ajax의 단점  

Ajax의 단점은 아래와 같습니다.

(1) 크로스 브라우저화의 노하우가 필요
: Ajax는 JavaScript 이므로 브라우저에 따른 크로스 브라우저 처리가 필요합니다. 

(2) Ajax를 지원하지 않는 브라우저에 대한 대책 필요
: Ajax를 지원하지 않는 브라우저에서는 사용이 불가능하므로 이에 대한 대책이 필요합니다. (하지만 현재 Ajax를 지원하지 않는 브라우저는 거의 없다고 볼 수 있습니다.)

(3) 보안에 대한 주의가 불가피
: 페이지 이동 없이 서버와 통신하기 때문에 전보다 더욱 신중한 보안상의 주의가 요구됩니다.

(4) 현재의 처리 상황에 대한 정보가 필요
: 페이지 전환 없이 처리가 진행되므로 사용자가 처리가 완료되었는데도 이를 모를 수 있습니다. 따라서 처리 중을 나타내는 프로그레시브 바등을 사용하는 것이 요구됩니다.
 
(5) 요청을 남발하면 역으로 서버 부하가 늘 수 있음
: Ajax의 장점은 서버 부하의 감소에 있지만 그 의도와 반대로 요청이 너무 빈번하게 일어나 서버의 부하를 늘려버릴 수 있습니다. 따라서 데이터 전송량, 요청 회수, 서버 부하 등에 대한 종합적인 판단과 튜닝이 필요합니다.


출처 : Ajax 입문 Asynchronous JavaScript + XML | 타카하시 토시로 저 | 이창신 역 | 한빛미디어 

'웹프로그래밍 > Ajax' 카테고리의 다른 글

IBM developerWorks에서 제공하는 Ajax 강좌  (0) 2011.12.20
Ajax란?  (0) 2011.12.20
Posted by 플라스틱라디오
TAG AJAX

톰캣은 아파치 소프트웨어 재단에서 개발된 서블릿 컨테이너(또는 웹 컨테이너)이다.  톰캣은 웹 서버와 연동하여 실행할 수 있는 자바 환경을 제공하여 자바 서버 페이지(JSP)와 자바 서블릿이 실행할 수 있는 환경을 제공한다. 톰캣은 관리툴을 통해 설정을 변경할 수 있지만, XML 파일을 편집하여 설정할 수도 있다. 그리고 톰캣은 HTTP 서버도 자체 내장하고 있다.

톰캣은 웹 서버로 사용되기보다는 was로 사용된다. 물론, 톰캣에 내장된 웹 서버로만 웹 시스템을 구성할 수도 있지만, 대규모 사용자가 사용하는 시스템 구축시에는 웹 서버와 연동하는 안정적인 시스템을 구축해야 한다. html과 같은 정적 페이지를 로딩하는데 있어서 톰캣에 내장된 웹 서버만으로는 수행 속도가 너무 느리기 때문이다. 따라서 이를 해결하기 위해 톰캣은 아파치와 연동한다. (아파치는 html과 같은 정적인 페이지를 로드하는데 사용되는 웹 서버이다.) 아파치가 실행되면 아파치는 html 파일은 자신이 수행하고 jsp 파일은 톰캣으로 넘겨서 톰캣이 수행하게 만드는 것이다.


출처 : 위키백과





아파치 톰캣의 설치  

아파치 톰캣의 설치는 아파치 재단 사이트에서 받을 수 있습니다. (아파치 톰캣 다운로드 페이지 바로가기) 설치파일 보다 zip 파일을 받는 것이 권장됩니다. 설치환경이 변경될 경우에도 폴더만 옮겨주면 그대로 사용이 가능하기 때문입니다. (따라서 Binary Distributions - Core 의 가장 첫번째 항목인 zip 을 클릭해 다운로드 받도록 합니다.) zip 파일로 다운 받을 경우, 아파치 톰캣의 설치는 다운로드 받은 파일의 압축을 설치하고 하자는 폴더에 해제하는 것으로 완료됩니다.  

설치 후에 환경 변수의 시스템 변수에 변수이름은 'CATALINA_HOME', 변수 값은 '톰캣이 설치된 경로'인 변수를 추가하고 path 환경변수의 변수 값에 %CATALINA_HOME%;을 추가합니다. 하지만 이클립스만을 사용하여 개발시에는 이클립스에서 아파치 톰캣 실행 환경(jar파일)을 자동으로 가져오기 때문에 환경변수를 설정해줄 필요가 없습니다.




아파치 톰캣의 폴더  

아파치 톰캣이 설치된 폴더에는 아래와 같은 폴더들이 들어있습니다.. 각 폴더의 역할은 다음과 같습니다.

  • bin : 바이너리 파일(실행 파일)이 들어 있습니다.
  • conf : 환경설정 파일이 들어있습니다 .
  • lib : 톰캣 실행에 필요한 라이브러리(jar 파일)들이 들어 있습니다 .
  • logs : 오류에 관한 log 파일이 들어 있습니다 .
  • temp : 톰캣 실행 도중 임시 파일이 저장되는 곳이습니다 .
  • webapps : 웹애플리케이션 관련 파일(.html, .jsp)이 들어 있습니다 .
  • work : 톰캣 실행 도중 작업 파일이 저장되는 곳 입니다 .





아파치 톰캣 환경 설정  

아파치 톰캣의 환경 설정은 conf 폴더의 context.xml, server.xml, web.xml에 설정되어 있습니다.



(1) server.xml : 아파치 톰캣 서버에 대한 환경 설정
Connector 태그에서 아파치 톰캣의 포트번호와 인코딩등을 설정할 수 있습니다. 포트번호는 port 속성의 값을 변경하면되는데 기본값은 8080입니다. 인코딩은 URIEncoding 속성을 추가하여 설정할 수 있고 속성의 값으로 "euc-kr"이나 "utf-8"을 지정하면 한글이 깨지지 않습니다. 하지만 서버에서 한글처리를 지정해주기보단 서블릿에서 한글 처리를 해주는 것이 일반적입니다.

<Connector port="8080" protocol="HTTP/1.1" 
           connectionTimeout="20000" 
           redirectPort="8443"
           URIEncoding="euc-kr" />

Host 태그의 appBase 속성에서는 웹애플리케이션의 저장 경로를 지정할 수 있습니다. 기본적으로 webapps로 설정되어 있습니다.
<Host name="localhost"  appBase="webapps"
      unpackWARs="true" autoDeploy="true"
      xmlValidation="false" xmlNamespaceAware="false">


(2) web.xml : 웹앱의 환경 설정  
서블릿의 사용을 위해서는 InvokeServlet 클래스를 사용해야 하는데 기본적으로는 사용이 안되도록 주석이 처리되어 있습니다. 따라서 아래 두곳의 주석을 제거함으로써 서블릿이 동작하게 해주어야 합니다. 

<servlet>
        <servlet-name>invoker</servlet-name>
        <servlet-class>
          org.apache.catalina.servlets.InvokerServlet
        </servlet-class>
        <init-param>
            <param-name>debug</param-name>
            <param-value>0</param-value>
        </init-param>
        <load-on-startup>2</load-on-startup>
</servlet>

<servlet-mapping> <servlet-name>invoker</servlet-name> <url-pattern>/servlet/*</url-pattern> </servlet-mapping>


(3) context.xml 
서블릿의 사용을 위한 InvokeServlet 클래스를 사용하기 위해 Context 태그의 priviledged 속성의 값을 true로 설정합니다. reloadabel 속성을 true로 설정할 경우 서버에 클래스 파일 추가시 서버 재부팅없이도 바로 적용되는데 이 편이 더 편리하므로 설정하는 것이 좋습니다.

<Context privileged="true" reloadable="true">



 
아파치 톰캣 실행  

아파치 톰캣 설치 폴더의 /bin/startup.bat 파일을 실행하여 아파치 톰캣 서버를 실행하는 경우에는 JDK 경로가 환경변수에 설정되어 있어야 합니다. 반면, 이클립스 상에서 서버를 실행하는 경우에는 JDK 실행환경을 자동으로 가져오므로 환경변수를 따로 설정하지 않아도 됩니다. 

만일 데스크탑 컴퓨터에 아파치 톰캣을 설치하고 웹 애플리케이션을 구동했을시 이 웹애플리케이션에 외부에서 접근하고자 하면 이클립스와 상관없이 자바 서블릿의 실행을 위해서 JDK 환경변수 설정이 필요합니다. 


 

아파치 톰캣 서버가 정상적으로 실행되고 있는 경우에는 웹브라우저의 주소창에 http://localhost 입력 후 이동하면 아래와 같은 아파치 톰캣 설치 폴더의 /webapps/root 폴더안에 있는 기본 index.html에 연결됩니다. (이클립스에서 서버를 실행한 경우에는 root 위치를 /webapps/root 가 아닌 이클립스의 workspace로 지정된 폴더로 잡으므로 아래의 화면이 나타나지는 않습니다.)
 




아파치 톰캣 서버의 종료는 startup.bat로 서버를 실행한 경우에는 톰캣 실행 창에서 Ctrl + C를 누르거나, 아파치 톰캣 설치 폴더안의 /bin/shutdown.bat를 실행하면 됩니다. 이클립스에서 아파치 톰캣 서버를 실행한 경우에는 이클립스의 server 창에서 정지버튼을 눌러주면 됩니다. 

한가지 주의할 점은 startup.bat로 아파치 톰캣 서버 실행한 후에 이클립스에서 아파치 톰캣 서버를 중복으로 실행할 수 없다는 점입니다. 이클립스에서 서버를 실행하시려면 먼저 startup.bat르 실행한 서버의 동작을 정지 시킨 후 실행하셔야 합니다.

Posted by 플라스틱라디오

실전 jQuery 쿡북
jQuery코어 커뮤니티 저 | 김경균 외 역 | 비제이퍼블릭 | 2010년 06월
 

반디앤루니스 책소개 페이지로 이동 


Posted by 플라스틱라디오

이클립스의 문제인지 톰캣의 문제인지는 모르겠지만 황당하게도 분명 전에는 잘 실행되던 웹프로젝트가 갑자기 class 파일을 찾을 수 없다며 오류를 뿜어내는 경우가 있습니다.

이런 때에는 오류에 찾을 수 없다고 나오는 class 파일이 들어있는 jar 파일들을 모두 삭제한 후 재 import 하면 해결될 수 있습니다.

또한 struts 태그를 갑자기 인식하지 못하는 경우가 발생하는 경우도 있는데 이때에는 taglib 지시자의 uri 속성에 설정한 "/struts-tags" 를 삭제하고 다시 적어준 후 재저장하면 해결될 수 있습니다.

정확히 어떤 이유로 이렇게 되는건지 알고 싶은데 인터넷으로 찾아봐도 정확하게 나와있는 곳이 없네요.. 
Posted by 플라스틱라디오

js 파일 사용시 한글 깨짐 현상  

 html 문서 내에서 직접 자바스크립트 언어를 사용할 경우에는 문제가 없지만, 자바스크립트 언어를 js 파일로 생성한 후 html 문서에서 연결하여 사용하는 경우에는 js파일 내에서 사용된 한글이 깨져서 표시 될 수 있습니다.

아래의 코드를 보면 alert 메소드를 사용해 한글 경고 메세지를 띄우는 자바스크립트를 수행하는 jquery.test.js 파일을 html에서 연결해 사용하고 있는데, 이를 실행하면 한글이 깨지는 현상이 발생합니다.


html 파일
<script type="text/javascript" src="js/jquery.test.js"></script>

js 파일
alert("한글 깨짐 현상 테스트");





한글 깨짐 현상 해결  

이를 해결하는 방법은 간단합니다. 한글이 깨지는 js 파일을 에디터플러스 같은 편집툴로 열어 새로 저장하기를 누른 다음 Encoding을 Unicode로 설정한 후 다시 저장해 주면 됩니다. 

 


그러면 아래와 같이 깨졌던 한글이 정상적으로 출력 됩니다.

Posted by 플라스틱라디오
TAG jQeury


맨 위로