[스크랩] 웹표준화 관련 Tip

1.     웹표준화 관련 Tip

1-1.        단위를 넣어라

상당히 자주 발견되는 잘못된 코딩의 예입니다.

자바스크립트로 width 또는 height 값을 변경할때

IE에서는 단위를 적지 않아도 자동으로 px로 인식하지만

다른 브라우저에서는 단위를 적지 않을 경우 원하는 화면을 얻을수 없습니다.

width나 height, padding, margin 값과 같이 수치를 입력하는 css 속성값에는 

반드시 단위(px, pt, %, em 등)를 넣어주세요.

1-2.        document.all은 버려라

IE식 DOM스크립팅의 대표주자 바로 

document.all과

document.regForm.userId 와 같은 DOM 접근 방법입니다.

name속성값에 기반한 document.regForm.userId과 같은 DOM접근이나

document.all[objectID] 과 같은 DOM 접근방식은 IE에서만 동작을 보장합니다.

이제 document.getElementById(objectId)를 사용해주세요.

1-3.        올바른 주석 사용하기

HTML에서의 주석 넣기

<!------ 주석 ------> (X)

<!--주석--> (X)

<!-- 주석 --> (O)

HTML에서 주석을 넣을때 정확한 구분을 위해 과도하게 하이픈(-)을 넣는 것을 종종 발견합니다.

하이픈은 딱 2개만 넣으세요.

코멘트을 시작하는 "<!"와 내용을 시작하는 "--" 사이에는 빈 공간이 허용되지 않습니다. 

그리고 주석의 양옆에는 안전하게 빈 공간을 넣어주세요.

CSS 주석 넣기

<!-- css 주석 --> (X)

/*css주석*/ (X)

/* css 주석 */ (O)

CSS는 HTML과 주석을 넣는 방법이 다릅니다.

CSS의 주석도 HTML처럼 <!-- --> 이렇게 넣으시면 안됩니다.

그리고 CSS도 안전한 주석처리를 위해

주석 내용 양 옆에 빈공간을 넣어주세요.

1-4.        inline 엘리먼트와 block 엘리먼트를 구분하자. 

<tr>은 block엘리먼트가 아닙니다.

HTML엘리먼트는 크게 inline엘리먼트와 block 엘리먼트로 나뉩니다.

<span>, <strong>, <em> 과 같이 줄바뀜이 일어나지 않는 엘리먼트를 inline엘리먼트라 하고

<div>, <h1>, <p>와 같이 줄바뀜이 일어나는 엘리먼트를 block 엘리먼트라고 합니다.

block 엘리먼트와 inline 엘리먼트는 css 로 변경이 가능합니다.

보통 inline으로 취급되는 <span> 태그도 css에서 display:block 으로 설정하면

block 엘리먼트와 같이 표현됩니다.

그렇기 때문에 개발자는 

엘리먼트를 숨겼다가 다시 보이기를 할때

inline 엘리먼트인지, block 엘리먼트인지 알아야 합니다.

display:none 되어 있는 엘리먼트를 무조건 block 으로 보이게 한다면

퍼블리셔에 의해 inline으로 설정된 엘리먼트가 block 엘리먼트로 취급되는 경우

레이아웃이 무너지는 현상을 발견할 수도 있습니다.

block엘리먼트인지 inline 엘리먼트인지 신경쓰지 않고

자바스크립트 스크립팅을 하는 가장 좋은 방법은

display 값에 아래와 같이 빈 값을 넣는 것입니다.

document.getElementById('elementId').style.display = '';

이 경우 display 속성값이 기본값으로 세팅이 되기 때문에

css에서 선언된 원래의 display 값으로 되돌아가게 됩니다.

그리고 하나 더.

DB에서 데이터를 불러와 뿌려주는 데이터테이블 형식에서

display:none 되어 숨겨있는 <tr>을 사용자 액션에 따라 보이게 할때

documet.getElementById('tr_id').style.display = 'block';

이렇게 사용하는 경우가 많습니다.

IE에서는 tr엘리먼트의 display 속성값을 block으로 하여도 원하는 화면을 얻을 수 있겠지만

그 외의 브라우저에서는 테이블이 깨져나오는것을 발견하게 될것입니다.

<tr>엘리먼트는 정확히 얘기하자면 고유의 display 속성이 table-row 입니다.

그렇기 때문에 display 값을 "table-row"로 해야하나 IE에서 이 또한 문제가 발생하므로

display 값에 다음과 같이 빈값을 넣어 스크립트를 작성해야 합니다.

documet.getElementById('tr_id').style.display = '';

이렇게 함으로써 display 값이 선언된 CSS의 default 값으로 세팅이 됩니다.

 

1-5.        파일 저장시 문서의 BOM을 제거하여 저장하기

 

에디트 플러스 3버전대에서는 도구 → 기본설정에 BOM 설정부분이 있고

이클립스나 비주얼스튜디오를 비롯한 다른 에디터들에서도

