NPM에 버튼 컴포넌트 배포하기

Step 1: 프로젝트 설정

프로젝트를 시작하기 전에, 우선 최신 코드를 받아와야 합니다. 이를 위해 upstream 저장소에서 최신 변경 사항을 가져옵니다.

git pull upstream main
cd modules
npm install

git pull upstream main: 이 명령어는 upstream 저장소의 main 브랜치에서 최신 변경 사항을 가져와 현재 로컬 저장소와 병합합니다. 이를 통해 프로젝트의 최신 코드를 받아올 수 있습니다.

Step 2: 버튼 컴포넌트 작성

재사용 가능한 버튼 컴포넌트를 작성해보겠습니다. 컴포넌트는 props를 통해 데이터를 받아 렌더링하는 함수입니다. 프로젝트 내 src/lib/components 폴더에 Button.tsx 파일을 생성하고 컴포넌트 코드를 작성합니다.

import React from "react";

interface ButtonProps {
  label: string;
  onClick: () => void;
}

const Button: React.FC<ButtonProps> = ({ label, onClick }) => {
  return <button onClick={onClick}>{label}</button>;
};

export default Button;

label은 버튼에 표시될 텍스트이며, onClick은 버튼 클릭 시 호출될 함수입니다. 그리고 Button 컴포넌트를 함수형 컴포넌트로 정의하고, React.FC 타입으로 지정합니다.

Step 3: 컴포넌트 테스트

작성한 버튼 컴포넌트가 제대로 동작하는지 테스트해봅니다. App.tsx 파일에서 버튼 컴포넌트를 import하고 사용합니다.

import React from "react";
import Button from "./lib/components/Button";

const App: React.FC = () => {
  const handleClick = () => {
    alert("Button clicked!");
  };

  return (
    <div>
      <h1>Button Component Example</h1>
      <Button label="Click me" onClick={handleClick} />
    </div>
  );
};

export default App;

여기서는 handleClick 함수를 정의하여 버튼 클릭 시 동작을 지정하고, Button 컴포넌트에 label과 onClick 속성을 전달하여 사용합니다.

개발 서버 실행

터미널에서 npm run dev 명령어를 실행하여 개발 서버를 실행합니다. 브라우저에서 버튼이 잘 동작하는지 확인합니다.

Step 4: 컴포넌트 Export

버튼 컴포넌트를 외부에서 사용할 수 있도록 export 합니다. src/lib/index.tsx 파일을 생성하고 버튼 컴포넌트를 export 합니다.

export { default as Button } from "./components/Button";

이렇게 하면 다른 곳에서 버튼 컴포넌트를 import 할 때 import { Button } from "./lib";와 같은 방식으로 사용할 수 있습니다.

빌드 실행

설정이 완료되었으면 터미널에서 다음 명령어를 입력하여 컴포넌트를 빌드합니다.

npm run build

빌드가 성공적으로 완료되면 dist 폴더에 컴포넌트의 번들링된 파일과 타입 선언 파일이 생성됩니다.

Step 5: npm에 배포

이제 버튼 컴포넌트를 npm에 배포할 준비가 되었습니다. npm에 배포하려면 package.json 파일을 수정하고, 필요한 설정을 추가해야 합니다.

package.json 파일 수정

npm에 배포하기 위해 package.json 파일을 다음과 같이 수정합니다.

{
  "name": "{고유한 네이밍}",
  "version": "0.0.0",
  "description": "description"
}

• name: 패키지의 이름을 지정합니다. npm에 배포할 때는 고유한 이름을 사용해야 합니다. 일반적으로 @사용자명/패키지명 형식을 사용합니다.
• version: 패키지의 버전을 지정합니다. 시맨틱 버전닝(Semantic Versioning) 규칙을 따르는 것이 좋습니다.
  • 시맨틱 버전닝은 버전 번호를 메이저.마이너.패치 형식으로 표기하는 것입니다.
  • 메이저 버전은 기존 버전과 호환되지 않는 변경사항이 있을 때, 마이너 버전은 기능 추가나 개선이 있을 때, 패치 버전은 버그 수정이 있을 때 증가시킵니다.
