PGR21.com
- PGR21 관련된 질문 및 건의는 [건의 게시판]을 이용바랍니다.
- (2013년 3월 이전) 오래된 질문글은 [이전 질문 게시판]에 있습니다.
통합 규정을 준수해 주십시오. (2015.12.25.)
Date 2016/05/18 01:29:24
Name 꼭두서니색
Subject [질문] 자바스크립트+XMLHttpRequest 질문입니다.
자바스크립트 코딩을 하고 있는데, 막히는 부분이 있어 질문드립니다.

콜백함수내부에서 변경된 값을 외부로 가져오는 문제인데요, 예를 들면

var arg1 = new Array(2);
arg1[0] = new testObj();
arg1[1] = new testObj();

function foo1(arg){
        var xhr = new XMLHttpRequest();
        var requestUri = testUri;        
        xhr.open('GET', requestUri, true);
        xhr.send();
        xhr.onreadystatechange = callback1;
        
        function callback1(e){
                if(xhr.readyState == 4 && xhr.status == 200){
                        var data = JSON.parse(xhr.responseText);
                        arg[0].name = data.name;
                }
        }
}

foo(arg1);
document.getElementByid("test").innerHTML = arg1[0].name;

이런 식으로 코드를 작성해봤는데, foo1() 내부함수인 callback1에서 변경한 arg[0].name 을 foo1() 외부에서 불러보면 함수 내부에서 변경한 값이 반영되지 않더라구요.

찾아보니 자바스크립트는 call by value만 되고 call by reference는 파라미터를 배열형으로 넘겨라..이런식으로 써있던데 저런식으로 내부함수에서 변경한 값을 완전 외부에서 가져오는 방법에 대한 설명을 제가 못찾았는지 안보여서 질문드립니다.

C는 포인터로 다 해결됐었는데 자바스크립트하려니 너무 기초적인데서 막히니 부끄럽습니다..ㅜㅜ 위같은 상황은 어떤식으로 해결해야 하는지 고수분들의 많은 조언 부탁드립니다.

통합규정 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 09:35
수정 아이콘
sublime text 3 , visual studio code, webstorm 중에서 웹스톰이 제일 좋지만 유료입니다.
꼭두서니색
16/05/18 12:30
수정 아이콘
찾아보니 20달러정도네요.. 크게 부담되진 않으니 일단 평가판 써봐야겠습니다. 감사합니다.
16/05/18 11:03
수정 아이콘
저는 보통 자바스크립트는 서버 환경에서 바로 작업하고 브라우져로 확인하면서 디버깅하는 것을 좋아해서 그냥 서버에서 vim으로 작업합니다.
노트북도 맥이라 그냥 터미널에서 vim쓰고요, 서버에 접속 못하는 경우 윈도우에서 작업할 때에는 sublime text를 사용합니다.
오타나 디버깅 툴 자체는 그냥 최근 브라우져들이 다 지원해주고 있는 개발자 도구를 사용하면 어디서 에러 났는지 알려주고, break도 걸 수 있어서 괜찮습니다.
꼭두서니색
16/05/18 12:32
수정 아이콘
개발자도구에서 그런것도 해주는줄은 몰랐네요. 로우레벨만 하다가 웹프로그래밍하려니 힘들었는데 좋은 정보 감사합니다!
목록 삭게로! 맨위로
번호 제목 이름 날짜 조회
96184 [질문] 중소기업 전산실에서 이직 준비에 대한 조언 부탁 드립니다. [8] MayLee4482 17/01/09 4482
96039 [질문] 어플을 만들어 보고 싶습니다. [3] 단수2248 17/01/06 2248
95648 [질문] 노트북 질문입니다(대학교 수준 코딩과 성능 관련) [23] 리나시타9936 16/12/29 9936
95229 [질문] 학점은행제 학사 취득 후 석사 진학에 대한 질문 드립니다 [8] MayLee4033 16/12/22 4033
95192 [질문] 코딩, 프로그래밍 입문서로는 어떤 책, 강의가 좋을지요...? [18] nexon5770 16/12/21 5770
93786 [질문] 노량진 스터디룸 질문입니다. 누명2211 16/11/25 2211
93315 [질문] 컴공 전공자 분들에게 질문이 있습니다 [11] 카별4390 16/11/18 4390
92504 [질문] IT 자습 서적& 방법 추천 질문 [2] 졸려1664 16/11/03 1664
92118 [질문] 노트북 구매 관련 고민입니다. [3] 일리단1558 16/10/26 1558
92073 [질문] 30살 초대졸 전산부 신입, 자기개발에 대한 고민중입니다. [21] MayLee4679 16/10/25 4679
91940 [질문] 코딩 질문입니다. [6] 루꾸2293 16/10/23 2293
91119 [질문] 창업을 위해 홈페이지, 특히 모바일 홈페이지 만드는 법을 배우고 싶습니다. [9] 베르트2923 16/10/07 2923
90813 [질문] if와 switch문을쓰는 c코딩문제질문입니다. [8] 안할란다2959 16/10/01 2959
90503 [질문] C# 코딩 가능한 가장 가벼운 툴이 무엇인가요? [3] Googlo3622 16/09/25 3622
90119 [질문] 삼성전자 S직군 시험 관련 문의입니다. [6] ▶김연아5628 16/09/17 5628
89347 [질문] C++ 컴파일러 보통 뭐쓰나요?? [25] Kobe22372 16/09/02 22372
89254 [질문] 안드로이드 스튜디오 사용 관련해서 질문입니다. Riffrain2237 16/08/31 2237
85865 [질문] 아이폰으로 인터넷상에서 동영상보는 방법은 없는거죠? [3] PRADA2578 16/07/04 2578
83942 [질문] 컴퓨터를 맞추려고 합니다. 파워추천과 자잘한 질문에 답변 부탁드려요. [6] 방민아2197 16/05/31 2197
83913 [질문] 코딩용 노트북 추천 부탁드립니다. [19] AirQuick4141 16/05/31 4141
83199 [질문] 자바스크립트+XMLHttpRequest 질문입니다. [6] 꼭두서니색1610 16/05/18 1610
80400 [질문] [질문] 모니터 추천 부탁드립니다 Mockingbird1176 16/03/27 1176
78901 [질문] 프로그래머가 되려면 어떤 종류의 지식을 배워야하나요? [29] 후제5135 16/02/29 5135
목록 이전 다음
댓글

+ : 최근 1시간내에 달린 댓글
+ : 최근 2시간내에 달린 댓글
맨 위로