npm 패키지 배포

프론트엔드 스터디 스프린트

Google Developer Student Club에서 프론트엔트 파트 관련 스터디를 진행하고 있다. 4개의 프로젝트를 받아서 2주씩 진행을 한다. 두번째 스프린트인 npm 패키지 배포가 끝나서 후기를 작성하려고 한다.

1.dom-visualizer
2.npm 패키지 배포
3.electron 비즈니스툴
4.graphic 프로젝트

Javascript 라이브러리를 만들어 npm에 배포한다

명세

필수 요구사항

• 다른 라이브러리에 의존성이 있을 것
• README.md 작성
• .npmignore 작성
• 프론트엔드 테스트 라이브러리(jest , mocha , karma , TestCafe , jasmine) 중 하나 사용
• github 업로드
• 적절한 난이도

추가 요구 사항

• Typescript 지원
• React

처음부터 테스트하면서 했어야하는데(ㅠㅠ) 코드 다 짜고 굳이 넣으려니까 필요를 못 느꼈고, karma가 react와 호환이 잘 안되는 것 같다.

기간

일주일 받았는데 원래 하던 걸 고친거라 그렇게 오래 걸리지 않았다.

기술 스택

React 컴포넌트라 React에 peerDependency가 있고, 다른 라이브러리에 의존성이 있어야 해서 gradient-color v2를 사용했다.

library 번들링 할때는 rollup(esm, cjs, d.ts 등의 여러 버전으로 나눠서 한꺼번에 번들링이 가능해서)이 좋다는 말을 들어서 rollup을 사용했다.

과정&코드

magic-boolean-conch

연습용으로 간단한 것 하나 배포했다.

magic-boolean-conch라는 뭘 넣든 true,false, "true","false", undefined 중 하나를 리턴하는 클래스를 가진 라이브러리이다.

typescript를 지원한다. 쉽다. tsc로 빌드된 두 파일을 package.json에 이렇게 나눠 쓰면 된다.

  "main": "dist/index.js",
  "types": "dist/index.d.ts",

test 라이브러리로 jest를 사용했다. 검색해 본 결과 jest도 react처럼 페이스북에서 만들었기 때문에 둘이 호환이 좀 더 쉬운 것 같은데, 이미 jest를 사용해서 이번에는 다른 거 써보자 했다가 뒤에서 좀 꼬인 듯ㅎㅎ...

react-pinwheel-navbar

누가 z-index paradox flower처럼 생긴 카드 네비바를 앱 디자인에 넣었는데 개발자 친구들과 그 상태에 대해 얘기하다가 하게 되었다.

1번 위에 2번, 2번 위에 3번씩 가다가, 5번이 다시 1번 위에 와야하는데 어떻게 구현할거냐는 얘기였다.

3d로 하거나 개별 element를 쪼개서 z-index를 조절해주면 된다. 나는 꼭 생기는 하나의 문제 카드와 겹치는 교집합 부분만 위에 덧그려줬다.
다만 그냥 css로 구현하는 한 애니메이션을 넣는 것은 아주 어렵다.
나는 clip-path로 카드를 쪼개서 z-index를 다르게 했는데, 멀쩡하게 보이게 하기 위해서 한 카드 엘리먼트를 3파트로 나눴다.
rollup으로 esm 버전, cjs 버전 한번에 번들링하고 pacakge.json에 각각 나누어썼다.

  "main": "dist/cjs/index.js",
  "module": "dist/esm/index.js",

react 모듈을 살짝 본 적이 있는데 그 친구도 main은 common.js더라고요.

결과

https://github.com/gdsc-ys/react-pinwheel-navbar
https://www.npmjs.com/package/react-pinwheel-navbar
아래가 사용하는 코드이다. npm에서 react-pinwheel-navbar를 다운받는다. import PinwheelNavbar from "react-pinwheel-navbar"; 카드 가로세로, 카드 개수 등은 자유롭다. 색깔이나 눌렀을 때 이동하는 링크, 텍스트 등은 배열로 넣는다.

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import PinwheelNavbar from "react-pinwheel-navbar";
import { colors, texts, links, onClicks } from "./value";

const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(
 <React.StrictMode>
   <PinwheelNavbar
     colors={colors}
     texts={texts}
     number={30}
     width={80}
     height={120}
     border={"1px solid black"}
     borderRadius={"5px"}
     textColor={"black"}
     fontWeight={"regular"}
     onClicks={onClicks}
     links={links}
   ></PinwheelNavbar>
 </React.StrictMode>
);

그럼 여러 모양으로 바꿔서 쓸 수가 있다.

아쉬운 점& 앞으로 고치고 싶은 점

• style object를 만들어 인라인으로 넣는 방식으로 짰는데 별로 좋은 방법이 아니었던 것 같다. 추가 속성을 넣을 때마다 객체 복사를 해야 했고 hover 옵션 지원을 못했다. 다른 식으로 고치고 싶다.
• Test 라이브러리 못 붙인 것
• Typescript로 짜지 않은 것 (Typescript 지원하지 못한 것)
• 애니메이션 가능하게 하기 (아예 다른 패키지로 배포하고 싶다)
• 카드 커스텀 자유도 높이기

아쉬운 점이 많지만 2번 배포했으니까 다음에는 좀 더 잘 해보겠습니다. npm 프로젝트에서 제일 먼저 봐야할 것은 package.json임을 다시 한 번 느낀 스프린트...