Frontend

npm package 구축 및 사용법

취업하고싶다! 2025. 3. 10. 16:53
반응형

Package란?

package: 완성된 프로그램

 

1. 다른 패키지의 부품으로써 사용되는 package

$ var my = require('my-package');

 

2. package 자체가 완제품으로써 사용되는 것

$ my-package

 

 

Package의 특성

1. 코드 모듈화

공통된 기능을 별도의 코드베이스로 추출하여 npm 패키지로 만듦

예로, 여러 레포지토리에서 공통으로 사용하는 함수나 유틸리티를 하나의 패키지로 모을 수 있음

 

2. 패키지 생성

해당 코드를 포함한 새로운 프로젝트를 생성,package.json 파일을 작성하여 npm 패키지로 등록할 준비

 

3. 배포

공통 기능을 npm 레지스트리에 배포

 

4. 각 프로젝트에서 사용

개별 프로젝트에서 이 패키지를 의존성으로 추가

npm install <패키지명> 명령어를 사용해 패키지를 설치하고 필요한 곳에서 require 또는 import를 통해 불러옴

 

5. 업데이트 관리

공통 기능에 변경이 있을 경우 npm 패키지 업데이트

각 프로젝트에서 패키지 버전을 업데이트하여 최신 기능을 사용할 수 있도록 함

 

 

Package publish&install

npm publish : 패키지를 NPM registry 라는 곳에 업로드를 시킴

npm install : 패키지를 다운로드

ex) 왼쪽 : 만든 패키지, 오른쪽 : 패키지를 사용할 프로젝트 

  1. 부품으로써 사용 
    왼쪽 부품 이름이 @egoing/hi 라면, 오른쪽에서 npm i @egoing/hi를 통해 가져다가 쓸 수 있음
  2. 완제품으로 사용 
    say-hi-all.app.js라는 파일이 실제로 사용자들에게 사용될 때는,
    say-hi 라는 이름으로 사용됨
    package를 사용할 오른쪽 프로젝트에서 npm i -g @egoing/hi 를 통해 전역적으로 설치한 후에
    say-hi라고 입력하면, 정상적으로 패키지가 실행됨

 

 

Package 만들기

  1. npm-producer 폴더 생성 후, npm init 을 통해 패키지 있다라고 선언

name

  • 패키지 이름을 선언
  • 인사를 하는 패키지를 만든다고 가정, 이름을 선언할 때는 앞에 @를 통해 스코프를 설정
  • 스코프는 중복을 피하기 위해 사용. 보통 자신의 이름을 넣거나 자신이 만들고자 하는 앱의 이름 등을 사용

version

  • 버전 설정

description

  • package 설명

entry point

  • 내 패키지를 다른 사람이 부품으로 가져다가 쓸 때 어떤 파일의 내용을 입구 파일로할지 결정

test command, git repository, keywords, author 생략

위와 같은 package.json이 생성됨

main.js를 생성 후 위와 같이 작성하면, 다른 프로젝트에서 main.js를 required했을 때 export 뒤쪽의 값이 전달됨


Package 올리기

만든 패키지를 다른사람이 사용하도록 하기 위해서는 npm registry에 내 package를 업로드해야 함

먼저 npm.js 홈페이지에서 계정 생성

npm 이라고 치면, 사용가능한 명령어들이 나옴

package를 누구나 사용가능하게 하고싶으면,

npm publish —access public

위 사진과 같은 에러가 발생 → npm login 필요

입력 후 npmjs 페이지에서 로그인 후 돌아오면 위와 같이 로그인 되었다고 로그가 나옴

이후, npm publish —access public 이 명령어를 입력하면

위와 같이 404 에러가 나옴


npmjs의 내 계정 이름이 jiohjung98이어서 패키지 이름을 jiohjung/hi → jiojung98/hi로 바꾸고 다시 재시도해보았더니,

위처럼 정상적으로 실행됨을 확인할 수 있었음

이후 npm.js를 접속해보면 위 사진처럼 @jiohjung98/hi 패키지가 정상적으로 업로드되었음


Package 설치하기

위에서 발행한 package를 사용할 새로운 프로젝트를 하나 생성(npm-consumer)

npm init -y 를 통해 package.json을 기본값으로 생성

npm i @jiohung98/hi 를 통해 package를 install하면

package.json의 dependencies에 내가 생성한 package.json이 설치된 것을 확인할 수 있고

node_modules와 package-lock.json이 생성됨

이후 index.js를 생성하고 package를 불러온 후에

node index.js 를 통해 package의 내용을 가져옴을 확인




Package 업데이트

npm producer 프로젝트에서 main 내용을 변경한 후에

package.json 버전을 꼭 업데이트해줘야 함

