작은 자유

Mobile JS File Cache Limit

ohgyun — Thu, 09 Feb 2012 18:35:00 +0900

발생일: 2012.02.09

문제:
이번에 모바일 프로젝트를 하나 맡게 됐다.

기획서를 검토하고 구조를 잡던 중에,
예전에 어떤 가이드에서 iOS에서는 스크립트 사이즈가 몇 kb 이상이면 캐시가 되지 않는다고 했던 게 기억났다.

꽤 오래 전이었던 걸로 기억하는데,..
아직도 유효한가?

해결책:
스티브 사우더스가 모바일 캐시 파일 사이즈에 대해 아주 잘 설명해놓은 포스트가 있다.
http://www.stevesouders.com/blog/2010/07/12/mobile-cache-file-sizes/

요약해보면,
한 세션 당, (여기서 세션은 한 페이지에서 다른 페이지로 이동하는 것을 의미한다)
스크립트 한 개의 파일 당 iOS는 4MB까지, 안드로이드는 2MB까지 캐시가 된다.

물론 버전에 따라 약간씩 다르긴 하다.

또한, 폰을 잠궜다가 다시 들어갔을 때에도 캐시는 유효하다.
전원을 껐다 켰을 경우, iOS는 캐시가 모두 삭제된다.

성능 팀에서 테스트 한 자료에 의하면,
스크립트 사이즈가 작을 경우(256kb 이하, iOS4.3) 전원을 껐다 켜도 캐시가 된다고 한다.
스티브 사우더스의 실험 결과와는 차이가 있는 부분이다.

HTML 페이지의 경우, iOS3 이하에서는 25.6kb 이하가 될 때에만 캐시된다고 한다.
아마 내가 기억하고 있던 예전 사이즈가 HTML 사이즈였던 모양이다.
4.3 버전의 경우, 약간 늘어서 128kb 까지 캐시가 된다고 한다.

시간이 좀 된 자료지만, YUI 블로그의 포스트를 참고해봐도 좋겠다.
http://www.yuiblog.com/blog/2010/07/12/mobile-browser-cache-limits-revisited/

Charles 에서 HTTPS 패킷 확인하기

ohgyun — Tue, 31 Jan 2012 19:54:15 +0900

발생일: 2012.01.31

문제:
HTTP 패킷 확인 툴로 찰스(Charles)를 주로 사용하고 있다.
이번에 HTTPS 요청을 테스트할 게 있어서 모니터링을 시도했으나, 자꾸 Fail이 난다.

브라우저는 크롬을 사용하고 있다.

왜 그런 걸까.

해결책:
혹시나 해서 익스플로러에서 HTTPS 모니터링을 시도해보니, 신뢰할 수 있는 인증서냐고 물어본다.
신뢰할 수 있다고 체크하고 진행하니, IE에서는 정상적으로 보인다.

아무래도 크롬에서 인증서를 신뢰할 수 없어 튕겨내는 것 같다.

혹시나 해서, 찰스 가이드를 찾아보니 찰스가 SSL Proxying을 처리하는 방법에 대해 나와있다.

찰스는 브라우저와 SSL 웹 서버의 중간자(man-in-the-middle HTTPS Proxy)가 되는 방법으로 이를 처리한다.
브라우저는 서버의 인증서를 바라보는 대신에, 찰스가 동적으로 생성한 인증서(Charles CA Certificate)를 바라본다.
마찬가지로 응답 시에는 서버의 인증서를 찰스가 받고, 브라우저는 찰스의 인증서를 받는다.
이 방법으로 찰스는 암호화되지 않은 plain text를 볼 수 있다.
단, 브라우저가 찰스가 생성한 인증서를 신뢰해야 한다.

따라서, IE에서 그랬던 것처럼,
브라우저는 Charles CA Certificate가 신뢰할 수 있는 인증서이냐는 보안 경고를 띄운다.
신뢰할 수 있는 것이라 선택하면 진행할 수 있는 것이고, 아니라면 더 이상 모니터링 할 수 없다.

크롬은 IE와 다르게 신뢰할 수 없는 인증서면 암묵적으로 무시하나보다.
아니면 나도 모르게 언젠가 신뢰할 수 없다고 했다던가...

