next-dev-pin npm 라이브러리

     

목차

 

 

npm을 제작하여서 다음과 같이 소개해보고자 합니다.

관심있으시면 다운받아서 써보시면 좋을 것 같습니다!

 

문제 의식

평소에 to-do를 주석으로만 작성해 놓으니 다른 사람들이 작성한 to-do를 보기도 쉽지 않다. 또한 주석으로 해놓다 보니 계속해서 까먹는 문제가 생겨서 나만의 npm을 만들어 보기로 결정하였다.

 

ui에 직접적으로 to-do를 표시하게 하고 pr시 올라갈 수 있고 빌드 시에는 알아서 삭제되는 그런 npm을 만들고자 하였다.

 

 

패키지 설치

npm install next-dev-pin

 

패키지를 위한 명령어 실행

npx next-dev-pin init

 

 

 

그 후 최상단 레이아웃에 devpinprovider를 감싸주자

import 'next-dev-pin/dist/index.css' 도 불러와 주자

import 'react-toastify/dist/ReactToastify.css';
import 'next-dev-pin/dist/index.css';
import Header from '@/shared/ui/Header';
import Footer from '@/shared/ui/Footer';
import { DevPinProvider } from 'next-dev-pin';
import { SessionProvider } from 'next-auth/react';

export default function MainLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <DevPinProvider>
      <div className="flex min-h-screen flex-col">
        <SessionProvider>
          <Header />
          <main className="flex-grow">{children}</main>
        </SessionProvider>
        <Footer />
      </div>
    </DevPinProvider>
  );
}

 

 

.env.local에 다음을 생성해 준다.

NEXT_PUBLIC_DEV_PIN_ENV=development

 

그러면 모든 세팅이 완료된다. (지금보니 세팅이 너무 많아서 불편하네 추후에 더 수정할 예정)

 

 

 

기능 설명

dev-pin 생성기능

 

alt + click을 하면 다음과 같이 dev-pin 컴포넌트가 생기게 된다.

 

그 후 작성을 하면 다음과 같이 파일 내부에 직접 컴포넌트가 삽입되게 된다.

 

파일 내부에 컴포넌트가 삽입된 모습

 

다음과 같이 dev-pin이 생성된다.

 

 

커서를 올리면 상세히 볼 수 있다.

 

또한 옆에 이슈 트래커가 실시간으로 추적하고 페이지마다 to-do리스트들을 담아둔다.

이를 통해 사용자가 어디 링크에 해야할 일들이 있는지 목록을 확인할 수 있다.

 

 

dev-pin 삭제기능

삭제를 누르면 다음과 같이 컴포넌트가 삭제되게 된다.

정상적으로 삭제된 모습

 

 

빌드 시 dev-pin 삭제

또한 배포 시에는 env로 분기처리를 하였기 때문에 번들링 시 트리쉐이킹에서 데드 코드로 판단하고 알아서 삭제되게 된다.

env를 production으로 바꾸고 빌드한 후 실행한 모습

 

 

 

npm: next-dev-pin

https://www.npmjs.com/package/next-dev-pin

next-dev-pin