이후, npm publish 를 통해 패키지를 업데이트 해줌

npm-consumer 프로젝트에서 npm outdated 를 입력하면, 위 사진처럼 패키지의 현재 버전과 최신 버전을 확인할 수 있음

이 상황에서, npm update 를 하면 업데이트가 안됨(그대로 유지)

이유는 아래처럼, 버전을 명시해뒀기 때문임

위처럼 패키지 버전에 ~ 를 넣으면, 두 번째 자리의 버전이 같은 범위에서 세 번째 자리는 가장 최신 버전을 채택한다는 의미를 가짐

npm semantic version calculator

위 사이트에서 원하는 패키지 버전을 찾고 기호를 통해 범위가 어떻게 되는지 확인할 수 있음

이후 npm update, npm outdated 를 통해 버전 업데이트 및 최신현황을 확인 가능

npm outdated 결과로 아무것도 나오지 않으면 업데이트가 이루어진 것

업데이트된 패키지 결과가 잘 나오는 것을 확인할 수 있음




완제품으로서의 Package 만들기

Command Line에서 명령어로써 내가 만든 package를 실행하도록 하는 것

CLI.js라는 파일을 많이 사용

npm-producer 프로젝트에서 cli.js 생성 후, 위 사진처럼 입력

node cli.js → en의 내용이 출력

만약 한글을 출력하고 싶으면, cli.js에 greeting.en 을 greeting.ko로 바꿔야하는데 이걸 입력하는 기능으로 바꾸면 간편하지 않을까? → process.argv 활용

process.argv는

[
  '/Users/floyd/.local/share/fnm/node-versions/v22.14.0/installation/bin/node',
  '/Users/floyd/Desktop/npm-producer/cli.js'
]

 

이렇게 생긴 배열임을 확인할 수 있음

node 런타임이 첫 번째 원소, 두번째 원소는 우리가 실행중인 프로그램

만약 node cli.js ko 라고 작성하면,

위처럼 3번째 원소가 우리의 입력값인 인자가 파라미터인 값인 ko가 출력됨을 확인할 수 있음 

 

process.argv의 2번째 index를 출력하는 코드를 작성, node cli.js ko → ko가 출력됨을 확인

이 점에서 착안하여, 객체의 프로퍼티가 위치하는 곳에 배열 표기법 사용

 

이후 다음과 같이 출력할 수 있음

근데 실행할 때마다 앞에 node를 붙이는게 번거로워서 ./cli.js fr 를 입력하면 다음과 같이 나옴(Mac) 

파일 권한을 확인 

앞 3자리 - 소유자(rw-) : read, write 권한 있음, excute 권한은 없음

소유자인 나는 실행 가능하게 바꾸고자 함

chmod +ux cli.js → 실행 권한이 생긴 것을 확인할 수 있음

하지만 여전히 오류가 발생함

cli.js는 node.js의 파일임(js)

운영체제한테 그냥 이거 실행하라하면 안됨

node.js로 만들어졌으니까 node.js runtime 프로그램을 통해 얘를 실행시켜라 라고 명령해야 함 

#!/usr/bin/env node → 운영체제에게 이 파일은 node.js로 만든거니까 그걸로 실행시키라는 명령

 이후 실행이 잘 됨을 확인할 수 있음

이제, 다른 사람이 쓸 수 있게 해야 함

package.json에 bin을 생성하고 아래처럼 입력

이 패키지를 설치한 사람이 say-hi라고 하면 cli.js 파일을 실행할 수 있다는 의미

  "bin":{
    "say-hi":"./cli.js"
  },
 

이후 바뀐 내용을 저장하고 버전을 수정한 후에 다시 publish




완제품으로서의 Package 사용하기

사용자가 다른 패키지를 명령어로써 사용하는 방법에는 크게 3가지가 있음

  1. 자신의 로컬 패키지(npm-consumer/package.json)에 설치 → nodemodules에 설치됨
  2. 컴퓨터 어디에서든지 명령어를 통해 실행할 수 있게 전역적으로 설치
  3. 설치를 하지 않고 패키지를 다운로드 받고 실행하고 삭제하는 1회성

[ 1번 방법 ]

npm-consumer 프로젝트에서 로컬 패키지로 설치하기 위해 npm update 실행

이후 앞에서 작성했던 명령어를 실행하면 위처럼 정상적으로 출력됨을 확인할 수 있음

반응형

'Frontend' 카테고리의 다른 글

Submodule 구축  (0) 2025.03.11
캐시된 데이터로 인한 북마크 상태 미반영 문제 해결  (2) 2024.10.21
Refresh Token 프론트엔드 접근 방식  (0) 2024.09.25
SSR, SSG, ISR  (6) 2024.09.02
CSR vs SSR  (0) 2024.08.30