자바스크립트를 사용하여 웹 애플리케이션을 개발할 때, 종종 JSON 형식의 데이터를 다운로드해야 할 때가 있습니다. 이러한 경우 일반적으로는 서버에 요청을 보내고 서버에서 JSON 데이터를 받아와야 합니다. 하지만 때로는 클라이언트 측에서 바로 JSON 데이터를 다운로드하고 처리해야 할 수도 있습니다. 이번 블로그 포스트에서는 자바스크립트를 사용하여 JSON 오브젝트를 다운로드하는 방법에 대해 알아보겠습니다.
1. JSON 데이터 가져오기
먼저, JSON 데이터를 가져와야 합니다. 일반적으로는 서버에서 JSON 데이터를 가져오는 것이 일반적이지만, 이 예제에서는 간단한 JSON 데이터를 직접 선언하여 사용하겠습니다.
const jsonData = {
name: "John Doe",
age: 30,
email: "johndoe@example.com"
};
위의 코드에서 jsonData 변수에 JSON 데이터를 선언하고 있습니다. 이렇게 선언된 변수는 우리가 다운로드할 JSON 데이터입니다.
2. 다운로드 함수 작성하기
이제 JSON 데이터를 다운로드할 수 있는 함수를 작성해야 합니다. 다음과 같이 downloadJSON 함수를 작성해볼 수 있습니다.
function downloadJSON() {
// JSON 데이터를 문자열로 변환
const jsonString = JSON.stringify(jsonData, null, 2);
// 다운로드할 파일 이름 설정
const fileName = "data.json";
// Blob 객체 생성
const blob = new Blob([jsonString], { type: "application/json" });
// a 태그 생성
const link = document.createElement("a");
link.href = URL.createObjectURL(blob);
link.download = fileName;
// 링크 클릭하여 다운로드 시작
link.click();
}
위의 코드에서 downloadJSON 함수는 다음과 같은 역할을 수행합니다.
- JSON 데이터를 문자열로 변환합니다.
- 다운로드할 파일의 이름을 설정합니다.
- Blob 객체를 생성합니다. Blob 객체는 바이너리 데이터를 나타내는 불변의 원시 데이터입니다.
- a 태그를 생성하고, Blob 객체의 URL을 설정하고, 다운로드할 파일 이름을 설정합니다.
- 생성한 링크를 클릭하여 JSON 데이터를 다운로드합니다.
3. 다운로드 버튼 추가하기
마지막으로, JSON 데이터를 다운로드할 버튼을 HTML 페이지에 추가해야 합니다.
<button onclick="downloadJSON()">JSON 다운로드</button>
위의 코드에서는 onclick 이벤트 핸들러를 이용하여 downloadJSON 함수를 호출하도록 설정하였습니다. 이렇게 하면 버튼을 클릭할 때마다 JSON 데이터가 다운로드됩니다.
결론
이번 블로그 포스트에서는 자바스크립트를 사용하여 JSON 오브젝트를 다운로드하는 방법에 대해 알아보았습니다. JSON 데이터를 가져온 다음, 다운로드 함수를 작성하고 HTML 버튼을 추가하여 다운로드할 수 있도록 구현했습니다. 이를 통해 필요한 경우 클라이언트 측에서 JSON 데이터를 즉시 다운로드하고 처리할 수 있습니다.
반드시 다운로드 함수를 사용하려면 CORS (Cross-Origin Resource Sharing) 정책이 엄격하게 설정되어 있지 않아야 합니다. 그렇지 않으면 다른 도메인에서 이 기능을 사용하는 것이 불가능할 수 있습니다.