안녕하세요오오오오오!  당신이 잘하고 있기를 바랍니다! 스미입니다! 👋 바로 뛰어들자 🚀  내용물:  ⚡  Some Background of SDK Development  ⚡  Developing and running our first version  1️⃣ 뭐 -  SDK(라이브러리라고도 함)는 기술에서 추가 기능을 파생시키는 애플리케이션의 플러그인 역할을 합니다.  2️⃣ 왜 -  TypeScript를 사용한 SDK 개발은 유형 안전성과 장기적 유지 관리로 인해 오랜 시간 동안 안정성을 제공합니다.  3️⃣ 어떻게 -  SDK를 빌드하는 데 필요한 기본 단계는 다음과 같습니다.  올바른 워크플로 설정으로 프로젝트를 초기화합니다.  Bundler를 선택하고 그 목적을 이해합니다.  다양한 환경에서 SDK를 실행하기 위한 ESM, CJS, IIFE UMD를 이해합니다.  NPM, 의미론적 버전 관리 및 라이선스에 대한 라이브러리로 게시합니다.  SPA용 NPM 및 브라우저용 CDN.  1부에서는 기본적인 이해를 돕기 위해 첫 번째 기본 SDK를 빌드해 보겠습니다.  1단계: 프로젝트 초기화  다음 명령을 실행하여 새 폴더에 프로젝트를 설정합니다.   npm init -y    모든 후속 프롬프트에 대해 기본값이 yes입니다. 작성자, 라이센스, 버전 등과 같이 나중에 Package.json에서 변경할 수 있습니다. "-y"    으로 이동하여 최신 EcmaScript 모듈 시스템(ESM)과 작동하도록   추가하세요. package.json type: module    은 다음과 같아야 합니다. package.json  { "name": "ts-lib", "version": "1.0.0", "description": "SDK development tutorial", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "type": "module", "keywords": [], "author": "", "license": "ISC" }  2단계: 기본 개발 라이브러리 설치  타입스크립트    - NodeJS에서 TypeScript를 작동합니다. @types/node    - TypeScript 라이브러리를 번들로 묶는 가장 간단하고 빠른 방법입니다. tsup  복사   npm i typescript @types/node tsup -D  3단계: TypeScript 설정을 위한   설정 tsconfig  프로젝트 루트에   파일을 만듭니다. tsconfig.json  복사   touch tsconfig.json  파일로 이동하여 다음 구성을 붙여넣습니다.   { "compilerOptions": { /* Base Options: */ "esModuleInterop": true, "allowImportingTsExtensions": true, "emitDeclarationOnly": true, "skipLibCheck": true, "target": "es2022", "allowJs": true, "resolveJsonModule": true, "moduleDetection": "force", "isolatedModules": true, "verbatimModuleSyntax": true, /* Strictness */ "strict": true, "noUncheckedIndexedAccess": true, "noImplicitOverride": true, /* If transpiling with TypeScript: */ "module": "NodeNext", "sourceMap": true, "outDir": "dist", /* AND if you're building for a library: */ "declaration": true, /* If your code runs in the DOM: */ "lib": ["es2022", "dom", "dom.iterable"] }, "exclude": ["node_modules", "dist"] }  각 속성 위로 마우스를 가져가면 해당 속성에 대해 자세히 알아볼 수 있습니다.  여기서 이해해야 할 기본 사항은 다음과 같습니다.  "module": "NodeNext", "sourceMap": true, "outDir": "dist",  "   번들러   작동하지만 Node.js에서는 충돌이 발생하는 모듈 지정자를 사용하여 ESM을 내보내는 것을 방지하므로 라이브러리 작성에 적합한 옵션입니다. 일반적인 코드를 작성하고 상식을 사용하고 고품질 종속성에 의존할 때 출력은 일반적으로 번들러 및 기타 런타임과 매우 호환됩니다." 여기에서 자세한 내용을 알아볼 수 있습니다. NodeNext 에서만   https://blog.andrewbran.ch/is-nodenext-right-for-libraries-that-dont-target-node-js/    - 소스 파일 생성을 활성화합니다. 이러한 파일을 사용하면 내보낸 JavaScript 파일로 작업할 때 디버거 및 기타 도구가 원본 TypeScript 소스 코드를 표시할 수 있습니다. 프로덕션에서는 비활성화할 수 있습니다. sourceMap    - 내보낸 모든 파일의 출력 폴더를 지정합니다. outDir  /* AND if you're building for a library: */ "declaration": true, /* If your code runs in the DOM: */ "lib": ["es2022", "dom", "dom.iterable"]    - 프로젝트의 TypeScript 및 JavaScript 파일에서 .d.ts 파일을 생성합니다. declaration    - 대상 런타임 환경을 설명하는 번들 라이브러리 선언 파일 세트를 지정합니다.   React와 같은 노드 애플리케이션용이고,   &   브라우저에서 라이브러리를 실행하기 위한 것입니다. lib es2022 dom dom.iterable  4단계: 첫 번째 코드 작성    파일을 만들고 다음 기본 코드를 작성합니다. index.ts   const add = (a: number, b: number): number => a + b; const subtract = (a: number, b: number): number => a - b; export { add, subtract };  첫 번째 코드를 작성하세요.  복사   tsup ./index.ts  이제 출력 파일   가 있는   폴더가 있는 것을 볼 수 있습니다. index.cjs dist  첫 번째 SDK를 통합하고 실행해 보겠습니다!    파일을 만들고 다음 코드를 붙여넣습니다. app.js   import { add, subtract } from "./dist/index.cjs"; console.log(add(1, 2)); console.log(subtract(2, 1));  SDK를 공개하지 않았기 때문에 로컬 빌드와 직접 연결하고 있습니다.  이제 첫 번째 앱을 실행해 보세요.   node app.js  다음 출력이 표시됩니다.   3 1  축하합니다 🎉🥳 🚀🚀🚀 방금 첫 번째 SDK를 구축하고 실행했습니다!  마무리:  첫 번째 SDK를 빌드하고 실행하기 위한 기본 단계를 완료했습니다. 기본 폴더 구조를 구축하고 외부 API 엔드포인트를 통합하는 2부로 이동하세요 🚀  .....  이제 자신만의 SDK를 구축할 수 있는 지식을 갖추게 되었습니다. 즐거운 코딩하세요! 🚀  그게 다야, 여러분! 당신에게 좋은 독서가 되었기를 바랍니다. 감사합니다! ✨  👉 나를 팔로우하세요   GitHub   링크드인

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

This story contains new, firsthand information uncovered by the writer.

Read My Stories

View my Portfolio

Full Stack Engineer

이 오디오는 이야기의 원래 언어로 제작되었습니다!

TypeScript SDK 개발: 5세 어린이도 따라할 수 있는 단계별 단계 ~ 1부: 첫 번째 MVP

About Author

코멘트

태그 걸기

이 기사는 다음에서 발표되었습니다.

Related Stories

바다 항해: 데이터 레이크를 사용하여 프로덕션 등급 RAG 애플리케이션 개발

AI의 힘을 발휘하세요. 최첨단 기술의 체계적 검토: 개요 및 소개

Claude Sonnet 3.5 시스템 프롬프트 유출: 법의학적 분석

사용자 중심의 암호화 제품 만들기: 고객 피드백의 중요성

바다 항해: 데이터 레이크를 사용하여 프로덕션 등급 RAG 애플리케이션 개발

AI의 힘을 발휘하세요. 최첨단 기술의 체계적 검토: 개요 및 소개

Claude Sonnet 3.5 시스템 프롬프트 유출: 법의학적 분석

사용자 중심의 암호화 제품 만들기: 고객 피드백의 중요성

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps