행복한디벨로퍼

 모르면 손 발이 고생하는 Eclipse 단축키에 대해 알아보자. 작업을 할 때 단축키를 사용한다는 것은 굉장히 생산성을 향상시켜주는 일이다. 꼭 단축키를 사용하여 생산성을 향상 시키도록 하자!

[ Eclipse 단축키 ]

기본적으로 Preference > General > Keys에서 대부분(모든)의 단축키 확인 가능합니다.
Ctrl+Shift+L : 단축키 보기 Hint

[거의 달고 사는 단축키]

ctrl + s : 저장 및 컴파일
ctrl + i : 소스 깔끔 정리(인덴트 중심의 자동구문정리)
ctrl + space : 어휘의 자동완성(Content Assistance)
ctrl + 1 : Quick Fix(Rename에 주로 사용)
ctrl + shift + M : 캐럿이 위치한 대상에 필요한 특정클래스 import
ctrl + shift + O : 소스에 필요한 패키지의 자동 임포트
ctrl + / : 한줄 또는 선택영역 주석처리/제거
ctrl + Q : 마지막 편집위치로 가기
ctrl + L : 특정줄번호로 가기
ctrl + D : 한줄삭제
ctrl + H : Find 및 Replace
ctrl + K : 다음찾기(또는, 찾고자 하는 문자열을 블럭으로 설정한 후 키를 누른다.)
ctrl + shift + K : 이전찾기(또는, 찾고자 하는 문자열을 블럭으로 설정한 후 역으로 찾고자 하는 문자열을 찾아감.)
alt + shift + j : 설정해 둔 기본주석 달기
Ctrl + 객체클릭(혹은 F3) : 클래스나 메소드 혹은 멤버를 정의한 곳으로 이동(Open Declaration)

[사용하면 유용한 단축키]

ctrl + shift + f : 소스 깔끔 정리
ctrl + 2 + R : Rename(리팩토링)
ctrl + shift + / : 선택영역 block comment 설정
ctrl + shift + \ : 선택영역 block comment 제거
alt + shift + up : Enclosing Element 선택(괄호의 열고 닫기 쌍 확인에 유용함)
ctrl + O : Outline창열기
Alt + ->, Alt + <- : 이후, 이전
해당프로젝트에서 alt + enter : Project 속성
sysout > Ctrl + Space : System.out.println();
try > Ctrl + Space : 기본 try-catch문 완성
for > Ctrl + Space : 기본 for문 완성
템플릿을 수정,추가 : Preferences > java > editor > Templates

[알고 있으면 아는척좀 할 수 있는 단축키]

ctrl + N : 새로운 파일 및 프로젝트 생성
ctrl + shift + s : 열려진 모든파일 저장 및 컴파일
alt + / : Word Completion
alt + shift + R : Rename
ctrl + shift + G : 특정 메써드나 필드를 참조하고 있는 곳을 찾는다.
ctrl + shift + B : 현재커서위치에 Break point설정/해제
ctrl + alt + R
ctrl + f11 : 실행
f11 : 디버깅 시작
f5 : step into
f6 : step over
f8 : 디버깅 계속
ctrl + . : 다음오류부분으로 가기
ctrl + , : 이전오류부분으로 가기
f12 : 에디터로 커서이동
ALT + UP,DOWN : 현재 줄 위치 이동
Ctrl + j : 검색할 단어를 입력하면서 실시간으로 검색
Ctrl + Shift + j : 검색할 단어를 입력하면서 실시간으로 거꾸로 검색
F4 : 클래스명을 선택하고 누르면 해당 클래스의 Hierarchy 를 볼 수 있다.
ctrl + alt + up/down : 한줄 duplicate
alt + shift + 방향 : 선택
ctrl + shift + g : 케럿이 위치한 객체가 참조 되는 곳을 찾아 준다

########################################################

===== 실행 =====
1. Ctrl + F11 : 바로 전에 실행했던 클래스 실행

