Node.js
JavaScript 실행 환경(Run Time) = 구동기
JavaScript 코드를 실행시켜주는 구동기
npm(node pakage manager)
Node.js의 패키지를 관리하는 도구
새로운 패키지를 생성하던가, 외부 라이브러리를 설치/삭제 등 기능을 제공
프로젝트(Project)
Node.js에서는 프로젝트를 패키지라 부른다.
패키지: Node.js에서 사용하는 프로그램의 단위
모듈(Module)이란?
기능별로 나뉘어진 각각의 자바스크립트 파일들을 모듈이라고 부른다.
모듈 시스템?
모듈을 생성하고, 불러오고, 사용하는 등의 모듈을 다루는 다양한 기능을 제공하는 시스템
아래 예시)
CJS, ESM는 export, import 하는 방법이 다름..
Math.js에서 만든 메서드를 index.js에서 사용하고자 한다.
Common JS(CJS)
export하는 방법이 mofule.exports안에 담아주면됨.
// ## Math.js
// math 모듈
function add(a, b) {
return a + b;
}
function sub(a, b) {
return a - b;
}
// 모듈을 내보내겠다.
module.exports = {
add,
sub,
// add : add, // key : vaule => add(value)를 add(key)로 내보내겠다. 둘이 같을 때는 add 이렇게 하나만 써도 됨..
// sub : sub,
};
import하는 방법이 require 함수 사용하는거임
// ## index.js
// CJS
const moduleData = require("./math.js");
console.log(moduleData.add(1, 2));
console.log(moduleData.sub(1, 2));
// 구조 할당 방법
const { add, sub } = require("./math.js");
console.log(add(1, 2));
console.log(sub(1, 2));
이렇게 하고 터미널에 npm run start 하면 됨
ES Module(ESM)
기존에 알던 export
// ## Math.js
// math 모듈
function add(a, b) {
return a + b;
}
function sub(a, b) {
return a - b;
}
function multiply(a, b) {
return a * b;
}
// # ESM 방법
// 방법 1
// export { add, sub }; // 한번에 export하기(낱개로도 가능(방법2참고))
//-----------------------------
// 방법 2 : 낱개로 export하기
// math 모듈
export function add(a, b) {
return a + b;
}
export function sub(a, b) {
return a - b;
}
export default function multiply(a, b) {
return a * b;
}
}
기존에 알던 import
// ## Index.js
// ESM 방법(import하는 방법)
// 방법1
import { add, sub } from "./math.js"; // 확장자까지 필수로 적어줘야 함..
// 방법2
import mul from "./math.js"; // 'export default'로 하면 따로 import한다.
// 방법3
// import mul, { add, sub } from "./math.js"; // 합치기도 가능
console.log(add(1, 2));
console.log(sub(1, 2));
console.log(mul(1, 2)); // import할 때 불러질 메서드명도 바꿀 수 있다.
터미널에 npm run start하면 나옴..
ESM은 package.json에 type: "module" 이렇게 나온다.
{
"name": "my-project",
"version": "1.0.0",
"type": "module",
// 기타 설정들...
}
라이브러리란?
프로그램을 개발할 때 필요한 다양한 기능들을 미리 만들어 모듈화 해 놓은 것
이런 식으로 나와 있는 대로 터미널에서 import 하면 된다.
설치가 되면 pakage.json의 dependencies에 설치한 라이브러리에 대한 버전정보를 볼 수 있다.
dependencies: 여기에 의존하고 있으니, 이걸 실행하려면 이 라이브러리가 필요하다.
"randomcolor": ^0.6.2 : 0점대 버전부터 1점대 버전 이전까지의 버전 중에서 최신 버전으로 설치하겠다.
라이브러리를 설치하면 pakage.json의 dependencies말고도 node_modules 폴더와 package-lock.json파일이 생긴다.
node_modules 폴더 : 설치한 라이브러리의 실제 저장
package-lock.json 파일 : 이 패키지가 사용하고 있는 라이브러리들의 버전이나 정보를 package.json보다 더 정확하고 엄밀하게 저장하는 파일
randomcolor 라이브러리 사용해보기
*혹시라도 node_modules 폴더, package-lock.json 파일이 삭제가 되었더라도, package.json에 있는 정보를 기반으로 npm install을 하면 기록된 라이브러리를 다시 설치 해준다.
→ 굳이 무거운 node_modules 폴더까지 함께 공유를 할 필요가 없다는 뜻이다.
'공부 > frontend' 카테고리의 다른 글
React.js 입문 (0) | 2025.01.30 |
---|---|
React.js 개론 (0) | 2025.01.30 |
JavaScript 심화 (0) | 2025.01.29 |
JavaScript (2) | 2024.12.08 |
화면 구현 후기(코드아님): 컴포넌트 사용법 (1) | 2024.12.07 |