Javascript로 Class 만들기

Javascript는 프로토 타입 기반입니다.

따라서 클래스가 존재하지 않습니다.

아, 물론 최근 표준인 ES6에서는 class가 추가되었죠.

하지만 이전에 프로토 타입을 이용한 클래스 만들기를 먼저 알아보겠습니다.


프로토타입이 무엇인가? 그리고 왜 쓰는 것인가?

이는 매우 길어질 수 있는 내용이라 다음번에 다루도록 하겠습니다.

오늘은 클래스가 아닌, 프로토 타입 기반으로 클래스 느낌 나도록(?) 한번 만들어 보죠.

ajax HTTP 요청 클래스 구현하기

/* Ajax를 사용한 HTTP POST 요청을 보내는 클래스
    *
    * 성공시 콜백함수 인자값 -> function(data, textStatus, response) 서버로부터 받은 데이터, HTTP 요청결과 - 성공했으면 success, HTTP 응답이 객체형태로 옴
    *
    * 실패시 콜백함수 인자값 -> function(response, textStatus, error) HTTP 응답이 객체 형태로 옴, HTTP 응답값, 에러값
    *
    * */
    function HttpRequest(target, data, success_callback, fail_callback){
        this.target = target;   //요청을 보낼 서버 주소
        this.data = data;       //Post 요청에 보낼 데이터
        this.success = success_callback;    //HTTP 요청 성공시 호출할 콜백 함수
        this.failure = fail_callback;        //HTTP 요청 실패시 호출할 콜백 함수

        this.sendPost = function(){
            $.ajax({
                url : this.target,
                type : "POST",
                data : this.data,
                success : this.success,
                error : this.failure
            });
        }
    }

흔히 C++이나 Java에서 멤버 변수 선언하듯이 변수를 선언해주면 됩니다.

대신 this 키워드를 쓰는 것만 잊지 않으시면 되요.

다른 객체지향 언어의 Class를 쓰시던 분들이라면 조금 의하할 수 있습니다.

이렇게 함수 형태로 객체지향 프로그래밍을 하는 것이 Javascript 프로토타입 기반 프로그래밍 특징이라고 할 수 있죠.

멤버 함수 같은 경우는 마찬가지로 this 키워드를 써서 함수명을 지정해준 다음, 함수 내용을 작성하시면 됩니다.

위의 코드는 많이 쓰이는 HTTP 통신을 클래스 형태로 한번 만들어 본 것입니다.

sendPost 함수를 호출하면 ajax를 이용해서 지정된 타겟 URL로 HTTP POST 요청을 날리네요.

응답을 받으면 콜백 함수를 실행해서 개발자가 데이터를 받아 처리할 수 있도록 해주는 것도 잊지 않았습니다.

Class 사용하기

/* ajax로 주거공간 견적 데이터를 불러온다 */
    var target = "target URL";
    var data = {"order_by" : "New", "place_type" : "주거"};   //POST 요청에 포함시킬 데이터 값. 필드이름 : 값
    var success = function(data, status, response){

        var parsed_data = JSON.parse(data);     //서버로부터 받은 데이터를 분해한다
        var result_code = parsed_data["result_code"]["major_code"];     //데이터가 제대로 왔는지 응답값을 확인한다

        if(result_code == "SUCCESS")    //값이 제대로 왔을 경우
        {
            var estimate_data = parsed_data["return_data"];
            load_data_on_target(estimate_data, $('#residential'));      //주거용 탭에 데이터를 불러온다
        }
        else
        {
            alert("서버로부터 데이터를 읽는데 실패했습니다.");
        }

    };

    var fail = function(response, status, error){
        alert(error);
    };

    var http = new HttpRequest(target, data, success, fail);    //메인 페이지의 HttpRequest 클래스 사용
    http.sendPost();
 

Javascript에서 클래스를 어떻게 사용하는지 한번 보시죠.

유의할 점은 위의 함수가 같은 페이지(HTML 페이지)안에 선언되어있어야 한다는 점입니다.

new 키워드를 이용해서 인스턴스를 생성하고 인자값들을 넣습니다.

그리고 sendPost()를 호출하면 끝!!

이렇게 클래스를 만들어서 사용하면 중복되는 코드도 줄이고 나중에 유지보수 시에도 더 효율적으로 작업할 수 있겠죠?

Reference

1. javascript class mozila → https://developer.mozilla.org/ko/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript
2. EC6 class 만들기 → http://beomy.tistory.com/15
3. javascript Prototype 이해하기 → https://medium.com/@bluesh55/javascript-prototype-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-f8e67c286b67
4. ECMAScript, ES6은 무엇인가? → http://takeuu.tistory.com/93
5. 속깊은 자바스크립트 Prototype에 대해서 → http://unikys.tistory.com/316