카테고리 없음

JSON 입문

j-node 2026. 7. 2. 20:01

참고한 아티클 https://yenbook.tistory.com/49

JSON(JavaScript Object Notation) 개념 정리

1. JSON이란?

  • 정의: 데이터 전송 트래픽을 최소화하기 위해 사용하는, 가볍고 가독성 좋은 '개방형 표준 데이터 교환 포맷'임.
  • 특징:
    • 키-값(Key-Value) 쌍 또는 속성-값 쌍으로 이루어진 데이터 오브젝트를 전달하기 위한 개방형 표준 텍스트 포맷임.
    • JavaScript 문법에서 파생되었으나, 특정 프로그래밍 언어에 종속되지 않는 언어 독립형 포맷임. (C, Java, Python 등 대부분의 언어에서 지원)
    • 과거에 널리 쓰이던 XML을 대체하여 현재 Ajax나 REST API 통신에서 가장 많이 사용됨.
  • 공식 미디어 타입 (MIME): application/json임.
  • 파일 확장자: .json임.

2. JSON을 사용하는 이유

  • 용량 최소화: 데이터를 전송할 때 트래픽과 용량을 최소화하기 위해 사용함. (가장 중요한 이유!)
  • 높은 가독성: 사람과 기계 모두 읽고 이해하기 쉬움. 나 사람이 아닌가
  • 높은 호환성: 특정 언어에 제약이 없어 서로 다른 플랫폼 간에 데이터를 주고받기 편리함.

3. JSON 지원 문법(데이터 타입)

JSON은 다음과 같은 기본적인 데이터 타입을 지원함.

  • 수 (Number): 8진수/16진수를 제외한 일반적인 숫자 형식
  • 문자열 (String): 큰따옴표(" ")로 감싸진 유니코드 문자열임 (역슬래시 이스케이프 지원).
  • 참/거짓 (Boolean): true 또는 false 값
  • 배열 (Array): 대괄호([ ])로 감싸진 순서가 있는 리스트임 (쉼표로 요소 구분).
  • 객체 (Object): 중괄호({ })로 감싸진 순서가 없는 이름:값 쌍의 집합임 (이름/키는 반드시 문자열이어야 함).
  • null: 빈 값을 나타내는 키워드

JavaScript에서 JSON 데이터 다루기 문법 총정리

예시는 아티클 원문 속 예제 참고

1. 기본 문법 (Key-Value)

  • 기본 양식: { "key": "value", "key": "value" } 형태임.
  • 데이터 추출: 객체를 변수에 담은 후, Map처럼 변수명.key 형태로 데이터를 뽑아낼 수 있음.
    • 예시: param1.fruit, param1.color

2. 복잡한 구조 및 배열 구조 데이터 추출

  • 계층형 구조: 구조가 깊어지면 점(.)으로 계속 연결해서 접근함.
    • 예시: param2.quiz.sport.q1.question
  • 배열(Array) 포함 구조: 대괄호와 인덱스([0], [1])를 조합하여 추출함.
    • 예시: param3.menu.popup.menuitem[1].value

3. 외부 .json 파일 데이터 가져오기 (jQuery)

  • .getJSON() 함수 사용: 외부 파일 경로를 스캔하여 데이터를 인자로 받아옴.
  • 반복문 활용: for (key in data) 문을 사용해 배열 내부의 데이터를 순회하며 추출 가능함.

4. Ajax 통신 및 데이터 가공 팁

  • Ajax 호출: ajax 통신 시 dataType: "json"을 설정하여 JSON 데이터를 수신함.
  • JSON Key 및 길이 추출:
    • Key만 추출: Object.keys(objData) 또는 Object.getOwnPropertyNames(objData) 사용.
    • 길이(개수) 구하기: Object.keys(ex_obj).length로 확인 가능함.

5. 형변환 (String ↔ JSON Object)

  • String → JSON: JSON.parse(문자열) 사용 (단, 완벽한 JSON 포맷을 갖춘 문자열만 변환 가능).
  • JSON → String: JSON.stringify(오브젝트) 사용.
  • 타입 확인: 내가 다루는 데이터가 문자열인지 객체인지 헷갈릴 때는 typeof를 사용해 확인함.

오늘의 인사이트, 느낀 점

    • JSON 데이터는 아무리 복잡해도 결국 Key:Value와 배열의 조합이므로 계층 구조에 따라 .key와 [인덱스]를 잘 조합하면 쉽게 추출할 수 있으며, 필요에 따라 parse()와 stringify()로 형변환을 하여 사용함
    • JSON 간단 예제 보는 것조차 오래 걸림. framer 실습 못함.. 노트북도 이제 버거워함.