Front/Node.js

Node.js 모듈과 객체

oodada 2024. 12. 25. 18:11

1. 모듈(Module)이란?

  • 프로그램을 기능별 단위로 분리한 코드 모음
  • 함수, 변수, 객체 등을 포함
  • 하나의 .js 파일이 하나의 모듈

- 모듈의 장점

  1. 재사용성: 한 번 만든 모듈을 여러 프로젝트에서 재사용
  2. 유지보수: 기능별로 분리되어 있어 관리가 용이
  3. 캡슐화: 관련 코드를 하나의 단위로 묶어서 관리
  4. 의존성 관리: 필요한 기능만 선택적으로 가져와 사용

- 대표적인 웹서비스 공통 모듈 예시

  • 회원가입 모듈
  • 로그인 모듈
  • 게시판 모듈
  • 댓글 모듈

- 모듈 사용법

모듈 내보내기 (Export)

// module.js
const greeting = 'Hello, Module!';
const sayHi = () => console.log(greeting);

// module.exports = { 내보낼 내용 }
module.exports = {
    greeting,
    sayHi
};

모듈 가져오기 (Import)

// 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             (메인 애플리케이션)

2. 모듈의 종류

위에서 설명한 모듈처럼 require, exports를 통해 원하는 모듈을 개인적으로 만들어 사용해도 되지만, Node.js에서는 이미 많은 모듈들이 내장되어 있고 npm을 통해 다른 모듈들을 설치하여 사용할 수 있다.

  • 기본(코어)모듈 : Node.js 설치 시 기본적으로 제공되는 모듈
  • 외부 모듈(서드 파티 모듈) : npm을 통해 설치한 모듈

- 전역 객체(Global Object)

Node.js에서는 전역 객체를 사용할 수 있다. 전역 객체는 모든 모듈에서 사용할 수 있는 객체로, global이라는 이름으로 사용할 수 있다.

// global 객체 사용
global.console.log('Hello, Global Object!');

require(), setTimeout(), console.log() 등의 함수들도 전역 객체에 해당하며 앞에 global을 붙이지 않아도 사용할 수 있다.

- 기본(코어)모듈

Node.js에서 기본적으로 제공하는 모듈로, 별도의 설치 없이 바로 사용할 수 있다.

  • fs (File System) : 파일 시스템 관련 기능
  • http : 웹 서버 생성 및 요청, 응답 처리
  • os (Operating System) : 운영체제 정보
  • path : 파일 경로 관련 기능
  • url : URL 처리 기능
  • util : 각종 편의 기능

- 외부 모듈(서드 파티 모듈)

npm(Node Package Manager)을 통해 설치한 모듈로, 다른 개발자들이 만든 모듈을 사용할 수 있다.

  • express : 웹 프레임워크
  • mongoose : MongoDB ODM(Object Data Modeling)
  • nodemailer : 이메일 전송
  • socket.io : 웹 소켓 통신
  • request : HTTP 요청
  • cheerio : 웹 스크래핑

3. ES Modules의 사용

  • 최신 JavaScript에서 도입된 표준 모듈 시스템으로, 주로 웹 개발에서 사용된다.
  • .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

모듈의 내보내기(export), 가져오기(import)

  • 모듈을 내보내기 위해서는 export 키워드를 사용한다.
  • 모듈을 가져오기 위해서는 import 키워드를 사용한다.
// 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 파일을 만들어 사용한다.
// 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

React에서의 모듈 사용

  • React에서는 컴포넌트를 모듈로 사용한다.
  • 컴포넌트를 내보내기, 가져오기하여 사용한다.
// 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'));
티스토리 친구하기