[React] Node.js 기초 (모듈만들기/NPM/randomcolor 예제)

NodeJS 기초

<Udemy 리액트 챌린지 2주차>

이정환 강사님의 강의 '한입 크기로 잘라먹는 리액트'를 수강하고 있습니다.

Udemy에서 진행하고 있는 리액트 챌린지에 참여하며 2주차 미션으로 "섹션 4 Node.js"을 수강한 내용을 정리합니다. 👍

---

Node.js

• JavaScript는 각 브라우저에 내장된 자바스크립트 엔진을 통해 동작한다. (크롬 : V8)
• JavaScript를 HTML 문서 안에서만 사용될 수 밖에 없어 한계가 있다.
  → 브라우저말고 다른데에서도 사용할 수 있도록 크롬 브라우저의 V8엔진을 사용하여 Node.js이 탄생하게 됨!
• Node.js : 자바스크립트를 브라우저가 아닌 곳에서도 실행시킬 수 있도록하는 실행환경! (자바스크립트의 런타임)
  → 자바스크립트로 웹 서버 개발 가능해짐 (백엔드 개발이 가능!)
• React : 브라우저에서 동작하는 복잡한 기능을 가진 Javascript 파일을 만들어 낼 수 있는 기능
  → 마치 프로그램 처럼 동작! (웹 어플리케이션이라고 부르는 이유~)

다른 파일에서 js 함수 호출하기

• index.js 파일에서 계산 기능을 담당하는 파일인 calc.js 의 함수를 사용하려면?
• 👉 모듈을 내보내야 다른 js 파일에서 함수를 호출 가능함

⇒ NodeJS 에선 CommonJS 라는 모듈 시스템을 사용한다.

 

1. calc.js에 있는 함수로 모듈을 만든다.

module.exports : Node JS 내장함수 (Vanilla JS 에선 X)

module.exports = { moduleName : 'calc module', add : add, sub : sub, }; 
→  'calc module' 이라는 이름으로 calc.js의 add와 sub 함수를 모듈로

만들어 내보낸다.

 

2. index.js파일에서 calc.js파일에 있는 모듈을 가져온다.

require("./calc"); : calc.js파일이 리턴하는 모듈을 상수 calc로 가져온다.

💡 모듈.함수(인자); 로 모듈 내의 함수를 호출할 수 있다.

 

NPM : Node Package Manager

• Node.js 의 패키지 관리 도구
• 패키지를 만들고, 다른 사람들이 만든 패키지를 사용할 수 있다.
• Package : 다른 사람들이 만들어 놓은 모듈 (로그인, 전화인증, 메일발송 모듈 등..)

모듈 만들어보기

1. 패키지 초기화

npm init

terminal에서 패키지를 설정한다.

→ package name : {설정할 패키지 이름 입력}
→ version : (1.0.0) {패키지의 버전 입력 (default : 1.0.0)}
→ description : {패키지 설명 입력}
→ entry point : (index.js) {패키지 실행 시 페이지 (default : index.js)}
→ test command:
→ git repository:
→ keywords:
→ author:
→ license: (ISC)
About to write to /Users/umin/Documents/Project/ex_JS/package_ex/package.json:

{
"name": "package-example1",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}

→ Is this OK? (yes)

⇒ 설정내용을 바탕으로 package.json 파일이 생성됨

// package.json
{
  "name": "package-example1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
        "start": "node index.js"
  }, // 패키지를 실행하면서 자주 실행되는 명령어 정의
  "author": "",
  "license": "ISC"
}

: 패키지의 정보를 나타내는 환경설정 파일

• "scripts" { ... } : 패키지를 실행하면서 자주 실행되는 명령어를 정의하는 부분
  → 터미널에서 npm start 라는 명령어를 입력하면 미리 정의해둔 명령어 node index.js 가 실행됨

npm start 실행 시, MODULE_NOT_FOUND 오류 발생 : index.js 파일을 안만들었기 때문!

index.js 파일을 생성해주면 이렇게 npm start로 패키지의 index.js 파일을 실행할 수 있다!

다른 사람 모듈 다운 받기

• npmjs(https://www.npmjs.com/) 사이트 : 노드JS 패키지 다운 받을 수 있는 곳

예제 randomcolor 모듈 사용해보기

1. npmjs 에서 randomcolor 검색

 

2. randomcolor 설치

해당 명령어를 터미널에 실행시키면 randomcolor를 설치받을 수 있다

package.json 파일의 dependencies 항목에 randomcolor 모듈이 추가된 것을 확인할 수 있다.

(따라서 package.json를 보면 해당 프로젝트에서 어떤 외부 패키지를 사용하고 있는지를 파악할 수 있다.)

"randomcolor":"^0.6.2" : 0.6.2 이상의 버전을 사용함을 뜻함 (정확한 버전은 package_lock.json을 확인)

 

node_modules에 설치된 거 확인가능

node_modules 폴더에는 외부 패키지의 코드가 저장되어있다. 설치한 randomcolor 폴더가 생성되었다!

randomcolor/package_lock.json : 패키지가 정확히 어떤 버전인지 명시해둠

 

3. randomcolor 사용해보기

const randomColor = require('randomcolor'); // 외부모듈을 다운받았기 때문에 모듈의 경로를 작성할 필요가 없음
let color1 = randomColor(); // 16진수 색상 코드
let color2 = randomColor();
let color3 = randomColor();
console.log(color1); 
console.log(color2); 
console.log(color3); 

require('randomcolor') : 모듈 가져오기, npm으로 다운로드 받은 외부 모듈을 사용하기 위해 모듈의 경로를 작성할 필요가 없다.

randomColor() : randomcolor()의 함수호출, 랜덤한 16진수 컬러코드를 반환받는다.

출력결과로 랜덤한 16진수 컬러코드를 확인할 수 있다.

---

nodeJS를 간단하게 학습해봤다. 리액트 강의이기 때문에 쓸 일은 거의 없겠지만, 나중에 노드js를 공부해볼 계획이기 때문에 열심히 들었다. 이름만 들어봤던 NodeJS를 드디어 공부하게 되었는데, JavaScript 기반이다 보니 완전히 다른 언어가 아니라는 것을 깨닫게 되었다. 또 생각보다 어렵지 않을거란 생각에 두려움(?) 이 좀 사라졌다! 빨리 리액트 공부하고 나서 노드JS 도 공부해야지.

 

 

출처 : Udemy '한입 크기로 잘라먹는 리액트' (이정환)