@max-at/utils

@max-at/utils 라이브러리는 MAXST 프론트엔드 공통 util 함수 모음 라이브러리입니다.

시작하기

max-at 사용 가이드

시작하기

• maxst 이메일 계정으로 github과 NPM에 가입합니다.
  • https://github.com/maxst-fe/max-at
  • https://www.npmjs.com/package/@max-at/utils
• github과 NPM 가입이 완료되면 권한부여를 할 수 있는 개발자에게 이메일을 공유하여 github(maxst-fe), NPM(max-at) 조직 권한을 부여 받습니다.
• 조직 권한을 부여 받은 후, Github max-at 레포지토리를 pull 받습니다.

수정 및 배포 작업 순서

전체적인 라이브러리 수정 작업에 대한 순서입니다.

1. max-at 라이브러리 Jira 이슈, 깃헙 이슈 활용 설명a. 현재 max-at 라이브러리가 github 레포로 되어있습니다. 논의한 결과, jira 이슈, 깃헙 이슈를 모두 활용하자는 의견이 나왔습니다.b. jira이슈는 저희가 라이브러리 작업을 하고 있다는 것을 보고차 사용하고 에픽명은 M-PLATFORM 에서 FE 라이브러리입니다. -> 하위 이슈 생성 후 작업 진행하시면 될 것 같습니다.github 이슈를 생성하게 되면 #issueNumber가 생성되어지는데 해당 이슈넘버를 활용하여 feature 브랜치를 따서 작업 진행하시면 됩니다.
   • github 브랜치명: feature/library#{issueNumber}-{taskDescription} 입니다
   • ex) feature/library#2-add-docusaurus
2. 브랜치 생성
   1. main 브랜치를 기준으로 feature 브랜치를 생성합니다. feature/MP-0000-utils-add-set-table-key
3. 로컬에서 수정
   1. 해당 라이브러리 폴더에서 수정작업을 진행합니다.
   2. 해당 함수가 사용될 프로젝트에서 모두 테스트를 합니다.
   3. 수정 및 테스트 완료 후에는 PR을 올립니다.
4. PR
   1. PR 완료 후 배포 준비를 합니다.
      1. 다른 개발자들은 PR 확인 시, 추가 및 수정된 함수가 자신의 프로젝트에서 사용 될 시, 브랜치를 pull 받아 자신의 프로젝트에 적용해 봅니다.
5. 배포
   1. PR이 완료되면, main branch로 merge를 합니다.
   2. main branch에 merge하게되며 npm 버전이 업데이트 되었을 경우 자동으로 배포되어 집니다.

수정 방법

아래는 file tree 구조는 max-at 레포지토리의 폴더 구조입니다. max-at에 다양한 라이브러리들이 추가될 예정이며 이 문서에서는 max-at/utils 라이브러리를 기준으로 설명드리겠습니다.

만약 @max-at/utils 라이브러리에 새로운 함수를 추가 할 경우 max-at 레포지토리에서packages/utils/src/utils 에 추가하면 됩니다.

최종적으로 export되는 함수는 utils에 생성, Index.ts에서 exporte되어지며, 이외의 내부적으로 사용하게 될 함수들은 helpers폴더에서 생성하고 수정하시면 됩니다.

├── README.md
└── packages
    └── utils // 라이브러리 명(@max-at/utils)
        ├── README.md
        ├── package.json
        ├── rollup.config.js
        ├── src
        │   ├── helpers // export되는 함수는 아니나 내부적으로 사용되는 함수를 생성하시면 됩니다.
        │   │   ├── factory // 내부적으로 사용하게 될 팩토리 함수를 생성하시면 됩니다.
        │   │   │   └── cookie.ts
        │   │   └── unit // 내부적으로 사용하게 될 단일 함수를 생성하시면 됩니다.
        │   │       ├── deleteCookiesByToken.ts
        │   │       ├── getDateTimeExpiresByToken.ts
        │   │       └── setCookiesByTokens.ts
        │   ├── index.ts // 최종적으로 export되는 함수들을 export 해주시면 됩니다.
        │   └── utils // 최종적으로 export되는 library의 기능을 file 단위로 생성하시면 됩니다.
        │       ├── deleteCookiesByToken.ts
        │       └── updateCookiesByToken.ts
        └── tsconfig.json
    └── new library...

build 방법

• 라이브러리 폴더 위치 : max-at/packages/utils
• 작업한 라이브러리 폴더에서 npm run build를 실행하면 dist, esm folder가 추출되어집니다. 그러면 build가 완료된겁니다.
• 아래는 작성일자 기준 build command입니다. 참고하시기 바랍니다.

  "build": "rm -rf dist esm && rollup -c && tsc --declaration --emitDeclarationOnly --declarationDir dist"
  rm -rf dist esm : 기존의 dist esm file을 삭제합니다.
  rollup -c : rollup library 이용 bundle을 실행합니다. 기본적으로 rollup.config.js 의 file의 설정을 기준으로 실행됩니다.
  tsc --declaration --emitDeclarationOnly --declarationDir dist : 확인 필요

테스트 방법

• . symbol link 이용 방법

  1. library에서 수정하고 npm run build를 실행하면 새로 install이나 추가적으로 link 연결을 실행 하지않아도 project에서 자동으로 수정사항이 바로 반영되어집니다.

  2. 라이브러리 폴더 위치 : max-at/packages/utils

  3. 패키지 명 : @max-at/utils / 프로젝트 명 : cms-project

     # ===== symbol link 이용 테스트 시작
     # max-at/packages/utils (패키지명으로 글로벌 심볼링크 생성)
     sudo npm link
     # cms-project (cms-project에서 글로벌 심볼링크 연결)
     npm link @max-at/utils
     # ===== symbol link 이용 테스트 종료
     # cms-project (cms-project에서 글로벌 심볼링크 라이브러리 해제 및 삭제)
     npm unlink --no-save @max-at/utils
     # max-at/packages/utils
     npm uninstall @max-at/utils

수동 publish 방법

• 라이브러리 폴더 위치 : max-at/packages/utils
• 작업한 라이브러리 폴더의 package.json > version 을 0.0.1을 올리고 저장합니다.
  • 이미 배포된 버전으로 배포는 불가하므로 새로운 버전으로 배포해야하므로 저장합니다.
• 작업한 라이브러리 폴더에서 npm publish 를 실행하면 배포가 되어집니다.
  • 만약 권한 에러가 발상할 경우 터미널에 npm login 명령어를 실행하여 npm이 로그인을 진행합니다.
  • 로그인이 완료되면 다시 npm pulish 를 실행합니다.
  • https://docs.npmjs.com/cli/v9/commands/npm-login