WebDevelop2009. 7. 21. 18:50

웹페이지 로드 - 조금더 빠르게...

개발자라면 누구든 생각하는 부분이지만.. 조금더 빠르게, 최적화된 프로그램을
꿈꾸는것은 당연한것이라고 생각합니다.

웹개발자도 마찬가지입니다.
오히려 일반 어플리케이션보다 웹에서의 페이지 로딩 속도는
서로간의 경쟁이 될정도로(경쟁사이트라면..)  웹개발자의 가장 큰 이슈라고 할수 있다고 생각합니다.

그렇다면 어떻게 해야지 조금더 빠르게..
그리고 최적화된 페이지를 제공할수 있을까요?

제가 정리하지 않았습니다. ^^;

http://www.ibm.com/developerworks/kr/library/wa-speedweb/index.html

위의 링크된 페이지를 가시면 자세한 설명이 나와있습니다.
읽어보시고 적용하시고 차이를 느껴보세요.
알고 있는 사실도 있고, 모르고있던것도 있는데.. 많은 도움이 되었습니다.
저작자표시 비영리 변경금지
Posted by 햇 님
WebDevelop2009. 7. 9. 09:50

DDOS 공격이란 무엇인가?

DDOS는 distributed denial of service 의 약어로
분산서비스 거부공격 이라고 합니다.

더 쉽게 말하자면, 대상이 되는 사이트의 접속이 불가능하게 합니다.
공격방식은 순간적으로 대상 사이트의 트래픽을 높여서 순간적으로 서버가 처리할수 없을 만큼의
과부하를 주는 방식으로, 공격받은 서버는 작게는 소프트웨어적인 문제에
크게는 하드웨어에까지 영향을 미치게 됩니다.

이후에 다운되 서버를 다시 살려내도, DDOS 공격이 멈추지 않으면
동일하게 사이트 접속은 또 다시 멈출수 밖에 없습니다.
즉 다시 살려낸 서버에서 접속자를 아예 차단하는게 아니라면,
동시 다발적으로 접속이 되는 이 공격을 효과적으로 차단하기란 여간 어려운것이 아닙니다.

제가 다니고 있는 회사에도
DDOS 공격에 대해서 염려하는 상급자 분들이 계시는데...
흠.. 솔직히 이런 공격을 받을정도로 유명한 사이트를 운영중인것도 아니고..
DDOS 공격은 서버를 향한 공격이지.. 개인PC에 영향을 미치는 바이러스 같은것이 아니니..
일반 유저들이 먼가 할수없는 부분은 아닌데..

회사에서는 개인별로 바이러스 체크와 최신업데이트를 받으라구하네요.
뭐 제대로 알지도 못하면서 헛소리를 하는군요 ㅎ;

무튼.. 정부기관쪽 사이트들이 전부 마비되어... 어제 하루죙일 접속이 원활하지 않았던거 같은데요.
이젠 좀 해결이 된거같네요.
수사한다고 하는데... 괜히 엄한사람 잡아들이는건 아닌가 모르겠습니다.

================================================================================================

정정합니다. ^^;
제가 좀더 알아보고 글을 써야 했는데..
개인 PC의 경우 DDOS 공격을 받는게 아니라 DDOS 공격에 동원될수있는 좀비 PC가 될 우려가
있기떄문에, 업데이트 및 백신 프로그램의 최신업데이트를 통해
백도어프로그램 이라던가, 스파이웨어 등등, 유저가 원하지 않는 원격조정 프로그램등이
설치되어있지 않은지 살펴보시길 바랍니다.

현재 2차에 이어 3차 DDOS 공격이 예고 되고 있는 가운데..
좀비PC에 대한 인터넷 접속 차단을 고려 하고 있다는 기사까지 나오고 있네요.

바이러스 체크 한번씩 해보시고, 혹시 자신의 PC가 좀비 PC는 아닌지 확인해보세요.

ps. 아무리 그래도 통신사를 통해서 접속을 차단한다니...;;
자신이 원해서 좀비PC가 된것도 아닐터인데...   뭔가좀 아니라고 봅니다;
저작자표시 비영리 변경금지
Posted by 햇 님
WebDevelop/JavaScript2009. 6. 15. 14:43

jquery 를 써보자

jquery
많이들 들어봤을 단어라고 생각한다.
jquery가 지원 하는 기능은 상당히 많다, 그렇다고 무겁다거나 하는것도 아니다.
dom 형태의 웹페이지를 jquery 통해서 손쉽게 제어 할수 있기도 하며,
Ajax, 각 dom 오브젝트들의 이벤트, jquery자체에서 지원하는 함수 등등
작지만 강력한 기능을 가진 라이브러리 이다.
 - 작은 고추가 맵다고 하던가?  :D

