작년에 Safari Ajax시 문제가 발생해서..

포스팅한적이 있었습니다.

http://iamgil.com/390  )

해당 내용에 대해 문의가 있어 다음과 같이 포스팅합니다.



Ajax거래의 응답이 10초가 넘어버릴 경우에 빈 응답이 내려온다는 것입니다.

서버에서는 응답을 내려주지도 않았는데 말이죠. 

동기/비동기 방식 거래 모두에서 말이죠.


동기 방식의 경우 70-80% 이상이 문제가 있었고

비동기 방식의 경우에도 꽤나 높은 확률이었던것으로 기억합니다.

(테스트해본지 오래되어서.^^;;)


이 문제에 대해서..

처리한 소스입니다.

하지만 한가지 문제가 동기방식 거래가 되지 않는다는것입니다.

API는 만들었지만 테스트 해보니 잘 되지 않네요.ㅠㅠ




혹시 Sync가 꼭 필요한데..Sync스타일로 코딩만 가능하면 된다라고 하신다면..

제가 예전에 만든 Javascript JobManager소스를 올려드리도록 하겠습니다.^^




Ajax에서 동기 거래는 추천드리지 않지만...

어떻게 해서든 되게 해보려고 했지만..실패했네요..



이것 저것 테스트 중이니 차후에 라도 동기거래를 구현해 낸다면 포스팅 하겠습니다.

해당 내용을 처리한 From-submit방식으로 Ajax를 구현한 내용이구요.


필요시에는 File첨부 기능도 추가할수 있습니다.^^ (필요하시면 댓글로 요청주세요.ㅎㅎ)


동기방식은...조금만 기다려달라!! 라고 말씀드리고 싶지만 빠른시간에 처리할 자신이 없네요.ㅠㅠ

일단 기다리시는 분이 계시고, 혹여나 그분이 이 소스를 수정해서 구현해주신다면.^^;...감사합니다...(__  )

꼭 댓글로 피드백 부탁드리겠습니다.


아래 첨부파일은 구현해놓은 소스 입니다.

Form-Submit방식으로 Ajax를 구현해 놓은 소스입니다.(formAjax.js)


그리고 의존성이 있는 jquery와 json2.js 파일을 첨부하고


해당 내용을 테스트한 test.js파일과 test.html 응답을 내려준 test2.html 파일을 첨부합니다.


그리고 해당 내용을 테스트할수 있는 URL은


http://api.jexframe.com/test/test.html 입니다.

제가 관리하는 서버이긴 하나 회사 서버인 관계로 해당페이지의 링크는 어느 순간 삭제될수도 있습니다.








  1. Safari 싫어 2012.07.03 11:04 신고

    공유해 주셔서 감사드립니다.
    길님도 결국 동기 거래는 실패했다고 생각하시는건가요?
    여러가지로 굴려보니까 아예 안되는게 아니고 최악의 경우인 됬다 안됬다 더라구요..

    빨리 WebSocket 표준안이 나왔으면 좋겠는데.. 이것도 상용으로 사용할 수 없는 단계라고 하니..

    저도 공유해주신 소스를 살펴보면서 좀 더 닭질해 보겠습니다.

    • Favicon of http://iamgil.com BlogIcon 길OI 2012.07.03 12:25 신고

      websocket에 대해서 IE6까지 지원하는 추상화를 적용한

      솔루션이 있는것으로 알고 있습니다.

      혹시 필요하시다면..정보를 검색해볼수 있구요.^^;



      그리고 꼭 sync방식 처리가 필요하신게 아니라면

      Async형태로 개발하시길 권장드리고 싶습니다.

      이유는 Sync가 무한루프로 현재 처리를 지연시키는 방식인데...

      이게 브라우저가 멈춰버리는 느낌이어서..사용상 불편함이 있더라구요..


      저또한 무한루프를 통해 지연시키려 처리 해보았는데

      무한루프를 사용하니 Iframe의 callback까지 들어가지를 못하는 문제가 있네요.^^;

      중간에 alert라도 하나 띄울수 있다면; 처리가 가능한데..

      그럴순 없는 요량이구요.^^;



      코딩의 편의성 때문에 Sync를 사용하시는것이라면.

      제가 Async거래를 Sync거래형태로 코딩이 가능한 라이브러리를 작성해 놓은게 있습니다. 필요하시면 해당 라이브러리와 샘플 코드를 올려놓도록 하겠습니다.

      (단지 코딩의 편의성을 위해 눈속임 형태입니다.)

    • Favicon of http://iamgil.com BlogIcon 길OI 2012.07.03 13:38 신고

      후...-_- Sync방식 처리가 테스트 되었습니다..

      좀 좋지 않은 꼼수이긴 하지만.....

      새로운 글로 남기도록 하겠습니다.^^;

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

      헉!! 이게 SAFARI에서 작동하지 않네요.ㅠㅠ

      좀더 테스트좀.ㅠㅠ

