React와 TypeScript로 나만의 라이브러리 만들기 / npm 배포하기

안녕하세요! 9기 SSAFYcial 전인혁 기자입니다.
이번에는 소식을 전하는 기사가 아닌,
유익한 정보를 공유하는 기사로 준비해봤어요.

 

이번 기사의 주제는 바로바로~!~!

React와 TypeScript로 나만의 라이브러리 만들기 / npm 배포하기 입니다.

 

개발자에게 라이브러리란,

정말정말정말정말정말정말정말정말정말 없어선 안 될 중요한 요소입니다.

 

편리한 기능을 가진 라이브러리들은

어떻게 만들어져서, 어떻게 npm에 올라가는 걸까요?

 

이번 기사에서는 나만의 라이브러리를 만들어서 npm에 배포하고,

내 프로젝트에 적용하는 방법을 알려드리고자 합니다.

 

지금부터 한 번 살펴볼까요? 💨💨

---

React와 TypeScript로 나만의 라이브러리 만들기 / npm 배포하기

작업을 진행할 프로젝트 생성

🎤 라이브러리를 만들어낼 공간(프로젝트)를 생성하겠습니다.
Vite로 간단하게 React + Typescript 프로젝트를 생성하였습니다.

 

1. 터미널에서 명령어 입력하여 프로젝트 생성

npm create vite@latest [프로젝트명]

- 질문이 연달아 나올 건데, 아래와 같이 선택해줍니다.

Select a framework

> React

Select a variant

> TypeScript

프로젝트 생성 완료 !

 

2. 프로젝트 실행하기

프로젝트 폴더가 있는 경로로 이동하여,

npm i 명령어로 node 모듈들을 받아줍니다.

node 모듈 다운로드가 완료되면,

npm run dev 명령어로 프로젝트를 실행해줍니다.

 

 

컴포넌트 개발하기

🎤 라이브러리로 배포할 컴포넌트를 개발합니다.

 

styled-components를 활용하여, 다음과 같은 모양의 컴포넌트를 개발하고자 합니다.

 

1. styled-components 라이브러리 추가

터미널에 다음 명령어를 입력하여,

프로젝트에 styled-components 라이브러리를 설치합니다.

npm i styled-components

 

2. 디렉토리/파일 생성 및 코드 작성

이번 프로젝트에서는,

라이브러리에서 사용되는 모든 컴포넌트를 lib 경로 밑에서 개발하고자 합니다.

 

1) 디렉토리 및 파일 추가

- src 폴더 밑에 lib 폴더를 생성하고, lib 폴더 밑에 컴포넌트 폴더를 만들어줍니다.

- 저는 ProfileCard 컴포넌트 폴더를 만들었습니다.

- 해당 폴더 밑에 index.tsx와 styled.tsx 파일도 추가해줍니다. (styled 컴포넌트를 따로 분리하기 위함)

 

2) 컴포넌트 구현 코드 작성

styled.tsx에서 styled 컴포넌트들을 export 한 뒤,

index.tsx에서 S-dot naming으로 모두 import해서 사용하였습니다.

 

[src/lib/ProfileCard/index.tsx]

import React from 'react'
import * as S from './styled';

interface ProfileCardProps {
  src: string;
  name: string;
  age: number;
}

function ProfileCard({src, name, age}: ProfileCardProps) {
  return (
    <S.Container>
      <S.ProfileImgWrapper src={src} />
      <S.NameWrapper>{name}님</S.NameWrapper>
      <S.AgeWrapper>{age}세</S.AgeWrapper>
    </S.Container>
  )
}

export default ProfileCard;

 

[src/lib/ProfileCard/styled.tsx]

import styled from "styled-components";

export const Container = styled.div`
    display : flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    width: 300px;
    height: 300px;
    background-color: #1aabdf;
    color: white;
`
export const ProfileImgWrapper = styled.img`
    width: 150px;
    height: 150px;
    border-radius: 5px;
    background-color: #fff;
`
export const NameWrapper = styled.h2`

`
export const AgeWrapper = styled.h3`
    
`

 

 

라이브러리 npm 배포 준비

🎤 npm에 배포하기 전, 프로젝트 내에서 설정이 필요합니다.

 

1. tsconfig.json 수정하기

1) 컴파일 옵션에 다음과 같은 옵션을 추가/설정합니다.

 

"noEmit" : false

- 출력 파일들을 만들지 않는다는 설정입니다.

저희는 npm에 배포할 것이므로, 파일이 출력으로 나와야 합니다. false로 설정합니다.

 

"declartion" : true

- d.ts 파일을 만들 것인지 여부를 결정하는 설정입니다.

저희는 라이브러리에 타입까지 포함시킬 것이므로 true 설정합니다.

 

"outDir" : "./dist"

