ng-zoom — 내 첫 번째 Angular 라이브러리(클릭 시 이미지 확대/축소)

🤔 며칠 전 Angular 프로젝트OctoProfile(GitHub 프로필을 보는 더 멋진 방법)의 프로필 사진에 대해 "확대/축소(클릭)"를 구현하려고 했습니다.



가장 먼저 NPM에서 🔎angular zoom on click를 검색했지만 라이브러리 🤷가 없었습니다. 그래서 저는 직접 기능을 구현하고 성공하기로 결정했습니다.

Angular용 패키지 부족

하지만 Angular 앱에 사용할 수 있는 패키지가 부족하다는 것을 기억했습니다. 생각해 보면 Angular 앱보다 React 앱에 사용할 수 있는 패키지가 훨씬 더 많습니다.

나는 이것이 주로 다른 웹 프레임워크에 비해 React의 인기 때문이라고 생각합니다.

Google trends for the past 12 months worldwide:

리액트의 인기

그런데 왜 React가 그렇게 인기가 있을까요? React 자체는 훌륭한 라이브러리이지만 커뮤니티와 방대한 양의 React 패키지가 계속해서 이를 유지하고 있다고 생각합니다.

말하자면 누군가가 Angular로 포팅react-flip-move할 때까지 몇 달 동안 기다렸고 여전히 계속 기다리고 있습니다.

react-flip-move Demo:

이 라이브러리만으로도 일주일에 80k 다운로드를 받습니다(NPM에 따름). 다운로드가 엄청나네요...

요점은 사용자가 Angular보다 선택할 수 있는 패키지가 더 많기 때문에 React를 선호할 수도 있다는 것입니다.

ng-zoom의 생성

저는 "클릭 시 확대/축소"기능을 위해 만든 구현이 마음에 들었고 첫 번째 Angular 라이브러리를 만들어 NPM에 게시하기로 결정했습니다.

문제는 Angular 라이브러리를 만드는 방법을 몰랐다는 것입니다. 그래서 다음 튜토리얼을 시청하라는 임무를 부여했습니다.

튜토리얼

한 가지만 진술해야합니다. 나는 5분이 넘는 튜토리얼을 싫어한다. 저만 그런지는 모르겠지만 그냥 싫습니다.

하지만 NPM에 Angular 라이브러리를 만들고 게시하는 방법에 대한 짧은 동영상을 찾을 수 없었습니다. 그래서 나는 이것들을 고수해야했습니다.

내 라이브러리

ng-zoom logo:

홈페이지

NPM 패키지

여기 저기 몇 가지 테스트를 거친 후 "클릭 시 줌"기능을 Angular 라이브러리에 패키징할 수 있었습니다.

GitHub에서 릴리스를 만들 때마다 패키지가 NPM에 자동으로 게시되도록 GitHub 작업으로 다음 워크플로를 만들었습니다.

# This workflow will
# - delete ./dist/ng-zoom/README.md
# - copy ./README.md into ./dist/ng-zoom
# - publish to NPM
# when a release is created

name: NPM publish

on:
  release:
    types: [created]

jobs:
  publish:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v1
      - uses: actions/setup-node@v1
        with:
          node-version: 16
      - run: yarn install
      - run: npx ng build ng-zoom
      - uses: JesseTG/[email protected]
        with:
          path: /dist/ng-zoom/README.md
      - uses: canastro/copy-file-action@master
        with:
          source: "README.md"
          target: "dist/ng-zoom/README.md"
      - uses: JS-DevTools/npm-publish@v1
        with:
          token: ${{ secrets.NPM_AUTH_TOKEN }}
          package: ./dist/ng-zoom/package.json

또한 Demo app을 만들어 사용자가 my library과 상호 작용할 수 있도록 Netlify에 게시했습니다.



🏞️ 이미지에 대한 간단한 클릭 기능입니다.

라이브러리는 Angular Universal 및 PWA를 지원하므로 설치 시 파손될 염려가 없습니다ng-zoom.

어려운 작업이었다고 말해야 합니다. 유일한 주의 사항은 라이브러리가 Angular v13.0.0 이상과만 호환된다는 것입니다(업데이트가 필요할 수 있음).

적어도 웹사이트와 같은 잡지에서 가장 많이 사용되는 기능 중 하나를 Angular 개발자에게 가져왔다고 말할 수 있습니다.

구현

내 라이브러리 게시를 완료한 후 이를 OctoProfile에 통합할 수 있었고 최종 결과는 다음과 같습니다.

참고

이 게시물에서 얻을 수 있는 한 가지는 Angular를 사랑하고 Angular가 계속해서 최고의 웹 프레임워크 중 하나가 되기를 원한다면 더 많은 Angular 패키지를 만들기 시작해야 한다는 것입니다.

😉 그리고 가능하면 react-flip-move을 Angular로 포팅하세요.