회사에서 HTML5 도입에 대하여 고민을 해보던중 문득 크롬프레임에 대하여 고민을 하게 되었습니다

기존 업계에서 사용중인 유사 제품인 VeraIN 적용에 대한 이야기또한 해보고자 합니다.


CHROME FRAME를 써서 얻을수 있는 장점과 단점을 구분해보고자 합니다.


1) VERAIN은 무엇인가?

금융 보안모듈을 납품하는 업체인 "위즈베라" 라는 회사에서 만든 제품으로

기존 IE에 최적화되어 만들어진 사이트를 CHROME / FIREFOX / OPERA / SAFIRI등에

서 사용이 가능하도록 지원해주는 제품입니다. (내부에서 IE 컴포넌트를 사용하도록 지원하는듯합니다)


FIREFOX / CHROME 플러그인으로 존재하는 IETAB과 유사한것 같습니다.


해당 제품의 장점은 IE만에서의 테스트로 CHROME / FIREFOX / OPERA / SAFARI등에서 동일한 작동을 보장합니다.


장점은 기존 IE로 만들어진 사이트를 적은 비용으로 여러 브라우저를 지원하도록 해주는 효과가 있습니다. 또한 유지보수 회사가 존재함으로 인하여 문제 발생시에 지원이 가능하다는 점입니다.


단점으로는 MS윈도우 기반의 제품으로. (아마도 IE컴포넌트를 사용할테니)

여러 OS를 사용하는 서비스는 어렵고 IE 컴포너트의 사용으로 타 브라우저에서도 성능이 느려진다는것입니다



2) CHROME FRAME은 무엇인가?

CHROME FRMAE은 구글에서 배포하는 IE플러그인으로 IE에서 CHROME엔진을 통하여 렌더링 및 스크립트 연산을 수행한다는 것입니다.

이 CHROME FRAME를 욕하는 사람들도 많이 있습니다. 이유는 IE6 / IE7 / IE8등의 수명 연장에 대해서 욕하는 사람들도 있구요. GOOGLE이라는 회사가 activeX를 배포한다는 것입니다.


하지만 이 CHROME FRMAE은 엄청난 장점을 가지고 있습니다. 

1. 가장 큰 장점은 IE6/7/8/9 에서 CHROME수준의  HTML5지원을 가질수 있습니다.

  - 매력적인 HMTL5의 기능들인 .. MENIFEST / CANVAS등의 기능 그리고 WEBSOCKET등의 기능을 모두 사용할 수 있다 는 점입니다.

2. 위에서 설명한 VERAIN이라는 제품에 장점인 테스트 공수의 절약또한 가질수 있습니다.

 - CHROME FRAME 또한 IE6/7/8 에서 돌아가는 내용을 CHROME과 동일하게 처리한다는 것을 보장 한다는 점입니다. IE6/7/8 각각 테스트해야하는 공수를 CHROME하나 테스트로 해결이 가능합니다.

3. 성능이 뛰어납니다.

 - CHROME의 V8엔진과 렌더링 엔진의 성능은 많은 사용자의 호평을 얻고 있습니다. 저 또한 스크립트 개발시 V8엔진이 IE스크립트 엔진보다 10배 이상 빠르다고 느끼고 있습니다. 해당 웹사이트 사용자들은 CHROME FRAME을 사용한 사이트를 타 사이트 보다 빠르다고 느끼게 될것입니다.

4. 구글에서 만들었다는 것입니다.

 - "위즈베라" 도 훌륭한 회사지만 구글의 브랜드는 웹 사용자에게 거부감이 적습니다.

 - 구글은 아직도 계속 chromeframe을 업그레이드하고 chrome와 동일하게 관리를 하고 있습니다.

5. CHROME이 깔린 이후에도 기존 브라우저 작동에 대해서 아무런 영향을 미치지 않습니다.

