[TIL/Coin Site Project] 2024/02/05

✅ JSON이란?

JSON은 ``'J'ava'S'cript 'O'bject 'N'otation``이다. 자바스크립트 객체 형식의 표기법이라는 뜻.

클라이언트가 서버에 요청하면, 서버가 클라이언트에 응답을 하는 구조. 결국 데이터를 주고받는 문제이고, 그 중심에 JSON이 있는 것이다.

나름대로 핵심을 간추려봤다.

1. JSON은 ``Javascript 객체와 유사``한 구조.(객체가 아니라는 뜻) 2. JSON은 ``텍스트 그 자체``임. 다만 그 양태가 Javascript 객체와 유사하다는 것. 3. 다양한 프로그래밍 언어 간 ``데이터를 교환``할 때 사용되는 notation. 4. 특별히(web 개발에서는), ``Client와 API간 통신에 주로 사용``되는 데이터 형식임.

✅ json() 메서드란?

그간 복붙을 반복하며 무지성으로 작성했던 메서드 중 하나인 ``json()``.

서버에서 받은 ``응답(response)의 본문(body)을 JSON 형식으로 파싱`` 하는 메서드이다. 줄 때나 받을 때나 어찌 됐건 무조건 JSON 형식이어야 한다는 의미이기도 하다.

json() 메서드에서 주목할 부분은, json() 메서드가 ``비동기적으로 호출``된다는 점이다. 꽤나 중요한 부분이기에, 향후에 Promise의 개념과 같이 정리하고자 한다.

✅ JSON.stringify()

자바스크립트에서는 이처럼 중요한 JSON을 다루기 위해 몇 가지 메서드를 제공하는데, 그중 하나가 바로 ``stringify()`이다. stringify()는 `직렬화``를 위해 사용되는 메서드이다.

데이터를 교환하기 위해 JSON으로 변신해야 한다. 따라서 stringify()는, ```서버로 데이터에 대한 요청(request)을 할 때 주로 활용```하는 메서드라고 정리할 수 있겠다.

> **✅ JSON.parse()**

Javascript 객체로 변환한다는 것은, '객체'로서 활용할 필요가 생겼다는 의미이기도 하다. parse()는 ``응답(response) 데이터를 Javascript 객체로 변환`하여, 해당 데이터를 `Client에서 적절히 파싱하기 위해`` 사용한다.

✅ 도식화

✅ 간단한 실습 코드

import React, { useState, useEffect } from "react";

const DataFetchingExample = () => {
  const [jsonString, setJsonString] = useState("");
  const [parsedData, setParsedData] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        // fetch()를 사용하여 외부 API에서 데이터 가져오기
        const response = await fetch(
          "https://jsonplaceholder.typicode.com/users/1"
        );

        // HTTP 오류 처리
        if (!response.ok) {
          throw new Error(`HTTP error! Status: ${response.status}`);
        }

        // response.json()을 사용하여 JSON 형식의 데이터로 파싱
        const jsonData = await response.json();

        // JSON.stringify()를 사용하여 객체를 JSON 문자열로 변환
        const jsonString = JSON.stringify(jsonData, null, 2);
        setJsonString(jsonString);

        // JSON.parse()를 사용하여 JSON 문자열을 객체로 변환
        const parsedObject = JSON.parse(jsonString);
        setParsedData(parsedObject);
      } catch (error) {
        // 오류가 발생한 경우 로깅
        console.log(error);
      }
    };

    // 함수 호출
    fetchData();
  }, []);

  console.log(jsonString);
  console.log(parsedData);

  return <div>JSON TEST</div>;
};

export default DataFetchingExample;

✅ 회고

최근에, 친구와 강남역 근처 맛집에서 들기름 막국수를 먹었다. 아뿔싸, 너무 맛이 없었다. 맛이 없는 것은 둘째치고, 맛있다고 호들갑 떠는 리뷰가 왜 그리 많았는지가 더 의아했다.

직관은 주관적 패턴, 논리는 객관적 패턴이다. 맛집이라고 알려져 있으니 맛있을 것이라는 사고의 패턴은 '직관적 판단'이라 할 수 있다. 고급 메밀을 사용하고 특정 지역의 들기름을 공수해서 사용하기에 맛있을 것이라는 사고의 패턴은 '논리적 판단'이라 할 수 있겠다.

직관은 빠르지만 오류의 가능성이 높고, 논리는 느리지만 오류의 가능성이 낮다. 직관을 논리로 의심하는 태도가 필요하다고 생각하는 요즘이다. 최소한 개발은, 똥인지 된장인지 찍어 먹어 볼 필요가 있다. 철저하게 논리의 영역이기 때문이다. 물론 강남역 들기름 막국수 가게는 맛집이 맞다. 직관은 주관적이니까.