행복한디벨로퍼

 안녕하세요. 오늘은 저번 정리 PART.1에 이어 정리를 해보도록 하겠습니다.

[ 403 Forbidden ]

 403이 발생한 원인으로는 파일 시스템의 퍼미션이 부여되지 않은 경우와 액세스 권한에 문제(허가되지 않은 송신 IP 주소의 액세스 등) 가 있는 것을 예로 들 수 있다.

-> 실제로 현업에서 API 통신간 자주 보는 상태 코드이며 보통은 ACL문제라고 볼 수 있다.

[ 503 Service Unavailable ]

 이 리스폰스는 일시적으로 서버가 과부하 상태이거나 정검중이기 때문에 현재 리퀘스트를 처리할 수 없음을 나타낸다. 이 상태가 해소되기까지 시간이 걸리는 경우에는 Retry-After 헤더 필드에 따라 클라이언트에 전달하는 것이 바람직하다.

[ 프록시 ]

 서버와 클라이언트의 양쪽 역할을 하는 중계 프로그램으로, 클라이언트로부터의 리퀘스트를 서버에 전송하고, 서버로부터의 리스폰스를 클라이언트에 전송한다.

클라이언트 <-> 프록시 서버 <-> 오리진 서버(Origin Server, 리소스 본체를 가진 서버)

프록시 서버를 사용하는 이유는 캐시를 사용해서 네트워크 대역 등을 효율적으로 사용하는 것과 조직 내에 특정 웹 사이트에 대한 액세스 제한, 액세스 로그를 획득하는 정책을 지키려는 목적으로 사용하는 경우가 있다.

[ 프록시 사용 방법 2가지, 캐싱 프록시(Cashing Proxy)/투명 프록시(Transparent Proxy) ]

 캐싱 프록시 (Cashing Proxy) : 프록시에 다시 같은 리소스에 리퀘스트가 온 겨우, 오리진 서버로부터 리소스를 획득하는 것이 아니라 캐시를 리스폰스로서 되돌려 주는 타입의 프록시

 투명 프록시 (Transparent Proxy) : 리퀘스트와 리스폰스를 중계할 때 메시지 변경을 하지 않는 타입의 프록시, 반대로 메시지에 변경을 가하는 타입의 프록시를 비투과 프록시라고 한다.

[ 게이트웨이 ]

 게이트웨이의 동작은 프록시와 매우 유사하나 게이트웨이의 경우에는 그 다음에 있는 서버가 HTTP 서버 이외의 서비스를 제공하는 서버가 된다.

클라이언트 <-(HTTP 통신) -> 게이트웨이 <-(HTTP 프로토콜 이외의 통신) -> HTTP이외의 서버

두 컴퓨터(노드-node라고도 함)가 네트워크 상에서 서로 연결되려면 동일한 통신 프로토콜(protocol, 통신 규약)을 사용해야 한다. 따라서 프로토콜이 다른 네트워크 상의 컴퓨터와 통신하려면 두 프로토콜을 적절히 변환해 주는 변환기가 필요한데, 게이트웨이가 바로 이러한 변환기 역할을 한다. 한국인과 미국인 사이에 원활한 의사소통을 위해 통역사를 두는 것과 동일하다 

자세한 설명 참고 : http://it.donga.com/6744/

[ 캐시(Cache) ]

 캐시는 프록시 서버와 클라이언트의 로컬 디스크에 보관된 리소스의 사본을 가리킨다. 캐시를 사용하면 리소스를 가진 서버에 액세스를 줄이는 것이 가능하기 때문에 통신량과 통신 시간을 절약할 수 있다. 캐시 서버는 프록시 서버의 하나로 캐싱 프록시로 분류되며 캐시 서버의 장점은 같은 데이터를 몇 번이고 오리진 서버에 전송할 필요가 없다는 것이다. (클라이언트는 네트워크에서 가까운 서버로부터 리소스를 얻을 수 있고 서버는 같은 리퀘스트를 매번 처리하지 않아도 된다)

[ 클라이언트에 존재하는 캐시 ]

 캐시 서버만 캐시를 가지고 있는 게 아니라 클라이언트가 사용하고 있는 브라우저에서도 캐시를 가질 수 있다. IE에서 클라이언트가 보존하는 캐시를 인터넷 임시 파일이라고 부른다. 브라우저가 유효한 캐시를 가지고 있는 경우, 같은 리소스의 액세스는 서버에 액세스하지 않고 로컬 디스크로부터 불러 온다.

