:: 게시판
:: 이전 게시판
|
- PGR21 관련된 질문 및 건의는 [건의 게시판]을 이용바랍니다.
- (2013년 3월 이전) 오래된 질문글은 [이전 질문 게시판]에 있습니다. 통합 규정을 준수해 주십시오. (2015.12.25.)
통합규정 1.3 이용안내 인용"Pgr은 '명문화된 삭제규정'이 반드시 필요하지 않은 분을 환영합니다.법 없이도 사는 사람, 남에게 상처를 주지 않으면서 같이 이야기 나눌 수 있는 분이면 좋겠습니다."
16/05/18 02:50
원인: XMLHttpRequest가 비동기적으로 처리 되기 때문에 실행되는 순서가 (1) foo(arg1); 호출 -> (2) XMLHttpRequest로 서버 요청 -> (3) innerHTML arg1[0].name으로 설정 -> (4) 서버 응답을 받아 arg[0].name을 설정 순으로 일어나기 때문입니다. 해결 방법은 간단한데 크게 3개 정도를 들 수 있을 것 같네요.
1) XMLHttpRequest를 동기요청으로 변경: xhr.open의 세번째 인자인 true를 false로 바꿔주기. 그러면 위의 (4)가 (3)전에 완료 되어야지 순서대로 실행이 됩니다. 학교 프로젝트나 과제 수준에서는 무관하나 실무에서는 사용 하지 않는 방식입니다. 2) XHR 콜백 함수 안에서 처리: 위의 (4)번 실행 줄인 arg[0].name = data.name; 뒤에 (3)의 innerHTML을 설정하는 소스를 넣어서 서버의 응답이 설정 된다음에 실행되도록 하는 방법입니다. 아주 쉽게 수정할 수 있지만, 다른 언어 개발자들은 익숙하지 않은 방법이고, 일반적으로 많이 사용하는 방법입니다. 3) 실행될 콜백함수를 인자로 넘기기: foo1 함수에 callback 인자를 추가해서 XHR 응답 콜백 함수가 호출된 다음에 해당 함수가 호출되도록 하는 방법. 간단한 예를 들면 아래와 같습니다. 자바스크립트가 더 익숙해지면 사용하는 방법입니다. foo1(arg1, function (arg2) { document.getElementById("test").innerHTML = arg2[0].name; }); foo1의 정의는 foo1(arg, callback) { 으로 변경하고, XHR의 콜백 함수 안에서는 콜백함수를 호출하면 됩니다. function foo1(arg, callback) { //생략 if(xhr.readyState == 4 && xhr.status == 200){ var data = JSON.parse(xhr.responseText); arg[0].name = data.name; callback(arg); } } 자바스크립트는 이벤트 기반 비동기 처리가 많아서 C를 하다가 자바스크립트를 하면 실행 구조 자체가 많이 바뀌기 때문에 비동기처리라는 것을 신경 쓰시면 될 것 같네요. 그리고 자바스크립트는 그냥 객체를 넘겨도 상관없는데, 객체 자체를 변경하면 안되고 객체의 속성을 변경하는 것은 됩니다. C에서 포인터를 인자로 넘긴다고 생각하면 됩니다. 위의 함수에서 foo1 안에서 인자로 넘어온 arg자체를 변경하는 것은 안되지만, arg.name과 같은 객체의 속성은 그냥 변경해도 원래 객체에 반영된다는거죠.
16/05/18 08:54
상세한 답편 감사합니다. 말씀해주신것중 2번으로 했다가 코드정리하면서 3번으로 바꿨습니다. C에서의 시그널이나 인터럽트 처리 생각하니 편하더라구요 흐흐
구글에서 검색중에 님 블로그까지 갔었는데 많은 도움 받았습니다. 혹시 괜찮으시면 자바스크립트 편집기 추천 부탁드려도 될까요? 지금은 notepad++쓰는데 실수로 발생한 오타같은걸 전혀 못잡아줘서 디버깅이 세월입니다..ㅜㅜ
16/05/18 11:03
저는 보통 자바스크립트는 서버 환경에서 바로 작업하고 브라우져로 확인하면서 디버깅하는 것을 좋아해서 그냥 서버에서 vim으로 작업합니다.
노트북도 맥이라 그냥 터미널에서 vim쓰고요, 서버에 접속 못하는 경우 윈도우에서 작업할 때에는 sublime text를 사용합니다. 오타나 디버깅 툴 자체는 그냥 최근 브라우져들이 다 지원해주고 있는 개발자 도구를 사용하면 어디서 에러 났는지 알려주고, break도 걸 수 있어서 괜찮습니다.
|