블로그 이미지
올해목표 // 10월 어학연수 떠나자~ 자수씨

카테고리

전체글 (1457)
Brand New! (28)
주절주절 (213)
MOT (11)
해외쇼핑 (49)
쇼핑노트 (150)
취미생활 (94)
iPhone (4)
Eclipse (121)
Google (83)
Spring (31)
JAVA (176)
JavaScript (59)
WEB (49)
HTML (2)
CSS (4)
Web Browser (6)
JBossAS (27)
Weblogic (1)
GlassFish (2)
Database (20)
OS (26)
Tools (8)
Tips (26)
IT정보 (1)
Book (21)
Programming (37)
외부행사 (43)
주변인들 (17)
여행노트 (60)
학교생활 (30)
회사생활 (52)
사회생활 (5)
외국어공부 (12)
잡동사니 (30)
Total
Today
Yesterday
 
04-27 13:59
 

달력

« » 2024.4
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30
 

최근에 올라온 글

최근에 달린 댓글

IE9 에서 Ext JS로 개발된 모듈들이 가끔 스크립트 오류가 나거나 화면에 정상적으로 렌더링 되지 않을 때가 있어 호환성 보기나 헤더에 에뮬레이터 설정을 하게되는데, 가끔 대박 꼬일 때가 있더군요...

 

일단 정리들어갑니다.

 

1. 헤더 설정 X, 호환성 보기 X - 오류

별도의 헤더 설정(httpd 서버 설정이나 메타 태그 등)을 하지 않고 호환성 보기도 하지 않으면 아래와 같이 브라우저가 설정이 됩니다.

- 브라우저 모드: IE9

- 문서 모드: IE9 표준

 

이 상태에서는 제가 관리하는 화면에서 스크립트 오류가 발생하게 됩니다.

 

2. 헤더 설정 X, 호환성 보기 O - 정상

IE에서 제공하는 호환성 보기를 설정하면 아래와 같이 주소창 끝에 찢어진 페이지가 파란색으로 활성화됩니다.

- 브라우저 모드: IE9 호환성 보기

- 문서 모드: IE7 표준

 

이 상태에서는 정상적으로 표시가 되나, 모든 PC에 호환성 보기를 설정할 수 없어 다른 대안을 찾아야 했습니다.

 

3. 헤더 설정 O, 호환성 보기 O - 오류

apache http server 에 아래와 같은 설정을 했습니다. (호환성 보기 설정보다 헤더 설정이 우선적으로 먹기 때문에 현 상태에서는 호환성 보기는 의미가 없습니다.)

<IfModule headers_module>
   Header set X-UA-Compatible: IE=EmulateIE8
</IfModule>

- 브라우저 모드: IE9 호환성 보기

- 문서 모드: IE8 표준

 

이 상태에서는 렌더링이 정상적으로 되지 않는 문제가 있었습니다.

 

4. 헤더 설정 O, 호환성 보기 O - 정상

헤더 설정 없이 호환성 보기만 했을 때의 상태를 만들기 위해 IE7 에뮬레이트 설정을 해보았습니다.

<IfModule headers_module>
Header set X-UA-Compatible: IE=EmulateIE7
</IfModule>

- 브라우저 모드: IE9 호환성 보기

- 문서 모드: IE7 표준

 

기능도 정상적으로 되고 렌더링도 정상적으로 됩니다. 결국 이쪽으로 가야할 듯 한데... 팀장님하고 이야기를 해봐야 겠군요...

 

 

IE9에서 제공해주는 호환성 보기는 IE7으로 에뮬레이션 해주는 것이란 것을 이번에 알게되었습니다. 어중간하게 IE8으로 에뮬레이션하는 것 보다는 헤더에 IE7으로 에뮬레이션해주는 헤더를 삽입하는 것이 제가 작업하는 환경과 맞을 것 같네요...

 

Posted by 자수씨
, |

기본적으로 인터넷 익스플로러 개발자 도구에서는 스크립트 디버깅을 제공합니다. 예전에 자바스크립트 아르바이트를 했을 때 유용하게 사용했던 개발자 도구가 IE9 에서는 좀 더 쓸모있는 도구로 업그레이드해서 나왔습니다.

F12 키를 이용하여 개발자 도구를 활성화 할 수 있습니다. IE8에서는 기본 보기가 새창으로 개발자 도구를 띄웠지만 IE9에서는 기본으로 firebug와 유사하게 현재 창에 붙어서 활성화 됩니다. 아래 빨간 네모의 버튼을 누르면 새로운 창으로 개발자 도구가 뜨게 됩니다.


사용하시는 모니터 해상도가 큰 편이시라면 위의 방식대로... 작은 모니터를 사용하신다면 새 창을 띄워서 사용하시는 것이 좋을 듯 하네요.



새로 추가된 네트워크 기능입니다. 정확하게 이야기 하자면 모든 요청에 대한 응답을 캡쳐하는 기능입니다.
이 기능을 이용하여 응답이 없는 불필요한 요청 시도를 걸러낼 수 있습니다. 제 블로그에도 404가 떨어지는 군요... 털썩...



자바스크립트 직접 실행은 콘솔 탭에서 가능합니다.
javascript:resizeTo(800, 600) 을 실행해보면...



쉽게 창을 줄일 수 있습니다. 예전처럼 주소창에 자바스크립트를 실행시키지 않아도 제어가 가능합니다.