여튼, 요골 해결하려면 찰스가 동적으로 생성한 인증서를 신뢰할 수 있다고 크롬에게 알려줘야 한다.

1. 크롬에서 옵션 > 고급설정 > HTTPS/SSL > 인증서 관리를 클릭한다.
2. '신뢰할 수 있는 루트 인증기관' 탭을 선택하고, '가져오기' 버튼을 클릭한다.
3. 찰스가 설치되어 있는 폴더에서 charles-proxy-ssl-proxying-certificate.crt 파일을 찾아 가져온다.
4. 가져온 인증서를 신뢰할 수 있는 게 확실하냐고 묻는다.
그렇다고 하면 크롬은 찰스가 생성한 인증서를 쭈-욱 신뢰한다.

이 부분을 설정해도 해결되지 않았다면, 찰스에서 SSL 프록시를 사용할 것이라 체크했는지 확인해본다.

1. 찰스에서 Proxy > Proxy Settings > SSL 탭에서 'Enable SSL Proxing'을 선택한다.
2. Locations에 모니터링 할 호스트를 추가한다. 모든 사이트를 모니터링하고 싶을 경우, '*' 을 추가하면 된다.

요호~~ 이제 HTTPS 패킷 확인이 가능해졌다~~~~

크롬 익스텐션에서 document.documentElement 를 찾지 못하는 문제

ohgyun — Thu, 19 Jan 2012 11:42:34 +0900

발생일: 2012.01.19

문제:
며칠 전 크로미엄 버전을 18.0.1010.1 dev-m 버전으로 업데이트 한 이후로,
잘 작동하던 몇몇 익스텐션이 제대로 작동하지 않는다.

어느 부분에서 오류가 나나 찾아봤더니,
익스텐션에서 document.documentElement 를 찾지 못한다.

뭐가 문젤까?

해결책:
크롬 dev 버전이 18.0.1010.1로 업데이트 되면서 발생한 버그로 추정된다.

검색해보니 같은 문제로 2012.01.11에 버그 리포팅 된 것이 있다.
https://groups.google.com/a/chromium.org/group/chromium-bugs/browse_thread/thread/0e668df511f0b381

재현을 위해서는,
1. 익스텐션에서 아래와 같이 content script의 실행 시점을 document_start로 설정하고,
content_scripts: [
{
... (생략) ...
run_at: "document_start"
}
]

2. 스크립트 내에서 document.documentElement 를 접근하면 undefined가 뜨는 것을 확인할 수 있다.

아직 버그가 해결되지 않은 상태라 일단은,
임시 해결을 위해 스크립트 실행 시점을 기본값인 document_idle 로 변경하면 된다.

Git Tag로 버전 관리하기

ohgyun — Mon, 16 Jan 2012 01:20:44 +0900

발생일: 2012.01.16

문제:
담당하고 있는 서비스에서는 버전 관리 도구로 SVN을 사용하고 있다.
배포는 서버 개발팀에서 담당하고 있는데, 매 배포에 대한 버전 관리는 어떻게 관리하는 지 궁금해서 물어봤더니 각 릴리스에 대한 버전을 브랜치로 따서 관리한다고 한다.
예를 들어, v.1.0을 배포하고자 할 경우, Release Branch의 약어를 써서 RB-1.0 과 같은 이름의 브랜치를 따고, 해당 브랜치를 배포하는 식이다.

요새 Git으로 관리하고 있는 개인 프로젝트에서도 브랜치로 배포 버전을 따면 되겠구나~하고 생각하고 있었는데, 이것저것 알아보다 보니 실제로 브랜치보다는 태그(Tag)를 더 많이 사용하는 모양이다.

태그는 뭐고, Git에선 어떻게 사용하는 걸까?

해결책:

버전 관리 시스템에서 Tag란?
Tag는 특정 스냅샷에 대한 꼬리표(말 그대로 태그)다.
대부분의 버전 관리 도구에서 태그를 지원한다.

사실 지금까지는 습관적으로 trunk만 땡겨와 작업하고 있었는데, 이번 기회에 소스 리파지터리를 자세히 봐봤다.
이제서야 branches 영역과 tags 영역이 구분되어 있고, 개발팀에서는 브랜치를 굉장히 활발하게 활용하고 있다는 걸 알게 됐다.

