[ 국비교육 ] Day 41

자바스크립트의 기본적인 문법들을 얼추 배우고, 오늘은 기분 문법을 토대로 웹 API를 분석하고 상황에 따라 커스텀하는 실습 시간을 가졌다.

하지만 API라는 개념을 이해하기 쉽지 않았고, 따라서 이 기회에 API, Library, FrameWork 에 대해서 간단하게 정리를 하고자 한다.

API

API는 Application Programing Interface의 약자로 프로그램 간의 상호작용을 위한 매개체이다. 쉽게 설명하자면 API는 리모컨의 역할을 한다.

예를 들어 TV의 전원을 켜려고 한다. 그럼 리모컨이나 TV에 달린 버튼을 눌러서 TV를 켤 것이다. 이때, 리모컨은 우리가 TV에 전원을 켜달라는 기능을 이용할 수 있는 인터페이스이다.

이를 프로그램에 대입하면, TV라는 프로그램의 전원 기능을 이용하기 위해 리모컨이라는 API를 통해 우리 프로그램은 요청을 보내고 API는 해당 기능을 활성화하여 TV의 전원을 켜준 것이다.

이처럼 API는 프로그램 간의 연결점이 된다. 여기서 한 가지를 더 짚고 넘어가자면 API의 구현 로직으로 일반적인 사용자는 해당 로직을 보기 힘들다.

이 역시 리모컨도 마찬가지로 리모컨의 회로를 알고 사용하는 경우는 극히 드물다. 따라서 프로그램 이용자에게 개발자들은 API 사용법을 제공하고 이를 토대로 이용자는 요청을 보낸다.

라이브러리랑 프레임워크는 논리적인 개념에선 메모리 상에서 돌아가는 모듈일 뿐이다. 그러나 추상적 개념에서 다루게 된다면 둘을 분명한 차이가 있다. 물론 정확히 구분하지 않는 분들도 계시지만, 그래도 정립해두면 좋을 것 같다.

그래서 둘의 차이를 어떻게 정리해야 할지 고민했고, ‘건물’을 통해서 라이브러리와 프레임워크를 정리해보자.

우리는 ‘건물’을 짓는 건설가입니다. 이제부터 건물을 하나 지어봅시다. 물론 실 건축과정은 더 복잡하지만, 프로그램을 위한 간단한 예시로서 과몰입을 하지 말자.

Library

우리가 만약 홀로 건축을 한다면 그 준비를 스스로 해야 한다. 사람도 섭외하고, 설계도도 그리고, 투자도 받고 위치 선정부터 하나 하나. 또 착공되면 배관도 설치하고 뼈대도 홀로 올려야 한다.

이를 쉽게 하기 위해선 이미 만들어진 것들을 사용하는 것이 답이다. 그래서 건축 설계사들에게 설계도를 받고, 전문 업체를 통해 인력을 모집하고, 부동산업자를 통해 토지도 알아보고 등등 홀로 하는 것이 아니라 ‘특정 기능’을 하는 업체에 맡겨 진행을 한다.

위 예시를 개발의 관점에서 보면 라이브러리 없이 개발은 ‘홀로 건축하는 것’이다. 따라서 개발을 더 효율적으로 하기 위해서 이미 특정 기능을 라이브러리에서 찾아다가 사용하는 것이다. 즉, 필요에 따라 가져다가 쓰는 것이다.

물론 개발 이전 필요한 라이브러리들을 미리 만들어놓을 수 있을 것이고, 다른 이가 만든 걸 용도에 맞게 수정하여서도 사용할 수 있다. 이런 점에서 라이브러리의 포인트는 개발자가 라이브러리를 ‘가져다 쓴다’라는 것이다.

즉, 개발자가 프로그램에서 필요한 순간에 라이브러리의 메서드, 변수를 호출하여서 사용한다는 것이다. 바로 이것이 프레임워크와 라이브러리를 구분하는 분기점이다.

Framework

건설과정에서 필요에 따라 라이브러리를 이용했다면, 프레임워크는 보다 그 목적이 분명하다.
예를 들어 프레임워크는 내가 지을 건물에 대한 모든 것들이 이미 정해져 있다. 즉, 빌라, 오피스텔, 전원주택, 아파트, 빌딩 등 건축 대상에 따라서 이용할 업체, 기술, 재료가 정해져 있다는 것이다.

그리고 우리가 종류를 정하게 되면 프레임워크는 그에 필요한 것들을 건물을 짓는 우리에게 요구하게 된다. 만약 빌라를 짓기로 했다면 프레임워크는"이 부분에서 빌라 설계도가 필요하고, 배관은 특정 종류로, 철근은 어느 브랜드 등"을 요구한다.

우리는 그에 맞춰서 전달하게 되면 프레임워크가 건물을 만들어 준다. 물론 프레임워크에 따라 같은 결과물이 나오진 않는다. 즉, 프레임워크는 건물에 대한 뼈대를 제공할 뿐 그 틀 안에서 내부 디자인같은 것은 건설자인 우리가 커스텀할 수 있다.

이 역시 개발 과정에서 본다면 개발을 효율적으로 해준다는 것은 라이브러리랑 별반 다를 것이 없다. 다만 우리의 프로그램을 위해 라이브러리를 가져다 쓴다면, 프레임워크는 우리가 개발할 프로그램의 종류에 맞게 선택해 사용하는 것이다.

물론 이 역시 만들어 쓸 수 있겠지만, 이미 시중에는 많은 이들이 이용하는 다양한 종류들의 프레임워크들이 존재한다. 그리고 이용자가 많은 만큼 기능과 이슈처리가 빠른 편이다.