오늘은 여기까지 정리하도록 하겠습니다. 뭐든 배울 수록 배워야될게 더 생겨나가는 이 느낌. 정말 공부는 끝이 없을 것 같습니다.

  안녕하세요. 오늘은 Fiddler를 통해 모바일 웹을 디버깅 하는 법에 대해서 포스팅 해보도록 하겠습니다. 보통 웹 업무를 하다보면 fiddler를 많이 사용하게 되는데 이번 작업을 하던 중 모바일 웹에서 기능 수정 한 부분에 대해서 확인해야 하는 상황이 있었습니다. 하지만 어떻게 해야 할지 도무지 감도 안 오고 그저 생각나는 방법은 '알파나 베타에 수정한 부분을 배포해서 확인을 해야하나?'였습니다. 하지만 fiddler를 사용하면 로컬환경에서도 모바일 웹을 디버깅 할 수 있다는 점! 지금 부터 시작하도록 하겠습니다. 

 1. Filddler란 무엇이냐

 : "웹 트래픽을 모니터링, 조사, 조작할 수 있는 확장 기능을 갖춘 프리웨어 디버깅 프록시"라고 정리 되어 있는 글을 본 적이 있는데 말 자체가 너무 어렵네요. 단순히 말해 클라이언트와 서버가 요청과 응답을 한 번씩 주고 받은 세션의 목록을 보여주는 프리웨어라고 볼 수 있습니다. 말은 이렇게 단순히 했지만 피들러로 할 수 있는 일들은 어마어마 하다는 거

 피들러로 할 수 있는 일

   ⊙ 브라우저, 클라이언트 프로그램, 서비스 등에서 오고 가는 웹 트래픽을 볼 수 있다.

   ⊙ 자동 또는 수동적인 방법으로 어떠한 응답이나 요청도 수정할 수 있다.

   ⊙ HTTPS 트래픽을 복호화하여 살펴보거나 수정하는 것도 가능하다.

   ⊙ 캡쳐한 트래픽을 저장하여 보관해 두고 후에 불러올 수도 있다. 다른 컴퓨터의 트래픽도 이런 식으로 다룰 수 있다.

   ⊙ 클라이언트 프로그램으로 가는 응답을 이전에 캡쳐해 두어 서버가 오프라인 상태라 해도 응답을 재현할 수 있다.

   ⊙ 맥/리눅스 시스템, 스마트폰, 태블릿 컴퓨터 등을 포함한 대부분의 PC와 모바일 기기에서 발생한 웹 트래픽을 디버깅할 수 있다.

   ⊙ TOR 네트워크 등 프록시 서버에 업스트림(upstream)을 연결(chain)할 수 있다.

   ⊙ 클라이언트 컴퓨터나 모바일 기기를 다시 설정하지 않고도 역 프록시(reverse proxy)로 동작하여 트래픽을 캡쳐할 수 있다.

   ⊙ 피들러 스크립트나 .NET 기반 확장 모듈을 통해 새로운 기능을 추가할 수 있어 더 강력해질 수 있다.

 그림을 통해 보면 내가 요청한 페이지에 대한 세션 정보와 해당 서버측에서 넘어온 세션 정보 등을 파악 할 수 있습니다. 그럼 이제 본격적으로 모바일 웹을 디버깅 하기 위해서는 어떤 설정들이 필요한지 알아 보도록 합시다.

 2. 모바일 웹을 디버깅하기 위한 Fiddler의 설정 첫 번째

 Fiddler를 키고  상단의 Tools > Fiddler Options 를 클릭하면 밑과 같은 창이 뜨는데 Connections 탭에서 Allow remote computers to connect 칸에 체크를 해줍니다. 말 그대로 외부 기기가 연결될 수 있도록 허용해주는 설정입니다.

  2. 모바일 웹을 디버깅하기 위한 Fiddler의 설정 두 번째 ( 모바일 와이파이 설정 셋팅 )

 Fiddler에서 위와 같은 설정을 맞췄다면 이제 해당 Fiddler에 붙기 위해 사용하고 있는 와이파이 설정을 해줘야 합니

다. 와이파이 설정을 들어가 고급 옵션 표시 항목에 체크를 하면 다음과 같은 화면을 볼 수 있습니다. 프록시를 수동으

로 바꿔주고 프록시 호스트 이름에 fiddler가 설치된 PC의 IP를 입력해 줍니다. 그리고 프록시 포트 부분에는 위의 그

림에서 Fiddler listens on port란에 쓰여있는 포트번호를 적어주고 저장해주면 됩니다. 

3. 모바일 웹을 디버깅하기 위한 Fiddler의 설정 세 번 째 ( 로컬 환경으로 호스트 셋팅 )

실제로 모바일 화면에서 웹을 띄워 내가 작성한 코드가 잘 수정되었는지 확인하기 위하여 fiddler에서 Host를 맞춰 줍니다. Fiddler 상단의 Tools를 누르면 HOSTS...라는 항목이 보이고 클릭하게 되면 Host Remapping이라는 창이 뜨게 되고 여기에 호스트 설정을 해주면 됩니다. 

4. 모바일에서 접속해 보기

 실제로 모바일로 작업하고자 하는 url에 접속하게 되면 fiddler에 내가 보낸 요청들의 세션이 찍히는 것을 볼 수 있다. 또한 로컬에서 디버깅으로 프로젝트를 띄워논 후 모바일로 해당 페이지에 접속하게 되면 디버깅이 걸려 들어오는 것 까지 확인할 수 있었다. 

이렇게 Fiddler를 통해 모바일 웹을 테스트 할 수 있는 방법에 대해서 알아보았다. 혹시나 와이파이 설정 및 fiddler 설정을 다했는데도 제대로 접속이 안되는 경우 디바이스를 재부팅하거나 피들러를 다시 껏다 킨 후 다시 접속해 보기 바란다. 이상으로 이번 포스팅을 마치겠다.