SVN의 경우, 실제로 브랜치와 태그의 동작에는 차이가 없다고 한다.
두 가지 모두 동일하게 코드를 특정 영역으로 복사하는 것이며, 단지 의미 상의 차이만 있는 것이라 한다.
아마 그래서 서비스에서도 그냥 브랜치로 배포 버전을 관리하는 게 아닐까~~ 추측해본다.

Git에서 Tag 사용하기
Git에서도 태그를 지원하고 있다.

git tag 명령으로 간단하게 이미 만들어져 사용할 수 있는 태그를 조회할 수 있다.
특정 패턴을 가진 태그를 조회하고자 할 때엔 -l 옵션을 사용하면 된다.
예를 들어, git tag -l 'v.1.3.*' 을 실행하면, v.1.3의 태그들만 조회된다.

Git의 태그에는 Ligthweight Tag와 Annotated Tag 두 종류가 있다.
Lightweight Tag는 단순히 특정 커밋을 가리키는 포인터 역할을 하는 반면,
Annotated Tag는 태그를 만든 사람에 대한 정보, 태그 메세지, 서명 등을 추가할 수 있다.

Lightweight Tag는 간단하게 git tag <tagname> 과 같이 만들 수 있다.
예를 들어, git tag v1.3 를 실행하면, 현재 커밋에 v1.3이라는 태그를 붙인다.

Annotated Tag는 태그를 달 때, -a 또는 -s 옵션을 사용하면 된다.
옵션의 자세한 내용은 git tag --help 로 확인~~

적용한 내용의 태그를 조회하고자 할 때엔 git show <tagname> 을 실행~!
이 명령으로 각 태그의 커밋 정보를 조회할 수 있다.

실제로 jquey의 github을 보니 태그를 사용해 릴리스 버전 관리를 하고 있는 걸 볼 수 있었다.
https://github.com/jquery/jquery/tags

Git의 Tag, 잘 사용해보자~~

# 참고:
- SVN의 Branching/Tagging: http://wiki.kldp.org/wiki.php/SubversionBook/BranchingAndMerging

Git의 파일 상태

ohgyun — Mon, 16 Jan 2012 00:01:25 +0900

발생일: 2012.01.15

문제:
git에서 커밋할 때엔 항상 git add . 명령어로 커밋할 대상을 골라놓은 후,
git commit -m [message] 명령으로 커밋했다.

git add 가 정확히 어떤 것인지 모르고 습관적으로 실행했었는데,
이번에 책을 읽다가 알게된 내용을 메모해둔다.

해결책:

Git 프로젝트의 세 가지 단계
가장 먼저 Git 프로젝트의 세 가지 단계에 대해 이해해야 한다.

Git 프로젝트에는 Git Directory, Working Directory, Stating Area 세 가지 단계가 있다.
Git Directory는 Git이 프로젝트의 모든 정보를 저장하는 곳이다.
Git의 핵심이라 할 수 있고, Git을 새로 구축하거나 다른 저장소에서 Clone할 때 Git Directory가 만들어진다.

Working Directory는 프로젝트의 특정 버전을 Git Directory로부터 체크아웃 상태이다.
Staging Area는 곧 Commit 할 파일에 대한 정보를 저장한다. 단순한 파일이고 실제로 Git Directory 내에 존재한다.

Git으로 하는 일은 기본적으로 다음과 같다.
- Working Directory에서 파일을 수정한다.
- Staging Area에 파일을 Stage 해서 Commit 할 Snapshot을 만든다.
- Staging Area에 있는 파일들을 Commit 해서 Git Directory에 영구적인 Snapshot으로 저장한다.

Working Directory의 파일 상태
작업 디렉토리의 모든 파일은 크게 Tracked와 Untracked로 나뉜다.

Tracked는 Git의 관리 대상 파일임을 의미하고 반대로 Untracked는 관리 대상이 아닌 파일을 의미한다.

