profile image

L o a d i n g . . .

패키지 : 누군가 따로 만들어놓은 node.js 모듈

npm(node package manager)를 사용하여 node.js 패키지 만들기

 

Copyright (C) Microsoft Corporation. All rights reserved.

새로운 크로스 플랫폼 PowerShell 사용 https://aka.ms/pscore6

PS D:\workspace\workspace_oneBiteReact> npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help init` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (vanilla) package-example1
version: (1.0.0)
git repository: (https://github.com/Ina-dang/OneBiteReact.git)
author: Inadang
license: (ISC)
About to write to D:\workspace\workspace_oneBiteReact\package.json:

{
  "name": "package-example1",
  "version": "1.0.0",
  "description": "JavaScript example starter project",
  "main": "index.html",
  "scripts": {
    "start": "parcel index.html --open",
    "build": "parcel build index.html"
  },
  "dependencies": {
    "parcel-bundler": "^1.6.1"
  },
  "devDependencies": {
    "@babel/core": "7.2.0",
    "typescript": "4.4.4"
  },
  "resolutions": {
    "@babel/preset-env": "7.13.8"
  },
  "keywords": [
    "javascript",
    "starter"
  ],
  "repository": {
    "type": "git",
    "url": "git+https://github.com/Ina-dang/OneBiteReact.git"
  },
  "author": "Inadang",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/Ina-dang/OneBiteReact/issues"
  },
  "homepage": "https://github.com/Ina-dang/OneBiteReact#readme"
}


Is this OK? (yes) yes

npm init으로 진입

pakage이름을 설정해준다.

 

 

package.json이 생성되며 패키지 초기화가 된다

 

 

 

 

 

package.json => 만들 정보를 기록하는 환경설정파일

패키지이름, 버전, 설명, 진입파일,(main) 저자 등등 명명 가능

 

scripts : 패키지를 하면서 자주 실행해야하는 명령어를 정의

이런식으로 변경도 가능

 

전날 생성했던 index.js 파일이 실행된다.

.

 

 

 

 

 

index.js를 수정하고 다시 실행하면

 

 

수정된 index.js가 실행된다

 

 

 

 

 

 

 


다른 사람이 만든 모듈 사용하기

 

npm

Bring the best of open source to you, your team, and your company Relied upon by more than 11 million developers worldwide, npm is committed to making JavaScript development elegant, productive, and safe. The free npm Registry has become the center of Java

www.npmjs.com

 

npmjs를 검색해서 들어간다. 대부분이 오픈소스 nodejs 패키지이므로 필요한 서비스,모듈을 검색해서 사용하면된다.

 

 

 

 

 

이중 randomcolor라는 패키지를 사용해보자

 

randomcolor 모듈: 랜덤한 색상코드를 함수 한 번으로 추출해주는 재밌는 모듈

 

 

 

 

설치방법

해당 모듈의 상세페이지 에서 명령어 입력

 

상세페이지 우측에 있는 Install을 클릭하면 자동으로 복사가된다

npm i(install) randomcolor를 입력하면

 

명령 결과가 뜨고 우측 EXPLORER창이 바뀌게 되는데

 

 

기존에 내가 만들었던 pakage.json외에 package-lock.json과 randomcolor폴더, node_modules가 추가된다.

 

package.json : ^기호를 통해서 버전의 범위(range)를 표시

package-lock.json : 정확한 버전 표시

 

 

 

 

 

직접 만든 모듈같은 경우 require할때 경로를 지정해줬어야 했는데,

이런식으로

 

외부모듈은 이름만 적어주면 외부모듈이겠거니 하면서 가져와준다.

 

 

 

 

 

 

 


                            //랜덤컬러 외부모듈
const randomColor = require('randomcolor');

let color1 = randomColor();
let color2 = randomColor();
let color3 = randomColor();


console.log(color1, color2, color3);

각기 다른 색이 뽑히는지 확인하기위해 color변수를 3개를 만들어서 실행

 

 

 

 

 

출력결과 : 각기 다른 컬러 3개가 뽑혔다.

 

 

이 외에도 많은 외부모듈들이 npmjs닷컴에 있어서 필요할 때 쇼핑해서 사용하면 된다.

반응형

'개발 > Javascript' 카테고리의 다른 글

[React] 리액트 app 설치하기  (0) 2022.06.24
[React] 리액트는 왜 필요할까?  (0) 2022.06.23
[node.js] Node.js 기초  (0) 2022.06.21
[node.js] node.js는 왜 써야할까?  (0) 2022.06.20
[Javascript] API & fetch  (0) 2022.06.16
복사했습니다!