블로그 이미지
올해목표 // 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)
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-20 08:40
 

달력

« » 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 자수씨
, |

글 보관함

최근에 받은 트랙백