Tracked 파일들은 또 Unmodified(또는 Commited)와 Modified, Staged 상태로 나뉜다.
Unmodified는 수정되지 않은 파일을, Modified는 수정된 파일, Staged는 커밋 대상인 파일을 의미한다.

예를 들어, 새로운 파일을 만들고 Staging Area에 추가하지 않았다면 그 파일은 Untracked에 포함된 파일이다.
만약, Git의 관리 대상인 파일(Tracked)을 수정했지만 아직 Staging Area에 추가하지 않았다면, 그 파일은 Modified 이다.
파일을 수정하고 Staging Area에 추가했다면 그 파일은 Staged 가 되고,
Commit 했다면 Commited 또는 Unmodified 가 된다.

Staging Area에 추가하기
작업한 파일을 Git Directory로 커밋하려면 반드시 Stating Area에 추가해야 한다.
git add [file] 명령으로 작업한 파일을 Staging Area에 추가할 수 있다.

습관적으로 작성하고 있었던 git add . 는 변경된 모든 파일(정확하게는 Modified와 Untracked인 파일)을 Staged 로 변경하겠다는 의미였다.

git status 명령을 실행해보면,
각 파일을 상태별로 구분해 리스팅 해 줄 뿐만 아니라, 파일의 상태를 변경할 수 있는 팁도 전해준다.
지금까지는 무심코 지나쳤었는데, 이제 자세히 살펴보자.

iPad hover 이슈 처리 방법

ohgyun — Thu, 12 Jan 2012 16:13:26 +0900

발생일: 2012.01.10

문제:
아이폰이나 아이패드와 같은 터치 디바이스에서는 PC와 다르게 hover(마우스 롤오버) 효과가 적용되지 않는다.
'마우스' 개념이 없기 때문이다.
실제로 모바일 웹 페이지를 작성하는 경우, 마크업 단계부터 hover 효과를 고려하지 않는다.

하지만 기존 서비스를 모바일에서도 그대로 제공해야 하는 경우라면, 서비스에 적용된 여러 가지 hover 효과 때문에 사용자가 불편을 겪을 수 있다.
예를 들어, 마우스를 오버했을 때 가이드가 표시되는 버튼을 구현했다면,
터치 디바이스에서는 한 번 클릭 시 마우스 오버 효과가 발생하고, 다시 클릭했을 때 클릭 이벤트가 발생한다.
PC에서는 한 번 클릭으로 실행 가능했던 버튼이 터치 디바이스에서는 두 번을 클릭해야 한다.

진행하고 있는 서비스에서도 비슷한 문제가 발생했고,
터치 인터페이스에서는 hover 효과 없이 한 번 클릭으로 실행될 수 있게 수정이 필요했다.

간단하게 생각해보면, 각 케이스에서 마우스 오버 이벤트를 모두 제거하면 될 것 같은데,
각 모듈마다 분기문을 추가해 이벤트를 제거할 생각을 하니 이만큼 비효율적인 것도 없다.

뭔가 엘레강스한 처리 방법이 없을까~~~

해결책:

왜 두 번 클릭해야 하나?
먼저, hover 효과가 적용된 엘리먼트에서 두 번 클릭이 필요한 이유에 대해 자세히 알아보자.

모바일 사파리에서 터치를 시도하면 아래와 같은 이벤트가 순서대로 발생한다.

touchstart - touchend - mouseover - mousemove - mousedown - mouseup - click

마우스가 존재하진 않지만, 내부적으로는 터치 이벤트 뿐만 아니라 마우스 이벤트도 발생하는 것을 볼 수 있다.
중요한 건, mouseover 시점에서 화면이 변경될 경우, 이벤트가 멈춘다는 것이다.
(이벤트 발생 프로세스의 자세한 내용은 Safari Developer Library의 Handling Events 챕터를 참고.)

위 문서에는 '화면이 변경(if the contents of page changes)'되는 것에 대한 명확한 정의는 없다.
테스트 해본 결과, '화면이 변경'된다는 것은 정확하게는 '레이아웃이 변경(reflow)'되는 것에 가까운 것 같다.
백그라운드가 변경된다거나, 레이아웃에 영향을 끼치지 않는 정도의 margin/padding이 변경되는 경우(repaint)에는 이벤트가 종료되지 않는다.

