1. 개요

그동안 진행했던 디자인시스템은 우리 팀의 angular 프로젝트에 컴포넌트로 구현했다.
따라서 다른 팀에서 내가 작업해썬 컴포넌트를 사용하기 위해서는 여러가지 추가 리소스가 필요했다.

• 컴포넌트 사용을 위한 문서화
• 컴포넌트 디자인 페이지 별도 제작
• 컴포넌트 사용을 위한 인수인계 필요

이를 개선시킬 수 있는 방법에 대해 고민해본 결과 다음과 같이 진행하면 좋을 것 같다고 판단했다.

• 어느 프로젝트에서든 npm 패키지처럼 다운받아 사용할 수 있는 독립성
• 컴포넌트만 제작하면 문서화와 디자인 페이지를 자동으로 생성할 수 있는 툴 사용

오늘 그 중 npm 패키지로 배포하는 법에 대해서 알아보았다.

2. 배포할 디자인시스템 라이브러리 생성

1. 간단하게 테스트용으로 배포용 angular 프로젝트를 생성했다.

ng new salad-design

2. 해당 프로젝트 폴더로 이동해서 라이브러리를 생성해준다.

cd salad-design
ng generate library salad-design-library

3. 생성한 라이브러리 폴더로 이동해서 빌드해준다.

cd projects/salad-design-library
ng build salad-design-library

4. 빌드한 파일을 npm에 배포한다

cd ..
cd ..
cd dist/salad-design-library
ng publish --access public

3. 디자인시스템 라이브러리를 사용할 프로젝트 생성

1. 이 역시 테스트용으로 간단하게 생성했다.

ng new test-1

2. npm에 올린 라이브러리를 설치한다.

npm install salad-design-library

3. 간단하게 사용해보기 - 기본적인 app 모듈에 해당 라이브러리 모듈을 임포트하고 사용해보았다.

// test-1/src/app/app.module.ts
...
import { SaladDesignLibraryModule } from 'salad-design-library';

@NgModule({
  declarations: [
    AppComponent,   
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    SaladDesignLibraryModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

// test-1/src/app/app.component.html

<lib-salad-design-library></lib-salad-design-library>

4. 결과 확인 - 성공적으로 내가 salad-design-library에서 정의한 화면이 test-1 에도 보인다!

ng serve

4. 앞으로 진행사항

이제 npm 패키지로 angular 프로젝트를 패키지로 올리는 법을 알았으니
1. 그동안 내가 진행했던 컴포넌트들을 포함시켜서 배포하고 사용할 수 있게한다
2. storybook을 이용해서 컴포넌트를 재정의하고 문서화와 디자인페이지 작성을 자동화한다.

참고

• https://jasonwatmore.com/post/2020/06/16/angular-npm-how-to-publish-an-angular-component-to-npm#angular-workspace
• https://day0404.tistory.com/34
• https://medium.com/loftbr/angular-storybook-6d8ae099ab96
• https://www.npmjs.com/package/@storybook/angular?activeTab=readme#getting-started