웹 개발을 하다 보면 설정 정보나 데이터를 별도의 JSON 파일로 관리하고, JavaScript 코드에서 이를 불러와 사용해야 하는 경우가 자주 발생합니다. 이번 글에서는 외부 JSON 파일의 내용을 JavaScript로 읽어오는 대표적인 두 가지 방법을 상황별로 살펴보겠습니다.
예제 시나리오
먼저 다음과 같은 데이터가 담긴 config.json 파일이 있다고 가정해 보겠습니다.
{
"secret": "sfsaad7898fdsfsdf^*($%^*$",
"connectionString": "mongodb+srv://username:password@cluster0.laaif.mongodb.net/events?retryWrites=true&w=majority",
"localConnectionString": "mongodb+srv://username:password@cluster0.laaif.mongodb.net/eventsLocal?retryWrites=true&w=majority",
"frontendClient": "https://helloworld.com",
"localFrontendClient": "https://localhost:3000"
}그리고 같은 디렉터리(폴더) 안에 index.js라는 이름의 JavaScript 파일이 함께 존재합니다. 우리의 목표는 이 JavaScript 파일을 통해 JSON 파일의 내용에 접근하는 것입니다. 실행 환경에 따라 사용할 수 있는 방법이 다르므로, 각각의 방식을 하나씩 알아보겠습니다.
방법 1: require 모듈 사용하기 (Node.js 환경 전용)
JavaScript 파일을 Node.js 환경에서 실행한다면, 내장 모듈인 require를 활용해 JSON 파일을 아주 간단하게 불러올 수 있습니다. require는 JSON 파일을 자동으로 파싱하여 바로 객체 형태로 반환해 주기 때문에 별도의 변환 과정이 필요하지 않습니다.
예제 코드
const configData = require('./config.json');
console.log(typeof configData);
console.log(configData);위 코드를 실행하면 configData의 타입은 object로 출력됩니다. 즉, JSON 파일이 문자열이 아닌 이미 파싱된 JavaScript 객체로 변환되어 메모리에 로드되었다는 의미입니다. 이후에는 일반 객체와 동일한 방식으로 configData.secret, configData.connectionString 등의 속성에 바로 접근할 수 있습니다.
방법 2: ES6 import 문법 사용하기 (브라우저 환경 전용)
반대로 브라우저에서 JavaScript를 실행하면서 JSON 파일에 접근하고 싶다면 ES6 import 문법을 사용해야 합니다. 브라우저 환경에는 Node.js의 require가 존재하지 않기 때문에, ES 모듈(ES Module) 기능을 활용하는 것이 표준적인 접근 방식입니다.
단, 이 방법을 사용하려면 HTML에서 스크립트를 불러올 때 반드시 type="module" 속성을 지정해 주어야 합니다.
HTML 파일 (index.html)
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>READ JSON FILE</title> </head> <body> <p id='main'></p> <script type="module" src="./index.js"></script> </body> </html>
JavaScript 파일 (index.js)
import configData from './config.json';
document.getElementById('main').innerHTML = JSON.stringify(configData);여기서 중요한 점은 <script> 태그에 type="module"을 명시해야 한다는 것입니다. 이 속성이 없으면 브라우저는 해당 파일을 일반 스크립트로 인식하여 import 문법을 지원하지 않고 오류가 발생합니다. 또한 ES 모듈은 로컬 파일 시스템(file://)에서는 동작하지 않으므로, 로컬 서버를 통해 페이지를 실행해야 한다는 점도 유의해야 합니다.
실행 결과
코드를 실행하면 화면과 콘솔에서 다음과 같은 출력 결과를 확인할 수 있습니다.
{
secret: 'sfsaad7898fdsfsdf^*($%^*$',
connectionString: 'mongodb+srv://username:password@cluster0.laaif.mongodb.net/events?retryWrites=true&w=majority',
localConnectionString: 'mongodb+srv://username:password@cluster0.laaif.mongodb.net/eventsLocal?retryWrites=true&w=majority',
frontendClient: 'https://helloworld.com',
localFrontendClient: 'https://localhost:3000'
}마무리 및 추가 팁
정리하자면, 실행 환경에 따라 JSON 파일을 읽는 최적의 방법이 달라집니다.
Node.js 환경이라면 require('./config.json') 한 줄로 손쉽게 처리할 수 있고, 브라우저 환경이라면 ES6 import 문법과 type="module" 속성을 조합하여 사용하면 됩니다.
참고로 최신 버전의 Node.js에서는 require뿐만 아니라 ES6 import 문법도 지원하므로, 프로젝트의 모듈 시스템(CommonJS vs ESM)에 맞춰 일관성 있게 선택하는 것이 좋습니다. 또한 fetch API를 사용하면 런타임 환경에 구애받지 않고 비동기적으로 JSON 데이터를 가져올 수도 있으니, 상황에 맞는 방법을 골라 활용해 보시기 바랍니다.