===== 소스 네비게이션 =====
1. Ctrl + 마우스커서(혹은 F3) : 클래스나 메소드 혹은 멤버를 상세하게 검색하고자 할때
2. Alt + ->, Alt + <- : 이후, 이전
3. Ctrl + o : 해당 소스의 메소드 리스트를 확인하려 할때
4. F4 : 클래스명을 선택하고 누르면 해당 클래스의 Hierarchy 를 볼 수 있다.

===== 문자열 찾기 =====
1. Ctrl + k : 찾고자 하는 문자열을 블럭으로 설정한 후 키를 누른다.
2. Ctrl + Shift + k : 역으로 찾고자 하는 문자열을 찾아감.
3. Ctrl + j : 입력하면서 찾을 수 있음.
4. Ctrl + Shift + j : 입력하면서 거꾸로 찾아갈 수 있음.
5. Ctrl + f : 기본적으로 찾기

===== 소스 편집 =====
1. Ctrl + Space : 입력 보조장치(Content Assistance) 강제 호출 => 입력하는 도중엔 언제라도 강제 호출 가능하다.
2. F2 : 컴파일 에러의 빨간줄에 커서를 갖져다가 이 키를 누르면 에러의 원인에 대한 힌트를 제공한다.
3. Ctrl + l : 원하는 소스 라인으로 이동
   로컬 히스토리 기능을 이용하면 이전에 편집했던 내용으로 변환이 가능하다.
4. Ctrl + Shift + Space : 메소드의 가로안에 커서를 놓고 이 키를 누르면 파라미터 타입 힌트를 볼 수 있다.

5. 한줄 삭제 CTRL + D

6. 파일 닫기 : CTRL+W

7. 들여쓰기 자동 수정. (3.0 NEW) : CTRL+I 

8. 블록 주석(/*..*/) 추가.(3.0 NEW): CTRL+SHIFT+/

  8.1 Ctrl + / 해주면 여러줄이 한꺼번에 주석처리됨. 주석 해제하려면 반대로 하면 됨.
9. 위(아래)줄과 바꾸기 : ALT+UP(DOWN)

10. 블록 선택하기.  : ALT+SHIFT+방향키

11. 메소드의 파라메터 목록 보기. : CTRL+SHIFT+SPACE
12. 자동으로 import 하기 : CTRL+SHIFT+O

13. 열린 파일 모두 닫기 : CTRL + SHIFT + F4

14. 블록 주석 제거 : CTRL+SHIFT+

15. 전체화면 토글 : CTRL+M

16. 한줄(블럭) 복사 : Ctrl + Alt + 위(아래)

17. 다음 annotation(에러, 워닝, 북마크 가능)으로 점프 : Ctrl + , or .

18. 퀵 픽스 : Ctrl + 1  
19. 메소드 정의부로 이동 : F3
20. 하이어라키 팦업 창 띄우기(인터페이스 구현 클래스간 이동시 편리) : Ctrl + T 

21. 메소드나 필드 이동하기 CTRL + O 
22. ULTRAEDIT나 EDITPLUS 의 CTRL+TAB 과 같은 기능. : CTRL+F6 

===== 템플릿 사용 =====
1. sysout 입력한 후 Ctrl + Space 하면 System.out.println(); 으로 바뀐다.
2. try 입력한 후 Ctrl + Space 하면 try-catch 문이 완성된다.
3. for 입력한 후 Ctrl + Space 하면 여러가지 for 문을 완성할 수 있다.
4. 템플릿을 수정하거나 추가하려면 환경설정/자바/편집기/템플리트 에서 할 수 있다.

===== 메소드 쉽게 생성하기 =====
1. 클래스의 멤버를 일단 먼저 생성한다.
2. override 메소드를 구현하려면 : 소스->메소드대체/구현 에서 해당 메소드를 체크한다.
3. 기타 클래스의 멤버가 클래스의 오브젝트라면 : 소스->위임메소드 생성에서 메소드를 선택한다.

===== organize import =====
1. 자바파일을 여러개 선택한 후 소스 -> 가져오기 체계화 해주면 모두 적용된다. 

