TIL | 토이프로젝트 4 - npm package maker

1. 프로젝트 설계

---

   nodemon, eslint, prettier를 생각해보자. 앞서 언급한 패키지를 프로젝트 경로에 설치해서 사용한다면, 직접 구현하기 복잡한 개발 과정을 간소화 시킬 수 있어 개발 환경을 보다 간편하게 형성할 수 있다. 또한 /*야 너두? 야 나두! 처럼*/  커스터마이징하게 만든 패키지가 npm에서 수많은 개발자들의 다운로드 대상이 된다면, 개발 능력 웹내 인증으로 이보다 더한 업적이 존재할까 싶다. 이처럼 패키지 개발은 대단한 업적을 지닌 개발자들이 만든 패키지처럼 개발 환경을 효율적으로 만들고, 최적화된 개발환경 세팅에 도움을 줄 수 있다. 따라서 본 프로젝트를 통해 /*작지만 소중한 업적(?)인*/ Timer 패키지를 만들어볼 것이다. 

1.1 프로젝트 개요

  본 프로젝트는 다음과 같은 메커니즘으로 진행할 것이다. (단, npm에 가입한 것을 가정하고 진행할 것이다.)

1. Package 생성
2. Package 배포
3. Package 설치 및 업데이트

 

2. 구현 flow

---

   본 프로젝트는 크게 2개의 코드 조각으로 패키지 생성을 위한 코드 조각과 패키지를 직접 불러와서 사용하는 코드조각으로 구분해볼 수 있다. 그러나 pacakge를 생성하고 배포하는 것을 따로 구분하여 package 생성, package 배포, package 사용으로 크게 세 부분으로 나눠서 자세하게 알아볼 것이다. 

2.1 Package 생성

  2.1.1 패키지명은 굉장히 중요하다.

$ npm install """"package-name"""" <- 여기에 사용된다!

  패키지를 생성하기 위해서는 패키지명을 정해야 하는데, npm 문서를 통해 public package 제약조건을 확인하고 작명해야한다. 다만, @username/package-name 으로 생성한다면 username자체가 고유하므로 패키지 작명이 수월해진다. 

  2.1.2 패키지로 사용할 폴더를 만든 후 main.js, package.json, README.md를 만든다.

# main.js

// H - Timer 
async function timer(ms){
    let count = 0
    const stop = setInterval(()=> {
        console.log(`Time goes on ${count+=1} :)`)
    }, 1000)

    return new Promise((resolve) => {
            const timer = setTimeout(() => {
            resolve()
            clearTimeout(timer)
            clearInterval(stop)
            console.log(`Time goes on ${count+=1} :)`)
        }, ms)
    })
}

module.exports.timer = timer // 메서드 자체를 모듈로 만들어서 메서드를 객체로 생성하여 사용할 수 있다.

# package.json : main.js를 main으로 설정하지 않으면 패키지 설치 후 모듈을 불러오지 못하는 상황이 발생할 수 있다.

{
  "name": "hnhn-pkg",
  "version": "0.1.2",
  "main": "main.js", 
  "keywords": ["util"],
  "license": "MIT"
}

# README.md

# My First STOPWATCHA!!!!

Hello guys! :)
The app is used to count seconds.
**Use me! use me!**

2.2 Package 배포

  2.2.1 package를 생성한 폴더로 위치를 변경한다.

$ ...... > cd package-folder

  2.2.2 package를 배포한다.

$ ....../.... > npm publish

   [주의]  package가 업데이트 된 경우에는 package-name에 들어있는 package.json의 version을 바꿔서 publish를 해야한다.

  2.2.3 package upgrade

$ npm upgrade package-name

2.3 Package 사용

   2.3.1 패키지 설치

$ ...... > cd 프로젝트폴더

$ npm install package-name

   2.3.2 패키지내 함수를 객체로 생성

   Package를 불러와서 객체로 생성하여 다음과 같은 소스로 작성할 수 있다.

const {timer} = require('hnhn-pkg')

async function main() {
    console.log('start')
    await timer(3000)
    console.log('finished')
}

main()

 

3. 구현 결과

---

   3.1.1 node_modules 내에 포함된 package

구현결과 1

   3.1.2 프로젝트 폴더 내 main.js 에서 출력한 결과

구현 결과 2

+ 패키지 명과 프로젝트 명이 일치하여 프로젝트의 주소가 위와 같이 나타난 것이므로 패키지에서 실행한 것이 아니다.

 

4. 첨언

---

   Npm package maker project를 통해 다음과 같은 사실을 알 수 있었다. 

• 패키지를 공개할 때 보안 이슈가 발생하지 않도록 개인정보가 들어간지를 반드시 확인해야 할 것이다.
• 0.0.1로 시작했지만 버전이 n.n.n으로 높아진 패키지들을 보면, 패키지 제작자가 패키지에 공을 들인다는 것을 알 수 있다.
• NPM에서 인기를 얻는 패키지를 만드는 것은 프로그래머로서의 자신감을 극대화 시킬수 있는 계기가 될 터인데, 그렇게 성장하기까지는 오랜 시간이 걸리겠지만 노력해봐야겠다. /*지금은 프로그래머로서의 자존감부터 제대로 형성해보자.*/

 

5. Reference

---

- FASTCAMPUS / 한 번에 끝내는 Node.js 웹 프로그래밍 백엔드 part. 2 Ch14