JavaScript

자바스크립트 (JavaScript)에서 객체지향 프로그래밍 (OOP) 하기

dev 2017-11-19

자바스크립트에서는 명시적으로 지원되는 객체지향 프로그래밍 방법이 부족합니다. 객체지향 프로그래밍의 철학을 철저하게 따르는 자바 (Java)와는 이름은 비슷하지만 차이가 많습니다.

이번 포스트에서는 자바스크립트에서 OOP를 흉내낼 수 있는 팁을 소개합니다.

OOP 꽃은 클래스 입니다. 클래스는 상태 (State)과 행동 (Behavior)을 캡슐화 (Encapsulation)하는 단위입니다. 상태는 속성 (Attribute)로, 행동은 메소드 (Method)로 구현됩니다. 물론 자바스크립트에서는 메소드를 함수 (Function)라고 명명하는 것이 더 자연스러울 것입니다.

그럼 자바스크립트에서 클래스를 만들어 보겠습니다.

function MyClass() {

}

사실 자바스크립트는 class 키워드를 완전히 지원하고 있지 않습니다. 클래스 역할을 function 키워드가 대신합니다. function 키워드로 클래스도, 함수도 선언하는 것입니다.

여기서 MyClass의 객체를 생성하려면 var myClassInstance = new MyClass();와 같이 하면 됩니다.

그럼 MyClass에 상태와 행동을 넣어 보겠습니다.

function MyClass() {
    var myPrivateAttr1 = 1;
    var myPrivateAttr2 = 2;
    function myPrivateFnc1 () {
        return myPrivateAttr1;
    }
    function myPrivateFnc2 () {
        return myPrivateAttr2;
    }
}

변수 2개와 함수 2개를 넣었는데, 모두 MyClass 외부에서는 사용할 수 없습니다. 즉 이들은 Private 속성과 함수 입니다. 그럼 Public 속성과 함수를 추가하는 방법을 보겠습니다.

function MyClass() {
    var myPrivateAttr1 = 1;
    var myPrivateAttr2 = 2;
    function myPrivateFnc1 () {
        return myPrivateAttr1;
    }
    function myPrivateFnc2 () {
        return myPrivateAttr2;
    }

    var self = {
        myPublicAttr1: 1,
        myPublicAttr2: 2,
        myPublicFnc1: function () {
            return myPrivateFnc1();
        },
        myPublicFnc2: function () {
            return myPrivateFnc2();
        }
    };
    return self;
}

이렇게 하면 외부에서 self 변수 안에 들어 있는 속성과 함수들을 접근할 수 있게 됩니다. 즉 이들은 Public 속성과 함수들 입니다.

var myClassInstance = new MyClass();
console.log(myClassInstance.myPublicFnc1());

이렇게 하면 브라우저 콘솔에 1이 출력될 것입니다.

Google과 Naver에서 동시 검색하는 Chrome Extension 만들기

dev 2017-10-13

Google과 Naver를 동시에 검색해 보고 싶어 졌습니다. 처음에는 iframe으로 그냥 띄우면 되지 않을까 했는데 문제가 생겼습니다. Google과 Naver와 같이 X-Frame-Options가 DENY 또는 SAMEORIGIN으로 설정되어 있는 사이트는 iframe으로 띄울 수가 없습니다.

그래서 생각한 것이 Chrome Extension으로 만들어 보는 것이였습니다. Chrome Extension 개발의 기본적인 사항은 Getting Started: Building a Chrome Extension에서 확인하시면 됩니다.

코드는 간단합니다. 우선 HTML 코드 입니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Google과 Naver 동시 검색 확장앱</title>
    <link rel="stylesheet" type="text/css" href="lib/bootstrap-4.0.0-beta/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="lib/font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="browser.css">

    <script type="text/javascript" src="lib/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="lib/popper.min.js"></script>
    <script type="text/javascript" src="lib/bootstrap-4.0.0-beta/js/bootstrap.min.js"></script>
    <script src="browser.js"></script>
