feat: Plugin 예제 생성

[YOOMYE89]

Plugin 예제를 작성하여 넣고 Storybook에 넣어줌

[YOOMYE89]

1. Git lab - backstage 연동해서 작업하는 방향으로 진행한다.

[YOOMYE89]

스웨거 연동 하여 View로 가져오는 방법을 생각해보자.

• Sprintboot 3.x 로 테스트 해볼 예정

[wijihoon]

63 Feature 해당 issue에서 진행 예정

[wijihoon]

기존 storybook은 root/plugins 내 디렉토리를 참조하였으나...

생각해보니 굳이 storybook을 root프로젝트와 연계할 필요가 있을가 고민하다가...

아에 별도의 component 관리만 할 수 있는 독립 환경으로 나눌 수 있을가 싶어 Storybook 공식 github에서 지원하는 design-system 프로젝트를 clone하여 적용시켜 보았는데 아주 잘 적용되며, 더 많은 template을 지원하여

feature/71_template_add 브런치에 Push한 상태이다.

회의 시간에 논의하여 merge할 지 정해보자~

[wijihoon]

[YOOMYE89]

app / Plugin 생성

yarn new --select plugin 

Project Root 위치에서 해당 명령어를 사용

Root

• packages
  • app
  • backend
• plugins
  • (plugin 명시한 이름대로 생성됨)

• ...

  app / Plugin 생성 후

• 해당 플러그인 폴더로 가서 package.json에 scripts 수정 필요 -> turbo 명령어 진행 시 workspace 내 명령어 충돌로 서버가 안뜨는 문제가 있음.

• app 내 package.json에 dependencies 추가 ( 자동으로 처리됨 )

  app / Plugin 구조

  new-plugin/
  dev/
      index.ts.                -> 개발용 페이지 해당 폴더에서 start 명령어를 통해서 확인 가능
  node_modules/
  src/
      components/
          ExampleComponent/
              ExampleComponent.test.tsx
              ExampleComponent.tsx
              index.ts
          ExampleFetchComponent/
              ExampleFetchComponent.test.tsx
              ExampleFetchComponent.tsx
              index.ts
      index.ts
      plugin.test.ts
      plugin.ts                -> 실제 App(Front) 영역에서 import 되는 대상
      routes.ts
      setupTests.ts
  .eslintrc.js
  package.json  * scripts 수정 example -> "start": "echo test plugin",
  README.md

BackEnd 와의 연계

• 프로젝트 구조를 살펴보다보니, NextJS 를 통한 구조는 아닌 것으로 보임
• express Node Server를 통해서 정적자원 Serving 및 api를 제공하는 것으로 보임
• 아래에서 이어서 진행 예정

진행할 내용

• BackEnd 에 플러그인 추가 시 api를 통해서 가져온 내용을 화면에서 사용하는 것 진행
• BackStage에서 제공하는 핵심 기능 외에 BackEnd Proxy 또는 Javascript 본연의 기능으로 Custom Plugin 개발 진행
• Swagger 연동

[hellices]

31 확인하고 진행해주세요...

swagger 통합 기능이 이미 있는듯

[hellices]

backstage plugin 개발 방법으로 진행 backstage api 기능으로 정리