HOWTO · JavaScript

JavaScript에서 JSON 파일 로드

이 자습서는 JavaScript에서 로컬 JSON 파일을 로드하는 방법을 보여줍니다.

이 페이지의 내용

JSON은 JavaScript Object Notion의 약자입니다. 서버와 클라이언트 간에 데이터를 공유하는 데 사용됩니다. JavaScript를 사용하면 로컬 JSON을 로드할 수 있습니다.

이 기사에서 JSON 파일을 로드하는 방법에 대해 설명합니다.

다음 JSON 파일을 읽습니다.

"Students" : [
   {
      "firstName":"Ram","lastName":"Sharma"
   }
 ]
}

require() 함수를 사용하여 JavaScript에서 JSON 파일 로드

JavaScript에서는 require() 메서드를 사용하여 파일과 모듈을 로드할 수 있습니다. 이것은 저장된 로컬 파일의 경로를 취합니다. console.log() 함수의 도움으로 서버에 데이터를 로드하고 표시합니다.

예를 들어,

const jsonData = require('./students.json');
console.log(jsonData);

출력:

"Students" : [
   {
      "firstName":"Ram","lastName":"Sharma"
   }
 ]
}

fetch() 함수를 사용하여 JavaScript에서 JSON 파일 로드

이 함수는 파일이 저장된 경로에서 파일을 가져온 다음 console.data에 응답으로 파일을 반환합니다. 이 기능은 fetch API가 해당 환경에서만 작동하기 때문에 웹 기반 환경에서 작업하는 경우에만 적합합니다.

파일을 읽은 후 json() 함수를 사용하여 데이터를 구문 분석하고 표시합니다.

아래 코드는 위의 기능을 보여줍니다.

fetch('./students.json')
    .then(response => {
      return response.json();
    })
    .then(jsondata => console.log(jsondata));

출력:

"Students" : [
   {
      "firstName":"Ram","lastName":"Sharma"
   }
 ]
}