===== 소스 코드 형식 및 공통 주석 설정 =====
1. 환경설정 -> 자바 -> 코드 스타일 -> 코드 포멧터 -> 가져오기 -> 프로파일.xml 을 불러다가 쓰면 된다.
2. 또한 다수의 자바파일에 프로파일을 적용하려면 패키지 탐색기에서 패키지를 선택한 후 소스 -> 형식화를 선택하면 된다.
3. 환경설정 -> 자바 -> 코드 스타일 -> 코드 템플리트 -> 가져오기 -> 템플리트.xml 을 불러다가 쓰면 된다.

===== 에디터 변환 =====
1. 에디터가 여러 파일을 열어서 작업중일때 Ctrl + F6 키를 누르면 여러파일명이 나오고 F6키를 계속 누르면 아래로
2. Ctrl + Shift + F6 키를 누르면 위로 커서가 움직인다.
3. Ctrl + F7 : 뷰간 전환
4. Ctrl + F8 : 퍼스펙티브간 전환
5. F12 : 에디터로 포커스 위치

Alt + 위아래 방향키 : move line(block)

가장 많이 쓰는 애용 단축키 이다. 설명하자면 단순히 한줄(혹은 블럭)의 내용을 위아래로 옮기는 것이지만, 쓸데 없는 Cut & Paste를 줄여준다. 거기다, 블럭안팍으로 옮기면 자동으로 들여쓰기까지 해준다.

Alt + Ctrl + 위아래 방향키 : copy line(block)

요즘 아무리 재사용성이 증가했다라지만 프로그래머가 가장 많이 쓰는 기능이라면  머니머니해도 Copy & Paste이다. Alt 방향키가 Cut & Paste라면 이번에 Copy & Paste이다 한줄(혹은 블럭)의 내용을 위/아래 줄로 복사해준다. 역시 쓸데없는 반복작업을 많이 줄여준다.

Alt + Shift + 좌우 방향키 : select block

프로그래머는 섬세한 마우스 손놀림이 필요하다. 항상 정확한 부분부터 블럭을 잡아 카피 페이스트를 해야하기때문이다! 이때 유용한 기능이 바로 이것! 지금 커서 위치의 단어의 의미있는 블럭을 똑똑하게 잡아주고 확장 축소해 준다. 글로 읽어보기 보다 직접 사용해 보라. 멋지지 아니할 수 없다.

Alt + Shift + R  : Rename Refactor

게으른 프로그래머의 전형중에 하나가, 제멋대로 작명이다. 설계도 제대로 안하고 제멋대로 작명해서 쓰거나, 오타로 인해 toString이 toSring이 되어버렸거나.. 이런 경우 가만 내버려두면 그 확산 범위는 잘못하면 프로젝트 전체로 퍼져나가게 되어 걷잡을 수 없게된다. 이때 유용하게 쓸수 있는것이 Rename이다. 리팩토링메뉴에 편리한 기능들이 엄청 모여있지만 그중에 가장 많이 쓰게되는 기능일것이다. 프로젝트 전체에 관계된 이름을 깔끔하게 싹 바꿔준다.

Ctrl + Shift + F4 : Close All Opened Window

열려져 있는 모든 파일(View)을 닫아준다. 프로그래밍을 하다보면(특히 JSP Model2같은) 끝없이 파일을 열게 되서 화면이 무척 지저분해 질때까 있다. 그때 살짜쿵 눌러주고 다시 열때 편리하다.

Ctrl + Shift + G : Find references

이글을 보고 계시는 대부분의 분들은 사용되는 변수(혹은 메소드, 클래스, 객체 등)의 선언으로 가는 방법 정도는 알고 계실것이다. 바로 Ctrl + 클릭 혹은 F3 이다. 물론 선언으로 바로 가고 싶을때도 많지만 선언된 변수의 참조(사용처)를 찾아가고 싶을때가 더 많다. 그럴때 유용한 것이 이 단축키이다.  워크스페이스 내에서 참조된 곳을 전부 찾아서 Search View에서 List형태로 보여준다.

Ctrl +3 : Quick Access (Eclipse 3.3 Europa)

유로파를 쓰시는가? 그럼 축복받은 단축키 Ctrl + 3을 쓸 수 있다. 보통 단축키를 쓰다보면 마우스에는 손이 잘 안가고 뭐든지 키보드로 해결하려 하게 된다. 하지만.. 모든 기능에 단축키를 부여할 수는 없는법! 그래서 나온기능이 Quick Access이다. 메뉴들을 직접 타이핑해서 찾을 수 있고 history기능까지 제공한다

