{"_id":"@ahhyunju/button","name":"@ahhyunju/button","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@ahhyunju/button","version":"0.0.1","description":"npm modules","type":"module","types":"dist/index.d.ts","main":"dist/index.js","module":"dist/index.js","scripts":{"dev":"vite","build":"tsc && vite build","lint":"eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0","preview":"vite preview","storybook":"storybook dev -p 6006","build-storybook":"storybook build"},"dependencies":{"react":"^18.2.0","react-dom":"^18.2.0"},"devDependencies":{"@chromatic-com/storybook":"^1.3.3","@storybook/addon-essentials":"^8.0.9","@storybook/addon-interactions":"^8.0.9","@storybook/addon-links":"^8.0.9","@storybook/addon-onboarding":"^8.0.9","@storybook/blocks":"^8.0.9","@storybook/react":"^8.0.9","@storybook/react-vite":"^8.0.9","@storybook/test":"^8.0.9","@types/jest":"^29.5.12","@types/node":"^20.12.7","@types/react":"^18.2.66","@types/react-dom":"^18.2.22","@typescript-eslint/eslint-plugin":"^7.2.0","@typescript-eslint/parser":"^7.2.0","@vitejs/plugin-react-swc":"^3.5.0","eslint":"^8.57.0","eslint-plugin-react-hooks":"^4.6.0","eslint-plugin-react-refresh":"^0.4.6","eslint-plugin-storybook":"^0.8.0","path":"^0.12.7","storybook":"^8.6.12","typescript":"^5.2.2","vite":"^5.2.0","vite-plugin-dts":"^3.9.0"},"publishConfig":{"access":"public"},"_id":"@ahhyunju/button@0.0.1","gitHead":"0f42ba343d0ceda58babbe9a6d6d5d9f2f4bce0f","_nodeVersion":"20.17.0","_npmVersion":"10.8.2","dist":{"integrity":"sha512-DOc5RHlI0XRwHZ6NEvZJK88d81ZErduvQYvtdTsnkJA/iTo8jW8JcBZBwSNoyfUm6KTnmKXgNG0pxIXX4OxoSw==","shasum":"8d68409797bd6fad8980f75fc923591e2438e5fb","tarball":"https://registry.npmjs.org/@ahhyunju/button/-/button-0.0.1.tgz","fileCount":6,"unpackedSize":45815,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCokwracURFYVbUlT18foWH99IEeej21e+maoqFZQlYKAIhAMTowMwwh2P5cVp8X6ASVxmcVZMsNJ/7MBuwFBj8lQJL"}]},"_npmUser":{"name":"ahhyunju","email":"wndkgus0225@naver.com"},"directories":{},"maintainers":[{"name":"ahhyunju","email":"wndkgus0225@naver.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/button_0.0.1_1745837169188_0.7514075487855651"},"_hasShrinkwrap":false}},"time":{"created":"2025-04-28T10:46:09.121Z","0.0.1":"2025-04-28T10:46:09.377Z","modified":"2025-04-28T10:46:09.612Z"},"maintainers":[{"name":"ahhyunju","email":"wndkgus0225@naver.com"}],"description":"npm modules","readme":"# 버튼 컴포넌트 스토리북 및 npm 배포\n\n버튼 컴포넌트를 모듈로 배포하는 과정을 시작해보겠습니다.\n\n## Step 1: 프로젝트 설정\n\n프로젝트를 시작하기 전에, 우선 최신 코드를 받아와야 합니다. 이를 위해 `upstream` 저장소에서 최신 변경 사항을 가져옵니다.\n\n```bash\ngit pull upstream main\ncd modules\nnpm install\n```\n\n`git pull upstream main`: 이 명령어는 `upstream` 저장소의 `main` 브랜치에서 최신 변경 사항을 가져와 현재 로컬 저장소와 병합합니다. 이를 통해 프로젝트의 최신 코드를 받아올 수 있습니다.\n\n## Step 2: 버튼 컴포넌트 작성\n\n재사용 가능한 버튼 컴포넌트를 작성해보겠습니다. 컴포넌트는 props를 통해 데이터를 받아 렌더링하는 함수입니다. 프로젝트 내 `src/lib` 폴더에 `Button.tsx` 파일을 생성하고 컴포넌트 코드를 작성합니다.\n\n```tsx\ninterface ButtonProps {\n label: string;\n onClick: () => void;\n}\n\nconst Button = ({ label, onClick }: ButtonProps) => {\n return ;\n};\n\nexport default Button;\n```\n\n`label`은 버튼에 표시될 텍스트이며, `onClick`은 버튼 클릭 시 호출될 함수입니다.\n\n## Step 3: 컴포넌트 스토리북 테스트\n\n작성한 버튼 컴포넌트가 제대로 동작하는지 테스트해봅니다. `App.tsx` 파일에서 버튼 컴포넌트를 import하고 사용합니다.\n\n```tsx\nimport React from \"react\";\nimport Button from \"./lib/Button\";\nimport \"./App.css\";\n\nfunction App() {\n const handleClick = () => {\n alert(\"Button clicked!\");\n };\n\n return (\n
\n
Button Component Example
\n \n
\n );\n}\n\nexport default App;\n```\n\n여기서는 `handleClick` 함수를 정의하여 버튼 클릭 시 동작을 지정하고, `Button` 컴포넌트에 `label`과 `onClick` 속성을 전달하여 사용합니다.\n\n### 개발 서버 실행\n\n개발 서버를 실행하여 훅의 동작을 확인합니다.\n\n```bash\nnpm run dev\n```\n\n브라우저에서 버튼이 잘 동작하는지 확인합니다.\n\n## Step 4: 버튼 컴포너트 스토리북 테스트\n\n스토리북을 통해, 버튼 컴포넌트를 독립적으로 테스트하고 문서화할 수 있습니다. `src/stories` 폴더에 `Button.stories.ts` 파일을 생성하고 다음과 같이 스토리북을 작성합니다.\n\n```ts\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport Button from \"../lib/Button\";\n\nconst meta = {\n title: \"Button\",\n component: Button,\n} satisfies Meta;\n\nexport default meta;\n\ntype Story = StoryObj;\n\nexport const Default: Story = {\n args: {\n label: \"Click Me!\",\n onClick: () => alert(\"Button clicked!\"),\n },\n};\n```\n\n`npm run storybook` 명령어를 통해 버튼 컴포너트가 잘 렌더링 되는지 확인합니다.\n\n## Step 5: 버튼 컴포넌트 Export\n\n버튼 컴포넌트를 외부에서 사용할 수 있도록 export 합니다. `src/lib/index.ts` 파일을 생성하고 버튼 컴포넌트를 export 합니다.\n\n```tsx\nexport { default as Button } from \"./Button\";\n```\n\n이렇게 하면 다른 곳에서 버튼 컴포넌트를 import 할 때 `import { Button } from \"./lib\";`와 같은 방식으로 사용할 수 있습니다.\n\n## Step 6: 빌드 및 배포\n\n이제 버튼 컴포넌트를 npm에 배포할 준비가 되었습니다. npm에 배포하려면 `package.json` 파일을 수정하고, 필요한 설정을 추가해야 합니다.\n\n### 빌드 실행\n\n설정이 완료되었으면 터미널에서 다음 명령어를 입력하여 컴포넌트를 빌드합니다.\n\n```bash\nnpm run build\n```\n\n빌드가 성공적으로 완료되면 `dist` 폴더에 컴포넌트의 번들링된 파일과 타입 선언 파일이 생성됩니다.\n\n### package.json 파일 수정\n\nnpm에 배포하기 위해 `package.json` 파일을 다음과 같이 수정합니다.\n\n```json\n{\n \"name\": \"{고유한 네이밍}\",\n \"version\": \"0.0.0\",\n \"description\": \"description\"\n}\n```\n\n- `name`: 패키지의 이름을 지정합니다. npm에 배포할 때는 **고유한** 이름을 사용해야 합니다. 일반적으로 `@사용자명/패키지명` 형식을 사용합니다.\n- `version`: 패키지의 버전을 지정합니다. 시맨틱 버전닝(Semantic Versioning) 규칙을 따르는 것이 좋습니다.\n - 시맨틱 버전닝은 버전 번호를 `메이저.마이너.패치` 형식으로 표기하는 것입니다.\n - 메이저 버전은 기존 버전과 호환되지 않는 변경사항이 있을 때, 마이너 버전은 기능 추가나 개선이 있을 때, 패치 버전은 버그 수정이 있을 때 증가시킵니다.\n- `description`: 패키지에 대한 간단한 설명을 작성합니다.\n\n### npm 로그인 및 배포\n\n터미널에서 다음 명령어를 실행하여 npm에 로그인하고 패키지를 배포합니다.\n\n```bash\nnpm login\nnpm publish\n```\n\n### 버전 업데이트 및 재배포\n\n만약 한번이라도 배포를 했다면, npm에는 동일한 버전을 다시 배포할 수 없습니다. 그럴 때는 이미 배포한 패키지의 버전을 업데이트하고 다시 배포하려면 다음 명령어를 사용합니다.\n\n```bash\nnpm version patch\nnpm publish\n```\n\n- `npm version patch`: 패키지의 패치 버전을 증가시킵니다. `minor`나 `major` 옵션을 사용하여 마이너 버전이나 메이저 버전을 증가시킬 수도 있습니다.\n- `npm publish`: 업데이트된 버전의 패키지를 다시 배포합니다.\n\n## Step 7: 컴포넌트 사용\n\nnpm에 배포한 버튼 컴포넌트를 실제 프로젝트에서 사용해보겠습니다. npm을 통해 컴포넌트를 설치하고 import하여 사용할 수 있습니다.\n\n### 컴포넌트 설치\n\n먼저 npm에 배포한 버튼 컴포넌트를 설치합니다. 터미널에서 다음 명령어를 실행합니다.\n\n```bash\nnpm install {배포한 패키지 이름}\n```\n\n### 컴포넌트 사용\n\n설치한 버튼 컴포넌트를 프로젝트에서 사용하려면 다음과 같이 컴포넌트를 import하고 사용합니다. 현재 모듈 컴포넌트를 만든 `modules` 디렉터리에 있는 App 컴포넌트에서 사용해봅니다.\n\n```tsx\nimport React from \"react\";\nimport { Button } from \"button-component-xxx\";\n\nfunction App() {\n const handleClick = () => {\n alert(\"Button clicked!\");\n };\n\n return (\n
\n
Button Component Example
\n \n
\n );\n}\n\nexport default App;\n```\n\n위와 같이 컴포넌트를 import하고 사용함으로써 npm에 배포한 `useInput` 훅을 다른 프로젝트에서도 사용할 수 있습니다.\n","readmeFilename":"README.md","_rev":"1-bfbb42671d37204463ef8c3fa82469cf"}