axios라이브러리와 fetch API의 차이를 다시 체크해보기 위해 알아보다가
.json()메서드와 JSON.parse()메서드 차이가 뭘까라는 의문에 이르렀습니다.
axios는 클라이언트와 서버 통신이 이루어질 때, JavaScript객체와 JSON간에 인코딩, 디코딩을
알아서 자동으로 해준다는 사실을 알았고, fetch API로 수동으로 JSON인코딩, 디코딩을 하는 과정을 다시 정리해 보았습니다.
아래 예시는 일반적으로 fetch API를 사용하여 서버에 get요청하는 로직입니다.
fetch('https://example.com/data')
.then(response => response.json())
.then(data => console.log(data))여기서, 왜 fetch를 사용할 때 .json()메서드를 사용하는지에 의문을 가졌습니다. 보통 JSON형식의 데이터를 자바스크립트 객체로 파싱하는 메서드는 JSON.parse()로 알고 있었으니까요.
const jsonString = '{"name": "John", "age": 30}';
const data = JSON.parse(jsonString);위 예시와 같이, JSON.parse() 메서드는 문자열을 JavaScript 객체로 변환하는 대표적인 메서드입니다.
fetch에서 .json() 메서드를 쓰는 이유는 다음과 같습니다.
.json() 메서드는 서버로부터 받은 JSON 데이터를 자동으로 파싱하여 JavaScript 객체로 변환합니다. JSON.parse()를 직접 호출하여 JSON 문자열을 자바스크립트 객체로 변환하는 과정을 생략할 수 있으므로 코드가 간결해지고 가독성이 좋아집니다.
여기서 .then()메서드로 이어진다는 얘기는 fetch와 .json()메서드가 Promise를 반환한다는 점을 알 수 있습니다. 또한, 중요한 점은 Response객체 프로토타입에서 .json()메서드를 호출할 수 있다는 점입니다!
결국, fetch랑 .json() 메서드가 같이 쓰이는 이유는 fetch가 서버와의 비동기 통신을 통해, Promise, Response객체를 반환하고 JSON을 받기 때문에 이를 쉽게 파싱해줄 수 있는 것이 .json()메서드 였던 것입니다!
그리고 .json()메서드 또한 Promise를 반환하기 때문에, 이어서 .then()을 사용해서 값을 부릅니다.
위의 예시는 get요청의 예시이고 반대로 post요청의 경우, 클라이언트에서 JSON으로 인코딩해야하는 경우이며, JSON.stringify()메서드를 사용하여 바디에 데이터를 JSON.stringify()메서드를 사용하여 인코딩후 post요청 하게 됩니다.