따라서, 두 번 클릭해야 실행되는 문제를 해결하기 위해서는,
터치 인터페이스에서는 mouseover 이벤트가 발생했을 때 화면 변경이 되지 않도록 해야 한다.

Case by case로?
처음엔 각 케이스 별로, 호버 효과를 위해 추가하는 스타일이나 클래스명을 공백으로 바꿀 생각을 했다.
몇몇 모듈을 테스트 했을 때 문제 없이 적용되었다.
하지만 모듈이 수백 개인 걸... 이건 아니다.

마우스 이벤트를 터치 인터페이스로 바꾸면 어떨까?
마우스 이벤트와 상응하는 이벤트를 터치 이벤트와 매칭시켜주면 어떨까?

mouseover ---> touchstart
mousemove ---> touchmove
mousedown ---> touchend
mouseup ---> ?
mouseout ---> ?

터치 이벤트와 정확하게 매칭되지도 않을 뿐더러, 몇몇 모듈에 테스트해본 결과 기대했던 대로 동작하지도 않았다.
이 방법은 패스~

터치 디바이스일 경우엔, mouse 이벤트를 모두 무시하면 어떨까?
현재 서비스에서는 모든 이벤트를 특정 라이브러리를 통해서 바인딩하고 있다.
이벤트를 바인딩하는 해당 메서드를 오버라이드해서,
터치 디바이스에서 "mouse"를 포함한 이벤트를 바인딩하려는 경우 모두 무시하면 어떨까?

오. 요고 먹힌다.
대부분의 문제가 해결됐다.
다만, click이 아닌 mousedown을 사용하는 몇몇 컴포넌트(drag/drop 같은)는 전혀 작동하질 않는다.

일단은 해결책 중의 하나가 될 수 있겠지만, 의도하지 않은 부분까지도 전혀 작동되지 않는 건 문제가 있다.
화이트 리스트 방식의 적용이 필요하다.

CSS로 hover 효과를 내는 건 어떻게?
마우스 이벤트로 hover를 주는 건은 마우스 이벤트를 제거하는 걸로 해결이 된다 치더라도,
CSS로 hover 효과를 주는 경우엔 제어가 되지 않는다. (CSS와 mouseover 구분하기)

마크업 담당자에 미디어 쿼리(media query)로 터치 디바이스일 경우엔 :hover 를 없애는 건 어떻겠냐고 문의해봤으나, 미디어 쿼리로는 브라우저 구분은 안된다고 한다.

스크립트를 사용해서 CSS 파일을 분기하면 처리할 수 있겠으나,..
이건 배보다 배꼽이 크다는 판단이다.

보통은 클릭 이벤트를 강제로 발생하도록 하는 방법으로 처리할 수 있다고 한다.

클릭 이벤트를 강제로 발생한다?
CSS로 hover가 적용된 경우라면,
mouseover 이벤트에서 이벤트를 중지하고 강제로 한 번 더 click 이벤트를 발생하도록 처리하는 방법이 있다.
마찬가지로, 이벤트 바인딩 메서드를 오버라이드 해서 구현해봤다.

오. 요고도 먹힌다.
대부분이 문제 없이 잘 실행된다.
하지만, 역시 몇 가지 문제가 있다.

overflow: scroll 속성을 가지고 있는 엘리먼트 내에서 one-finger 스크롤 시, 예기치 않은 이벤트가 계속 발생한다.
또한, 스크립트로 hover 효과가 적용된 경우라면, mouse 이벤트를 없애는 경우보다 비효율적이다.
터치 때마다 페이지 변경이 계속 발생하기 때문이다.

그리고 mouse 이벤트를 모두 제거했을 때와 마찬가지로 화이트 리스트 방식의 접근이 필요한다.

그렇다면?
최종적으로는, 아래와 같은 방법으로 해결할 수 있었다.

1. 특정 클래스 클래스를 가지고 있는 엘리먼트의 경우, 마우스 이벤트를 할당하지 않는다.
- 스크립트로 hover 효과를 적용한 경우에 적합하다.
- 이벤트를 바인딩하는 메서드를 오버라이드 한다.
- ignore-mouse-event 클래스를 가진 경우, 마우스 이벤트를 할당하지 않는다.
- mouseover 효과 제거가 필요한 엘리먼트에 해당 클래스를 추가한다.