- CHROME FRAME의 경우 사용자가 특별히 지정하지 않는 이상의 IE 본연의 형태로. 다른 웹사이트 접근시에 영향을 미치지 않습니다.

- CHROMEFRAME 의 경우 아래 구문이 포함된 사이트의 경우 자동으로 돌아갑니다.

 <meta http-equiv="X-UA-Compatible" content="chrome=1"> 


물론 대규모의 프로젝트에서 ChromeFrame을 공식적으로 도입하기 위해 아래와 같은 점은 고려해보아야 합니다.

1. CHROME FRAME오류에 대한 유지보수

 - 제가 느끼기에는 CHROME FRAME에 별 오류가 없을 것이라고 생각합니다. 하지만 대규모 프로젝트가 CHROME FRAME오류가 발생했을때 GOOGLE에 유지보수 요청이 어렵다는 것을 걱정하고 있었습니다.

 - 아직까지의 오류사례는 발견하지 못하였습니다.^^;



후..-_-...한참을 고민하고 정리했는데요..

차후에 얻는 정보가 있다면 업데이트 하도록 하겠습니다...

CHROMEFRAME..참 좋은데~ 머라고 말로 할수는 없고~~





외부 플젝트 중에 이러저러한 문제로 제가 HTML5을 권유하고 HTML5사용해야 하는 프로젝트가 생겨, (아마..관련업계 최초일듯..^^;;) 다음 사항을 정리하고자 합니다.


해당 문서는 회사에 제출해야 할 문서이므로, 차후 저작권 문제가 발생할 소지가 있어 외부에서 퍼가시는것은 허용하지 않도록 하겠습니다.




> HTML5 사용을 위한 가이드

1. HTML5의 새로운 기능 사용 여부에 관한 고민

해당 브라우저들은 HTML5 존재 이전에 나온 브라우저 들이며,

HTML5는 DOC TYPE에서 XHTML형태의 DTD가 존재하지 않기때문에,

HTML5의 지원은 공식적으로 이루어지지 않고 있는 상황.

본 문서에서는 해당 브라우저들에서 사용이 가능하도록 하기 위하여,

우리는 다음 사항을 고려해야 하며, 아래의 TAG LIST중 사용가능한것들, 사용을 권장하는 것들, 

사용을 비권장하는 것들, 사용을 금지하는 것을 나누어

정리하고자 합니다.

 기능

사용 

Comment 

 웹스토리지

 비권장

 꼭 필요한 기능이라고 판단시, 차후 JexFrame기능의 일부를 수용할지 협의 필요

 웹SQL

불가 

 해당 기능은 IE 9- 에서는 사용이 불가능하며, 보안및 성능상의 이유로 JexFrame에서도 기능으로 구현이 불가합니다.

Menifest 

 권장

 지원하지 않는 브라우저가 있으나, 실제 사용에 문제 발생소지가 적으며, 해당 기능의 사용시 네트워크 트래픽상 잇점이 크고, Cache관리가 용이해 사용을 권장

 Canvas

불가 

 지원하지 않는 브라우저가 많고, 사용시 화면디자인 등에 문제 발생소지가 있어 사용이 불가함.

 Video/Audio

불가 

 지원하지 않는 브라우저가 많고, 사용시 화면디자인 등에 문제 발생소지가 있어 사용이 불가함. 대체 기술이 존재

대체기술 :: Flash

Drag & Drop 

 비권장

 꼭 필요한 기능이라고 판단시, 차후 JexFrame에서 기능의 일부를 수용할지 협의 필요. 단, 지원하지 않는 브라우저의 경우 Drag&drop의 기능이 아닌 다른 기술로 우회.

참고! Div등의 HTML ELEMENT를 Drag & Drop하는 기능이 아닌, 브라우저 외부의 객체를 Drag & Drop하는 기능임.

RichTextEditor

불가 

 사용이 필요한 경우, Daum Editor, Naver Editor등의 Open source Editor 사용을 권장하며, 회사 내에서 판매 상품이 필요한 경우, RND를 통한 Editor개발이 가능.

WebWorker 

불가

지원하지 않는 브라우저가 많고, 해당 기능을 사용시, Script에서 Batch수준의 기능을 구현하는 형태가 되므로 위험도가 높아서 사용 불가. 

 GeoLocation