• description: 패키지에 대한 간단한 설명을 작성합니다.

npm 로그인 및 배포

터미널에서 다음 명령어를 실행하여 npm에 로그인하고 패키지를 배포합니다.

npm login
npm publish

버전 업데이트 및 재배포

만약 한번이라도 배포를 했다면, npm에는 동일한 버전을 다시 배포할 수 없습니다. 그럴 때는 이미 배포한 패키지의 버전을 업데이트하고 다시 배포하려면 다음 명령어를 사용합니다.

npm version patch
npm publish

• npm version patch: 패키지의 패치 버전을 증가시킵니다. minor나 major 옵션을 사용하여 마이너 버전이나 메이저 버전을 증가시킬 수도 있습니다.
• npm publish: 업데이트된 버전의 패키지를 다시 배포합니다.

Step 6: 컴포넌트 사용

npm에 배포한 버튼 컴포넌트를 실제 프로젝트에서 사용해보겠습니다. npm을 통해 컴포넌트를 설치하고 import하여 사용할 수 있습니다.

컴포넌트 설치

먼저 npm에 배포한 버튼 컴포넌트를 설치합니다. 터미널에서 다음 명령어를 실행합니다.

npm install {배포한 패키지 이름}

컴포넌트 사용

설치한 버튼 컴포넌트를 프로젝트에서 사용하려면 다음과 같이 컴포넌트를 import하고 사용합니다. 현재 모듈 컴포넌트를 만든 modules 디렉터리에 있는 App 컴포넌트에서 사용해봅니다.

import React from "react";
import { Button } from "button-component-xxx";

const App: React.FC = () => {
  const handleClick = () => {
    alert("Button clicked!");
  };

  return (
    <div>
      <h1>Using Button Component from npm</h1>
      <Button label="Click me" onClick={handleClick} />
    </div>
  );
};

export default App;

위와 같이 컴포넌트를 import하고 사용함으로써 npm에 배포한 버튼 컴포넌트를 프로젝트에 통합할 수 있습니다.

커스텀 훅 테스트하고 배포하기

이번에는 커스텀 훅을 모듈로 배포하는 과정을 시작해보겠습니다.

Step 1: useInput 훅 작성

src/lib/hooks 폴더에 useInput.ts 파일을 생성하고 다음과 같이 코드를 작성합니다.

import { useState, ChangeEvent } from "react";

function useInput(initialValue: string = "") {
  const [value, setValue] = useState(initialValue);

  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
    setValue(e.target.value);
  };

  return {
    value,
    onChange: handleChange,
  };
}

export default useInput;

이후 src/lib/index.tsx 파일에서 동일하게 export해줍니다.

export { default as Button } from "./components/Button";
export { default as useInput } from "./hooks/useInput";

Step 2: useInput 훅 동작 테스트

작성한 useInput 훅이 의도한 대로 동작하는지 테스트해봅니다. 컴포넌트에서 훅을 사용하고 입력 값이 변경되었을 때 상태가 업데이트되는지 확인합니다.

App.tsx 파일에서 useInput 훅을 import하고 다음과 같이 사용합니다.

import React from "react";
import useInput from "./lib/hooks/useInput";

const App: React.FC = () => {
  const { value, onChange } = useInput("");

  return (
    <div>
      <h1>useInput Example</h1>
      <input type="text" value={value} onChange={onChange} />
      <p>Input value: {value}</p>
    </div>
  );
};

export default App;

여기서는 useInput 훅을 사용하여 입력 값과 변경 이벤트 핸들러를 받아옵니다. 입력 필드의 값과 변경 이벤트를 useInput 훅에서 반환받은 값과 함수에 바인딩합니다.

개발 서버 실행

테스트 컴포넌트를 작성한 후에는 개발 서버를 실행하여 훅의 동작을 확인합니다.

npm run dev

브라우저에서 애플리케이션이 열리면, 입력 필드에 값을 입력하고 변경했을 때 입력 값이 실시간으로 업데이트되는지 확인합니다.

Step 3: useInput 훅 RTL 테스트

