import와 require

DF·2024년 1월 4일

JavaScript에서 모듈을 불러 올 때 사용하는 import와 require. 사용하면서도 둘의 차이는 무엇인지, 두가지를 같이 썼을 때 생기는 오류 등에 대한 궁금증으로 이번에 한번 import와 require의 차이에 대해서 제대로 정리해보려고 한다.

import

  1. 언어: ECMAScript 2015 (ES6) 이후의 JavaScript 버전에서 사용.
  2. 사용 방법: import 구문은 모듈, 함수, 객체 등을 불러오는 데 사용된다.
  3. 예시: import { module } from 'module-name';
// 전체 모듈을 불러오기
import * as myModule from 'module-name';

// 특정 함수만 불러오기
import { myFunction } from 'module-name';

// 모듈에서 여러 개의 항목 불러오기
import { function1, function2 } from 'module-name';
// 기본 내보내기를 불러오기
import myDefault from 'module-name';
  1. 특징
  • 정적으로 로드: 코드 실행 전에 모듈을 불러온다.
  • 비동기적으로 모듈을 처리: 더 빠른 로딩 시간을 가능하게 한다.
  • Tree shaking 지원: 불필요한 코드를 제거하여 번들 크기를 최적화한다.

require

  1. 언어: Node.js와 구버전의 JavaScript에서 사용.
  2. 사용 방법: require 함수는 모듈, 파일, 라이브러리 등을 가져오는 데 사용된다.
  3. 예시: const module = require('module-name');
// 모듈 전체를 불러오기
const myModule = require('module-name');

// 모듈에서 특정 객체 또는 함수 불러오기
const { myFunction } = require('module-name');
  1. 특징
  • 동적으로 로드: 코드 실행 시에 모듈을 불러온다.
  • 동기적으로 모듈을 처리: 때로는 성능 저하의 원인이 될 수 있다.
  • 전체 모듈 로드: 필요하지 않은 코드까지 로드할 수 있다.

import와 require의 공존 사용

일반적으로 import와 require는 함께 사용되지 않는다.
하지만 Node.js에서는 babel이나 다른 트랜스파일러를 사용하여 ES6 모듈 문법(import)을 지원하도록 설정할 수 있다.
프로젝트 설정에 따라, ES6 모듈과 CommonJS 모듈을 혼합하여 사용할 수도 있지만, 일관성과 호환성 문제가 발생할 수 있다.

해결 방안

  • 최신 JavaScript 사용: 가능하다면 최신 ES6 이상의 문법을 사용하여 import를 사용하는 것이 좋다.
  • 트랜스파일러 사용: 구버전 JavaScript나 Node.js 환경에서는 Babel과 같은 트랜스파일러를 사용하여 ES6 모듈 문법을 지원하게 할 수 있다.
  • 환경에 맞는 선택: 서버 사이드(Node.js)와 클라이언트 사이드(브라우저)에서 각각 적합한 모듈 시스템을 사용하는 것이 좋다.

=> 결론은 하나의 프로그램에서 두 키워드를 동시에 사용하지 않을 것.

express에서 import문 사용하기

기본적으로 express는 commonJS를 사용하는 nodeJS이기 때문에 import문을 사용하지 못한다. 그러나 package.json 에서 다음과 같이

"type": "module", 적용을 하면 require가 아닌 import문을 사용할 수 있는 형태로 바뀌게 된다.

{
  "name": "server",
  "version": "1.0.0",
  "type": "module", // 이 부분 수정
  "private": true,
  "description": "",
  "main": "app.js",
  "scripts": {
    "build": "babel app.js -d dist",
    "dev": "npm run build && nodemon dist/index.js",
    "start": "nodemon --exec babel-node ./app.js",
    "test": "echo \"Error: no test specified\" && exit 1",
    "make": "node ./hashilip_engine/index.js"
  },

0개의 댓글