비권장 

 지원하지 않는 브라우저의 경우 우회 방법이 존재하나, 외부 사업자를 통해야 하므로, 비권장

WebSocket 

불가

 해당 기능을 사용하기 위해서는 Script에서 지원만이 아니라, System(WebServer 및 Was)을 최신 버전을 사용하는 Risk 및 추가적인 방화벽 필요, 검증되지 않는 기술로 인한 보안 문제발생 가능등의 사유로 사용 비권장.

 Comet

불가

 WebSocket과 동일한 사유로 비권장

FILE API 

불가

 지원하는 브라우저가 적고, 지원하는 브라우저에서만 사용시 로직처리가 복잡해지는 문제가 발생 가능.


2. HTML5 사용시 고려해야 할점 (퍼블리싱 관점)

1) HTML5를 위한 문서 타입 아래 블럭 1,2 두가지가 사용가능하나, 1번 사용을 권장. (두가지 동시에 사용은 에러발생합니다.)

1. <!DOCUTYPE HTML>

2. <!DOCUTYPE HTML SYSTEM "about:legacy-compat">


2) 인코딩 설정 - 이전에도 많이 사용하던 2번을 권장합니다.

1. <meta charset="UTF-8">

2. <meta http-eqiv="Content-Type" content="text/html"; charset="UTF-8">


3) 종료태그를 기술하지 말아야 할 Tag List아래 태그리스트는 <br></br> 형태의 종료 태그를 기술하지 말아야 하며, <br /> 형태로 사용을 하여야함.

area, base, br, col, command, embed, hr, img, input, keygen, link, meta, param, source


4) 종료태그가 생략가능한 TAG :: 종료 TAG 생략가능 TAG가 일부 존재하나 종료태그 생략을 권장하지 않음. (개발자 가이드를 통하여, 종료태그 생략을 사용하지 않도록 문서화 필요)


5) Attribute 사용