해당 글 reference : http://strikerhan.tistory.com/8

[ Bobby의 싸가지 ]

한 가지. 무식하면 손 발이 고생한다

두 가지. 무슨 일을 하든 신속히 처리할 수 있는 방법을 생각하고 적용하자.

세 가지. 단축키를 쓰고 안쓰고는 하늘과 땅의 차이다.

네 가지. 손에 익히고 행동으로 옮기자.

안녕하세요. 오늘은 작년 신입 교육 때, 딱 1년 전 읽었던 책 ( 열혈강의, 자바 웹 개발 워크북 )에 대해 정리해 보는 시간을 갖도록 하겠습니다. 책상 옆에 놓여있길래 막상 꺼내 펼쳐 보니 잊고 있었던 내용들도 있고 다시 한 번 상기할만한 내용들이 있어 이렇게 정리하게 되었습니다. 이제 막 웹을 시작하시는 분들이 보시기에 좋은 책인 것 같습니다. 정리라는게 챕터별로 정리하는 게 아닌 개인적으로 메모해놓고 다음에 다시 상기해 볼 만한 내용들이나 괜찮은 내용이다 싶은 부분만을 추려 정리하는 것이기 때문에 자세한 내용을 알고 싶으실 경우 책을 사서 보시길 추천해드립니다.

[ 프록시 서버 (Proxy Server) ]

클라이언트와 서버 사이에서 통신을 중계해 주는 컴퓨터나 프로그램을 말합니다. 프록시 서버의 주된 용도 중 하나는 빠른 전송을 위하여 서버의 응답 결과를 캐시에 저장해 두는 것입니다. 프록시 서버를 두는 두 번째 이유는 보안적인 부분인데, 첨단 기술을 다루는 회사의 경우 내부 사용자의 기밀 유출에 민감할 수밖에 없습니다. 이런 경우 프록시 서버를 이용하면 외부로 전달되는 데이터를 검사하여 특정 단어가 포함된 자료의 송.수신을 차단하거나 보안 팀에 경고 메시지를 보낼 수 있습니다.

[ 멀티 프로세스와 멀티 스레드 ]

멀티 프로세스 방식은 클라이언트가 연결 요청을 하면 서버 프로그램은 자신을 복제하여 클라이언트에 대응하게 하고, 자신은 다른 클라이언트의 요청을 기다립니다. 이 방식은 원본 프로세스의 메모리를 모두 복제하기 때문에 자원 낭비가 심합니다. 그에 비해 멀티 스레드 방식은 클라이언트 요청을 처리하는 일부 코드만 별도로 분리하여 실행하기 때문에 전체 메모리를 복제할 필요가 없어, 멀티 프로세스 방식보다 메모리 낭비가 적습니다.

[ 요청 헤더 ]

헤더에는 세 가지 종류가 있는데 요청이나 응답 모두에 적용할 수 있는 '일반 헤더(General-header)'와 요청 또는 응답 둘 중 하나에만 적용할 수 있는 '요청 헤더 또는 응답 헤더(Request-header/Response-header)', 보내거나 받는 본문 데이터를 설명하는 '엔티티 헤더(Entity-header)'가 있습니다. 요청 헤더가 담는 헤더명중 User-Agent가 있는데 클라이언트의 정보를 서버에게 알려주는 헤더입니다. 웹 서버는 이 헤더를 분석하여 요청자의 OS와 브라우저를 구분합니다.

[ CGI(Common Gateway Interface) ]

웹 서버와 프로그램 사이의 데이터를 주고받는 규칙을 CGI(Common Gateway Interface)라고 합니다. 이렇게 웹 서버에 의해 실행되며 CGI 규칙에 따라서 웹 서버와 데이터를 주고 받도록 작성된 프로그램을 'CGI 프로그램'이라고 합니다.

[ 서블릿 컨테이너 ]

