인터넷 익스플로러 9 이하에서 CORS(Cross-origin resource sharing) 설정.

정적인(static) 파일은 보통 CDN(Contents Delivery Network)과 연결하여 사용자에게 빠르게 전달한다.
사용자 입장에선 빠르게 콘텐츠를 받아볼 수 있어 좋고,
관리자 입장에선 서버에 부담을 줄여줘서 좋다.
그러나 외부 CDN을 이용할 땐 주의해야 한다.
인터넷 익스플로러 대마왕이 CDN을 편히 쓰도록 가만히 놔두질 않기 때문이다.
만약 스타일 시트를 CDN에 올려놨다면, 인터넷 익스플로러에서 처참하게 망가진 화면을 만나게 될 것이고,
Ajax로 CDN 서버에 요청을 한다면 404 오류코드(파일은 내가 처리했다. 다음은 너 차레야라는 뜻.)를 만나게 된다.
이것은 재앙이며, 개발자에겐 악몽을 선사한다.

우리나라는 1999년 전자서명법을 시행하면서 액티브X를 중심으로 하는 공인인증제가 도입됐다.
이것이 인터넷 익스플로러 대마왕의 힘을 키워준 것이 되었고,
웹 개발자(특히 한국 개발자)는 새천년 밀레니엄의 시작과 함께 인터넷 익스플로러 대마왕과 힘겨운 싸움을 이어와야 했다.
최근에는 인터넷 익스플로러에서 보안 결함이 발견되어 영국과 미국 정부에서 인터넷 익스플로러를 쓰지 말라는 권고를 내리기도 했었다.
(http://www.telegraph.co.uk/technology/microsoft/10793272/Dont-use-Internet-Explorer-warns-US-government.html)
물론 이 문제가 패치 되긴 했지만(http://techcrunch.com/2014/05/01/microsoft-patches-latest-internet-explorer-security-flaw-even-for-xp-users),
인터넷 익스플로러는 여전히 골칫거리여서,
'인터넷 익스플로러 쓰지 마세요.'(http://donotuseie.com)라는 사이트가 있을 정도다.

마음 같아서는 인터넷 익스플로러를 무시하고 개발하고 싶다.
그러나, 한국에선 인터넷 익스플로러가 갑이다.
인터넷 익스플로러에서만 돌아가는 웹사이트가 수두룩하기 때문이다.
'한국 사람들은 인터넷 익스플로러를 써요. 법이거든요.'(http://www.zdnet.com/south-koreans-use-internet-explorer-its-the-law-7000022827)라는 기사에서도 볼 수 있듯,
우리나라는 인터넷 익스플로러 사용자 인구가 많다.
게다가 10부터는 그나마 좀 나은데, 우리나라는 8을 제일 많이 쓴다.
statcounter 작년 5월부터 올해 5월까지 통계를 뽑아보니 한숨이 나온다.

브라우저 이용 현황, 한국-'인터넷 익스플로러(IE) 9이하에서  CORS 설정'

그럼 전 세계적으로는 어떤 브라우저를 많이 쓸까?

브라우저 이용 현황, 전세계-'인터넷 익스플로러(IE) 9이하에서  CORS 설정'

크롬이 압도적이고, 다음은 파이어폭스다.
하지만 한국의 개발자가 웹 어플리케이션을 만들려면, IE8 이상은 지원해야 된다.
대한민국은 인터넷 익스플로러 강국이니까.

인터넷 익스플로러(IE) 9이하에서 CORS 설정.

CDN서버에 CORS 설정을 해 두고, 아래 코드를 적용하면 된다.

우선 CSS를 제대로 보여주기 위한 Respond.js 설정이다.

마크업

여기에서 static_path는 CDN서버의 주소이다.
<!DOCTYPE html>
...
<html><head>
<!--[if lt IE 9]><>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<link href="#{static_path}/js/vendor/respond-proxy.html" id="respond-proxy", rel="respond-proxy">
<link href="/ie/respond/respond.proxy.gif" id="respond-redirect", rel="respond-redirect">
<script src="/ie/respond/respond.proxy.js"></script>
<![endif]--></head>...</html>


서버단 flask

/ie로 요청이 들어오면, 어플리케이션의 루트안에 ie폴더에서 파일을 찾아 응답한다.
@app.route('/ie/')
def base_static(filename):
print('app root path '+str(app.root_path))
print('app filename '+str(filename))
return send_from_directory(app.root_path + '/ie/', filename)

그리고 jQuery ajaxTransport XDomainRequest(https://github.com/MoonScript/jQuery-ajaxTransport-XDomainRequest)를 다운받아 jquery 다음에 불러 놓으면,
인터넷 익스플로러에서 자동으로 CORS처리를 해준다. 내겐 이게 제일 간편하고 좋았다.

인터넷 익스플로러의 횡포가 계속된다면 '한국에서 인터넷 익스플로러를 무찌를 레이드 파티 구합니다.'라는 공고가 올라올지도...?

참조



by


Tags : , , , , , , ,

  • 재미있게 읽으셨나요?
    방랑자의 이야기.
    월풍도원에선 기부를 받습니다.

특정 조건으로 검색을 자주 한다면, 자신만의 파이어폭스 검색 에드온을 만들어 보세요.

자주 쓰는 검색 조건이 있으신가요?

만약 특별히 자주 쓰는 검색 조건이 있다면,

기본 검색 에드온으로 검색한 다음에, 일일히 조건을 지정하시기는 참 귀찮은 일입니다.

자신만의 파이어폭스 검색 애드온을 만들면, 이런 수고를 덜어줘요.

 

파이어폭스용 검색 에드온 만들기

아래의 양식으로 문서를 만든 후 search-engine-name.xml 포멧으로 저장하세요.

firefox/Data/profile/searchplugins 폴더 혹은 Firefox/searchplugins 폴더에 파일을 복사해 넣으세요.

 

파이어폭스용 검색 에드온 양식

 

<SearchPlugin xmlns="http://www.mozilla.org/2006/browser/search/" xmlns:os="http://a9.com/-/spec/opensearch/1.1/"><<os:ShortName>검색 엔진 이름</os:ShortName>
<os:Description>검색엔진 설명</os:Description>
<os:InputEncoding>UTF-8</os:InputEncoding>
<os:Image width="16" height="16">이미지의 base64코드</SearchForm>
<os:Url type="text/html" method="GET" template="검색엔진주소[query={searchTerms}]">
</os:Url>
</SearchPlugin>

 

아마 사람마다 즐겨 검색 하는 조건이 다를 거에요.

예를 들자면 저는 구글에서 최근 1년사이의 정보를 찾는 횟수가 잦습니다.

그리고 페이지 넘기는게 귀찮으니 한번에 50개 정도 검색 결과가 나오면 좋겠군요.

그리고 검색된 링크를 새 창으로 띄우면 더 편하겠어요.

이 조건을 적용하면 아래와 같은 검색 주소가 나옵니다.

 


http://www.google.com/search?num=50&amp;hl=en&amp;newwindow=1&amp;tbo=1&amp;output=search&amp;source=lnt&amp;tbs=qdr:y&amp;sa=X&amp;sourceid=navclient&amp;gfns=1&amp;q={searchTerms}

이 주소를 Url template 란에 넣어주면 되는거에요.

Image의 경우는 16*16 크기의 그림파일을 열어 base64코드로 변환해 줍니다.

아래 사이트에서 base64코드로 변경 할 수 있어요.

base64 sample decoder and encoder

 

이미지는 건너 뛰어도 무리없이 작동합니다.:D

 

또 제가 꽤 자주 쓰는 검색엔진이 있는데, 바로 국립국어원 표준국어대사전입니다.

국어 사전을 볼 때마다 제가 한국에 태어난 걸 참 다행이라고 생각해요.

이걸 외국어로 배우려고 했으면 얼마나 머리가 아팠을지.. 어휴.

 

파이어폭스용 국립국어원 표준국어대사전 검색 애드온이 필요하시다면 아래 링크에서 내려받으세요.

https://addons.mozilla.org/en-US/firefox/addon/표준국어대사전

 

검색 에드온에 대해 더 자세히 알고 싶다면 아래 링크를 참조하세요.

Creating OpenSearch plugins for Firefox

 



by


Tags : , , , , , ,

  • 재미있게 읽으셨나요?
    방랑자의 이야기.
    월풍도원에선 기부를 받습니다.

모질라 파이어폭스 포터블을 상위 버젼으로 업데이트 할 때, 쓰던 환경 설정을 그대로 사용 하는 간단한 방법을 소개합니다.

오랫동안 파이어폭스 3.6.18버젼을 써 오다가 이번에 파이어폭스를 두 차례나 업데이트 했습니다.
파이어폭스 5.0.1버젼으로 버젼을 올렸을땐 왠지 모르게 엄청 버벅이더군요.
오랫동안 친하게 지내왔던 모질라 파이어폭스를 외면해 버리고 싶을 정도로...
그래서 6.0b를 다운받아 사용해 보니 아주 만족스럽네요.
설정에 대한 이야기를 하기 전에 우선,버젼별 메모리 점유율과, 모양을 비교해 보겠습니다.
by 月風


파이어폭스 포터블 설정

3.6.18 메모리 점유율-'파이어폭스 포터블 설정'
파이어폭스 3.6.18에서의 메모리 점유율
5.0.1 메모리 점유율-'파이어폭스 포터블 설정'
파이어폭스 5.0.1에서의 메모리 점유율
6.0b 메모리 점유율-'파이어폭스 포터블 설정'
파이어폭스 6.0b에서의 메모리 점유율

아무래도. 6.0b를 쓸 때 부가기능을 하나 지우고,
부가기능 하나는 옵션을 조정한 것이 크게 도움이 된 것 같습니다.
지워버린 파이어폭스 부가기능은 SeoQuake에요. 사이트의 페이지랭크와 인바운드 링크등을 보여주는 SEO도우미죠.
그런데 제가 쓰기엔 너무 무거운 부가기능 입니다. 그래서 과감히 지웠죠. 체감속도가 바로 올라가는군요.
그리고 설정을 변경한 부가기능은 Yslow에요. 페이지 로딩 속도를 빠르게 하기 위한 체크리스트를 보여주는 툴로 아주 유용합니다.
하지만 사용할 때만 켜서 써도 충분해요. 페이지를 로딩할 때 마다 몇 초 걸리는지 계산을 할 필요는 없죠.
이렇게 부가기능을 정리하고 나니 확실히 체감 속도가 올라갔습니다.

3.6.18 화면-'파이어폭스 포터블 설정'
모질라 파이어폭스 3.6.18 화면

5.0.1 화면-'파이어폭스 포터블 설정'
모질라 파이어폭스 5.0.1 화면

6.0b 화면-'파이어폭스 포터블 설정'
모질라 파이어폭스 6.0b 화면

파이어폭스 3.6.18에서 5.01로 바꾸었을땐 '꼭 크롬 같이 바뀌었네.' 라는 생각이 들었고,
5.01버젼과 6.0b버전은 보기에 별 차이가 없네요.
그럼 이제 본론으로 들어가겠습니다.
버전을 올릴 때 마다 설정을 다시 해 줘야 한다면 여간 귀찮은 일이 아니죠?
원래 있던 파이어폭스의 폴더 하나만 새 버젼의 파이어폭스 폴더에 복사하면 쓰던 설정 그대로 사용 할 수 있습니다.
 

FirefoxPortable\Data\profile
 

이 설정 폴더를 새로운 버전의 파이어폭스에 복사하시면 됩니다.
이제 설정은 쓰던 그대로 인데, 버전이 올라가면서 부가기능을 사용할 수 없게 되는 경우가 있어요.
그럴 땐 호환성을 관리해주는 Add-on Compatibility Reporter 부가기능을 설치하시면,
낮은 버전에서 쓰던 부가기능을 사용할 수 있어요.:D

파이어폭스 포터블 테스트 버젼 다운로드 (6.0b)

파이어폭스 포터블 다운로드(5.01)



by


Tags : , , , , , ,

  • 재미있게 읽으셨나요?
    방랑자의 이야기.
    월풍도원에선 기부를 받습니다.

구글 크롬에서 그리즈몽키 사용하기 (How to use greasemonkey in chrome)[크롬,그리즈몽키,chrome,greasemonkey]

이미지출처 : www.guru63.com

구글 크롬에서 그리즈몽키 사용하기 (How to use greasemonkey in chrome)











현재 좌파폭 우크롬을 쓰고 있다.

파폭은 주로 API볼때랑 검색할때 사용하고,

크롬은 업무보고, trac,  블로그, 미투데이등 뭔가 작성할때 사용하고 있다.

그리하여.. 블로그에 글을 올릴때도 크롬을 사용하는데,

피카사에서 사진 링크를 가져올때마다 너무 불편한거다.ㅠㅠ

피카사 페이지를 좀 편하게 만들고 싶어서 찾아봤더니 괜찮은 그리즈몽키 스크립트가 있는데,

크롬에서 쓸라고 하니 플러그인을 설치할수도 없고..

아 어찌하나, 파폭에서 써야되나..

그리즈몽키를 크롬에서는 사용할 수 없을까?

이런저런 생각을 하면서 구글한테 물어보니 이것저것 많이 나와서 찾아보다보니,

좀 부실하긴 하지만 나름 간단하게 쓸 수 있게 되어있었다.

----

I use browsers likes that firefox on left,chrome on right.

Firefox use to see API and search anything.

Chrome use to write a report and create posts on blog.

When I posting, I am felling like an inconvenience cause It's uncomfortable that I get image link on Google Picasa.

Then I decide to use greasemonkey for getting image link more comfortable.

But chrome not support plug-ins yet, what can I do?


1. 크롬을 설치한다.
   Install a recent Chrome.

2. 크롬을 실행할때 --enable-greasemonkey 옵션을 준다.
   Launch chrome with the --enable-greasemonkey flag.
   (숏컷에서 사용할경우 "PATH/chrome.exe" "--enable-greasemonkey")

3. C:/scripts 폴더에 그리즈 몽키파일(*.user.js)을 넣는다.
   Copy greasemonkey file(*.user.js) to the C:/scripts.

4. 해당페이지로 가서 새로고침을 해보고, 적용이되면 그대로 사용하고, 아니면 크롬을 재시동 한다.
   Just refresh the page or relaunch chrome.
 
 
끝~~!
The end.



아 이 얼마나 간편한가?!
How simple it?!

필요한 그리즈몽키 코드들은 Userscripts.org에서 쉽게 구할수 있다.
You can get easily any greasemonkey scripts in Userscripts.org.

편하게 살자.ㅋ
Live comfortable!:D


[Reference]
http://mashable.com/2008/12/15/google-chrome-greasemonkey-scripts/



by


Tags : , , , , , , , , ,

  • 재미있게 읽으셨나요?
    방랑자의 이야기.
    월풍도원에선 기부를 받습니다.