도구 → 속성, 파일 → 속성, 파일 → 옵션, 옵션 → 설정, 설정 → 옵션

메뉴에 BOM 제거 설정 부분이 있습니다.

BOM이 포함되어 파일이 저장될 경우

문서의 가장 앞에 다른 문자가 있는 것으로 인식이 되어

스크립트 에러가 발생하거나, HTML문서 최상단에 선언한 doctype이 제대로 인식되지 않아

quirks모드 (비표준모드)로 렌더링을 할 수도 있습니다.

파일 저장시에는 BOM을 제거 하여 저장하세요.

1-6.        IE전용 이벤트, 속성, 메소드 사용을 피해라

 

innerText  → innerHTML

getElementsByClassName() → getElementById()

selectNode(), selectSingleNode() → getElementsByTagName()

DATE 객체에서 getYear() → getFullYear() 

이벤트 onmouseleave → onmouseout

javascript에서 event 객체를 받을 경우 마우스포인터의 x, y값을 가져오기 위해서 e.x, e.y 대신 e.clientX, e.clientY 프로퍼티를 사용

javascript로 검색어와 같은 기능에서 한글을 비롯한 특수문자를 get형식으로 보낼때는 

escape()함수가 아닌 encodeURIComponent() 함수를 사용

1-7.        removeNode 사용하지말것!

 

ð  removeNode (X) -> removechild (O)

적용예)

Var p2 = document.getElement/byId(id + ‘_b’);

P2.parentNode.removeChild(p2);

 

1-8.        더블클릭시 one클릭이벤트가 동시 발생할경우(safari, ie9.0 에서 발생).

var timerID = null;

function LayerSingleClick(obj)

{

If(Browser.safari || Browser.mac || Browser.ie9)

{

//one 클릭시 실행할 코드

}

else

{

if (timerID === null)

{

timerID = setTimeout (eventProcessor, 200,obj);

EnableCancelButton (true);

}

else

{

CancelTimer();

}

}

}

 

 

function eventProcessor(obj)

{

if(timerID)

{

//one 클릭시 실행할 코드

CancelTimer();

}

}

                    

function CancelTimer ()

{

clearTimeout (timerID);

timerID = null;

EnableCancelButton (false);

}

 

1-9.        insertBefore 가 되지 않을 때…

 

X)

Function Run()

{

 

Var frm = CreateForm();

Frm = AddHidden(frm,”m”,”model”);

Document.insertBefore(frm);

Frm.submit();

}

          

           위 예제가 동작되지 않는 이유는 바로 insertBefore 에 있다.

           Var insertedElement = parentElement.insertBefore(newElement, referenceElement);

           DOM 의 insertBefore  인자는 두개.

           두번째 인자는 추가될 위치를 명시할 때 사용되는데

           이 두번째 인자가 빠졌기 때문에 동작되지 않는다.

           또 하나 웹표준화와 더불어 Form 객체는 body아래에 존재해야 하기 때문에

           Form 객체를 document 하위가 아닌 document.body 아래에 넣어야 한다.

           결국 다음과 같이 수정하면 된다.

O)

Document.body.insertBefore(frm,null);

 

 

2.     최적화

a.     javascript(JQuery포함) 코드는 </body>태그 앞에 둔다.

최근의 최적화 기술은 자바스크립트가 페이지의 끝부분에서 브라우저에 의해 로드되는 경우 페이지의 로드가 더 빨라진다고 말하고 있다.

즉, 웹 페이지의 밑부분에 자바스크립트 코드를 둔다면 브라우져가 자바스크립트를 로드하기에 앞서 스크립트 앞에 있는 모든 것들을 로드한다는 것이다.

일반적으로 대부분의 브라우저는 자바스크립트 엔진이 웹 페이지에 있는 자바스크립트를 컴파일할 때까지 다른 모든 로딩 처리를 중단하기 때문에 이는 더욱 효과적이다.

웹 페이지 문서의 상단에 자바스크립트를 둔다면 일종의 병목현상이 생길 수 있다.

 

b.     기능상 중복된 함수 및 변수 는 하나로 통일한다.

예) 웹표준화 작업시 불가피하게 브라우져별로 분기처리를 해야할때가 있다.

그때마다 개발자마다 분기처리하는 방법들이 다르게 되면

차후에 유지보수 및 가독성,생산성이 떨어진다.

 

//브라우저 체크

/* 공통스크립트 아래 전역변수를 포함한다. */

var Browser = {

    a: navigator.userAgent.toLowerCase()

}

var Browser = {

ie: /*cc_otrue || @*/false,

ie6: Browser.a.indexOf(‘msie 6’) != -1,

ie7: Browser.a.indexOf(‘msie 7’) != -1,

ie8: Browser.a.indexOf(‘msie 8’) != -1,

ie9: Browser.a.indexOf(‘msie 9’) != -1,

opera: !!window.opera,

safari: Browser.a.indexOf(‘safari’) != -1,

safari3: Browser.a.indexOf(‘applewebkit/5’) != -1,

mac: Browser.a.indexOf(‘mac’) != -1,

chrome: Browser.a.indexOf(‘chrome’) != -1,

firefox: Browser.a.indexOf(‘firefox’) != -1

}

 