- tsc 명령어로 컴파일된 파일들을 어디에 둘 것인지 설정. dist 경로로 설정

 

"allowImportingTsExtensions" : false

- .ts 확장자로 모듈을 불러올 것인지를 활성화하는 옵션입니다.

noEmit이 true일 경우에만 사용가능한데, 저희는 noEmit이 false이므로 해당옵션도 false 처리 해줍니다.

 

tsconfig.json

 

2) include에 다음과 같은 경로를 추가합니다.

...
"include": ["./src/lib/**/*.tsx", "./src/lib/**/*.ts"],
...

 

3) 최종적으로 이러한 형태가 됩니다. (tsconfig.json)

 

2. package.json 수정하기

1) 옵션 추가하기

name : 패키지 명

- npm에 표시될 패키지 명을 작성합니다.

- 저는 jeonny-design-system-test 라는 이름으로 작성했어요.

 

version : "0.0.0"

- 버전을 작성합니다.

 

private : false

- publish 가능 여부를 설정합니다.

- private가 true 상태라면 publish 할 수 없습니다.  따라서, 공개상태(private : false)로 바꿔줘야 합니다

 

main : "dist/index.js"

- 라이브러리의 진입점을 명시합니다.

- 저희는 dist 폴더로 생성해서 배포할 거라서, ‘dist/index.js’로 지정합니다.

 

types : "dist/index.d.ts"

- 타입 추론을 돕기 위한 진입점을 명시합니다.

 

2) scripts에 명령어 추가

...
"publish:npm": "rm -rf dist && mkdir dist && babel src/lib -d dist --copy-files"

 

3) 최종적으로 이런 형태가 됩니다. (package.json)

 

 

3. .npmignore 추가

패키지에 포함되지 않을 것들을 지정해주기 위해,

프로젝트 루트 경로에 .npmignore 파일을 추가합니다.

 

.npmignore

node_modules/
public/
src/
.eslintrc.cjs
README.md
tsconfig.json
tsconfig.node.json
vite.config.ts

 

npm 가입 및 터미널에서 로그인

🎤 npm에 배포하려면 npm 계정이 있어야 합니다.

 

1. npm 회원가입

https://www.npmjs.com/signup 에 접속하여, 회원가입합니다.

이때 몇 가지 주의할 점 !

 

- Username이 아이디가 됩니다

- 로그인 시 Email이 필요하므로, 꼭 기억하기

 

 

2. 터미널에서 npm login 하기

프로젝트로 돌아와서, 터미널에서 npm login을 입력하고,

가입한 npm 계정 정보로 로그인을 수행합니다.

 

Username, Password, Email을 입력합니다.

 

Email 일회용 코드(one-time password)는 이메일로 날아옵니다 !

 

다음과 같이 로그인이 완료됩니다.

 

npm whoami 명령어로, 로그인이 잘되었나 확인합니다.

 

 

본격적으로 배포하기

🎤 npm publish만 하면 배포 끝 ! 나만의 라이브러리가 npm에 올라갑니다.

 

1. npm publish 명령어 수행

배포 완료 !

 

2. npm 홈페이지에서 확인

우측 상단 메뉴 - Profile

프로필 페이지에서 Packges에 잘 추가되어있나 확인 !

 

다른 프로젝트에서 사용해보기

🎤 배포했으니 사용해봅시다.

위에서 라이브러리 시에 사용한 프로젝트가 아닌,

다른 프로젝트를 열어줍니다.

 

1. 다른 프로젝트에서 라이브러리 불러오기 (설치하기)

프로젝트에 방금 만든 나만의 라이브러리를 설치해줍니다.

npm i jeonny-design-system-test

 

2. 컴포넌트 import

배포한 컴포넌트를 import 하고, 사용합니다

<ProfileCard />

 

적용완료. 잘 불러와지네요! ✌

 

 

마치며 ...

이번 기사에서는 컴포넌트를 간단하게 만들어보고,

npm에 배포해보는 시간을 가졌습니다.

 

추후에는 자주 쓰이는 형태의 공통 컴포넌트들만 따로 모아서,

더욱 완성도 있는 저만의 디자인시스템을 설계/구현하여 npm에 배포해볼 계획입니다.

이렇게 만든 컴포넌트들을 프로젝트에서 적극 활용해볼 계획입니다.

 

 

이상으로 기사 마치겠습니다 😊

SSAFYcial 기자 전인혁입니다.

 

 

 

 

이번 기사가 현재 SSAFY 교육생 이거나, SSAFY에 관심이 있으신 분들에게  많은 도움이 되었으면 좋겠습니다.

궁금하신 점이 있다면, 댓글로 꼭! 꼭! 남겨주세요 🙏🏻

 

 

 

---

" 읽어주셔서 감사합니다!

더 재밌고 유익한 기사와 함께 돌아오겠습니다 "