- 사용법
   아주 간단하다. 정말 간단하다.


<html>

  <head>

    <script type="text/javascript" src="jquery.js"></script>

    <script type="text/javascript">

      // 이곳은 함수를 만들면 되겠군요.

    </script>

  </head>

  <body>

    <a href="http://canworld.tistory.com/">깨어있는세상</a>

  </body>

</html>



보았다시피 기존에 js 파일을 포함시키는것처럼 같은형태이다.

jquery 파일은 http://jquery.com/ 에 가면 최신버젼의 라이브러리를 받을수 있다.


저작자표시 비영리 변경금지
Posted by 햇 님
WebDevelop/JavaScript2009. 1. 15. 17:02

parent , opener 헷갈려..

parent[prnt,pr- / pr-]

  • 1. 어버이(아버지 또는 어머니); (~s) 양친.
  • 2. 조상, 선조.
  • ━ 근원[모체]의; 모(母)….
  • ━ …의 어버이 구실을 하다.

자바스크립에서 parent 라는 property가 있다.
흔히 알고 쓰는 단어로 위에서 쓰여진것처럼 아버지를 지칭하는 단어로 잘 알고있고..
자바스크립트에서 쓰일때 언뜻.. 모체의 라는 뜻 때문에..
나는 자주 혼동을 하곤 한다..
새창을 열게되었을때..   window.parent.name  을 alert 으로 보게 되면
내 예상으로는 모체/근원의 뜻으로 보자면 새창에서의 parent는 새창을 여는 링크를 제공하는 페이지가 아닐까?
하는 생각을 하고 죽어라고 찍어보았지만..
결국 나오는건 현재창의 이름만 계속 나왔다..  -_-;
물론 삽질이었다...

내가 원하는 결과를 얻기위해서... 즉 새창을 여는 링크를 제공한 페이지를 제어할 객체는
window.opener   를 사용해야 했다.;

opener[upn]

  • 1. 《복합어로》 여는 사람; 개시하는 사람; 여는 물건[도구], 병[깡통] 따개.
  • 2. (연극 따위의) 최초의 공연물; (스포츠의) 개막전.
뭐 의미로 따지자면.. opener 도 맞는거 같은데;;;

어찌되었든... 매번 헷갈린다..
이젠좀 삽질 안할때도 됐건만...  ㅎㅎ

삽질하기전에 잘 검색해보고 뒤져봐야겠다,,,   좀만 찾아보면 좋은글들이 많고도 많다!! ㅎ



Posted by 햇 님
WebDevelop/JavaScript2008. 9. 24. 17:29

JavaScript 에서 Event 처리


일단은 브라우저별로 이벤트의 처리가 달라진다.
간단하게 인터넷 익스플로러(IE) 와 파이어폭스(F) 에서 이벤트 처리가 틀려진다.

여기서 이벤트란것은..
마우스, 키보드 등과같은 사용자 입력장치를 통해서 브라우저가 인식하는 이벤트
즉, 사용자의 입력에 관한 이벤트가 되겠다.

일단 두 브라우저는 이벤트가 생기고,  생겨난 이벤트를 인식하는 부분에서 차이가있다.

IE 의 경우는 window.event 가
F 의 경우는 event 객체가 인식을 한다.

물론 두 이벤트가 똑같은 속성이나 매소드가 있는지는 잘 모르겟다.
다만 내가 주로 쓰는 keyCode 값에 대해서 생각해보자면..
window.event 와 event 객체값을 잘 설정하면.. IE 에서도 F 에서도 동작할수 있는것이다.

소스는 간단하다 .

<html>
    <head>
        <title>Test Page</title>
        <script type="text/javascript">
            function doCheckKeyCode(e) {
                var E =    e ? e : window.event;
                alert(E.keyCode);
            }
        </script>
    </head>
    <body>
        <input type="text" onkeydown="doCheckKeyCode(event)" />
    </body>
</html>
동작 자체는 F 에서 사용하는 것과 같이하여 event 객체를 인자로 넘긴다.
그리고서는 자바스크립트 함수로 넘어간 인자값이 존재하는지 파악하여서..
있으면 인자값을 그대로 변수 E 에 대입하고, 존재하지 않으면 window.event 를 대입한다.

그렇게 되면  IE 든 F 든 keyCode를 동일하게 얻을수 있다.
Posted by 햇 님
WebDevelop/JavaScript2008. 8. 5. 10:53

자바 스크립트의 getYear() 메소드


