[정보] jQuery 로 AJAX 를 이용하여 JSON 을 파싱, 사용하기
This post was written on April 4, 2018

또 다시 몇 년만에 프로그래밍을 하게 되었다. 회사의 판매 관리, 재고 관리, 매입 관리 프로그램(웹)을 만들고 최근 재고의 양에 따른 이슈로 재고 관리 능력을 좀 더 강화했다. 처음에 DB 설계를 너무 대충해 놓은 관계로 관련 문제가 지속되고 있었는데 이제 해결될 것 같다. 다만, 프로그램의 변화를 따라서 데이터 자체도 변화해야 하는 요소가 있어서 완전히 편하게 사용하려면 시간이 좀 걸릴 듯 하다. 해당 프로그램을 처음에 만들 때는 이 프로그램이 이 수준의 덩치를 가질 지 몰랐었는데 지금은 덩치가 상당히 크고 구조가 매우 복잡해졌다. 또한 회사의 상황과 너무 잘 맞기도 해서 가끔 소스를 보고 있으면 뿌듯하다.

이번 작업을 진행하다가 보니 JSON 이 필요한 상황이 있어서 사실상 처음으로 JSON 을 사용해보게 되었는데 jQuery 가 워낙 막강하여 매우 쉽게 작업할 수 있었고 오랜만의 프로그래밍이라 블로그에 남겨놓고 싶어져서 본 포스트를 작성한다. 오래 전에는 jQuery, prototype 뿐만 아니라 그냥 자바스크립트로도 AJAX 방식을 광적으로 많이 사용했었는데, 매번 text 나 HTML 로 읽었고 장난삼아서 몇 번 해본 오픈 API 관련 프로그래밍에서만 XML 을 파싱해서 (그 때는 잘 몰라서 아주 어렵게) 사용해 본 것이 다였던 것 같다. 사실 가장 심플하고 강력한 데이터 방식은 기억하기로는 JSON 일 것인데 한번도 사용하지 않았던 기억으로 인해 이번에는 사용해보게 되었다.
★ JSON : JavaScript Object Notation
※ JSON : 나무위키 참고

(1) 서버측
PHP를 사용했는데, 그것이 본 내용과는 특별히 관계가 없을 듯 하다.
헤더에서 “Content-type:application/json;” 이라고 명시해주는 것이 중요했다.

(2) 클라이언트측
jQuery 를 사용하여 아래와 같이 작성하면 끝이다.

function example(a) {
    $.ajax({   
    type : "get",
        url : url, // 서버측 경로.
        dataType : "json",  // json 명시.
        data : "a=" + a,
        success :  function(msg) {
            if(msg) { // msg 는 이미 파싱되어 배열로 가공된 데이터이다.
                for( var i = 0; i < msg.length; i++ ) {  
                          // 알아서 사용하면 됨.
                        $("#aaa").append("<option value='"+msg[i].t_idx+"'>"
                        +msg[i].t_name+"</option>"); //사용예
                          // msg 에는 t_idx 와 t_name 이 있었고, 
                          //해당 내용을 셀렉트박스의 옵션값에 추가하는 내용.
                    }
                }
            }
        }
                , error: function(jqXHR, textStatus, errorThrown) { 
                console.log(jqXHR.responseText); 
        } 
    });
}

쓸데없이 JSON.parse 를 계속 사용하다가 문제 해결에 30분을 보냈다.
오랜만에 느껴보는 프로그래밍의 묘미, 즐거운 시간이었다.

별 건 아니지만, 어디에선가 필요한 분에게 도움이 되기를…
누군가는 30분을 절약할 수 있을 것이다.

의미없는 사진 – 맛은 없었다.

여담 1 )

최근에는 컴퓨터 프로그래밍이 정규과목이라고 하던데, 대환영이다.

프로그래밍 교육의 장점은 아주 많겠지만 그 중에서 중요한 것은 세가지로 볼 수 있는데, 첫 번째는 모두 알다시피 수학과 비슷하게 문제해결능력을 길러준다는 것이다. 컴퓨터 프로그래밍이 최초에 재미있을 수 있는 이유이기도 하다.

두 번째는 정보시대를 살아가고 있는 우리에게 프로그램이 어떻게 만들어지는지 이해하게 해주고 프로그램을 만들 수 있게 해줄 수 있다는 것이다. 우리는 너무나 많은 프로그램들과 앱을 사용하고 있다. 그 속을 어느 정도 알아놓는 것은 점점 상식이 되어가고 있다.

가장 중요한 것은 세 번째인데, 바로 어떤 상황에 대한 예측 능력을 높여준다는 것이다. 프로그래밍을 하다보면 “어떤 사람이 저 버튼을 누르면 어떻하지?”, “어떤 사람이 저 텍스트 박스를 입력하지 않고 완료 버튼을 누르면 어떻하지?”, “어떤 사람이 저 텍스트 박스에 특이한 SQL 문을 삽입하면 어떻하지?” 등과 같은 프로그램의 특별한 오류(혹은 이상한 해킹)에 대해 고려하게 되며, 더 나아가서 어떻게 하면 사람들이 편하게 사용할 수 있을지에 대한 사용자 인터페이스(UI) 에 대해서 깊게 고민하게 되는데 이 경우에도 사람들이 어떻게 움직일 지에 대한 끊임없는 예측을 하게 된다. 그리고 이 예측 능력은 무엇을 하던지 간에 반드시 [매우 강력하게] 도움이 된다.