/* 실제 브라우저 체크시 사용예 */

 

If(Browser.safari || Browser.mac || Browser.ie9)

{

  Dwidth += 7;

  Dheight += 7;

}

 

/* 기존 브라우져 체크방법 */

           // 브라우저를식별하는부분

방법1.

var IE4  = (document.all && !document.getElementById) ? true : false;

var NS4 = (document.layers) ? true : false;

var IE5  = (document.all && document.getElementById) ? true : false;

var N6  = (document.getElementById && !document.all) ? true : false;

 

                     if (document.all)

                     {                              

                                e.cellSpacing = "0";

                     }

                     else

                     {                              

                                e.setAttribute("cellspacing", "0");

                  }

방법2.

               if (/MSIE/.test(navigator.userAgent)) {

               if(navigator.appVersion.indexOf('MSIE 8.0')> -1) {

               window.opener='Self';

               window.open('','_parent','');

               window.close();

               } else if (navigator.appVersion.indexOf('MSIE 7.0')> -1 ) {

               window.open('','_self').close();

               } else {

               window.opener = self;

               self.close();

            }}

 

                    

3.     운영관련

A.     마스터페이지 사용하기.

ð  공통포함파일(스타일시트나 스크립트 등등)을 마스터페이지에 포함시킴으로서 유지보수 및

가독성이 높아 생산성이 높아진다.

4.     웹보안관련 Tip

A.     get -> post 방식으로 변경.

ð  get방식으로 URL에 정보를 담아서 보낼경우 정보가 노출이 되므로

보안에 취약하며, 보내는 정보의 크기가 1024바이트로 제한된다.

물론 POST 방식의 장점이 많다고 해서

무조건 POST 방식을 써야 하는 것은 아니다. GET 방식이 POST 방식에 비해 간편하게 쓸 수 있기 때문에 보편적으로 GET 방식과 POST 방식을 적절히 혼용해서 사용한다.

B.      Get방식을 Post방식으로 변경하기.

ð  Get 방식

<a href=”boardlist.aspx?boardidx=23&page=3&searchfiled=title&….”> 제목…</a>

 

ð  post 방식

<a href=”javascript:void(0)” onclick=” javascript:listview(23,3,’title’);”>제목…</a>

<script>

Function listview(idx,pnum,title)

Var f = document.getElementbyId(“formId”);        //

f.target = “_self”;

f.action = “boardlist.aspx”;

f.submit();

</script>

 

<form id=””formId” method=”post”>

</form>

 

5.     Jquery 코딩 tip

A.     복잡한 셀렉터를 사용할 때는  가급적 JQuery의 기본 메서드를 사용한다.

ð  길고 복잡한 셀렉터는 결과를 반환하는 데 그만큼 오래 걸릴 것이다. 아래 두 방법을 비교해 보면..

JQuery('div a:not([href^=http://]), p a:not([href^=http://])');

JQuery('div, p').find('a').not('[href^=http://]');

두번째 방법은 첫 번째 방법보다 짧고 읽기 쉽다. 더불어, Firefox와 Safari에서 테스트 해 보면 두 번째 방법이 첫 번째 방법보다 빠르다.

          

 

B.      컨텍스트를 지정한다.

ð  결론부터 말하면 컨텍스트를 지정하면 가독성과 처리속도에 도움이 된다.

다음은 한 가지 예인데, 폼이 전송되기에 앞서 폼 안에 있는 모든 input 필드를 선택하는 것이다.

JQuery('form'),bind('submit', function() {

var allinputs = JQuery('input', this);

// 지금 'allinputs'로 작업을 할 것이다.

});

this가 두번째 매개변수로 전달되고 있다는 점에 주목하자. 처리기 내에서 this는 폼요소를 의미한다.

그렇기에, 이를 컨텍스트로서 지정한다면 JQuery 는 그 폼안에 존재하는 input 요소들만 반환할 것이다.

만약 두 번째 매개변수를 지정하지 않는다면 문서에 존재하는 모든 input 요소가 반환될 것이다.

예) JQuery('p', '#content'); = JQuery('#content p');

 

**컨텍스트: JQuery가 셀렉터 식에 의해 매치되는 요소를 찾을 장소를 말한다.

 

C.      자식 요소를 찾기 위해서는 children() 메서드를 사용한다.

var anchors = JQuery('a');

// 앵커요소의 모든 지계 자식들을 가져올 수 있는 3가지 방법

// #1

anchors.children();

// #2

JQuery('> *', anchors);

// #3

anchors.find('> *');

사실 이 외에도 상당히 많은 방법이 존재한다! 하지만 위의 상황에서는 첫 번째 방법이 가장 빠르다.

[출처] 2011년 4월 8일 오후 3시 9분|작성자 erick74