설명을 간단히 하자면 getYear() 메소드 보다는 getFullYear() 메소드를 쓰는것이 좋다는 이야기다.

getYear() 메소드로는 브라우저에 따라.. 그리고 1900~1999 , 1900년 이전, 1999년 이후 에 따라서

리턴값이 많이 틀려지기 때문에 프로그램 만들경우 많은 고려가 필요하다.

특히나 firefox에서 테스트 하기를 좋아하는 나로서는 getYear() 메소드로 인해서 날짜값을 항상 이상하게

받아와 애를 먹은 경우가 있었다.

Posted by 햇 님
WebDevelop/Jsp & Servlet2008. 7. 7. 13:51

[5.0기준] web.xml 을 쓰는 회사와 쓰지 않는 회사...

web.xml 은 jsp로 웹을 개발하는 사람들은 다들 보았을것이다.
그리고 이를 활용하여 프로젝트를 진행하는 회사와 ( 아직도 이런 회사가 많을듯 싶다..)
web.xml을 활용하여 프로젝트 진행을 하는 회사가 있을것이다. (물론 struct 를 사용하면 web.xml 보다는..)

우리 회사의 경우는 web.xml 을 사용하지 않는다.
단지 아주 단순하게.. Encoding 을 위해서만 사용한다. 한글로의 인코딩 말이다.
그래서 문득 의문이 들었다..
왜 이렇게 개발을 할까?

내가 배운것들은 web.xml 을 활용하다못해, struct-config.xml 을 비록하여 tiles-def.xml 그리고 사용자가
직접만든 xml 파일들까지..
웹배치기술자 들을 적극 활용했었다.

이런 의문속에서..
한번은 팀장님께 세미나 내용을 브리핑하게되면서 기존에 사용하던 web.xml 의 변화 (6.0으로 가면서의 변화)
에 대해 이야기 하다가.. 팀장님이 물으셨다.

"왜 web.xml 을 저렇게 써야하지? "

순간 나는 아무 대답도 못했다...
왜 썼을까? 왜.. 도데체 왜...

단지 2달이 지났을뿐인데..(입사한지..)
이미 회사의 코드방식에 익숙해져버린걸까..

내가 배우고 익힌 기술은 servlet & jsp 그리고 모델2 방식의 mvc 패턴의 구현 이었다.
단순하지 않고, 설계시 고민이 많지만 나중을 보면 유지 보수가 정말 편한것이다 (모델1에 비하면)

그렇다.. 지금 다시 고민해보고 생각해보니..
web.xml 이 없다면.. jsp 에서 어떻게 servlet 으로 값들이 옮겨갈수 있을까?
참으로 어처구니가 없었다..(스스로가..)

그리고 이제 새롭게 이런 저런 시도를 하는중인데..
시도를 통해서 회사 소스들의 문제점들을 파헤쳐서 변화를 가져오게 해야할거 같다.
기존에 있는것들을 변화시키기는 상당히 힘들겠지만..
천천히 진행해 나가다 보면 분명 좋은 결과가 있을거 같다..

그리고 한순간 대답을 하지 못해 민망했지만.. 지금이라도 이유를 알았으니...
답을 드려야겠다...  (차마 소스가 엉망이요!! 라고 하지는 못하겠다.. ㅜㅜ)

Posted by 햇 님
WebDevelop/JavaScript2008. 6. 4. 15:45

체크박스 전체선택, 해제 하기

가끔씩보다 보면은 게시판이라던가 주문내역이라던가 하는부분에
전체선택 이라는 기능이 있는것을 본적이 있을것이다.

꽤나 쓸만한 이 기능.. 지금 만들어봅시다~


<HTML>
 <HEAD>
  <TITLE> checkbox 전체선택 </TITLE>
 </HEAD>
<script type="text/javascript">
function doCheckAll(all) {
    var obj = document.getElementsByName("chkTest");
    var val = true;
    if( all.checked == false ) {        // 값이 체크가 안되어져있으면
        val = false;                            // 전체선택을 해제 하게..
    }
    for (var i =0 ; i < obj.length ; i++ ) {
        obj[i].checked = val;
    }
}
</script>
 <BODY>
    <input type="checkbox" name="chkAll" onclick="doCheckAll(this);"> 전체선택 <br />
    <input type="checkbox" name="chkTest" value="1"> 1번 <br />
    <input type="checkbox" name="chkTest" value="2"> 2번 <br />
    <input type="checkbox" name="chkTest" value="3"> 3번 <br />
    <input type="checkbox" name="chkTest" value="4"> 4번 <br />
    <input type="checkbox" name="chkTest" value="5"> 5번 <br />
    <input type="checkbox" name="chkTest" value="6"> 6번 <br />
    <input type="checkbox" name="chkTest" value="7"> 7번 <br />
    <input type="checkbox" name="chkTest" value="8"> 8번 <br />
    <input type="checkbox" name="chkTest" value="9"> 9번 <br />
    <input type="checkbox" name="chkTest" value="10"> 10번 <br />
 </BODY>