</head>
<body>
<div id="layout_srch">
    <div class="row">
        <div class="col">
            <a id="a_back_g" href="#"><i class="fa fa-arrow-left my-control" aria-hidden="true"></i></a>
        </div>
        <div class="col-10">
            <form id="form_srch" class="form-inline">
                <div id="dv_srch" class="form-group">
                    <input id="inp_query" class="form-control mr-2" value="">
                    <button id="btn_srch" class="btn btn-success">
                        <i class="fa fa-search" aria-hidden="true"></i>
                    </button>
                </div>
                <div class="form-check mb-2 mr-sm-2 mb-sm-0">
                    <label class="form-check-label">
                        <input id="ckb_mode" type="checkbox" class="form-check-input">
                        모바일 모드
                    </label>
                </div>
            </form>
        </div>
        <div class="col">
            <a id="a_back_n" href="#"><i class="fa fa-arrow-left my-control" aria-hidden="true" style="float: right"></i></a>
        </div>
    </div>
</div>
<webview id="ifr_g" src="https://www.google.co.kr/search?q="></webview>
<webview id="ifr_n" src="https://search.naver.com"></webview>
</body>
</html>

상단에 검색 폼을 두고 왼쪽에는 구글 웹뷰, 오른쪽에는 네이버 웹뷰를 두었습니다.

상단의 검색 폼에서 질의를 입력하고 검색 버튼을 누르면 이 두 웹뷰를 각 URL에 질의를 추가하여 다시 로딩합니다. 이를 위한 JavaScript 코드는 다음과 같습니다.

$(function() {
    var webview_g = $('#ifr_g');
    var webview_n = $('#ifr_n');

    var version = navigator.appVersion.substr(navigator.appVersion.lastIndexOf('Chrome/') + 7);
    var match = /([0-9]*)\.([0-9]*)\.([0-9]*)\.([0-9]*)/.exec(version);
    var majorVersion = parseInt(match[1]);
    var buildVersion = parseInt(match[3]);

    var AGENT_PC = webview_g.get(0).getUserAgent();
    var AGENT_MOBILE = "Mozilla/5.0 (Linux; Android 7.0; SM-G930V Build/NRD90M) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.125 Mobile Safari/537.36";

    function search() {
        var query = $('#inp_query').val();

        webview_g.attr('src', "https://www.google.co.kr/search?q="+query);
        webview_n.attr('src', "https://search.naver.com/search.naver?query="+query);
    }

    $('#btn_srch').click(search);

    $('#inp_query').keypress(function(event) {
        if (event.which == 13) {
            document.querySelector('#btn_srch').click();
            event.preventDefault();
        }
    });

    $('#ckb_mode').change(function () {
        var checked = $(this).prop('checked');
        if (checked) {
            webview_g.get(0).setUserAgentOverride(AGENT_MOBILE);
            webview_n.get(0).setUserAgentOverride(AGENT_MOBILE);
        } else {
            webview_g.get(0).setUserAgentOverride(AGENT_PC);
            webview_n.get(0).setUserAgentOverride(AGENT_PC);
        }
        search();
    });

    function adjust_height() {
        var height = window.innerHeight - 60;
        webview_g.css('height', height);
        webview_n.css('height', height);
    }
    adjust_height();
    window.onresize = adjust_height;
});

여기서 주의할 점은 웹뷰의 에이전트를 잘 정해줘야 한다는 것입니다. 에이전트가 잘 정의되어 있지 않으면 (구글, 네이버가 막아놔서) 검색이 되지 않을 수도 있습니다.

추가로 CSS도 공유합니다.

body {
    margin: 0;
    padding: 0;
    min-width: 800px;
}

#layout_srch {
    position: fixed;
    top:0px;
    right:0px;
    left:0px;
    height: 60px;
    border-bottom: 1px solid #eee;
}

#layout_srch .my-control {
    color: #fff;
    margin: 10px;
    padding: 10px;
}

#form_srch {
    margin: 0px auto;
    width: 600px;
    padding: 10px;
}

#inp_query {
    width: 400px;
}

#lb_mode {
    color: #fff;
}

#dv_srch {
    width: 80%;
    margin-right: 10px;
}

#ifr_g {
    position: fixed;
    right: 50%;
    top: 60px;
    bottom: 0px;
    width: 50%;
}

#ifr_n {
    position: fixed;
    right: 0px;
    left: 50%;
    top: 60px;
    bottom: 0px;
    width: 50%;
}

결과는 다음과 같습니다.

프로젝트 파일 첨부합니다. 다운로드