재미있는 기능 중 하나인 눈금자 기능입니다. 도구 - 눈금자 표시 메뉴를 선택하면 아래와 같은 눈금자 창이 뜨게 됩니다. 눈금자 색상을 선택하고 브라우저를 클릭하고 원하는 방향으로 드래그를 하면 눈금자가 표시되게 됩니다.



도구 - 색상표 표시 메뉴는 컬러 피커의 기능을 제공합니다.



개발자 도구의 실제 핵심에 대해서는 살펴보지 못하였습니다. 다음 번에 기회가 된다면 개발자 도구의 핵심인 스크립트 디버깅에 대해 포스팅하도록 하겠습니다.

Posted by 자수씨
, |

자바스크립트 개발자에게 꼭 필요한 것이였지만 IE8 에서 처음 등장한 개발자 도구는 firebug 의 일부 기능만 가능케하여 어쩔 수 없이 다른 애드온이나 파이어폭스를 쓰는 경우가 있었습니다.

하지만 이번에 IE9 베타 에서는 위의 어쩔 수 없는 경우가 개선이 되어 나왔습니다.


(상단이 IE9, 하단이 IE8) 일단 기본적으로 불필요할 것으로 보이는 개요 메뉴가 사라졌습니다. 그리고 위에서 어쩔 수 없는 경우라고 했던 네트워크 탭이 추가되었습니다. 그리고 콘솔은 스크립트 탭에서 바깥으로 빠져나왔습니다. 은근히 콘솔 창을 많이 쓰게 되는데 개발자들의 니즈를 많이 반영한 듯 합니다.



파일 메뉴는 변경된 사항이 없습니다.



찾기 메뉴도 변경 사항은... 없습니다.











<<<<<<<<<<------  여기까지는 변경 사항이 없습니다.



도규 메뉴에 새로운 기능이 추가되었습니다. "사용자 에이전트 문자열 변경" 과 "윤곽선 요소" 입니다.
사용자 에이전트 문자열 변경은 화면에 표시되는 기본 폰트를 변경하는 것으로 보이고, 윤곽선 요소는 아무리 만져봐도 뭔 기능인지 아직까지는 잘 모르겠습니다.;;;




다음 포스팅에서는 개발자 도구의 기능 중 몇 가지를 자세하게 살펴보겠습니다.

Posted by 자수씨
, |

지난 16일 한국에서 IE 9 베타 런칭 행사가 있었습니다. 베트남에 있어 가보지는 못 하였지만 그래도 설치는 할 수 있기에...

유의사항은... Vista 와 Windows 7 밖에 지원이 안되는 점입니다.


설치를 완료하여 IE9 을 실행시켜본 순간 첫 느낌은...

'ActiveX 가 되는 크롬 브라우저에 firebug 가 있네?'

조금 더 살펴봐야 알겠지만... 경쟁 브라우저의 기능들을 많이 흡수한 것 같습니다.

자세한 기능은 차차 살펴봐야겠습니다.

Posted by 자수씨
, |

어느 순간부터 웹 상에서 아이디와 패스워드 같은 것을 저장해두면 이틀 후에 삭제가 되는 것이었습니다.

Windows 7 + IE 8 조합에서 발생하는 버그인 줄 알고 여러 곳에서 찾아보았지만 답을 찾을 수 없었습니다.

그러던 도중 아래의 포스팅처럼 "-nomerge" 옵션으로 세션을 공유하지 않도록 설정하였는데... 이것이 문제였습니다.
2010/01/25 - [WEB] - 웹 개발자들에게는 대 재앙...으로 다가올 뻔한... Windows 7 + IE 8

nomerge 옵션의 경우 세션 뿐만 아니라 쿠키까지 연관이 있다고 합니다.

그래서 처리한 방식은 아래와 같이 레지스트리에 특정 값을 등록하였습니다.
Windows Registry Editor Version 5.00

[HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\Main]
"FrameMerging"=dword:00000000
"SessionMerging"=dword:00000000

일단은 설정은 해놓았으니 결과는 몇일 뒤에 나올 듯 합니다.

Posted by 자수씨
, |

extjs 인쇄 테스트하다가 IE 에서는 되는데 FF 나 Chrome 에서는 특정부분에 인쇄가 되지 않아 계속 테스트 해본 결과 input 의 value 가 innerHTML 의 값으로는 뽑아지지 않는 것을 확인하였습니다.
인쇄외에도 innerHTML 에서 값이 뽑아지지 않는다면 제너레이팅 된 HTML 문서를 따로 저정할 경우 input 필드들은 빈 값으로 저장되는 문제가 발생할 수 있기에 해결책을 찾기 시작하였습니다.


검색은 역시 구글입니다. 네이버에서 검색하니 이상한 결과들만....
http://forums.whirlpool.net.au/forum-replies-archive.cfm/385091.html

As a simple example (which will hopefully work straight off):

<input type="text" value="initial" onblur="this.setAttribute('value',­ this.value);" />

Al.



setAttribute 를 innerHTML 하기 전에 가지고 오면 될 것 같다는 힌트를 주시는 군요




어떤 브라우저가 정상적으로 표현을 하는지는 몰라도... (물론 IE 가 웹표준 안지키기로 유명하긴 하지만)
웹 개발자의 비애는 끝이 없습니다. ㅋㅋㅋ

십자수 매장이나 차릴까....


Posted by 자수씨
, |

글 보관함

최근에 받은 트랙백