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