npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@max-at/utils

v0.1.2

Published

utils library(MAXST frontend)

Downloads

4

Readme

@max-at/utils

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

시작하기

max-at 사용 가이드

시작하기

수정 및 배포 작업 순서

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

  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 를 실행하면 배포가 되어집니다.