</HTML>



이렇게 테스트 코드를 만들어 보았습니다.
음 이건 약간 응용이라고 할 수 있는거죠. 체크박스 하나만 선택되는 것을 배우면서
getElementsByName() 을 써보았으니까요 ^^

실제 응용하게된다면.. 체크된값들만 사용해서 해당되는 value 값의 내용을
DB에 update, delete 할 수도 있겠죠? ^^

Posted by 햇 님
WebDevelop/JavaScript2008. 6. 3. 11:18

Checkbox 하나만 선택되게 하기.

오늘 업무요청을 받으며 라디오버튼을 체크박스로
변경해달라는 요청을 받았다.
라디오버튼은 이름이 같으면 그중에 하나만 선택되는데..
체크박스는 그렇지 않고 다중 선택이 되는 까닭에..
그냥 바꾸어주면 프로그램상 상당한문제이기도 하고..
업무 요청한곳에서도 다중선택의 문제라기보다는

라디오버튼은 한번 선택하면 그 중에 한가지를 택해야하니..
체크박스로 아무것도 선택 안하는 경우를 염두한거 같다..

서문이 길었는데.. 간단하게 자바스크립트 이벤트를 걸어주었다.

function doOpenCheck(chk){
    var obj = document.getElementsByName("aaa");
    for(var i=0; i<obj.length; i++){
        if(obj[i] != chk){
            obj[i].checked = false;
        }
    }
}

그리고 체크박스에는 onclick 이벤트를 걸어주면 되겠다.

<input name="aaa" type="checkbox" value="1" onclick="doOpenCheck(this);">aaa <br />
<input name="aaa" type="checkbox" value="2" onclick="doOpenCheck(this);">bbb <br />
<input name="aaa" type="checkbox" value="3" onclick="doOpenCheck(this);">ccc <br />


'this' 를 넘겨주어서 클릭되어진 객체의 값을 넘겨주고 'aaa' 로 값을 가져온것과 비교 하면서
클릭된 객체와 일치 하지 않는것들은 체크를 해제해주면 되겠다.


Posted by 햇 님
WebDevelop/Jsp & Servlet2008. 5. 21. 23:50

Servlert 이란.. 그리고 JSP 란..?


웹서버(Tomcat) 의 컨테이너가 서블릿(Servlet)을 로딩한다.
그 뒤에 사용자의 요청을 받아서 Request, Response 객체를 만들어낸다.
그러한 것들을 service() 메서드에 인자값으로 넘겨주고 실행한다.

즉 Servlet 에서는 request 와 response 객체를 사용해서
웹페이지를 만들어주는것이다.

그렇다면 JSP 라는 것은 무엇인가?

이것이 기존의 asp 라던가 php 와 같이 html태그 사이에 스크립트릿 (<%%> ) 을
끼워서 코딩 할수 있는 형식으로 이루어져있다.

그렇다면 왜 servlet 이 필요한건가?
servlet 과 jsp 의 관계를 보자면 간단하게 한마디로..

jsp 파일로 만든것은 servlet으로 (.java) 파일로 다시 만들어지고 컴파일되어져 class 파일로
구동하게 되는것이다.

그래서 jsp 파일 안에는 되도록이면 스크립트릿을 자제하고.. servlet 에 자바코딩을 전부 하여서
디자인(HTML, JS) 과 로직(JAVA)을 분리하여 코딩을 하는것이 좋다.

jsp의 장점을 정리해본다.

 (1) 서블릿보다 쉽고, 빠르다.
 (2) 디자인(HTML, JS) 과 로직(JAVA)을 분리 시킬 수 있다. 즉, 디자이너와
  프로그래머의 일을 분업시킬수 있다.
 (3) 프로그래머가 직접 코딩한 servlet 보다 최적화된 servlet을 생성시켜
  효율적익 코드를 생성한다.
 (4) JAVA Beans 사용이 쉽다.
 (5) 웹 어플리케이션 상에서 변수의 유효범위 (scope) 설정이 간편하다.

무엇보다.. 중요한점은
위에서 말했다시피.. jsp 가 결국 servlet 이 된다는것이다.
Posted by 햇 님

티스토리툴바