서블릿의 생성과 실행, 소멸 등 생명주기를 관리하는 프로그램을 '서블릿 컨테이너(Servlet Container)'라 합니다. 서블릿 컨테이너(Jave EE 기술 중에서 서블릿, JSP 등 웹 관련 부분만 구현한 서버로 아파치 재단의 톰캣, Jetty등)가 서블릿을 대신하여 CGI 규칙에 따라 웹 서버와 데이터를 주고받습니다.

[ WebContent/Web-INF ]

웹 애플리케이션의 설정과 관련된 파일을 두는 폴더로 이 폴더에 있는 파일은 클라이언트에서 요청할 수 없다. 따라서 HTML이나 JavaScript, CSS 등 클라이언트에서 요청할 수 있는 파일을 이 폴더에 두어서는 안 됩니다.

[ GET 요청으로 넘어온 매개변수 값의 인코딩 설정 ]

GET 요청은 매개변수 값이 URL에 포함되기 때문에 setCharacterEncoding()으로는 문자 집합을 설정할 수 없다. 톰캣 서버에서 server.xml을 열어 <Connector>태그에 URIEncoding 속성을 추가하고, 값은 UTF-8로 설정한다. 웹 브라우저가 웹 서버로 데이터를 보낼 때는 웹 페이지의 기본 문자집합으로 인코딩하여 보내기 때문에 사용자가 입력한 값은 UTF-8로 인코딩되어 서버에 전달된다. 반면 서블릿은 UTF-8(한글 한 자를 3바이트로 표현) 3바이트를 하나의 문자로 인식하지 않고 각각의 바이트를 개별 문자로 취급하여 유니코드로 변환한다. 이렇기에 server.xml에 설정을 해주지 않을 경우 한글이 깨지게 된다.

[ SeverletContext 보관소 ]

웹 애플리케이션이 시작될 때 생성되어 웹 애플리케이션이 종료될 때까지 유지된다. 이 보관소에 데이터를 보관하면 웹 애플리케이션이 실행되는 동안에는 모든 서블릿이 사용할 수 있다.

[ HttpSession 보관소 ]

클라이언트의 최초 요청 시 생성되어 브라우저를 닫을 때까지 유지됩니다. 보통 로그인할 때 이 보관소를 초기화하고, 로그아웃하면 이 보관소에 저장된 값들을 비웁니다. 따라서 이 보관소에 값을 보관하면 서블릿이나 JSP 페이지에 상관없이 로그아웃하기 전까지 계속 값을 유지할 수 있습니다. JSP에서는 session변수를 통해 이 보관소를 참조할 수 있습니다.

[ ServletRequest 보관소 ]

클라이언트의 요청이 들어올 때 생성되어, 클라이언트에게 응답 할 때까지 유지됩니다. 이 보관소는 포워딩이나 인클루딩하는 서블릿들 사이에서 값을 공유할 때 유용합니다. JSP에서는 request변수를 통해 이 보관소를 참조할 수 있습니다.

[ JspContext 보관소 ]

JSP 페이지를 실행하는 동안만 유지됩니다. JSP에서는 pageContext 변수를 통해 이 보관소를 참조할 수 있습니다.

[ HttpSession ]

HttpSession 객체는 클라이언트 당 한 개가 생성됩니다. 웹 브라우저로부터 요청이 들어오면, 그 웹 브라우저를 위한 HttpSession 객체가 있는지 검사하고, 없다면 새로 HttpSession 객체를 만듭니다. 이렇게 생성된 HttpSession 객체는 그 웹 브라우저로부터 일정 시간 동안 Timeout 요청이 없으면, 삭제됩니다.

[ JspContext의 활용 ]

JSP 페이지를 작성하다 보면 <jsp:include>와 같은 특별한 태그를 사용하게 됩니다. 이런 태그들은 JSP 엔진이 서블릿 클래스를 생성할 때 특정 자바 코드로 변환됩니다. 이때 이 태그의 값을 다루는 객체를 '태그 핸들러'라고 부릅니다. 바로 이 태그 핸들러에게 데이터를 전달하고자 할 때 JspContext 보관소를 사용하는 것입니다.  JSP 페이지에 선언된 로컬 변수는 태그 핸들러에서 접근할 수 없습니다. 따라서 태그 핸들러에게 전달할 데이터가 아니라면 JspContext에 값을 보관할 필요가 없습니다.

