npm 버전 관리 및 게시
시맨틱 버전 관리를 사용하고, Changesets 또는 standard-version으로 변경 로그 생성을 자동화하며, 라이브러리를 npm 또는 비공개 레지스트리에 게시합니다.
npm 버전 관리 및 게시은(는) CoddyKit의 무료 Frontend Academy 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Frontend Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
npm에 게시하는 이유
디자인 시스템을 둘 이상의 앱에서 사용한다면 패키지로 게시하십시오. 사용자는 npm/yarn/pnpm으로 설치하고 버전을 고정한 뒤 자신의 일정에 맞춰 업데이트할 수 있습니다.
시맨틱 버전 관리(SemVer)
버전은 MAJOR.MINOR.PATCH를 따릅니다. MAJOR: 호환성을 깨뜨리는 변경입니다. MINOR: 이전 버전과 호환되는 새 기능입니다. PATCH: 버그 수정만 포함합니다.
버전을 올리는 경우
속성 이름을 변경했습니까? MAJOR입니다. 새로운 선택적 속성을 추가했습니까? MINOR입니다. CSS 버그를 수정했습니까? PATCH입니다. 1.0 이전 릴리스(0.x.y)는 MINOR에서 호환성이 깨질 수 있으므로 신중하게 관리하십시오.
package.json — 매니페스트
npm에서 패키지가 표시되는 방식을 구성합니다.
{
"name": "@yourorg/design-system",
"version": "1.4.2",
"main": "dist/index.cjs.js",
"module": "dist/index.esm.js",
"types": "dist/index.d.ts",
"exports": {
".": { "import": "./dist/index.esm.js", "require": "./dist/index.cjs.js" },
"./theme": "./dist/theme.js"
},
"files": ["dist", "README.md"],
"peerDependencies": { "react": "^18.0.0" }
}빌드 출력
CommonJS, ESM 및 타입 선언을 함께 제공하십시오. tsup이나 vite build --lib 같은 도구가 이를 처리합니다.
// tsup.config.ts
export default {
entry: ['src/index.ts'],
format: ['cjs', 'esm'],
dts: true,
clean: true,
external: ['react', 'react-dom']
};
// package.json: "build": "tsup"peerDependencies
React/Vue 등을 peerDependencies로 지정하여 사용자가 자신의 버전을 사용하도록 하십시오. 이를 일반 종속성으로 지정하면 두 번 번들에 포함되어 훅과 컨텍스트가 작동하지 않습니다.
트리 셰이킹에 적합하게 만들기
ESM 내보내기를 사용하고 부수 효과를 피하면 번들러가 사용하지 않는 컴포넌트를 제거할 수 있습니다. package.json에 "sideEffects": false를 지정하거나 CSS 같은 특정 파일을 나열하십시오.
npm에 게시하기
한 번 로그인한 다음 게시하십시오.
npm login
# Bump version + publish:
npm version patch # 1.4.2 -> 1.4.3
npm publish
# Or scoped public package:
npm publish --access publicChangesets로 릴리스 자동화하기
Changesets는 모노레포와 라이브러리 게시를 위한 최신 도구 모음입니다. 풀 리퀘스트에는 변경 사항을 설명하는 'changeset' 파일이 포함되고, 릴리스 CI가 버전을 올린 뒤 게시합니다.
npm install -D @changesets/cli
npx changeset init
# In each PR:
npx changeset
# pick package, type (major/minor/patch), describe change
# commits .changeset/<random>.md
# CI on main:
npx changeset version # bumps versions in package.json + generates changelog
npx changeset publish # publishes to npm자동 변경 로그
Changesets는 changeset 설명에서 각 패키지의 CHANGELOG.md를 자동으로 생성하므로 사용자가 각 버전에서 변경된 내용을 확인할 수 있습니다.
npm 배포 태그
시험판에는 배포 태그를 사용하십시오. npm publish --tag beta를 사용하면 latest를 덮어쓰지 않고 게시할 수 있습니다. 사용자는 npm install @yourorg/design-system@beta로 시험판 사용을 선택할 수 있습니다.
비공개 레지스트리
내부 패키지는 GitHub Packages, GitLab Package Registry 또는 자체 호스팅 Verdaccio를 사용할 수 있습니다. .npmrc에 다음과 같이 구성하십시오: @yourorg:registry=https://npm.pkg.github.com.
이전 버전 지원 중단
설치 프로그램에 경고하도록 버전을 지원 중단으로 표시하십시오.
npm deprecate @yourorg/design-system@1.0.0 'Use 2.x for React 18 support'빠른 확인
내보낸 컴포넌트의 속성 이름을 변경했다면 SemVer에서 어떤 종류의 버전 변경이 필요합니까?
복습: 버전 관리와 게시
SemVer는 MAJOR.MINOR.PATCH로 구성되며 각각 호환성을 깨뜨리는 변경, 기능 추가, 수정을 뜻합니다. CJS + ESM + 타입을 빌드합니다(tsup, vite --lib). React/Vue는 peerDependencies로 지정합니다. 트리 셰이킹에는 sideEffects:false를 사용합니다. npm publish를 사용하거나 Changesets로 자동화합니다. CHANGELOG가 자동으로 생성됩니다. 베타에는 배포 태그를 사용합니다. 내부 패키지에는 비공개 레지스트리를 사용합니다.
자주 묻는 질문
“npm 버전 관리 및 게시” 강의는 무료인가요?
네 — “npm 버전 관리 및 게시” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Frontend Academy 강의 전체를 잠금 해제할 수 있습니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“npm 버전 관리 및 게시”에서 뭘 배우나요?
시맨틱 버전 관리를 사용하고, Changesets 또는 standard-version으로 변경 로그 생성을 자동화하며, 라이브러리를 npm 또는 비공개 레지스트리에 게시합니다. 브라우저에서 직접 실행하는 실습 코드로 Frontend Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Frontend Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Frontend Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 3번째 강의입니다.
“npm 버전 관리 및 게시” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Frontend Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Frontend Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.