JavaScript에서 로컬 JSON 파일 데이터를 변수로 가져오는 방법

JavaScript 개발을 하다 보면 로컬에 저장된 JSON 파일의 데이터를 코드 안으로 불러와야 하는 경우가 자주 있습니다. 이 글에서는 같은 디렉터리에 위치한 JSON 파일의 내용을 JavaScript 변수로 가져오는 두 가지 대표적인 방법을 소개합니다.

예제 파일 구성

먼저 하나의 디렉터리 안에 employees.json 파일과 이를 읽어올 JavaScript 파일이 함께 있다고 가정해 보겠습니다.

employees.json 파일 내용

"Employees" : [
    {
      "userId":"ravjy", "jobTitleName":"Developer", "firstName":"Ran","lastName":"Vijay",
      "preferredFullName":"Ran Vijay","employeeCode":"H9","region":"DL","phoneNumber":"34567689",
      "emailAddress":"ranvijay.k.ran@gmail.com"
    },
    {
      "userId":"mrvjy","jobTitleName":"Developer","firstName":"Murli","lastName":"Vijay",
      "preferredFullName":"Murli Vijay","employeeCode":"A2","region":"MU",
      "phoneNumber":"6543565","emailAddress":"murli@vijay.com"
    }
]

이 JSON 파일에는 두 명의 직원 정보가 배열 형태로 담겨 있습니다. 이제 이 데이터를 변수로 가져오는 방법을 살펴보겠습니다.

방법 1. require 모듈 사용하기

Node.js 환경이라면 CommonJS의 require 모듈을 사용하는 것이 가장 간단합니다. 별도의 비동기 처리 없이 동기적으로 파일을 읽어올 수 있어 코드가 매우 직관적입니다.

const data = require('./employees.json');
console.log(data);

require는 JSON 파일을 자동으로 파싱하여 JavaScript 객체 형태로 반환하기 때문에, 추가적인 변환 작업 없이 바로 데이터를 사용할 수 있다는 장점이 있습니다.

방법 2. fetch 함수 사용하기

웹 브라우저 환경에서는 Fetch API를 활용할 수 있습니다. fetch는 비동기 방식으로 동작하며, Promise 체인 또는 async/await 문법과 함께 사용하는 것이 일반적입니다.

fetch("./employees.json")
.then(response => {
    return response.json();
})
.then(data => console.log(data));

위 코드는 먼저 파일을 요청한 뒤, 응답 객체의 json() 메서드를 호출해 응답 본문을 JSON 형태로 파싱하고, 최종적으로 콘솔에 출력하는 흐름입니다.

실행 결과

두 방법 중 어느 것을 사용하든 실행 결과는 동일하게 다음과 같은 객체가 콘솔에 출력됩니다.

{
    Employees: [
        {
            userId: 'ravjy',
            jobTitleName: 'Developer',
            firstName: 'Ran',
            lastName: 'Vijay',
            preferredFullName: 'Ran Vijay',
            employeeCode: 'H9',
            region: 'DL',
            phoneNumber: '34567689',
            emailAddress: 'ranvijay.k.ran@gmail.com'
        },
        {
            userId: 'mrvjy',
            jobTitleName: 'Developer',
            firstName: 'Murli',
            lastName: 'Vijay',
            preferredFullName: 'Murli Vijay',
            employeeCode: 'A2',
            region: 'MU',
            phoneNumber: '6543565',
            emailAddress: 'murli@vijay.com'
        }
    ]
}

정리

로컬 JSON 파일을 JavaScript 변수로 가져오는 방법은 실행 환경에 따라 선택하면 됩니다. Node.js 서버 환경에서는 간편한 require를, 브라우저 환경에서는 비동기 처리에 유리한 fetch를 사용하는 것이 좋습니다. 상황에 맞는 방법을 활용하면 설정 파일, 목업(mock) 데이터 등 다양한 용도로 JSON 데이터를 손쉽게 다룰 수 있습니다.