나만의 라이브러리 (library)를 만들어 봅시다.

rollup(롤업)으로 빌드할거고 모노레포를 쓰긴 하지만 프로젝트 간의 의존성 추가는 안할 거라 yarn workspace는 굳이 안 쓸 겁니다.

시작하기 전에

일단 yarn init해서 프로젝트를 만들고 eslint, prettier, lerna, jest 등 각종 파일을 빠르게 세팅합시다.

프로젝트 바로가기

여기서 각종 설정 파일을 복붙합니다.

packages 만들기

이제 packages를 만들고 UI 컴포넌트를 만들어 봅시다.

mkdir packages & cd packages 
mkdir common-library & cd common-library 
yarn init

package.json은 다음과 같이 수정합시다.

코드를 입력하세요

package.json을 추가했으니 이제 의존성을 다운받아봅시다.

// terminal 창에서
yarn 

간단한 UI 컴포넌트 만들기

src 폴더를 만들고 다음과 같이 작성합니다.

/src/Container.tsx

import React from 'react';
import styled from '@emotion/styled';

const Red = styled.div`
    width:100px;
    height:100px;
    background-color:red;
`;

export const Container = () => {

    return (
        <Red />
    );
}

/src/index.ts

export * from './Container';

/tsconfig.json

{
  "extends": "../../tsconfig.json",
  "include": ["src"],
  "exclude": ["__tests__", "node_modules", "dist"]
}

이제 다음 경로에서 명령어를 쳐봅시다. 빌드를 할 겁니다.

react-common-library/packages/common-library

yarn build 

dist 폴더가 생겼다면 빌드가 성공한 겁니다.

👏👏👏

근데 보니깐 dist 폴더가 gitignore가 안됐네요.
dist는 굳이 git에 올라갈 필요가 없으니 root에서 .gitignore를 수정해봅시다.

node_modules
/**/*/dist

여기까지의 내용은 git에 업로드 해놨습니답

프로젝트 바로가기

이제 npm에 로그인하고 올린 다음 테스트를 진행하면 됩니다.
다음에 이어서 정리해보도록 하겠습니다.