[ EL(Expression Language) ]

EL(Expression Language)은 콤마(.)와 대괄호([])를 사용하여 자바 빈의 프로퍼티나 맵, 리스트, 배열의 값을 보다 쉽게 꺼내게 해주는 기술로 스태틱(static)으로 선언된 메서드를 호출 할 수도 있습니다. EL은 ${}와 #{}를 사용하여 값을 표현합니다. ${표현식} 으로 지정된 값은 JSP가 실행될 때 JSP 페이지에 즉시 반영됩니다. 그래서 ${}을 '즉시 적용(immediate evaluation)'이라 부릅니다. #{}을 '지연 적용(deferred evaluation)'이라 부르는데 UI를 만들 때 사용된다고 합니다.

[ DI(Dependency Injection) ]

작업에 필요한 객체를 외부로부터 주입 받는 것으로 다른 말로 역제어(IoC, Inversion of Control)'라고도 부릅니다.

[ mybatis ]

mybatis는 반복적이고 지루한 JDBC 프로그래밍을 단순화하기 위해 클린턴 비긴이 만든 작은 라이브러리에서 출발하였다. 이 라이브러리는 iBATIS라는 이름으로 2004년 아파치 소프트웨어 재단에 기부되면서 알려지게 되었다. 좀 더 효율적인 개발 관리를 목표로 2010년 6월 아파치 재단에서 구글 코드로 이사하였고 프로젝트 이름도 mybaits로 바뀌었다. mybatis의 핵심은 개발과 유지보수가 쉽도록 소스 코드에 박혀있는 SQL을 별도의 파일로 분리하는 것이다. 또한 단순하고 반복적인 JDBC 코드를 캡슐화하여 데이터베이스 프로그래밍을 간결하게 만드는 것이다.

[ mybatis javaType속성 ]

<result>에서 javaType을 사용하면, 칼럼의 값을 특정 자바 객체로 변환할 수 있다. 다음과 같이 'STA_DATE'칼럼에 대해 javaType을 java.sql.Date으로 설정하면, 칼럼 값을 꺼낼 때 그 객체로 변환된다.

<result column="STA_DATE" property="startDate" javaType="java.sql.Date"/>

[ mybatis <id> 엘리먼트 ]

SELECT 문을 실행하면 레코드 값을 저장하기 위해 결과 객체가 생성되는데, SELECT문을 실행할 때마다 매번 결과 객체를 생성한다면 실행 성능이 나빠질 것입니다. 이를 해결하기 위해 SELECT를 통해 생성된 결과 객체들은 별도의 보관소에 저장(캐싱, caching)해두고, 다음 SELECT를 실행할 때 재사용합니다. 이때 보관소에 저장된 객체를 구분하는 값으로 <id>에서 지정한 프로퍼티를 사용합니다.

[ mybatis의 SELECT 결과 캐싱 ]

SELECT를 실행할 때마다 결과 레코드에 대해 매번 객체를 생성한다면, 속도도 느리고 메모리도 낭비됩니다. 이를 개선하기 위해 mybatis는 객체 캐싱을 제공합니다. 즉 한 번 생성된 객체는 버리지 않고 보관해 두었다가, 다음 SELECT를 실행할 때 재사용하는 것입니다. 첫 번째 질의를 수행할 때 생성된 결과 객체는 풀(pool)에 보관해 둡니다. 두 번째 질의에서는 질의 결과에 대해 새로 객체를 생성하기 전에, 객체 풀에 보관된 객체 중에서 해당 칼럼의 값과 일치하는 객체를 먼저 찾습니다. 있다면 기존 객체를 사용하고 없다면 새로 객체를 생성합니다. 이것이 mybatis의 객체 캐싱 기법입니다.

  안녕하세요. 오늘은 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 설정을 다했는데도 제대로 접속이 안되는 경우 디바이스를 재부팅하거나 피들러를 다시 껏다 킨 후 다시 접속해 보기 바란다. 이상으로 이번 포스팅을 마치겠다.