useInput 훅의 동작을 검증하기 위해 React Testing Library(RTL)를 사용하여 테스트 코드를 작성합니다. RTL은 실제 사용자 관점에서 컴포넌트와 훅을 테스트할 수 있는 도구입니다.

테스트 코드 작성

src/lib/hooks 폴더 내에 useInput.test.ts 파일을 생성하고 다음과 같이 테스트 코드를 작성합니다.

import { renderHook, act } from "@testing-library/react";
import useInput from "./useInput";
import { ChangeEvent } from "react";

describe("useInput", () => {
  it("초기값이 정확시 설정되어야 한다.", () => {
    const initialValue = "Initial Value";
    const { result } = renderHook(() => useInput(initialValue));

    expect(result.current.value).toBe(initialValue);
  });

  it("입력값이 정확히 업데이트 되어야 한다.", () => {
    const { result } = renderHook(() => useInput(""));

    expect(result.current.value).toBe("");

    act(() => {
      result.current.onChange({
        target: { value: "Hello" },
      } as ChangeEvent<HTMLInputElement>);
    });

    expect(result.current.value).toBe("Hello");
  });
});

• renderHook은 RTL에서 제공하는 함수로, 훅을 렌더링하고 해당 훅의 결과를 반환합니다.
• act는 RTL에서 제공하는 함수로, 훅의 상태를 변경하는 작업을 래핑합니다. 이를 통해 훅의 상태 변경이 완료된 후에 테스트 검증을 수행할 수 있습니다.
• 첫 번째 테스트 케이스에서는 초기값으로 빈 문자열을 전달하고, renderHook을 사용하여 useInput 훅을 렌더링합니다. 그리고 result.current.value를 통해 현재 입력 값이 빈 문자열인지 검증합니다.
• 이후 act 함수를 사용하여 onChange 함수를 호출하고, 입력 값을 "Hello"로 변경합니다. 그리고 result.current.value를 통해 변경된 입력 값이 "Hello"인지 검증합니다.

RTL

• RTL은 사용자 관점에서 컴포넌트와 훅을 테스트하는 데 초점을 맞춥니다. 내부 구현 세부사항보다는 실제 사용자 경험에 기반한 테스트를 작성하는 것이 좋습니다.
• renderHook 함수는 훅을 독립적으로 테스트할 수 있도록 해줍니다. 훅은 컴포넌트 내에서 사용되지만, renderHook을 사용하면 컴포넌트와 분리하여 훅만 테스트할 수 있습니다.
• act 함수는 훅의 상태 변경이 완료될 때까지 기다린 후에 테스트 검증을 수행합니다. 이를 통해 비동기적인 상태 변경도 안정적으로 테스트할 수 있습니다.

테스트 실행

터미널에서 다음 명령어를 실행하여 테스트를 실행합니다.

npm test

Step 4: 빌드 및 배포

이제 useInput 훅을 빌드하고 npm에 배포할 준비가 되었습니다.

빌드

터미널에서 다음 명령어를 실행하여 useInput 훅을 빌드합니다.

npm run build

npm version 업데이트 및 배포

터미널에서 다음 명령어를 사용하여 버전을 업데이트하고 패키지를 배포합니다.

npm version patch
npm publish

Step 5: 훅 사용

npm에 배포한 useInput 훅을 다른 프로젝트에서 설치하고 사용해봅니다. 훅을 import하여 컴포넌트에서 활용할 수 있습니다.

설치

프로젝트에서 터미널을 열고 다음 명령어를 실행하여 useInput이 추가된 버전으로 재설치합니다.

npm uninstall {패키지 이름}
npm install {패키지 이름}

사용

설치한 useInput 훅을 사용하려면 다음과 같이 import하고 사용합니다.

import React from "react";
import { useInput } from "{패키지이름}";

const App: React.FC = () => {
  const { value, onChange } = useInput("");

  return (
    <div>
      <h1>useInput Example</h1>
      <input type="text" value={value} onChange={onChange} />
      <p>Input value: {value}</p>
    </div>
  );
};

export default App;

이제 useInput 훅을 다른 프로젝트에서도 사용할 수 있습니다.