2. 특정 클래스를 가지고 있는 엘리먼트의 경우, mouseover 이벤트 발생 시 이벤트를 멈추고 강제로 click 이벤트를 발생한다.
- CSS로 hover 효과를 적용한 경우에 적합하다.
- document에 mouseover 이벤트를 바인딩한다.
- touch-force-click 클래스를 가지고 있는 경우, 이벤트를 멈추고 click 이벤트를 발생한다.
- css로 hover가 적용된 엘리먼트에 해당 클래스를 추가한다.

호버 효과 제거가 필요한 엘리먼트를 찾아 클래스를 추가해야 하는 번거로움이 있긴 하지만, 스크립트 코드 내에 분기문을 추가하는 것보단 훨씬 깔끔하다는 생각이다.
이걸로 삽질 끝~ ㅎ

쉘에서 긴 명령어를 라인 단위로 작성하기

ohgyun — Tue, 10 Jan 2012 14:28:54 +0900

발생일: 2012.01.08

문제:
구글 클로저 컴파일러로 여러 개의 자바스크립트 파일을 압축하려고 한다.
컴파일러는 jar 형태로 되어 있고, --js 와 --js_output_file 옵션으로 입출력 파일을 구분할 수 있다.

$ java -jar compier.jar --js one.js --js two.js --js three.js --js_output_file output.js

이런 식이다.

파일 개수가 많아져서 가독성 좋게 옵션을 라인 단위로 작성하고 싶다.
우째야 하나.

해결책:
기초 중의 기초란다. ㅎㅎ

라인으로 구분되어 있지만, 명령이 한 줄이라는 것을 알려주기 위해 백슬래쉬(\)를 사용하면 된다.

$ java -jar compier.jar \
--js one.js \
--js two.js \
--js three.js \
--js_output_file output.js

# 참고
http://www.grymoire.com/Unix/Quote.html#uh-0

http://stackoverflow.com/questions/3871332/how-to-tell-bash-that-the-line-continues-on-the-next-line

Synergy key mapping between Windows & Mac

ohgyun — Fri, 06 Jan 2012 11:31:56 +0900

발생일: 2012.01.06

문제:
여러 대의 PC에서 마우스와 키보드를 공유하려고 시너지(synergy)를 사용하고 있다.

Windows를 호스트로, 맥을 클라이언트로 잡아놓고 사용하고 있는데,
Windows의 Ctrl, Alt, window 키가 기대했던 대로 맥에서 매핑되지 않는다.

윈도우의 Ctrl 키는 맥에서도 Ctrl 키를,
윈도우의 Alt 키는 맥의 Command 키에 매핑되도록 하고 싶다.

어떻게 수정해야 할까?

해결책:
디폴트로 사용하는 경우, 아래와 같이 매핑된다.

Windows :: Mac
Ctrl --> Ctrl
WinKey --> Command
Alt --> Alt/Option

편하게 변경하기 위해선, 스크린을 추가할 때 키보드 매핑 정보를 아래와 같이 변경하면 된다.

Windows :: Mac
Ctrl :: Ctrl // 윈도우의 Ctrl 키는 맥의 Ctrl 키
Alt :: Meta // 윈도우의 Alt 키는 맥의 Command 키
Super :: Alt // 윈도우의 window 키는 맥의 Alt 키

편하다! ㅎㅎ

# 참고:
http://superuser.com/questions/90223/synergy-key-mapping

CSS hover 와 javascript mouseover 이벤트 구분하기

ohgyun — Tue, 03 Jan 2012 16:42:58 +0900

발생일: 2011.12.30

문제:
엘리먼트에 hover 효과(롤오버)가 적용되어 있는 경우,
CSS hover 로 구현된 것인지,
mouseover/mouseout 이벤트로 효과를 준 것인지 쉽게 구별할 수 있는 방법이 있을까?

해결책:
마크업 담당자에게 문의하던 과정에서 알게된 방법~ ^^
별 것 아닌 것 같지만, 요고요고 유용하다.ㅎㅎ

