먼저, npm init 명령어를 통해 새로운 패키지를 생성해요.
> npm init모든 설정을 지금 완료할 필요는 없습니다. 패키지 생성 후 package.json 파일을 직접 수정하여 필요한 설정을 추가할 수 있기 때문이지요! :)
Typescript를 패키지에 적용하려면, 아래와 같이 개발 의존성으로 Typescript와 Node.js 타입 정의를 설치해줘요!
> npm install --save-dev typescript @types/node
package.json 파일은 패키지의 정보와 의존성을 정의해요. 아래의 예시를 참조하세요!
"build": "tsc"는 Typescript를 사용하는 경우에만 package.json에 추가되는 옵션이에요! :)
{
"name": "module-name",
"version": "1.0.0",
"description": "",
"main": "lib/index.js",
"files": ["lib"],
"types": "lib/index.d.ts",
"private": false,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "tsc"
},
"author": "pengoose",
"license": "MIT",
"devDependencies": {
"@types/node": "^20.3.3",
"typescript": "^5.1.6"
}
}tsconfig설정 (Typescript 사용 시)
Typescript 프로젝트에서 tsconfig.json 파일을 통해 컴파일러 옵션을 설정할 수 있어요. :)
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"outDir": "./lib",
"rootDir": "./src",
"strict": true,
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true
},
"include": ["src/**/*"]
}본인의 아이디어를 코드로 구현하는 단계에요! :) "라이브러리"나 "모듈"을 만든다고 너무 겁을 먹을 필요는 없어요!
모듈을 만든다는 것은, 자주 사용하는 코드를 재사용 가능하게 만들고, 이를 어느 프로젝트에서든 누구나 쉽게 사용할 수 있도록 배포하는 행위를 의미해요.
평소에 자주 쓰는 커스텀 훅이나, 유틸리티 코드, 그리고 아래와 같은 다양한 예시들 모두가 멋진 모듈이 될 수 있답니다!
- 데이터 검증 라이브러리: 입력값이 특정 조건을 만족하는지 검증하는 함수들의 집합
- 자주 사용하는 알고리즘: 정렬, 탐색 등의 알고리즘을 모아 놓은 모듈
- API 요청 래퍼: 특정 API에 대한 요청을 쉽게 보낼 수 있도록 래핑한 함수
- UI 컴포넌트: 버튼, 폼, 다이얼로그 등 재사용 가능한 UI 컴포넌트
생각보다 간단하고 멋있는 일이죠? 🥳
이제 모듈의 사용법을 문서화 할 시간이에요! 당신이 만든 멋진 코드를 다른 사람들이 쉽게 이해하고 사용할 수 있도록 친절하고 명확하게 작성하는 것이 중요해요.
readme 파일은 다음과 같은 내용을 포함하는 것이 좋아요!
모듈의 설명: 이 모듈이 어떤 문제를 해결하거나 어떤 기능을 제공하는지 간략하게 설명해주세요. 사용자가 이 모듈이 어떤 역할을 하는지 쉽게 이해할 수 있답니다!설치 및 사용 방법: 이 모듈을 어떻게 설치하고 사용하는지 상세하게 설명해주세요!예제 코드: 실제로 이 모듈을 어떻게 사용하는지 보여주는 예제 코드는 사용자가 이해하는데 많은 도움이 될 거에요. :)API 문서: 모듈이 제공하는 함수나 메소드, 그리고 이들의 인자와 반환값 등을 상세하게 문서화해주세요!
이렇게 문서를 잘 작성하는 연습은 당신의 코드가 얼마나 사용자 친화적인지를 결정하며, 개발자로서 "협업 능력"을 키우는데도 큰 도움이 될 거에요. 너무 겁먹지 말고 시작해볼까요? :)
Typescript 또는 Babel을 사용하는 경우, 이를 컴파일하는 과정(build)을 거쳐 소스 코드를 빌드해야 해요!
> npm run build이 명령어는 위에서 작성한 tsconfig.json에 따라, 빌드된 파일들이 프로젝트 루트의 lib 폴더 내에 생성되게 되어있어요.
npm 모듈을 배포하기 위해서는, npm에서 계정을 생성해야 해요!
계정 생성을 마쳤다면, 터미널에서 npm login 명령어를 입력하여 로그인합니다 :)
> npm login
로그인이 완료되면, npm publish 명령어를 사용하여 패키지를 배포합니다.
> npm publish🎉 축하해요! 여러분의 멋진 패키지가 npm에 공개되었어요! 🥳 이제 다른 개발자들이 여러분의 패키지를 설치하고 사용할 수 있어요.
앞으로는 여러분이 만든 멋진 패키지에 대한 피드백을 받고, 그 피드백을 바탕으로 패키지를 개선하는 과정이 시작될거에요. :) (두근거리지 않나요?)
예를 들어, 깃허브의 issue 탭에서 사용자들의 문제점을 들을 수 있고, feature 요청을 받을 수 있어요! 또한, Pull Request(PR)를 통해, 다른 개발자들의 도움을 받아 더 멋진 코드로 성장시킬 수 있어요.
여러분들의 첫 패키지 배포를 축하하며, 끊임없이 배우고 성장하는 개발자의 길을 항상 응원해요! :)
첫 배포 과정을 함께하게 되어 영광이었어요! 🥰
package.json의 "private"라는 filed를 false로 설정하면 yarn으로도 해당 모듈을 설치할 수 있어요 :)
{
"private": false
}"private": false,
모듈에 "@"가 들어간채로 npm publish를 진행하게되면, npm이 해당 패키지를 비공개 패키지로 인식해 유료 결제를 하라는 에러가 발생해요.
해당 저장소가 공개되어있는 패키지라는 것을 알려주는 명령어를 사용해서 배포를 진행해요.
> npm publish --access=public
package.json의 "type"라는 filed를 "index.d.ts"로 설정하면 해당 모듈이 TS를 지원한다는 것을 알릴 수 있어요. :)
{
"types": "index.d.ts"
}
package.json의 "repository"라는 field를 다음과 같이 설정하면 저장소를 연동할 수 있어요.
"repository": {
"type": "git",
"url": "repositoryURL"
}