(중요) 자바스크립트 클라이언트에서 json 타입 형식 가져오는 방법

app.use(express.static('public'));

는 서버가 public  디렉토리의 파일을 정적으로 제공해

클라이언트가 public 폴더에 있는 파일을 직접 요청할 수 있게 해줍니다.

 

하지만,

app.use(express.static('public'));

사용해 public 폴더 안 파일에서 즉, 클라이언트 부분

.js 파일에서 json 파일을 읽어와야 할 경우 

 

 

Failed to load module script: The server responded with a non-JavaScript MIME type of “경로/json”. Strict MIME type checking is enforced for module scripts per HTML spec.

 

 

와 같이 JavaScript형식 서버가 JSON 파일을 읽어올려고 할 때,

JavaScript로 해설할 수 없어 발생하는 오류가 Web 환경에 출력하게 됩니다.

 

해결 방법으로는

 

1. import 사용

 

개발자가 .json의 내용물을 .js 파일로 옮겨서 export로 사용하는 방식입니다.

 

ex) 

 

exprot default

{

"fruit" : "Apple",

"size" : "Large",

"color" : "Red"

}

 

위의 경우 .json 파일 또한 필요하다면 .json과 .js 파일 2개가 생기는 문제가 있습니다.

2. fetch 사용

 

fetch를 사용하는 방식은

http:// URL 경로 /json 파일이 있는 위치/ json 파일.json

과 같이 직접 경로를 작성해 json 파일의 내용물을  가져오는 방식입니다.

 

ex)

 

fetch(‘http://www.domain.com/test.json')
.then(function(response) {
return response.json();
})
.then(function(myJson) {
console.log(JSON.stringify(myJson));
});

3. import 사용할 이름 from 'json 파일 경로.json' with {type : "json"}

 

으로 경로상의 .json 파일의 타입을 "json"으로 명시적으로 지정해주는 것 입니다.

 

ex) 

import stageJson from './assets/stage.json' with { type: 'json' };

과 같이 /assets/stage.json 파일이 json 타입이라고 명시적으로 지정하는 방식 입니다.

 

향후, 위와 같은 오류가 발생할 경우 위의 3가지 방식으로 해결할 수 있습니다!!