5-1) Attribute의 경우 """ 로 묶어서 값의 표현을 권장함

<input type="BUTTON" id="BTN_SAVE001">

5-2) Custom Attribute의 사용은 앞에 "data-" 를 prefix로 사용권장

<span data-jxln="ACCOUNT_TYPE">예금계좌</span>

5-3) 단독으로 사용 가능한 attribute사용은 단독으로 사용하지 않고 value를 넣는 것을 권장

<input type="text" disabled="disabled">


6) HTML5에서 추가 또는 삭제된 마크업

6-1) 문서구조를 위한 ELEMENT(SECTION)

실제로는 DIV를 사용하여 Layout을 구성하는 것과 큰 차이가 존재하지 않는다고 생각 할수 있으나, 해당 마크업드은 차후 웹접근성 항목에서 상당한 잇점을 제공하므로, 사용을 적극 권장합니다. 

 Element

 Description

 사용

section

 범용적인 섹션 문서의 레이아웃을 구성하며, DIV 태그와 동일하게 작동한다.

권장

 article

 게시물 상세등의 컨텐츠를 표현하기위해 사용, DIV태그와 동일하게 작동한다.

권장

aside 

 한쪽 구석에서 추가적인 정보를 표현하기 위해 사용되며, DIV태그와 동일하게 작동한다.

권장

nav 

 네비게이션 메뉴를 위한 영역으로 DIV태그와 동일하게 작동한다.

권장

 footer

 문서의 하단부를 표현하기 위한 영역 으로 DIV와 동일하게 작동한다.

권장 

header 

 문서의 상단부를 표현하기 위한 영역으로 DIV와 동일하게 작동한다.

권장 

hgoup 

 h1,h2...,h6 등의 태그를 그룹으로 묶어 사용하기 위한 영역

권장 


6-1) Grouping을 위한 ELEMENT

실제로는 DIV를 사용하여 Layout을 구성하는 것과 큰 차이가 존재하지 않는다고 생각 할수 있으나, 해당 마크업드은 차후 웹접근성 항목에서 상당한 잇점을 제공하므로, 사용을 적극 권장합니다. 

 Element

 Description

 사용

figure

 이미지등의 그룹을 한곳에 묶어서 보여주는 그룹, DIV와 동일

권장

 figcaption

 figure에 대한 caption을 정의

권장



6-2) 미디어를 위한 ELEMENT

미디어 기능은 지원하지 않는 브라우저가 많으므로, 비권장하며, 아직까지는 대체기술인 Flash나 embed태그 사용을 권장합니다.

 Element

 Description

 사용

video

 영상을 표현하기 위한 ELEMENT

비권장

 audio

 음성을 표현하기 위한 ELEMENT

비권장

source

 video/audio등의 리소스 또는 URL 을 지정

비권장

track

 video/audio등의 텍스트 트랙을 지정(지원하는 브라우저 없음)

비권장



6-3) Form확장 ELEMENT (추가된 Attribute는 포함되지 않음)

HTML5에서는 Form을 확장하기 위한 다음 ELEMENT를 추가 되었으며, 일부 기능은 브라우저에따라 정상작동 되지 않는 경우가 존재하므로, 사용시 주의를 요합니다. 

 Element

 Description

 사용

keygen

 암호화 키를 생성하기 위한 ELEMENT

비권장

output

 Form내부의 연산을 지원하며, 연산된 결과를 출력한다. 지원하지 않는 브라우저에서 사용을 하려면 script조작이 필요함.

비권장

progress

 진행상황을 나타냄. 지원하지 않는 브라우저가 많으므로, 해당 기능 필요시 협의를 통해 우회 기능을 통해 지원

비권장

 meter

 현재 상태를 나타내 주는 기능. progress와 같이 해당 기능 필요시 협의를 통해 우회 기능을 지원

비권장

 datalist

 자동완성 기능제공 Select Element와 유사하게 Option과 함께 사용하여 Option값들이 자동완성을 위한 Data로 사용됨. 지원하는 브라우저가 현재 Firefox, Opera밖에 없어 사용되는 곳이 없음. JEX팀에서 제공하는 AutoComplete API 사용을 권장

비권장



6-4) 기타 ELEMENT

해당 element등 또한 브라우저에 따라 다르게 동작 하거나 지원하지 않는 브라우저가 많은 기능들로 사용을 비권장 필요시 script로 구현하거나 협의를 통해 API기능 지원. 

 Element

 Description

 사용

mark

 Text에서 일부분을 강조 (IE6~IE8 제외한 대부분 지원)

비권장

canvas

 이미지를 동적으로 그리고 제어하기 위한 기능 (IE6-IE8 제외한 대부분 지원)

비권장

bdi

 실제 html문서에서는 표시되지는 않지만, 접근성을 위해 유용한 TAG로 "사용자명"을 지정할때 사용. (지원하는 브라우저는 적지만 사용을 원할시에는 script/css를 통해 지원가능하도록 설정가능)

권장

 command

 메뉴또는 명령을 지정하는 ELEMENT이며, 현재 IE9외에는 지원하는 브라우저가 없어 권장하지 않습니다.

비권장

 details

 접기/펴기등의 기능 제공-TITLE은 하위 ELEMENT로 summary ELEMENT를 사용 (현재 chrome만 지원)

비권장

summary

details의 하위 ELEMENT로 사용하여 타이틀 형태로 데이터를 표시 

비권장

ruby

 동남아시아 발음 및 정보를 표시하기 위해 사용,

비권장

rp

 ruby의 하위 ELEMENT로 사용

비권장

rt

 ruby의 하위 ELEMENT로 사용

비권장

time

 시간을 표시하는 ELEMENT, 접근성을 위해 유용한 TAG로 지원하는 브라우저가 존재하지 않지만, script/css를 통해 지원가능하도록 설정이 가능함.

권장

wbr

 text 라인 브레이크 브라우저에서 실제로 작동하지는 않으나, 웹접근성을 위해 존재하는듯함.

비권장


6-5) 삭제된 ELEMENT

삭제된 ELEMENT로 대체 ELEMENT를 사용하도록 합니다. 대부분의 브라우저에서는 하위 호환성을 위해 아래 태그가 사용이 가능합니다. 이와 같은 내용은 html5-Strict.css를 작성하여 아래 ELEMENT사용시 "display:none"으로 처리하도록 하는 방법을 권고합니다. 아래 태그를 사용하면, W3C인증시 오류발생합니다. (강조한 Line은 자주쓰는 ELEMENT입니다.)

 Element

 Instead ELEMENT

acronym

 "ABBR" ELEMENT를 사용

applet

 "OBJECT" ELEMENT를 사용

basefont

 CSS를 통하여 제어

 big

 CSS를 통하여 제어

 center

 CSS를 통하여 제어

dir

 "UL" ELEMENT를 사용

font

 CSS를 통하여 제어

frame

 IFRAME를 사용 (도메인 변경되지 않도록 처리시 고민이 필요)

frameset

 IFRAME를 사용 (도메인 변경되지 않도록 처리시 고민이 필요)

noframes

 IFRAME를 사용 (도메인 변경되지 않도록 처리시 고민이 필요)

strike

 CSS를 통하여 제어

tt

 CSS를 통하여 제어


6-5) 비표준 ELEMENT

비표준 ELEMENT이지만 기존 브라우저가 지원해서, 실수로 사용이 가능한 ELEMENT리스트 입니다. 이와 같은 내용은 html5-Strict.css를 작성하여 아래 ELEMENT사용시 "display:none"으로 처리하도록 하는 방법을 권고합니다. 아래 태그를 사용하면, W3C인증시 오류발생합니다. (강조한 Line은 자주쓰는 ELEMENT입니다.)

 Element

 Instead ELEMENT

isindex

 input text필드등으로 사용

listing

 "PRE" ELEMENT와 "CODE" ELEMENT로 사용

xmp

 "PRE" ELEMENT와 "CODE" ELEMENT로 사용

 noembed

 "OBJECT" ELEMENT나 "EMBED" ELEMENT로 사용

 plaintext

 MIME TYPE을 "text/plain"으로 사용

blink

 CSS/SCRIPT를 통하여 제어

marquee

 CSS/SCRIPT를 통하여 제어

s

 CSS/SCRIPT를 통하여 제어

spacer

 &nbsp; 값을 사용

u

 CSS/SCRIPT를 통하여 제어

bgsound

 "OBJECT" ELEMENT나 "EMBED" ELEMENT로 사용



6-6) 추가된 Attribute (Form / Input)
추가된 Attribute는 브라우저에 따라 다르게 동작하거나 지원하지 않는 브라우저가 많은 경우가 있어 해당 기능을 사용하는 대신 Jex에서 제공하는 API를 활용하시길 권장합니다. (차후 협의를 통하여, 지원하지 않는 브라우저에 대해 Script/CSS로 구현할지를 결정)

 Element

 attribute

 Description

 for

autocomplete

 자동완성 기능

 form

novalidate

 inputbox의 확장된 attibute기능을 check하지 않음

 input

autofocus

 페이지가 로드될때 focus를 주는 기능

 input

 form

 form 태그 영역밖에서 inputbox를 만들고 form하위 ELEMENT로 지정가능

 input

 formaction

 form의 ACTION을 지정

 input

formenctype

 multipart/form-data형태의 ENCTYPE를 지정

 input

formmethod

 form의 method지정 (post/get)

 input

formnovalite

 form에 지정하는 novalidate와 동일

 input

formtarget

 submit시에 대상 target을 지정

 input

height/width

 높이와 넓이 지정 (CSS로 구현가능)

 input

min/max

 입력값을 min / max사이로 제한

 input

multiple

 파일전송시 다중선택 기능 ( 사용해도 좋을 것 같음. )

 input

pattern

 정규식을 활용하여 입력값 제한

 input

placeholder

 기본값을 배경으로 보여줌

 input

required

 필수입력
 input

step

 일정 패턴으로 값증가. (3으로 지정시 3,6,9 형태)



6-6) 추가된 INPUT TYPE (Form / Input)
추가된 INPUT/TYPE은 브라우저에 따라 다르게 동작하거나 지원하지 않는 브라우저가 많은 경우가 있어 해당 기능을 사용하는 대신 Jex에서 제공하는 API( FORMATTER, JEXINPUT 등)를 활용하시길 권장합니다. (차후 협의를 통하여, 지원하지 않는 브라우저에 대해 Script/CSS로 구현할지를 결정)

 Element

 attribute

 Description

 input

color

 색상값을 입력받음. 현재 OPERA만 지원

 input

date

 날짜를 입력받음. 

 input

datetime

 날짜/시간을 입력받음

 input

 datetime-local

 타임존과 함께 날짜시간을 입력받음

 input

 email

 EMAIL을 입력받음

 input

month

 월 값을 입력받음

 input

number

 숫자만 입력받음

 input

range

 범위안의 값을 입력받음.(그래픽적으로 표현)

 input

search

 검색데이터를 입력받음.(inputbox에 X표시가 생겨 X표시 클릭 또는 ESC입력시 해당 값이 초기화됨.)

 input

tel

 전화번호를 입력받음 (현재 지원브라우저 미존재)

 input

time

 시간을 입력받음.

 input

url

 URL 입력받음



7) HTML5 미지원 브라우저에서 HTML5사용을 위해 처리해야할 내용 정의
7-1) html5shiv.js 파일 include
해당 js는 html5를 지원하지 않는 브라우저에 대해서 html5의 ELEMENT정의 및 Script기능 css3확장등을 제공합니다.

7-2) ie-css3.htc 파일 include
html5shiv와 겹치는 부분이 있는지 검토필요.
css작성시 가장아래에 behavior:url(ie-css3.htc) 를 넣어주면 많은 css3지원


7-3) html5-Strick.css 개발
W3C인증 받기에 적합한 HTML문서를 작성하기 위해, 위에 정의한 엄격한 문서 검증을 위한 css파일을 개발합니다.
해당 css에서는 display:none 또는 강조 표시등을 통해서 개발자/퍼블리셔의 실수로 인한 지원 마크업 사용을 엄격히 규제 합니다.
또한 HTML5에서 새로 정의된 HTML5의 마크업을 정의합니다.

7-4) html5-jex.js 개발
추가된 input box정의 요소나, 엄격한 form규제 등의 일부 그리고 접근성을 위해 유용한  마크업을 정리하여 javascript영역에서 구현하여 줍니다. (지원하지 않는 브라우저를 위함)

7-5) DEMO사이트 개발 및 차후 개발되는 사이트의 HTML5 적용
현재 HTML4또는 XHTML로 구현되어 있는 데모 사이트를 순차적으로 HTML5로 작성합니다. 또한 앞으로 작성되어야 할 웹페이지에 대한 HTML5 사용을 권고하여 현재 문서에 작성되어 있는 내용을 보강하고 HTML5대응 프로그램을 보강할 수 있도록 합니다.


7-6) 가장 쉬운 HTML5도입 방법
보안모듈중 CHROME / FIREFOX에 설치하면 해당 브라우저에서 IE모드로 작동하여 사용하게 지원해주는 보안모듈이 존재합니다. 이를 역으로 생각해서 IE6,IE7,IE8 사용시 CHROME FRAME 설치(ActiveX 보안모듈을 강제로 설치하는 형태)를 유도 하는 방법을 활용한다면, HTML5지원도 수월하고, 사용자 입장에서 빠른 성능(스크립트엔진 성능의 차이가 10배 이상) 을 느낄수 있고 개발사 입장에서도 테스트 케이스를 줄일 수 있는 장점이 있습니다. 이 방법에 대해서 고객을 설득할 수 있다면, 개발공수 절약 및 더욱 안정적이고 빠른 서비스가 가능하다는 장점이 존재합니다.



======================= 일단 끝 =========================



사설 #01

후..-_- 오랫만에 구조화되고 복잡한 문서를 작성하려니.-_- 또가 나올것 같습니다.

군대 있을적 행정병으로 열심히 문서작성할때가 떠오르며, 유격보다는 문서작성이 무서웠던 악몽이 떠오르네요.ㅠㅠ

사내에서 HTML5적용을 위해 만든 문서이긴 하지만, ...회사에서 글 내리라고 하면...힘이 없는 저는 이 문서를 내리게 될수도 있짐나....HTML5를 지원하지 않는 브라우저를 위한 고민을 하는 분들을 위해 해당 문서를 공개로 작성합니다.^^


사설 #02

이 문서에서 HTML5를 도입하기에 필수적인 요소인 html5shiv기능을 제안한 사람이              무려 Jquery, Sizzle등을 만드신 "john Resig"님였군요. 이분 javascript역사를 마구 바꾸어대는 어마어마한 분이 되어 가는것 같습니다.

저는...언제쯤 이런사람이 될수 있을까요.ㅠ_ㅠ.....아 이런사람 보면 제가 왜 이리 초라하게 느껴지는지.ㅠ_ㅠ



  1. Favicon of https://twitter.com/#!/1004lucifer BlogIcon 허욱 2012.06.15 19:54 신고

    기능이 너무 제한적이네요..ㅎ
    특정 브라우저가 아닌 대부분의 브라우저에서 html5가 일반적으로 쓰이려면 얼마나 기다려야 하려나요..ㅎㅎ

    • Favicon of http://iamgil.com BlogIcon 길OI 2012.06.16 13:32 신고

      지금 당장 일반브라우저에서의 사용은 크롬프레임을 퍼트리는게 답인듯 해요.ㅎㅎ

  2. Favicon of http://humble.linux-lab.net BlogIcon humble 2013.05.30 03:45 신고

    멋진 포스팅 잘 보고 갑니다. 감사합니다.

최근 javascript코딩을 하다보면, hash처리가 상당히 유용하게 사용됩니다.

javascript로 그린 게시판을 예로 들면, 페이지 번호로 url을 찾기가 어렵다거나 하는 문제가 생기죠.

그래서 hash를 많이 사용하고,

hashchange 이벤트도 유용하게 사용됩니다.

하지만 문제는 any브라우징입니다.

MS에서 친히 만드신 IE7 이하 버전에서는  hashchange 이벤트가 잡히지 않기 때문입니다.
(혹시 제가 잘못 알고 있다면, 댓글로 알려주시면 감사..^^;;)

그리하여, setInterval 을 사용하여, 주기적으로 hash값을 체크하는 방법으로 처리해 버렸습니다.

무한루프 같은 느낌이어서, 좀 마음에 걸리기는 하지만, (0.5초 간격으로 체크시에) 실제로 사용하는 cpu사용량에는 별 문제가 없기에 다음과 같이 처리 했습니다.

더 좋은 방법이 있으신 분은 트랙백으로 공유 부탁드리겠습니다.


 코드는 아래와 같습니다.

if (window.addEventListener ) {

window.addEventListener('hashchange', function() {

해쉬 이벤트 발생시 처리할 함수();

},false);

} else if (window.attachEvent) {

this.beforeHash = location.hash;

// 0.5초 간격으로 hash값 체크

setInterval(function() {

if (beforeHash==location.hash) return;

해쉬이벤트시 처리할 함수();

beforeHash = location.hash;   // beforeHash는 전역변수..

},500);

}

 
타팀에서 daum에디터를 사용하려는데 JSON.stringify(json) 사용시

array에 대해서 2중 String변환이 일어나 문제가 발생 한다고 기술지원 요청이 왔습니다.

일단 디버깅을 해보니, daum에디터에서 array에 대해서 toJSON을 구현해 두었더군요;;

toJSON은 array를 String으로 변환해줍니다.



문제는 json2.js 239라인 에 아래와 같은 구현이 있다는 것입니다.

        // If the value has a toJSON method, call it to obtain a replacement value.

        if (value && typeof value === 'object' && typeof value.toJSON === 'function') {
         if (typeof value.toJSON(key) !== 'string') value = value.toJSON(key);
        }


네!! toJSON()이 구현되어 있는 경우에 대해서는, toJSON(key)을 실행하도록 해주네요;

그러면서 배열에 대해서 toJSON이 실행되고, 값은 String으로 변환된 상태에서 json2.js는 또한번 String으로 변환하는 문제가 발생합니다;



그래서 위 코드를 아래와 같이 변환하여 주었습니다.

       // If the value has a toJSON method, call it to obtain a replacement value.

        if (value && typeof value === 'object' && typeof value.toJSON === 'function') {
         var v2=value.toJSON(key);
         if (typeof value.toJSON(v2) === 'string') return v2;
         else          value = v2;
        }



toJSON()함수가 있을때 실행해봐서; string이 나오면, 그 string을 return하게 합니다;

테스트해보니; 일단은 잘 돌아갑니다.




아래와 같은 방법도 있습니다.

위보다 성능은 더 떨어질듯 하지만 코드는 아래가 더 이뻐보이네요.ㅎㅎ

 

        // If the value has a toJSON method, call it to obtain a replacement value.

        if (value && typeof value === 'object' && typeof value.toJSON === 'function') {
         if (typeof value.toJSON(value.toJSON(key)) !== 'string') value = value.toJSON(key)
        }

방법은 toJSON을 실행해봐서 결과가  "string"으로 나오면; 무시하고 아닌경우에만

value = value.toJSON(key) 로직을 실행하는 것입니다.


처는 먼저 방식으로 처리 했고; 해당 파일은 첨부하겠습니다.^^;

저처럼 삽질하는 사람이 줄기를 바라는 마음에..^_^.ㅋㅋㅋ


+ Recent posts

티스토리 툴바