1. 개발자 도구의 엘리먼트 패널에서 대상 엘리먼트를 inspect 한다.
2. 대상 엘리먼트에 마우스 오버/아웃 해본다.
3. 클래스나 스타일의 변경이 직접적으로 보인다면 자바스크립트로 변경한 것.
아닐 경우, CSS에서 :hover 클래스로 호버 효과를 준 것이다.

# 기타 참고.
- CSS 가상 클래스 우선순위: http://cssdesign.kr/forum/viewtopic.php?id=514

X-Requested-With header

ohgyun — Thu, 22 Dec 2011 11:44:54 +0900

발생일: 2011.12.19

문제:
종종 어떤 서비스들의 Ajax 패킷을 보다보면,
X-Requested-With 헤더에 XMLHttpRequest 값이 포함된 걸 볼 수 있다.

Ajax로 요청하는 트위터의 타임라인을 예로 들어보면,
아래와 같이 요청 헤더에 X-Requested-With 헤더가 있다.

GET /1/statuses/home_timeline.json?... HTTP/1.1

Host: api.twitter.com

Connection: keep-alive

X-Requested-With: XMLHttpRequest

User-Agent: Mozilla/5.0 (Windows NT 6.1) AppleWebKit/535.11 (KHTML, like Gecko) Chrome/17.0.963.12 Safari/535.11

...

정확하게 이 헤더가 의미하는 건 뭐고,
어떤 용도로 사용하는 건지 알아보자.

해결책:

X-Requested-With 헤더는, 해당 요청이 Ajax라는 걸 의미한다.

표준 헤더는 아닌 커스텀 헤더이며,
jQuery와 Prototype을 포함한 대부분의 자바스크립트 라이브러리에서 Ajax 요청을 보낼 때에 이 헤더를 설정한다.

(여기서, 접두사 X는 표준이 아님을 의미한다. (non-standard))

실제로 jQuery 코드를 보면, 아래와 같이 헤더를 설정하고 있다.

if ( !( s.crossDomain && !s.hasContent ) && !headers["x-requested-with"] ) {

headers[ "x-requested-with" ] = "XMLHttpRequest";

}

(HTTP 헤더는 대소문자를 구분하지 않는다. (case-insensitive하다))

Prototype도 마찬가지이다.

setRequestHeaders: function() {

var headers = {

'X-Requested-With': 'XMLHttpRequest',

'X-Prototype-Version': Prototype.Version,

'Accept': 'text/javascript, text/html, application/xml, text/xml, */*'

};

이 커스텀 헤더를 통해 해당 요청이 Ajax 임을 서버에 알려줄 수 있을 뿐 아니라,
JSON Hijacking을 방어하는 용도로 사용할 수도 있다.
실제로 Ruby on Rails나 Django 등 몇몇 서버에서는 이 헤더로 Ajax 요청인지를 구분하는 기능을 제공하기도 한다.

참고로, Rails에 구현되어 있는 코드는 아래와 같다.

# Returns true if the "X-Requested-With" header contains "XMLHttpRequest"

# (case-insensitive). All major JavaScript libraries send this header with

# every Ajax request.

def xml_http_request?

@env['HTTP_X_REQUESTED_WITH'] =~ /XMLHttpRequest/i

end

alias :xhr? :xml_http_request?

(HTTP_X_REQUESTED_WITH 는 x-requested-with 헤더를 의미한다)

X-Requested-With 헤더는 비표준이지만,
대부분의 라이브러리가 사용하고 있기 때문에 실질적인 표준이라 해도 무방할 것 같다.

#. 참고.
List of HTTP header fields Wikipedia: http://en.wikipedia.org/wiki/List_of_HTTP_header_fields
Rails github: https://github.com/rails/rails/blob/master/actionpack/lib/action_dispatch/http/request.rb#L136
HTTP 1.1 Spec(RFC2616): http://www.ietf.org/rfc/rfc2616.txt
Custom HTTP Headers: http://www.developertutorials.com/learn-ajax/custom-http-headers-2643.php
HTTP_X_REQUESTED_WITH in Django: http://stackoverflow.com/questions/458617/x-requested-with-http-x-requested-with-weird-problem