자바스크립트에서의 JSON 모듈

원문: Dmitri Pavlutin, https://dmitripavlutin.com/javascript-json-modules/

ECMAScript 모듈 시스템(import와 export 키워드)은 기본적으로 자바스크립트 코드만 가져올 수 있다.

하지만 애플리케이션의 설정을 JSON 파일에 저장하는 것이 편리할 때가 많고, 결과적으로 JSON 파일을 ES 모듈로 직접 가져오고 싶을 것이다.

오랫동안 JSON 가져오기는 commonjs 모듈 형식으로 지원되었다.

다행히 현재 TC39 제안 3단계인 JSON 모듈은 JSON을 ES 모듈로 가져오는 방법을 제안한다. JSON 모듈이 어떻게 동작하는지 알아보자.

1. config.json 가져오기

config.json이라는 JSON 파일을 가져오는 걸로 시작해보자. config.json에는 애플리케이션에서 유용하게 사용하는 설정값인 이름과 현재 버전이 담겨 있다.

{
  "name": "My Application",
  "version": "v1.2"
}

어떻게 config.json을 ES 모듈로 가져올까?

예로 JSON 설정 파일에서 애플리케이션 이름과 버전을 가져와 렌더링하는 간단한 웹 애플리케이션을 만들어 보자.

만약 config.json를 직접 가져오려고 하면, Node.js에서 에러가 발생할 것이다.

import http from 'http';
import config from './config.json';
http
  .createServer((req, res) => {
    res.write(`App name: ${config.name}\n`);
    res.write(`App version: ${config.version}`);
    res.end();
  })
  .listen(8080);

애플리케이션을 실행하려고 하면 Node.js는 TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".json"라는 에러를 발생시킨다.

Node.js는 import 구문을 사용했을 때 기본적으로 자바스크립트 코드가 넘어올 것을 예상한다. 그러나 JSON 모듈 제안 덕분에 가져올 데이터의 타입을 JSON으로 명시할 수 있다.

애플리케이션을 수정하기 전, JSON 모듈 제안이 무엇인지 간단하게 살펴보자.

2. JSON 모듈 제안

JSON 모듈 제안의 핵심은 일반 import 구문을 사용하여 JSON 데이터를 ES 모듈로 가져오게끔 한 것이다.

가져오기 선언(import assertion)을 추가해서 JSON 데이터를 가져올 수 있다.

import jsonObject from "./file.json" assert { type: "json" };

assert { type: "json" }은 가져오기 선언으로, 해당 모듈이 JSON으로 파싱되고 가져와야 한다는 것을 알려준다.

jsonObject 변수에는 file.json의 내용을 파싱한 순수한 자바스크립트 객체가 담긴다.

JSON 모듈은 기본값 가져오기(default import)로 가져올 수 있다. 명명된 가져오기(named import)는 사용할 수 없다.

JSON 모듈은 동적으로도 가져올 수 있다.

const { default: jsonObject } = await import('./file.json', {
  assert: {
    type: 'json'
  }
});

JSON 모듈을 포함하여 모듈을 동적으로 가져올 때, 기본으로 내보낸 값은 default 프로퍼티에서 사용할 수 있다.

이 예시에서는 가져오기 선언으로 JSON 타입을 명시했다. 하지만 가져오기 선언(현재 TC39 제안 3단계)에 대한 일반적인 제안에서는 CSS 모듈처럼 더 많은 데이터 포맷을 가져올 수 있다.

3. JSON 모듈 활성화하기

이제 JSON 모듈을 웹 애플리케이션에 적용해보자.

import http from 'http';
import config from './config.json' assert { type: "json" };
http
  .createServer((req, res) => {
    res.write(`App name: ${config.name}\n`);
    res.write(`App version: ${config.version}`);
    res.end();
  })
  .listen(8080);

이제 메인 모듈에서 config.json을 가져오고 config.name과 config.version 값에 접근할 수 있다.

JSON 모듈은 Node.js 버전 17.1 이상에서 --experimental-json-modules 플래그를 사용하여 실험적 JSON 모듈을 활성화해서 사용할 수 있다.

node --experimental-json-modules index.mjs

브라우저 환경에서는 크롬 91 버전 이후부터 JSON 모듈을 사용할 수 있다.

4. 결론

기본적으로 ES 모듈은 자바스크립트 코드만 가져올 수 있다.

JSON 모듈 제안 덕분에 JSON 데이터를 ES 모듈로 직접 가져올 수 있다. 가져오기 구문 뒤에 가져오기 선언만 추가하면 된다.

import jsonContent from "./file.json" assert { type: "json" };

JSON 모듈은 Node.js 17.1 버전 이상에서 실험적 플래그 --experimental-json-modules를 사용하거나 크롬 91 버전 이후에서 사용할 수 있다.