[Frontend] Javascript SDK란? (API와의 차이점)
프론트엔드 채용공고를 보다가 익숙치 않은 새로운 단어가 보였다.
"지도 Javascript SDK를 개발해요" (당근마켓)
오잉? SDK가 뭐지..? 많이 들어본 것 같기도 하고...
또 다른 채용공고를 보니..
"다양한 환경에서 실행되는 SDK 형태의 서비스로서 크로스 브라우징을 깊이 있게 지원합니다." (채널톡)
오..😦 난 몰랐지만, 많이 사용되는 개념인가보다! 하여...
이번 포스팅에서는 SDK에 대하여 다뤄보도록 하겠습니다. 또, 제가 SDK를 알아보며 가장 헷갈렸던 API와의 차이점에 대해서도 같이 알아보도록 해요!😉
1. API란?
💡 API란?
👉 Application Programming Interface의 약자로, 모듈화하여 만들어진 어떤 기능을 제어/제공하는 인터페이스이다.
API는 나와는 다른 앱 또는 서비스와 통신을 하기 위한 프로토콜의 집합체입니다.
예를 들어, API 제작자가 누구나 데이터베이스나 기능을 사용할 수 있도록 모듈화하여 만들어두었다고 가정해봅시다.
API 사용자는 A에 대한 정보가 필요할 때 DB에 접속하여 정보를 가져오는 것이 아니라 getInfo와 같은 API를 통해서 정보를 가져오게 됩니다. 수정이나 삭제와 같은 작업도 API를 사용하여 같은 방식으로 동작을 합니다.
즉, API는 프로그램의 기능을 다른 프로그램이 쓸 수 있게 하는 것이 목적입니다.
API를 사용하면 구현 방식을 전혀 알지 못해도, 제품 또는 서비스가 서로 커뮤니케이션할 수 있으며, 어플리케이션 개발을 간소화하여 시간과 비용을 절약할 수 있습니다.
🔑 API 예시
- 차량 공유 앱에서 승차 거리와 시간을 계산하는 것
- 차량 공유 앱에서 드라이버가 픽업 위치에 도착했음을 알리는 SMS 기능
그렇다면 개발을 진행할 때 이 API를 어떻게 불러오고 사용할 수 있는지 아시나요?
이때 사용되는 것이 SDK입니다. 우리는 Request에 필요한 변수, 데이터 파싱 등 직접 처리할 필요없이 SDK를 활용해서 빠르고 간편하게 개발을 진행할 수 있습니다!
2. SDK란?
카카오 api, 네이버 api 등 사용할 때.. SDK 파일 설치해보신 적 있나요?
있을걸요?
당신은 당신도 모르게 SDK 파일을 설치했다..ㄷㄷ;; (=나)
API를 추가하기 위해 개발자 문서를 읽으면서 따라하다가 index.html 파일의 <body> 태그 내에 <script> 태그로 코드를 붙여넣으라는대로 붙여넣으신 적 있으신가요?
<!-- 카카오 지도 api -->
<script
type="text/javascript"
src=`//dapi.kakao.com/v2/maps/sdk.js?appkey=${REACT_KAKAO_APP_KEY}&libraries=services,clusterer,drawing`
></script>해당 어플리케이션의 SDK 스크립트 URL을 생성하고 웹 페이지의 <body> 태그 뒤에 추가를 하게 되면, SDK가 페이지 로딩을 차단하지 않고 비동기적으로 로드가 됩니다. SDK가 로드되면, Javascript를 사용하여 원하는 해당 어플리케이션의 API를 호출하고 필요한 기능을 구현할 수 있습니다.
즉, API를 사용하기 위해서는 SDK를 반드시 스크립트에 추가해야 합니다.
SDK는 API를 사용할 수 있도록 도와주는 도구이며, 스크립트를 웹 페이지에 추가하면 해당 API를 활용할 수 있게 되는 겁니다!
더 자세히 알아보자면...
💡 SDK란?
👉 Software Development Kit의 약자로, 소프트웨어 개발자 도구 모음이다. SDK는 특정 서비스, 라이브러리, 또는 플랫폼을 개발자가 더 쉽게 사용할 수 있도록 제공하는 도구와 라이브러리의 모음이다.
개발자가 개발을 함에 있어서 더욱 쉽게 개발을 할 수 있도록 제공되는 소프트웨어 개발 도구 키트 라고 생각하시면 됩니다!
SDK에는 API, IDE, DOCS, 라이브러리, 코드 샘플, 디버거, 기타 유틸리티 등등..이 포함될 수 있습니다.
양질의 SDK라면 개발자가 특정 제품 및 에코시스템을 위한 새로운 애플리케이션을 개발할 때 필요할 수 있는 모든 구성 요소를 제공할 겁니다.
즉, 어떤 소프트웨어를 만들기 위한 도구 모음을 SDK라고 합니다. 그리고 이 도구엔 API도 포함이 되어있습니다!
🔑 SDK 예시
위의 개발자 문서들을 들어가보면 어떻게 SDK를 사용할 수 있는지 나와있습니다!
3. SDK와 API의 차이점
SDK와 API의 차이점에 대해 정리해보자면 다음과 같습니다.
| API | SDK | |
| 목적 | 소프트웨어 통신 연결 및 통합 | 다양한 개발 도구 포함 |
| 형질 | 가볍고 빠르며 전문화되어 있음 | 더 견고하며 많은 유틸리티를 포함 |
| 사용 사례 | 어플리케이션에 특정 기능을 추가하는 데 사용 | 새로운 어플리케이션을 생성하거나 하나의 패키지로 많은 기능을 추가하는 데 사용됨 |
SDK와 API를 가구조립에 빗대어 예시를 들어봅시다.
SDK는 모든 것이 다 갖추어진 키트를 얻는 것과 같습니다.IKEA 가구처럼 부품과 사용설명서까지 모든 것이 다 포함된 키트를 의미합니다.
API는 어떤 가구를 만들기 위한 하나하나의 부품을 의미합니다. 각 부품은 다른 브랜드 것일 수도 있고, 만들 수 있는 가구는 무한합니다.
즉, 정리하자면, API는 SDK의 일부가 될 수 있다는 점에서 SDK가 API보다 더 큰 개념이라고 할 수 있습니다.
부록) npm install 방식과 <script> 태그에 추가하는 방식?
위의 내용들을 정리하면서 이전 프로젝트의 코드들을 뒤져봤습니다..
API를 사용하기 위해서는 SDK가 필수적이라고 했는데.. 저는 그렇게 코드를 짜지 않았던 것 같단 말이죠..?
생각을 해보니 저는 npm install 방식을 더 많이 사용해서 라이브러리 설치를 더 많이 했던 것 같습니다.
두 방식의 차이점에 대해서 한 번 알아봅시다.
| <script> 태그로 직접 SDK 추가 | npm으로 패키지 설치 | |
| 방식 | 👉 SDK를 CDN에서 직접 로드하여 사용하는 방법 HTML 파일 내에서 <script> 태그를 사용하여 SDK의 URL을 지정하면 해당 SDK가 웹 페이지에서 로드됨 |
👉 SDK를 npm을 통해 프로젝트의 종속성으로 설치하는 방법 SDK는 Javascript 패키지로 npm 레지스트리에서 제공되며, 프로젝트 디렉토리에서 명령어를 사용하여 설치함 |
| 관리 및 업데이트 | 👉 수동 관리 필요 새로운 SDK 버전이 나올 때마다 해당 SDK의 URL을 업데이트 해야 함 |
👉 패키지 매니저 활용 패키지 관리자를 통해 SDK를 업데이트하고 버전 관리 가능 |
| 모듈화와 빌드 시스템 통합 |
👉 간단 주로 단일 JS 파일을 로드하는 간단한 방식. 모듈화와 빌드 시스템과의 통합이 적은 편 |
👉 복잡 npm을 통해 SDK를 설치하면 모듈화가 가능하며, 다양한 빌드 시스템과 통합 가능. 대규모 웹 어플리케이션 또는 복잡한 프로젝트에서 유용 |
| 의존성 관리 | 👉 어려움 SDK 외부 의존성을 처리하기 어려움. 다른 스크립트와 충돌 발생 가능 |
👉 쉬움 프로젝트의 의존성을 명시적으로 관리 가능 의존하는 패키지와 버전 간의 충돌을 방지할 수 있음 |
요약하자면, <script> 태그로 SDK를 직접 추가하는 방식과 npm으로 패키지를 설치하는 방식 간의 주요 차이는
SDK 버전 관리, 의존성 관리, 모듈화 및 빌드 시스템 통합 등에 있습니다.
두 방식은 각각의 장단점이 존재합니다.
| <script> 태그로 직접 SDK 추가 | npm으로 패키지 설치 | |
| 초기 설정 | 간편하고 빠름 | 복잡 |
| 로딩 속도 | 초기 로딩 속도 향상 | CDN보다 느림 |
| 버전 관리 | 어려움 | 쉬움 |
| 모듈화 | 어려움 | 쉬움 |
프로젝트의 규모와 요구 사항에 따라 두 가지 방식 중 하나를 선택할 수 있습니다.
간단한 프로토타입 또는 작은 프로젝트의 경우 <script> 태그로 SDK를 직접 추가하는 방식이 편리할 수 있으며,
대규모 프로젝트나 의존성 관리와 모듈화가 중요한 경우 npm을 사용하여 패키지를 설치하는 방식이 더 적합할 수 있습니다.