.js
파일이 하나의 모듈// module.js
const greeting = 'Hello, Module!';
const sayHi = () => console.log(greeting);
// module.exports = { 내보낼 내용 }
module.exports = {
greeting,
sayHi
};
// main.js
// require('가져올 파일 경로')
const myModule = require('./module');
console.log(myModule.greeting); // Hello, Module!
myModule.sayHi(); // Hello, Module!
# node 파일 이름
$ node main.js
프로젝트/
├── modules/
│ ├── auth.js (인증 관련 모듈)
│ ├── board.js (게시판 관련 모듈)
│ └── comment.js (댓글 관련 모듈)
└── app.js (메인 애플리케이션)
위에서 설명한 모듈처럼 require, exports를 통해 원하는 모듈을 개인적으로 만들어 사용해도 되지만, Node.js에서는 이미 많은 모듈들이 내장되어 있고 npm을 통해 다른 모듈들을 설치하여 사용할 수 있다.
Node.js에서는 전역 객체를 사용할 수 있다. 전역 객체는 모든 모듈에서 사용할 수 있는 객체로, global
이라는 이름으로 사용할 수 있다.
// global 객체 사용
global.console.log('Hello, Global Object!');
require(), setTimeout(), console.log() 등의 함수들도 전역 객체에 해당하며 앞에 global
을 붙이지 않아도 사용할 수 있다.
Node.js에서 기본적으로 제공하는 모듈로, 별도의 설치 없이 바로 사용할 수 있다.
npm(Node Package Manager)을 통해 설치한 모듈로, 다른 개발자들이 만든 모듈을 사용할 수 있다.
.mjs' 확장자를 사용하거나, package.json 파일에
"type": "module"`을 추가하여 사용한다.// module.js
export default function hello() {
console.log('hello');
}
// main.js
// import 모듈명 from '모듈의 경로';
import hello from './module.js';
hello(); // hello
// module.js
// 기본(default) 내보내기
export default 123;
// 이름 붙여서 내보내기
export const str = 'abc'; // 문자열
export const arr = []; // 배열
export const obj = () => {}; // 화살표 함수
export function obj() {} // 일반 함수
// main.js
// 기본(default) 가져오기
// import 모듈명 from '모듈의 경로';
import num from './module.js';
// 이름 붙여서 가져오기
// import { 이름 } from '모듈의 경로';
import { str as xyz, arr, obj } from './module.js';
console.log(num); // 123
console.log(xyz); // abc (str을 xyz로 가져옴)
console.log(arr); // []
console.log(obj); // [Function: obj]
// main.js
// 모든 내용 가져오기
// import * as 모듈명 from '모듈의 경로';
import * as abc from './module.js';
console.log(abc); // { default: 123, str: 'abc', arr: [], obj: [Function: obj] }
// a.js
export const a = () => 123;
// b.js
export const b = () => 456;
// main.js
import { a } from './a.js';
import { b } from './b.js';
console.log(a()); // 123
console.log(b()); // 456
// index.js
export { a } from './a.js';
export { b } from './b.js';
// main.js
import { a, b } from './index.js';
console.log(a()); // 123
console.log(b()); // 456
// Button.js
import React from 'react';
const Button = () => {
return <button>Button</button>;
};
export default Button;
// App.js
import React from 'react';
import Button from './Button';
const App = () => {
return (
<div>
<h1>App</h1>
<Button />
</div>
);
};
export default App;
// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));