{"componentChunkName":"component---src-templates-post-detail-tsx","path":"/weekly-pick/ko_20211209","result":{"data":{"post":{"html":"

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

\n
\n

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

\n
\n

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

\n

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

\n

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

\n

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

\n

1. config.json 가져오기

\n

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

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

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

\n

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

\n

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

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

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

\n

\"Node.js

\n

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

\n

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

\n

2. JSON 모듈 제안

\n

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

\n

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

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

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

\n

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

\n

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

\n

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

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

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

\n

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

\n

3. JSON 모듈 활성화하기

\n

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

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

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

\n

\"access

\n

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

\n
node --experimental-json-modules index.mjs
\n

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

\n

4. 결론

\n

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

\n

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

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

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

","frontmatter":{"id":"ko_20211209","title":"자바스크립트에서의 JSON 모듈","description":"ECMAScript 모듈 시스템(`import`와 `export` 키워드)은 기본적으로 자바스크립트 코드만 가져올 수 있다. 하지만 애플리케이션의 설정을 JSON 파일에 저장하는 것이 편리할 때가 많고, 결과적으로 JSON 파일을 ES 모듈로 직접 가져오고 싶을 것이다.","date":"2021.12.09","author":"곽희나","tags":["ecmascript"],"thumbnail":"https://dmitripavlutin.com/static/9433a40f043cc63cf1232e69d2085e5e/d4da5/cover-3.webp"},"rawMarkdownBody":"\n# 자바스크립트에서의 JSON 모듈\n\n> 원문: Dmitri Pavlutin, https://dmitripavlutin.com/javascript-json-modules/\n\nECMAScript 모듈 시스템(`import`와 `export` 키워드)은 기본적으로 자바스크립트 코드만 가져올 수 있다. \n\n하지만 애플리케이션의 설정을 JSON 파일에 저장하는 것이 편리할 때가 많고, 결과적으로 JSON 파일을 ES 모듈로 직접 가져오고 싶을 것이다. \n\n오랫동안 JSON 가져오기는 commonjs 모듈 형식으로 지원되었다.\n\n다행히 현재 TC39 제안 3단계인 [JSON 모듈](https://github.com/tc39/proposal-json-modules)은 JSON을 ES 모듈로 가져오는 방법을 제안한다. JSON 모듈이 어떻게 동작하는지 알아보자.\n\n## 1. config.json 가져오기\n\n`config.json`이라는 JSON 파일을 가져오는 걸로 시작해보자. `config.json`에는 애플리케이션에서 유용하게 사용하는 설정값인 이름과 현재 버전이 담겨 있다.\n\n```js\n{\n \"name\": \"My Application\",\n \"version\": \"v1.2\"\n}\n```\n\n어떻게 `config.json`을 ES 모듈로 가져올까?\n\n예로 JSON 설정 파일에서 애플리케이션 이름과 버전을 가져와 렌더링하는 간단한 웹 애플리케이션을 만들어 보자. \n\n만약 `config.json`를 직접 가져오려고 하면, Node.js에서 에러가 발생할 것이다.\n\n```js\nimport http from 'http';\nimport config from './config.json';\nhttp\n .createServer((req, res) => {\n res.write(`App name: ${config.name}\\n`);\n res.write(`App version: ${config.version}`);\n res.end();\n })\n .listen(8080);\n```\n\n애플리케이션을 실행하려고 하면 Node.js는 `TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension \".json\"`라는 에러를 발생시킨다.\n\n![Node.js throws an error](https://dmitripavlutin.com/static/695fb42b066b3c480cf9653460ebeca1/298f8/error.png)\n\nNode.js는 `import` 구문을 사용했을 때 기본적으로 자바스크립트 코드가 넘어올 것을 예상한다. 그러나 JSON 모듈 제안 덕분에 가져올 데이터의 타입을 JSON으로 명시할 수 있다.\n\n애플리케이션을 수정하기 전, JSON 모듈 제안이 무엇인지 간단하게 살펴보자.\n\n## 2. JSON 모듈 제안\n\n[JSON 모듈 제안](https://github.com/tc39/proposal-json-modules)의 핵심은 일반 `import` 구문을 사용하여 JSON 데이터를 ES 모듈로 가져오게끔 한 것이다. \n\n가져오기 선언(import assertion)을 추가해서 JSON 데이터를 가져올 수 있다.\n```js\nimport jsonObject from \"./file.json\" assert { type: \"json\" };\n```\n\n`assert { type: \"json\" }`은 *가져오기 선언*으로, 해당 모듈이 JSON으로 파싱되고 가져와야 한다는 것을 알려준다. \n\n`jsonObject` 변수에는 `file.json`의 내용을 파싱한 순수한 자바스크립트 객체가 담긴다.\n\nJSON 모듈은 기본값 가져오기(default import)로 가져올 수 있다. 명명된 가져오기(named import)는 사용할 수 없다.\n\nJSON 모듈은 동적으로도 가져올 수 있다.\n```js\nconst { default: jsonObject } = await import('./file.json', {\n assert: {\n type: 'json'\n }\n});\n```\n\nJSON 모듈을 포함하여 모듈을 동적으로 가져올 때, [기본으로 내보낸 값](https://dmitripavlutin.com/ecmascript-modules-dynamic-import/#22-importing-of-default-export)은 `default` 프로퍼티에서 사용할 수 있다.\n\n이 예시에서는 가져오기 선언으로 JSON 타입을 명시했다. 하지만 [가져오기 선언](https://github.com/tc39/proposal-import-assertions/)(현재 TC39 제안 3단계)에 대한 일반적인 제안에서는 CSS 모듈처럼 더 많은 데이터 포맷을 가져올 수 있다.\n\n## 3. JSON 모듈 활성화하기\n\n이제 JSON 모듈을 웹 애플리케이션에 적용해보자.\n\n```js\nimport http from 'http';\nimport config from './config.json' assert { type: \"json\" };\nhttp\n .createServer((req, res) => {\n res.write(`App name: ${config.name}\\n`);\n res.write(`App version: ${config.version}`);\n res.end();\n })\n .listen(8080);\n```\n\n이제 메인 모듈에서 `config.json`을 가져오고 `config.name`과 `config.version` 값에 접근할 수 있다.\n\n![access config.name and config.version](https://dmitripavlutin.com/static/2a856fb6513362a1d3d93a76a698f7cf/8d9c7/web-app.png)\n\nJSON 모듈은 Node.js 버전 `17.1 이상`에서 `--experimental-json-modules` 플래그를 사용하여 [실험적 JSON 모듈](https://nodejs.org/api/esm.html#esm_experimental_json_modules)을 활성화해서 사용할 수 있다.\n```sh\nnode --experimental-json-modules index.mjs\n```\n\n브라우저 환경에서는 크롬 91 버전 이후부터 JSON 모듈을 사용할 수 있다.\n\n## 4. 결론\n\n기본적으로 ES 모듈은 자바스크립트 코드만 가져올 수 있다.\n\nJSON 모듈 제안 덕분에 JSON 데이터를 ES 모듈로 직접 가져올 수 있다. 가져오기 구문 뒤에 가져오기 선언만 추가하면 된다.\n```js\nimport jsonContent from \"./file.json\" assert { type: \"json\" };\n```\n\nJSON 모듈은 Node.js 17.1 버전 이상에서 실험적 플래그 `--experimental-json-modules`를 사용하거나 크롬 91 버전 이후에서 사용할 수 있다.\n"},"allProductsJson":{"edges":[{"node":{"id":"tui-chart","packageName":"@toast-ui/chart","name":"Chart","type":"application","description":"The Chart makes your data pop, and it is easy to use. It provides you with multiple charts like Bar, Column, Line, and more.","detailDesc":"Chart makes your data pop. Its numerous charts like Line, Bar, Pie, and more are easy to use, and you can export your data to excel or even as images.","link":"","logo":null}},{"node":{"id":"tui-editor","packageName":"@toast-ui/editor","name":"Editor","type":"application","description":"The Editor allows you to edit your Markdown documents using text or WYSIWYG and comes with Syntax Highlighting, Scroll-Sync, Live Preview, and Chart features.","detailDesc":"Editor allows you to interact with their Markdown documents through both text and WYSIWYG. With Syntax Highlighting, Scroll-Sync, Live Preview, Charts, and much more diverse features and UI, it takes your word processing to the next level.","link":"https://nhn.github.io/tui.editor/latest","logo":null}},{"node":{"id":"tui-grid","packageName":null,"name":"Grid","type":"application","description":"The Grid is a powerful library with features like data editing, filtering, sorting, and more, and can be used to customize the editor or the renderer to your desired format.","detailDesc":"Grid is a powerful grid library with data editing, filtering, sorting, pagination features, and more. Furthermore, you can customize the editor and the renderer to your desired format and visualize your data however you like.","link":"https://nhn.github.io/tui.grid/latest/","logo":null}},{"node":{"id":"tui-calendar","packageName":"@toast-ui/calendar","name":"Calendar","type":"application","description":"The Calendar supports monthly, weekly, daily views and more, and you can create or edit your event with a simple dragging motion.","detailDesc":"Calendar provides monthly, weekly, multi-weekly, daily views, and more, as well as a basic pop-up UI you can use to add/edit/delete your events. You can manage your event simply by dragging the schedules around. Managing your calendar has never been easier.","link":"https://nhn.github.io/tui.calendar/latest/","logo":null}},{"node":{"id":"tui-image-editor","packageName":null,"name":"Image-editor","type":"application","description":"With the UI that is the perfect combination of simple and beautiful, the Image Editor is a Full-Featured one that is perfect for everyday use.","detailDesc":"With the UI that is the perfect combination of simple and beautiful, Image Editor is a Full-Featured image editor that provides you with editing, drawing, and typing capabilities as well as a collection of great image filters that you can apply all at once.","link":"https://nhn.github.io/tui.image-editor/latest/","logo":null}},{"node":{"id":"tui-app-loader","packageName":null,"name":"App Loader","type":"component","description":"AppLoader is a library that you can use to load or install a certain app on the mobile device.","detailDesc":"","link":"","logo":null}},{"node":{"id":"tui-auto-complete","packageName":null,"name":"Auto Complete","type":"component","description":"AutoComplete component can suggest and even fill in the rest of the word and sentences given the inputted text.","detailDesc":"","link":"","logo":null}},{"node":{"id":"tui-color-picker","packageName":null,"name":"Color Picker","type":"component","description":"ColorPicker is a simple and efficient color picker, true to its name.","detailDesc":"","link":"","logo":null}},{"node":{"id":"tui-context-menu","packageName":null,"name":"Context Menu","type":"component","description":"ContextMenu displays the menu items that you can access via the right click.","detailDesc":"","link":"","logo":null}},{"node":{"id":"tui-date-picker","packageName":null,"name":"Date Picker","type":"component","description":"DatePicker allows you to pick a date using a pop-up calendar.\n\n","detailDesc":"","link":"","logo":null}},{"node":{"id":"tui-pagination","packageName":null,"name":"Pagination","type":"component","description":"Pagination component can show you the current page within a multi-page document and also provides links for included pages.","detailDesc":"","link":"","logo":null}},{"node":{"id":"tui-rolling","packageName":null,"name":"Rolling","type":"component","description":"Rolling is a slider component that lets you view multiple contents in a selected area.","detailDesc":"","link":"","logo":null}},{"node":{"id":"select-box","packageName":"@toast-ui/select-box","name":"Select Box","type":"component","description":"SelectBox is a dropdown list component that you can use to select multiple menus easily.","detailDesc":"","link":"","logo":null}},{"node":{"id":"tui-time-picker","packageName":null,"name":"Time Picker","type":"component","description":"TimePicker component allows you to use the SelectBox or the SpinBox to select the time.","detailDesc":"","link":"","logo":null}},{"node":{"id":"tui-tree","packageName":null,"name":"Tree","type":"component","description":"Tree component displays the data structure of the hierarchy and allows you to view and edit the node names.","detailDesc":"","link":"","logo":null}},{"node":{"id":"@toast-ui/doc","packageName":null,"name":"TOAST UI Doc","type":"tool","description":"Documentation generator that creates the example page and the API document by parsing the JSDoc comments.","detailDesc":"","link":"https://github.com/nhn/toast-ui.doc","logo":null}},{"node":{"id":"tui-eslint-config","packageName":null,"name":"ESLint Config","type":"tool","description":"ESLint configuration used with TOAST UI products to help find and fix problems in JavaScript code.","detailDesc":"","link":"https://github.com/nhn/tui.eslint.config","logo":null}},{"node":{"id":"tui-release-notes","packageName":null,"name":"Release Note","type":"tool","description":"Github release note generator to automatically summarize and classify the updates based on the commit logs.","detailDesc":"","link":"https://github.com/nhn/toast-ui.release-notes","logo":null}},{"node":{"id":"toast","packageName":null,"name":"NHN Cloud","type":"references","description":"references is NHN Cloud","detailDesc":"","link":"https://www.toast.com/","logo":"https://uicdn.toast.com/toastui/img/toast-ui-bi-nhntoast.png"}},{"node":{"id":"toastfile","packageName":null,"name":"TOAST File","type":"references","description":"references is TOAST File","detailDesc":"","link":"https://file.toast.com/","logo":"https://uicdn.toast.com/toastui/img/toast-ui-bi-toastfile.png"}},{"node":{"id":"dooray","packageName":null,"name":"Dooray","type":"references","description":"references is Dooray","detailDesc":"","link":"https://dooray.com/home","logo":"https://uicdn.toast.com/toastui/img/toast-ui-bi-toastdooray.png"}},{"node":{"id":"ncp","packageName":null,"name":"NCP","type":"references","description":"references is NCP","detailDesc":"","link":"https://www.e-ncp.com/","logo":"https://uicdn.toast.com/toastui/img/toast-ui-bi-ncp.png"}}]}},"pageContext":{"id":"ko_20211209","lang":"ko"}},"staticQueryHashes":["2997033868","414700122","542722004"]}