그리고 제일 중요한 라이브러리와의 분기점은 개발의 주도권이 개발자가 아닌 프레임워크에게 있다는 것이다. 따라서 개발자는 프레임워크가 정해둔 룰에 맞춰서 그에 맞는 코드를 입력한다. 물론 그 안에서 우리가

그 방식은 객체지향의 상속과 추상화를 통한 implements의 방식을 따른다. 즉, 단순한 메서드 호출이 아닌 프레임워크의 요구에 따라 개발자가 채워 넣는 것이다.

결과적으로 라이브러리와 프레임워크의 차이는 "개발 주도권이 누구에게 있는 것이냐?" 이다.

웹 API

웹 API는 웹상에서 사용하는 API를 지칭한다. 이는 HTTP 서비스의 하나로서 우리가 타인이 만든 웹 애플리케이션을 사용하고 싶을 때, 웹API 사용법에 따라 해당 애플리케이션을 조작하는 것이다.

이런 웹 API는 네이버, 카카오 같은 수 없이 많은 기업이 만들어 제공하고 있다. 일종의 자신들의 플랫폼을 넓히는 수단으로 ‘네이버 아이디로 로그인하기’와 같은 것이 대표적인 웹 API이다.

무상으로도 많이 제공해주지만, 서버를 연결해주는 것이기 때문에 호출에 대한 제한이 걸려 있기에 적당히 사용해주는 것이 예의일 것이다. 물론 사용도 하고 허용된 범위 안에서 응용해서도 사용할 수 있다.

예시 1 : 카카오 우편번호 API ( https://postcode.map.daum.net/guide )

<!--(External) API 호출-->
<head>
	<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
</head>

<body>
    <input type="text" id="postcode" placeholder="우편번호">
    <input id="search" type="button" onclick="execDaumPostcode()" value="우편번호 찾기">
    <!-- 이벤트를 속성으로 주는 방법. 해당 이벤트 발생시 함수가 실행 됨. -->
    <input type="text" id="jibunAddress" placeholder="지번주소">
    
    <script>
        // 1. 이벤트 처리
        document.getElementById("search").onclick = function () {
      		// 2. Postcode 객체 생성
            new daum.Postcode({
      			// 3. oncomplete 실행 : 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.
                "oncomplete": function (data) {

                    // 4. data의 필드를 요소의 값으로 세팅
                    document.getElementById('postcode').value = data.zonecode; 
                    document.getElementById("jibunAddress").value = data.jibunAddress;
                }
            }).open();
            // function() { new daum.Postcode({}).open(); }
        } 
  </script>
</body>

예시 2 : 카카오 MAP API ( https://apis.map.kakao.com )

<head>
	 <script type="text/javascript"
        src="//dapi.kakao.com/v2/maps/sdk.js?appkey=52ec254ddb8604aaaeda68c52f02a0c1"></script>
</head>

<body>
  	<!--지도를 담을 레이아웃 -->
	<div id="map" style="width:500px;height:400px;"></div>
  
  
<!--응용 : 여러 개의 마커 찍기, 우클릭으로 마커 없애기, 마커 보이기/감추기 -->
    <p>
      	<!--마커 표시 버튼 -->
        <button onclick="hideMarkers()">마커 감추기</button>
        <button onclick="showMarkers()">마커 보이기</button>
    </p>

    <script>
        let container = document.getElementById('map'); // 지도를 담을 영역의 DOM 레퍼런스
        let options = { // 지도를 생성할 때 필요한 기본 옵션
            center: new kakao.maps.LatLng(37.566535, 126.97796919), //지도의 기본좌표.
            level: 6 // 지도의 레벨(확대, 축소 정도)
        };
        let map = new kakao.maps.Map(container, options); // 지도 생성 및 객체 리턴

        // MAP CONTROL
        let mapTypeControl = new kakao.maps.MapTypeControl();
        map.addControl(mapTypeControl, kakao.maps.ControlPosition.BOTTOMLEFT);

        let zoomControl = new kakao.maps.ZoomControl();
        map.addControl(zoomControl, kakao.maps.ControlPosition.LEFT);

        // 이벤트 처리
        kakao.maps.event.addListener(map, 'click', function (mouseEvent) {
            // 클릭한 위치에 마커 표기할 함수 호출
            addMarker(mouseEvent.latLng);
        });
		
      	// 마커 객체를 담을 배열 생성
        let markers = [];


        // 마커 객체를 생성하고 지도위에 표시하는 함수
        function addMarker(position) {

            // 마커 객체 생성
            let marker = new kakao.maps.Marker({
                position: position
            });
			
      		// 마커 객체에 우클릭 이벤트 처리(삭제)
            kakao.maps.event.addListener(marker, 'rightclick', function () {
                marker.setMap(null);
            });

            // 마커가 지도 위에 표시 설정
            marker.setMap(map);

            // 생성된 마커를 배열에 추가
            markers.push(marker);
        }

        // 배열에 추가된 마커의 표시 설정값을 바꾸는 함수
        function setMarkers(map) {
            for (let i = 0; i < markers.length; i++) {
                markers[i].setMap(map);
            }
        }

        // "마커 보이기" 버튼을 클릭하면 호출되어 배열에 추가된 마커를 지도에 표시
        function showMarkers() {
            setMarkers(map)
        }

        // "마커 감추기" 버튼을 클릭하면 호출되어 배열에 추가된 마커의 설정값을 바꿈
        function hideMarkers() {
            setMarkers(null);
        }
    </script>
</body>

Author And Source

이 문제에 관하여([ 국비교육 ] Day 41), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@ho_c/국비교육-Day-41

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)