SDK를 만들게 된 계기
다른 회사에서 사용할 수 있는 api를 개발하면서 이를 편리하게 사용할 수 있는 SDK를 동시에 개발의 필요성이 대두되었고, 해당 서비스의 프론트엔드를 담당하고 있던 필자가 웹에서 사용할 수 있는 SDK의 개발을 담당하게 되었습니다. 이전까지 SDK에 대한 개발 경험이 없었던만큼 SDK에 대해 학습하면서 개발을 진행해보고자 합니다.
SDK란?
SDK를 개발하기에 앞서, 먼저 SDK가 무엇인지 알아봅시다! SDK는 간단히 말해서 소프트웨어를 개발하고 실행하는 데 필요한 기능을 제공하는 도구입니다.
여기까지 설명을 들으면 궁금한 점이 생길 것입니다. "API를 제공해주면 개발할 수 있는 거 아닌가? 왜 SDK가 필요한거지?"
이에 대한 답변은 아래의 흐름도를 보면서 알아보도록 하겠습니다
-
api를 사용한 개발 흐름
-
sdk를 사용한 개발 흐름
api 제공을 통해 진행하는 개발에는 6번의 단계를 거쳐 원하는 정보를 받고, 화면을 노출할 수 있지만, sdk를 사용할 경우에는 서버간의 작업을 생략하고 더 적은 단계를 거쳐 원하는 정보를 받고, 화면을 노출할 수 있습니다.
SDK 세팅하기
1. Node.js, npm 설치
이 글에서는 npm 대신 pnpm을 사용하여 프로젝트를 진행하였습니다.
2. 프로젝트 생성 및 package.json 생성
pnpm init프로젝트를 생성할 폴더로 이동한 후, 위의 코드를 실행하여 package.json을 생성합니다.
3. index.js, test.js 파일 생성
index.js 파일은 webpack의 entry 지점으로, test 객체를 생성하고 export합니다.
//index.js
import Test from "./test";
const test = new Test();
export {test as Test}; test.js 파일에는 sdk 사용자에게 제공할 함수가 있습니다.
//test.js
class Test {
constuctor() {
console.log("constuctor");
}
create() {
console.log("create");
}
open() {
console.log("open");
}
getVersion() {
console.log("v1.0.0");
}
}
export default Test; 4. webpack 설치 및 webpack.config.js 파일 생성
pnpm install을 사용하여 webpack을 설치합니다.
여기서 package.json에 webpack 정보를 저장하게 되는데, 2가지 선택지가 존재합니다.
- dependency에 webpack을 추가하기
--save-dev옵션을 사용하여 devDependencies에 추가하기
package.json의 dependency와 devDependencies의 차이는 외부 프로덕션 환경에 모듈로 제공할 때 devDependencies에 있는 모듈은 추가되지 않는다는 점이 있습니다.
webpack은 개발 환경에서만 필요하므로 --save-dev 옵션을 사용하여 설치하도록 하겠습니다. 제거할 때에는 pnpm uninstall을 사용하며, 옵션도 동일하게 사용합니다.
pnpm install webpack webpack-cli --save-dev 위의 코드까지 실행 완료하였다면, 아래와 같은 package.json 파일을 확인할 수 있는데, scripts 안에 build 명령어를 추가하면 되겠습니다.
{
"name": "sdk-test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"packageManager": "pnpm@9.12.2+sha512.22721b3a11f81661ae1ec68ce1a7b879425a1ca5b991c975b074ac220b187ce56c708fe5db69f4c962c989452eee76c82877f4ee80f474cebd61ee13461b6228",
"devDependencies": {
"webpack": "^5.97.1",
"webpack-cli": "^6.0.1"
},
"dependencies": {}
}5. webpack.config.js 설정
const path = require('path');
const config = {
entry: {
main : ['./src/index.js']
},
output: {
path: path.resolve(__dirname, 'output'),
filename: 'output.js',
library: 'SDK',
libraryTarget: 'umd',
umdNamedDefine: true
}
};
module.exports = config; 위 config는 index.js를 entry로 하여 번들링을 진행하며 결과물은 output 디렉터리 안에 output.js 파일로 저장됩니다
여기서 library 값 문자열은 변수명으로, libraryTarget 값에 따라 타입이 변경됩니다. libraryTarget은 여러가지 값이 존재하는데 자세한 정보는 이 링크(https://webpack.kr/configuration/output/#expose-a-variable-1)를 참고하면 될 거 같습니다.
6. webpack을 수행하여 output.js 파일 생성
위의 과정을 전부 이행하였다면, pnpm build를 입력하여 webpack 번들링을 시작하고 output.js 파일을 생성할 수 있습니다.
output.js 파일을 HTML 파일에 include하면 함수를 실행할 수 있게 됩니다.
HTML 파일을 열고 콘솔 창에 아래의 코드를 입력해보세요
window.SDK
SDK
SDK.Test.getVersion() //v1.0.0마치며
지금까지 SDK를 개발하게된 이유, SDK를 세팅하는 방법에 대해서 소개하였습니다.
추후 SDK에 들어가는 자세한 기능들을 구현하는 방법으로 javascript SDK 개발기를 이어가도록 하겠습니다.
