Node.js란?
- Node.js: 웹브라우저가 아닌 상황에서도 JavaScript를 실행시켜주는 실행환경(Run Time)
- 패키지: Node.js에서 사용하는 프로그램의 단위
Node.js 사용하기
- 로컬에 폴더 생성하기 ➡️ Vscode에서 열기
- VScode에서
Ctrl+J로 자체 터미널 열기 ✨ npm init치고 나머지 모두 다enter만 입력해서 디폴트값으로 패키지 생성- 이제 웹브라우저 대신 node.js를 사용해서 javascript를 실행시킬 수 있음!
index.js파일을 하나 생성하고node index.js를 커맨드 창에 입력해서 실행하면index.js파일이 잘 실행됨. - 더 간편하게 실행하기 위해서는
package.json파일을 열고 아래와 같이 코드를 편집해주면npm run start로 바로 실행이 가능함 (이미 단축어처럼 만들어두었으므로 파일 경로를 일일이 적지 않아도 됨)
방향키 위쪽을 두르면 직전에 실행한 명령어가 나옴
{
"name": "nodejs_study",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node index.js" // 이 부분을 추가!!
},
"author": "",
"license": "ISC"
}Node.js 모듈 시스템 이해하기
- 모듈: 개발 시 보통 프로젝트를 기능별로 쪼개서 각각의
.js파일을 생성하는 것을 모듈이라 부름 - 자바스크립트의 모듈시스템 종류: Common JS (CJS), EC Module (ESM), ...➡️ 서로 다른 모듈시스템을 혼용할수는 없음.
- Common JS (CJS)의 예시로 아주 간단한 math 모듈 만들어보기!
// math 모듈 (math.js)
function add(a, b) {
return a + b;
};
function sub(a, b){
return a - b;
}
module.exports = {
add: add, // add 라는 이름으로 add 함수를 내보내기
sub, // 내보내려는 이름과 함수 이름이 동일할 경우 한번만 적어도 됨
}// math 모듈 받아오기 1
const moduleData = require("./math");
console.log(moduleData); // { add: [Function: add], sub: [Function: sub] }
console.log(moduleData.add(1, 2)); // 3
console.log(moduleData.sub(1, 2)); // -1// math 모듈 받아오기 2 (이게 더 편리함!)
const {add, sub} = require("./math");
console.log(add(1, 2)); // 3
console.log(sub(1, 2)); // -1- EC Module (ESM)의 예시로 간단한 모듈 만들어보기!
(1)package.json파일에 들어가서 다음과 같이 수정해줘야 함
{
"name": "nodejs_study",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node index.js"
},
"author": "",
"license": "ISC",
"type": "module" // 추가한 부분!!
}// math 모듈 (math.js)
function add(a, b) {
return a + b;
};
function sub(a, b){
return a - b;
}
export default function multiply(a, b){
return a * b;
} // 대표 함수에는 default를 붙여서 설정함
export { add, sub }; // 전달하기
// 각 function 앞에 export를 붙여도 동일하게 동작!// math 모듈 받아오기
import mul, { add, sub } from "./math.js";
// 반드시 .js등의 확장자까지 기재해야 함!!
// 대표함수는 이름을 바꿔서 불러올 수도 있음
console.log(add(1, 2)); // 3
console.log(sub(1, 2)); // -1
console.log(mul(2, 4)); // 8Node.js의 라이브러리 사용하기
- 라이브러리란? 프로그램을 개발할 때 필요한 다양한 기능을 미리 만들어서 모듈화 해놓은 것 (예: 날짜 라이브러리, 수학 라이브러리, 그래픽 라이브러리 등등)
- 라이브러리 참고하기: https://www.npmjs.com/
실습으로는 randomcolor라는 라이브러리를 검색해서 사용해볼 예정
설치시 발생하는 변화들:
1. package.json 파일이 아래와 같이 변함
{
"name": "nodejs_study",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node index.js"
},
"author": "",
"license": "ISC",
"type": "module",
"dependencies": { // 이렇게 자동으로 바뀜
"randomcolor": "^0.6.2"
}
}- randomcolor 라이브러리에 의존하므로 해당 라이브러리가 있어야 작동할 수 있다는 뜻!
- 해당 파일의 버전은
^가 앞에 붙어있으므로 대략적인 버전을 기재했다는 것을 알 수 있음
package-lock.json파일이 생성됨
- 해당 파일에는 실제로 설치된 정확한 버전이 저장됨
node_modules라는 폴더가 생기며, 해당 폴더에는 설치한 패키지의 실제 코드 등이 저장됨
- 만약 이 폴더가 삭제되었다면?
npm i만 입력해주면package.json의 정보에 따라 재설치가 진행됨 (여러 패키지를 사용중인데 뭐 하나가 없어서 오류뜰때 쓰기 좋을듯)
타인과 코드 공유시에도 굳이node_modules폴더는 공유하지 않음 ➡️ 공유받은 사람이npm i로 바로 설치해서 사용할 수 있기 때문!
라이브러리 불러와서 사용해보기:
import randomColor from "randomcolor"
// import 우리가원하는이름 from "불러온라이브러리이름"
const color = randomColor();
console.log(color);