JSON (JavaScript Object Notaion)
데이터 전달을 위한 표준 포맷.
문자, 숫자, 불린, Null, 객체, 배열만 사용. ( JS뿐만 아니라 다른 언어에서도 사용가능 )
문자는 "큰 따옴표" 만 사용
후행 쉼표 사용 불가
.json 확장자 사용 ( 파일생성 가능 )
JSON.stringfy() - 데이터 -> JSON 문자로 변환.
JSON.parse() - JSON 문자 -> 데이터로 변환
JSON.stringfy()를 사용하여 데이터들을 JSON 문자로 변환하는 과정에서 모든 데이터들은 String 타입으로 변환되게 된다.
또한, JSON.parse()를 사용하여 JSON 문자를 데이터로 변환할때는 문제, 객체의 key값까지도 큰따옴표를 씌워줘야 변환이 가능하다.
JSON 파일 생성 후 JS에서 불러오기
먼저 간단하게 json 파일을 생성해주도록 하자.
이후 json 데이터를 불러오고자 하는 js파일에서 import를 통해 변수명을 지정해주고 위치를 지정한 뒤, 뒤쪽에 assert { type: "json" }을 붙여준다.
실습시 발생한 오류사항
1. 문자데이터 관련 오류
JSON.parse()를 사용하여 JSON 문자를 데이터로 변환할때는 '큰따옴표`를 씌워야 한다고 배웠다.
console.log(JSON.parse("I am Jungyu"))
하지만, 위와같이 문법을 사용할 경우, 오류가 발생하게 된다.
그 이유로는 "I am Jungyu"을 JSON 문자 데이터로써 큰따옴표를 제거하게 되면 별도의 기호 표시가 없이 I am Jungyu 라는 문자만 남게 되는 것이다.
console.log(JSON.parse('"I am Jungyu"'))따라서 이러한 오류를 해결하기 위해서 문자 데이터의 밖에 작은따옴표나 큰따옴표가 하나씩 더 붙어야 하겠다.
2. json파일 모듈로 받아오기
처음에 단순히 json 파일의 변수명과 경로만 지정해주고 출력을 확인해본 결과,
위와 같이 MimeType: application/json 에러가 발생하게 된다.
Node.js는 import 구문을 사용했을 때 기본적으로 자바스크립트 코드가 넘어올 것을 예상하기 때문에, 파일의 타입이 맞지 않아 문제가 발생하는 것이다.
(기본적으로 ES 모듈은 기본적으로 자바스크립트 코드만 가져올 수 있기 때문.)
따라서 JSON 모듈 제안을 통해 일반 import 구문을 사용하여 JSON 데이터를 ES 모듈로 가져오게끔 하여 문제를 해결할 수 있다.
import letter from './test.json' assert { type: "json" }
사용 방법은 간단하게, 오류가 발생했던 import 구문 뒤에 assert { type: "json" }를 선언만 해주면 된다.
짠
(또한 node.js의 parcel 번들러를 사용한다면 자동으로 변환이 가능하다.)