때문에 대환영이다.

여담 2 )

위의 컴퓨터 프로그래밍 교육을 코딩 교육이라고 많이 표현하던데, ‘코더’는 ‘프로그래머’의 낮춤말의 의미로 사용되는 경우가 많다. ‘코더’는 코드만 작성하고 ‘프로그래머’는 전체 프로그램을 기획한다는 그런 의미가 있었다. 요즘은 관계가 없는 것인지 모르겠지만, 여전히 그러하다면 ‘코딩 교육’ 이라는 말보다는 ‘프로그래밍 교육’ 이라고 하는 것이 좋을 듯 하다. 물론 단어보다는 교육의 본질이 더 중요하겠지만 말이다.

여담 3 )

코딩은 또한 HTML 퍼블리싱을 의미하는 경우도 있다. 예쁘게 잘 꾸며진 웹사이트를 디자인하고 그 디자인을 HTML 화 하는 것이 퍼블리싱인데 그것을 코딩이라는 말로 부르는 경우가 많다. 나는 ‘코더’라는 단어를 싫어해서 퍼블리싱하는 사람은 ‘퍼블리셔’이라고 표현하는 것을 선호한다.
나는 아직도 우리 회사에서 가끔 디자이너들이 ‘코딩’, ‘코딩’ 이라고 외칠 때마다 깜짝 깜짝 놀란다.

여담 4 )

원래 컴퓨터 프로그래밍 하는 사람들 모두를 ‘프로그래머’라고 불렀으나, 오래 전 언제부터인가 갑자기 ‘개발자(developer)’ 라는 단어가 생겼다. 아마도 MS 에서 만든 것으로 기억되는 이 단어는 개인적으로 느끼기에는 뭔가 한 급 아래 느낌의 단어이다. 프로그래머가 만들어놓은 툴을 이용해서 개발하는 사람 같은 의미. 예를 들면 위의 jQuery, prototype 등 라이브러리를 만든 사람은 프로그래머이고 그것을 이용해서 무언가를 만드는 사람은 개발자인 느낌, 오라클, MS-SQL, MySQL 만드는 건 프로그래머이고 그것을 이용해서 무언가를 만드는 사람은 개발자인 느낌, 비주얼 스튜디오나 관련 라이브러리, 프레임웍을 만드는 사람들은 프로그래머이고, 그것을 이용해서 무언가를 만드는 사람들은 개발자인 느낌이다. 뭐 적절히 잘 선택된 단어일 수도 있겠지. 어느정도 인정할 수 밖에 없는 부분이다.

여담 5)

‘여담 4’에서 말하는 ‘진짜’ 프로그래머들이 만드는 OS, DB, 브라우저, 컴파일러와 같은 프로그램들은 아직도 누가 어떻게 만드는 지 모르겠다. 이게 여러 사람이서 함께 개발하는 것이 가능한 것인지… 아직도 그런 고급(?) 프로그램들은 정말 외계에서 온 것처럼 느껴진다. 만드는 방법을 알면 그렇지 않겠지만, 방법을 모르니 사람이 만들었다는 것이 믿겨지지가 않는다.

여담 6 )

우리나라도 현재 변화하고 있겠지만, 예전의 기억에 웹 프로그래밍을 정말 잘하는 사람(프리랜서 아님)이 연봉 1억이었다. 많은 돈일지는 모르겠지만, 그 사람은 당시 그 분야 1등었다. 스포츠를 하거나, 연예인을 하거나, 그냥 다른 공부를 하거나, 어쨌거나 다른 분야에서 그만한 노력을 했으면 그 사람은 그보다는 훨씬 많은 돈을 벌었을 것이다. 공부의 양은 상당한 수준인데 1등이 받는 연봉은 1억이라니, 거기에 그렇게 공부를 하는 다른 직업은 존경까지 받는데 프로그래머는 멸시를 받는다. 물론 그런 상황은 프로그래머가 너무 많았다는 것과 그들이 직접 만들어낸 부분도 어느 정도 존재한다는 것 등 프로그래머 자신들의 문제도 있었지만, 그럼에도 세상은 프로그래머를 너무 인정해주지 않았었던 것 같다. 너무 오래 전 이야기인가? 이제는 안 그러려나? 잘 모르겠다. 어쨌거나 아직 그런 상황이라면 그런 부분이 좀 해소되고 전문직으로서 당당히 인정받기를…

여담 7 )

내 자식이 프로그래머 한다고 하면 말릴 것이고, 그래도 한다고 하면 해외에서 진짜 프로그래머 교육을 시켜서 해외에서 진짜 프로그래머로 자리 잡기를 간절히 기원할 것 같다.


HS LOG List of ETC

Copyright © HS LOG
Published on April 4, 2018 Filed under: ETC; Tagged as: , , ,

No Comments

Thank you for visiting. If you leave a comment, I will not forget.

HS LOG List of ETC

 
The number of visitors for this post is 6,302 (measured by Jetpack).