'HTML'에 해당되는 글 3건
- 2013.05.28 외부 정적 리소스 Include 시 유용한 팁!
- 2012.10.24 Quirks Mode(관용모드)란?
- 2012.05.02 FORM 태그란?
외부 정적 리소스 Include 시 유용한 팁!
만약 JQuery와 같이 외부에서 공개된 오픈 소스 라이브러리들을 사용하고자 할때 보통 우리는 아래와 같은 방법으로 해당 정적 리소스들을 Include 시킨다.
< script type="text/javascript" defer="defer" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js">
하지만 만약 어플리케이션의 도메인이 HTTPS(보안 통신 프로토콜(SSL 적용))를 사용하는 경우라면, 위 코드와 같이 삽입할 경우 아래와 같은 문제가 발생한다.
- 아래 그림에서 보시다시피 크롬 개발자 도구의 네트웍 탭 상에 Include 시킨 리소스(jquery.min.js)가 없는 것을 확인할 수 있다.
- 또한, 콘솔 탭을 살펴보면 아래와 같은 오류(안전하지 않은 컨텐츠이기 때문에 가져올 수 없다?)를 확인할 수 있다.
위와 같은 문제를 간단히 해결하기 위한 방법으로 아래 코드와 같이 Include 블럭 속성 값(url)을 넣어준다.
- 이와 같이 정의할 경우 해당 어플리케이션의 HTTP 프로토콜에 따라 속성 값의 Protocol이 자동 변환되기 때문이다.
즉, 어플리케이션 상의 프로토콜이 HTTP라면 "http"로 HTTPS라면 "https"로 자동 변환되는 것이다.(P.S: IE6 ~ IE10 or 표준 브라우저 호환)
< script type="text/javascript" defer="defer" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js">
- 아래 그림은 위 코드 블럭을 적용한 결과이다.
- 만약 리소스들을 Include 하는 파일(html)이 로컬 웹 서버를 거치치 않는 방식(직접 파일 열기)일 경우 위와 같은 선언 방식(//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js) 으로는 해당 리소스들이 열리지 않는다.
즉, 간단한 테스트를 위해 생성한 html 파일을 위와 같은 방법으로 리소스들을 인클루드 시킬 경우 에러가 발생하니 사용 시 주의해야할 필요가 있다.
PS: 또한, 개발자 도구를 통해 살펴본 리소스들의 주소는 아래와 같다는 것을 알수 있다.
file://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js
- 출처: @insanehong님
참고사이트:
https://developers.google.com/speed/libraries/devguide
http://hoons.net/Blog/View/111726
Quirks Mode(관용모드)란?
Quirks Mode(관용모드)란?
"최신 웹 브라우저의 렌더링은 점점 표준에 가깝게 개선되었지만, 그렇지 못한 오래된 페이지들은 최신 버전의 브라우저에서 깨져 보이게 된다. 즉, 이를 해결하기 위하여 각 브라우저 벤더들이 fallback을 제공하고 있는것이다."(NARADESIGN:BLOG)
"한마디로" 브라우저가 하위호환성(오래된 웹 페이지 개발 시 최적화된 랜더링 방식)을 보장하기 위한 방식인 것이다.
또한, 웹 브라우저는 문서의 DTD에 따라 Quirks Mode와 Strict Mode로 전환되며, Quirks Mode를 유발 시키는 DTD 형식은 아래와 같습니다.
참고 사이트:
쿼크 모드 렌더링과 DTD
http://naradesign.net/wp/2007/03/27/118/
FORM 태그란?
정의:
웹상에서 사용자 정보를 입력하는 여러(text, button, checkbox, file, hidden, image, password, radio, reset, submit)방식의 영역을 제공하며, 사용자로부터 할당된 데이터를 서버로 전송하는 역활을 담당한다.
어트리뷰트:
id: 객체를 대표하는 인식 자(id 값은 페이지당 하나씩만 존재할 수 있습니다.)를 지정하거나 반환합니다.
보통 CSS나 자바스크립트 코드에서 해당 객체를 제어하기 위해 지정합니다.
-
css code: #id
-
javascript code: document.getElementById('id');
name: 객체의 이름을 지정하거나 반환합니다.
지정된 name 속성을 통해 자바스크립트 코드에서 아래와 같이 접근 가능합니다.
-
document.login;
-
document.login.id;
-
document.login.pass;
action: 객체가 서버로 전송되는 주소를 지정하거나 반환합니다.
- 이메일 주소("mailto:yanione@google.com")방식으로도 전송 가능합니다.(이 부분에 대해서는 테스트를 통해 더 자세히 알아보도록 하겠습니다.)
method: 서버에 데이터를 전송하기 위한 메시지 전송 방식을 지정하거나 반환합니다. 지정 가능한 method로는 head, trace, put, delete, connect가 있습니다.
method 방식에 대한 참고 사이트
@W3C
http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html
@그린세상님의 이글루
http://dialup.egloos.com/139627
대표적인 전송 방식으로는 get, post 방식이 있으며, 이 두 방식의 가장 큰 차이점으로는 데이터의 길이 제한과 노출방식에 있습니다.
GET 전송 방식:
길이 제한:
서버로 전송될 주소의 파라메터 문자열(a='b')에 대한 길이 제한이 존재합니다.
파라메터 제한 길이는 2048바이트를 가집니다.
- 파라메터 길이 계산
URL: http://google.co.kr?a=test&b=test
위 주소 형식의 파라메터 길이는?
http://google.co.kr(주소) 및 각 파라메터를 구분 짓는 특문('?', '&')을 뺀 나머지를 계산합니다.
길이: 12바이트입니다.
노출방식:
파라메터 문자열은 주소에 포함되며, 그에 따른 형식은 아래와 같습니다.
https://www.google.co.kr/?sclient=psy-ab&hl=ko&newwindow=1&site=&source=hp&q=mohwa&oq=mohwa&aq=f
https://www.google.co.kr/(주소)
?sclient=psy-ab&hl=ko&newwindow=1&site=&source=hp&q=mohwa&oq=mohwa&aq=f(파라메터)
POST 전송 방식:
길이 제한:
주소 길이를 제외한 키와 쌍으로 이루어진 파라메터 문자열에 대한 길이 제한은 존재하지 않습니다.
노출방식:
파라메터 문자열은 외부로 노출되지 않습니다. 만약, 파라메터 문자열을 확인하기 위해서는 별도의 프로그램(wire shark, http watch)사용하여 전송 데이터를 확인할 수 있습니다.
enctype: 지정된 서버 주소로 요청 Content-Type(MIME(Multipurpose Internet Mail Extensions))을 지정하거나 반환합니다.
대표적인 Content-Type으로는 일반 문자열 전송 시 쓰이는 "application/x-www-form-urlencoded" 타입 과 파일 전송 시 쓰이는 "multipart/form-data" 가 존재합니다.
또한, GET 전송 방식은 HTTP Header Content-Type이 존재하지 않습니다.
더 자세한 설명은 아래 Content-Type에 대한 링크를 참조 하시기 바랍니다.
http://mohwaproject.tistory.com/entry/HTTPS%EB%9E%80
onsubmit(이벤트):
Input 태그의 전송 타입인("submit", "image")버튼 및 Enter키 를 클릭 시 객체(FORM)가 포함하는 모든 사용자 입력 필드의 데이터를 지정된 서버 주소로 전송하는 이벤트 입니다.
만약, 자바스크립트 핸들러가 해당 이벤트에 할당 되었다면, 할당된 자바스크립트 코드가 실행됩니다.
더 자세한 설명은 아래 "Form 객체의 기본 이벤트를 막는 방법"에 대한 링크를 참조 하시기 바랍니다.
아래는 지금까지 설명드린 FORM 객체의 속성값에 대한 변화를 상황 별로 테스트한 예제입니다.
로그인 시 쓰이는 공통 자바스크립트 코드
-
var Member = (function(){
-
-
-
return new (function(){
-
-
function init(){
-
-
return this;
-
}
-
-
init.prototype = {
-
login: login
-
};
-
-
-
return init;
-
-
}());
-
-
-
function login(f){
-
-
var id = document.getElementById('id');
-
var pass = document.getElementById('pass');
-
-
if (!id.value || !pass.value) return false;
-
}
-
-
-
})();
1. method = post, enctype = "application/x-www-form-urlencoded"
로그인 코드:
-
<form id="login" method="post" target="login_frm" action="http://naver.com" enctype="application/x-www-form-urlencoded" onsubmit="return Member.login(this)">
-
<fieldset>
-
<input type="text" id="id" name="id" />
-
<input type="password" id="pass" name="pass" />
-
</fieldset>
-
<input type="submit" value="폼제출" />
-
</form>
-
-
로그인폼:
Form 객체에 할당된 서버로 전송 시 변화
- 해당 코드와 같이 Form 객체에 정의된 어트리뷰트값이 아래와 같이 적용되어있습니다.
위에서 언급한 바와같이 POST 전송 방식은 파라메터가 문자열이 외부(주소)로 노출되지 않습니다.
전송된 POST 파라메터 문자열(데이터)
2. method = post, enctype = "multipart/form-data"
로그인 코드:
Form 객체에 할당된 서버로 전송 시 변화
- 아래의 목록 중 Content-Type을 제외한 나머지 모두가 이전 방식과 동일합니다.
3. method = get, enctype = "application/x-www-form-urlencoded"
로그인 코드
-
<form id="login" name="login" method="get" target="login_frm" action="http://naver.com" enctype="application/x-www-form-urlencoded" onsubmit="return Member.login(this)">
-
<fieldset>
-
<input type="text" id="id" name="id" />
-
<input type="text" id="pass" name="pass" />
-
</fieldset>
-
<input type="submit" value="폼제출" />
-
</form>
-
로그인폼:
Form 객체에 할당된 서버로 전송 시 변화
- 해당 코드와 같이 Form 객체에 정의된 어트리뷰트값이 아래와 같이 적용되어있습니다.
위에서 언급한 바와같이 GET 전송 방식은 파라메터가 문자열이 외부(주소)로 노출됩니다.
전송된 GET 파라메터 문자열(데이터)
4. method = get, action = "mailto:yanione@nate.com(메일)", enctype = "application/x-www-form-urlencoded"
로그인 코드
-
<form id="login" name="login" method="post" target="login_frm" action="mailto:yanione@google.com" enctype="application/x-www-form-urlencoded" onsubmit="return Member.login(this)">
-
<fieldset>
-
<input type="text" id="id" name="id" />
-
<input type="text" id="pass" name="pass" />
-
</fieldset>
-
<input type="submit" value="폼제출" />
-
</form>
-
-
로그인 폼
Form 객체의 action 속성에 Mail 방식을 정의하면 아래와 같은 메시지가 반환됩니다.