자바스크립트로 외부에서 데이터를 가져와서 표현하는 방법이 있습니다. http://dna.daum.net 에서 제공하는 오픈API를 이용해서 알아보겠습니다.

http://apis.daum.net/search/web?q=json&apikey=DAUM_SEARCH_DEMO_APIKEY&output=json&callback=callbackfn

위 주소는 다음에서 제공하는 apis.daum.net 웹 검색용 오픈API주소입니다. Querystring을 보면 다음과 같은 파라미터들이 전달됩니다.

q: 검색어

apikey: 다음에서 제공받은 apikey

output: 응답결과 데이터 형태 json 또는 xml

callback: JSONP를 위해 필요한 callback 함수 이름

* JSONP(다른 도메인 간의 데이터를 전달하기 위한 방법 http://en.wikipedia.org/wiki/JSONP) 


브라우저에서 호출하면 결과는 callbackfn({json format data}) 형태로 보입니다.


크롬 브라우저에서 ctrl+shift+J 를 눌러서 Console을 엽니다.

우선 callbackfn 함수입니다.

function callbackfn(res) { console.log(res); }


그리고 엘리먼트 하나를 만들어서 script 태그를 만들고 src에 위 주소를 붙입니다.

var element = document.createElement('script');

element.src = "http://apis.daum.net/search/web?q=json&apikey=DAUM_SEARCH_DEMO_APIKEY&output=json&callback=callbackfn";


head 태그는 배열로 리턴되기 때문에 첫 번째 요소에 script 엘리먼트를 붙입니다. 

document.getElementsByTagName("head")[0].appendChild(element);


위 오픈API 주소가 호출되면서 자동으로 callbackfn() 함수가 실행되는 것을 볼 수 있습니다.



okjsp에 질문이 올라왔기에 테스트해보았더니 되는군요.
http://www.okjsp.pe.kr/seq/148021

콘솔뷰 툴바에서 우측 끝에 있는 아이콘을 클릭하면 New Console View라는 것이 나옵니다.
이것으로 두 개의 콘솔뷰를 띄울 수 있습니다. 그 옆 모니터 아이콘을 이용하면 원하는 성격의 콘솔로 모드를 전환할 수 있습니다.

아이폰엔 있습니다. 이런 괴물... 이미지 상단에 "콘솔 디버그 오류 없음" 이라고 보입니다.

설정에서 브라우저 정보에 보면 개발자용이라고 표시됩니다.

콘솔 디버그 옵션을 활성화하면 됩니다.

오류가 생긴 경우 더 자세한 정보를 볼 수 있습니다.

HTML/JavaScript/CSS 의 오류가 보여집니다.

모바일웹 개발시 유용하게 쓰일 것 같습니다.



이 글을 포스팅하려는데 3.0.4 업데이트가 나왔군요. ^^

firebug의 업데이트와 함께 새로운 UI의 옵션이 맨 처음에 나옵니다.
콘솔(Console), 스크립트(Script), Net 기능을 체크해야 자바스크립트와 네트워크 관련 기능을 사용할 수 있습니다.

이 중에서 콘솔은 자바스크립트 에러가 표시되는 화면입니다. 다음과 같이 표시됩니다.

여기서 에러메시지를 클릭하면 해당 소스의 자바스크립트로 이동하게 됩니다.

콘솔에는 다른 기능도 있습니다. 바로 현재 페이지의 자바스크립트를 편집해서 실행할 수 있는 영역이 있다는 것입니다. 콘솔 탭의 하단에 >>> 프롬프트 라인입니다. 여기에 자바스크립트를 넣어서 실행할 수 있습니다. 예전부터 있었는데, 안 썼습니다. 몰랐으니까요. ^^;

이렇게 실행 결과도 확인할 수 있습니다.

편집 영역을 확장할 수도 있습니다. 라인 우측의 회색 동그라미를 클릭하면 다음과 같이 넓어집니다.

Ajax 작업을 할 때 작은 프로그램도 여기에 넣어서 실행이 가능합니다. ^^;

 
해킹에 조심하셔야겠어요. 툴은 중성이죠. 사용하는 사람에 따라 선이 될 수도 악이 될 수도 있으니까요. 중요한 로직 체크는 자바스크립트로 하는 것을 피해야죠. 서버 쪽의 프로그램에서 체크하는 것은 웹개발의 기본이겠죠.

춤추러 갑니다. ^^ 스윙댄스요. ㅎㅎ



요즘 서브버전을 공부하면서 느끼는 것이, 아 이클립스에 낚여서 이 좋은 것을 멀리했구나 입니다. 번들 또는 디폴트의 무서움을 다시금 느꼈습니다. okjsp는 cvs로 버전관리하고 있었는데, eclipse는 처음부터 cvs(client)가 기본 패키지였습니다. svn(client)을 사용하려면 플러그인을 깔아야하는 수고를 해야합니다. 가니메데에 Subversive가 포함이 되었지면 여전히 update하는 수고가 줄지 않았습니다.

IDE 툴의 GUI는 훌륭합니다. 콘솔(console)에서 타이핑하는 것보다 훨씬 편하죠. 좀 표현이 거시기하지만 화장실의 비데같다고 할까요.

네 맞습니다. 콘솔에서 타이핑하는 것은 손가락은 참을 수 있어도 눈과 가슴은 답답해 미칩니다. 하지만 GUI라는 것이 마우스 이벤트 잡아서 자동으로 콘솔에서 치는 것 같은 명령을 내리게 되는 껍데기입니다.

까만화면 또는 하얀 화면에서 키보드로 입력하는 원시적이지만 원초적인 작업을 버리다가는 근본도 모르는 자식이 될 것 같아서 되뇌어 봅니다.
치매예방이라고...

java와 utf8 환경에서 한글 깨지는 현상에 대한 gruter님 질문 관련 포스팅입니다. 제한적인 상황이라는 것은 참고해주시면 좋겠습니다.

테스트는 다음과 같이 했습니다.
XP, jdk1.6.03, eclipse 3.3.1 JEE 환경
새로운 workspace 만들고 java project 하나 만들었습니다.
기본 설정에서 "한글UTF8" 문자열을 콘솔뷰에 찍는 프로그램을 만듭니다.
설정에서 java 소스파일의 인코딩타입을 utf8로 변경합니다.
사용자 삽입 이미지

사용자 삽입 이미지


콘솔에서 확인합니다.
사용자 삽입 이미지


인코딩 변환으로 소스의 한글이 깨어져 보이기 때문에 한글부분을 수정했습니다.
사용자 삽입 이미지

콘솔에서 확인합니다.
사용자 삽입 이미지


이 테스트에서 내릴 수 있는 결론은 파일 인코딩 타입 변환에 따른 한글이 깨어질 수 있다 정도입니다.

설정을 모두 해제하시고, 인코딩 변환 부분을 최소화 시켜서 작업하는 것이 좋을 것 같습니다.

이클립스 콘솔뷰에도 좋은 기능이 있습니다. 바로 resource연결입니다. 스택트레이스 같이 예외 메시지가 뿌려질 때 java파일일 경우 에러난 위치를 바로 보여줍니다.
모든 경우 적용 되는 것은 아닙니다만 똑똑해진 Open Resouce와 연결되면 편리하게 디버깅이 가능합니다.

WTP를 통해서 톰캣을 시작하면 콘솔뷰에 시스템 로그가 남습니다. 또 볼 수 있구요.
제 사이트를 돌려 보는 중에 메시지가 눈에 띄었습니다.

console log

console log


try catch에서 잡은 로그 메시지인 듯합니다. MemoServlet:... 로그가 보이는군요. 엇, 링크까지.
클릭해봤습니다.
Source not found

Source not found


Source not found for MemoServlet:java.lang.NumberformatException 라고 나옵니다.
보통 이쯤 되면 ctrl+shift+R을 눌러서 파일을 찾겠지만, 잠깐!
MemoServlet 글자를 마우스로 드래그해서 선택해보시죠. 그리고, ctrl+shift+R 를 하시면 다음과 같이 착하게 나옵니다.
Open Resource after text selection

Open Resource after text selection

착합니다. ^^ 파일을 열어서 살펴보겠습니다. 아마 이 부분인 듯 합니다.
review source

review source

디버깅을 해보니 || 가 아니라 && 이 되어야 되는군요.

^^ 요기까지입니다.
콘솔(Console) 에는 보통 로그가 찍힙니다. 그래서 중요합니다.
콘솔뷰는 로그가 상황에 따라 다르게 관리됩니다. 마치 레이어처럼 말이죠.
Tomcat 서버를 시작하면 나오는 로그가 콘솔 뷰에 보입니다.
Servers Console

Servers Console


뷰의 우측상단에 Open Console의 역삼각형 부분을 클릭하면 다른 뷰를 열 수 있죠.
Open Console View

Open Console View


CVS를 열어보겠습니다.
다음과 같이 CVS 로그가 보이게 됩니다.
CVS Console

CVS Console


구석 구석 세심함이 묻어있는 좋은 도구입니다. ^^

+ Recent posts