[React #15] Node.js 라이브러리

01. 라이브러리?

• 우리가 프로그램을 개발할 때 필요한 여러가지의 기능들을 미리 만들어서 모듈화해 놓은 것
• 라이브러리를 이용하면 복잡하거나 귀찮은 기능들을 일일이 직접 만들 필요가 없음

 

02. 라이브러리 설치

npm | Home

• node.js의 모든 라이브러리를 모아놓은 사이트로, 찾고 싶은 기능을 검색해서 사용할 수 있음

01) randomcolor 라이브러리 설치하기

npm i randomcolor

 

02) 라이브러리 설치 후 변경사항

 

📑package.json

-  dependencies 항목에 어떤한 라이브러리를 설치했고 설치된 버전을 의미하는 필드가 추가됨

"dependencies": {
	"randomcolor": "^0.6.2"
}

 

📑package-lock.json

- 이 패키지가 사용하고 있는 라이브러리들의 버전이나 정보를 package.json보다 더 정확하고 엄밀하게 저장하는 파일

{
  "name": "practice",
  "version": "1.0.0",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "practice",
      "version": "1.0.0",
      "license": "ISC",
      "dependencies": {
        "randomcolor": "^0.6.2"
      }
    },
    "node_modules/randomcolor": {
      "version": "0.6.2",
      "resolved": "https://registry.npmjs.org/randomcolor/-/randomcolor-0.6.2.tgz",
      "integrity": "sha512-Mn6TbyYpFgwFuQ8KJKqf3bqqY9O1y37/0jgSK/61PUxV4QfIMv0+K2ioq8DfOjkBslcjwSzRfIDEXfzA9aCx7A=="
    }
  }
}

 

📑node_modules

- 실제로 설치된 라이브러리의 저장소

 

💡node_modules를 삭제하면?

- 실제로 라이브러리의 코드를 보관하는 node_modules가 사라지면 오류가 발생하는데 package.json의 정보만으로 다시 설치할 수 있음

npm i

• package.json의 dependencies 정보를 기준으로 모든 패키지, 모든 라이브러리를 다시 설치해 줌
• node_modules나 package-lock.json 파일이 없어졌다 해도 다시 설치해주면 됨
• 그래서 보통 파일을 공유할 땐 무거운 node_modules 파일은 제외함

 

03. 라이브러리 사용

 

01) 라이브러리 가져오기

import randomColor from 'randomcolor';

• 라이브러리가 내보낸 기본값을 받으므로 중괄호 없이 가져옴
• 라이브러리에서 값을 가져올 때는 from 뒤에 경로가 아닌 라이브러리의 이름만 명시

 

02) 라이브러리 사용하기

import randomColor from 'randomcolor';

const color = randomColor();
console.log(color); // #3ac169

 

 

참고자료

이정환 Winterlood, '한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지'