18 asked

1

안녕하세요 TAESUN님, 질문 주셔서 감사합니다!

강의에서는 Node.js의 가장 전통적이고 널리 쓰이는 방식인 CommonJS를 기준으로 require 문법을 사용하여 진행했지만, 말씀하신 대로 최신 Node.js 환경에서는 ESM(ECMAScript Modules) 방식을 공식적으로 지원하고 있기 때문에 설정만 조금 바꿔주면 브라우저에서 쓰던 import와 export 문법을 그대로 사용할 수 있습니다. 이를 프로젝트에 적용하기 위해서는 가장 간단한 방법으로 프로젝트의 루트에 있는 package.json 파일 최상단 객체에 "type": "module"이라는 속성을 한 줄 추가해주시면 Node.js가 해당 프로젝트를 ESM 환경으로 인식하게 됩니다.

// package.json
{
  "type": "module",
  // ... 나머지 설정들
}

이렇게 설정을 마치셨다면 이제 기존 강의에서 작성했던 const express = require('express')와 같은 코드를 import express from 'express'와 같은 모던 자바스크립트 형태로 변경하여 작성하실 수 있습니다.

import express from 'express';
const app = express();

다만 Express로 서버를 구축할 때 주의하셔야 할 중요한 차이점이 하나 있는데, CommonJS 환경에서는 전역 변수처럼 자유롭게 사용할 수 있었던 __dirname과 __filename 변수가 ESM 환경에서는 기본적으로 제공되지 않는다는 점입니다. 만약 강의 내용 중 정적 파일 제공이나 경로 설정을 위해 이 변수들이 필요한 경우에는 Node.js 내장 모듈인 url과 path를 활용하여 다음과 같이 직접 변수를 선언해주셔야 기존과 동일하게 경로를 제어할 수 있습니다.

import path from 'path';
import { fileURLToPath } from 'url';

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

// 이후 app.use(express.static(path.join(__dirname, 'public'))) 등을 사용 가능

이러한 몇 가지 설정과 변수 선언 방식의 차이만 인지하고 계신다면 ESM 방식으로도 강의의 모든 기능을 문제없이 구현하실 수 있으니, TAESUN님께서 더 익숙하고 선호하시는 방식으로 코드를 작성해보시는 것도 훌륭한 학습 방법이 될 것입니다.

참고해주세요!