JSON은 JavaScrip Object Notation의 약자로 데이터를 저장하고 전송하는 데 사용되는 가벼운 데이터 교환 형식을 말합니다. 원래는 JavaScript에서 파생되었지만, 현재는 거의 모든 프로그래밍 언어에서 지원합니다. 특히 웹 애플리케이션에서 서버와 클라이언트 간의 데이터 전송에 많이 사용됩니다.
JSON을 사용하는 경우
1. API 데이터 전송
JSON은 API에서 데이터를 주고받을 때 표준 포맷으로 많이 사용됩니다. 예를 들어, 웹 애플리케이션이 서버에 데이터를 요청하면, 서버는 JSON 형식으로 응답을 보내줍니다. 이는 클라이언트가 데이터를 쉽게 파싱하고 처리할 수 있게 합니다.
* 파싱(parsing) : 데이터를 분해하고 분석하여 목적에 맞게 구조를 결정하는 과정
2. 구성 파일
JSON은 소프트웨어 설정을 저장하는 데 사용됩니다. 예를 들어, 애플리케이션의 환경 설정 파일(config.json)은 설정 값을 키-값 쌍으로 저장할 수 있습니다.
데이터 구조
JSON은 '객체'와 '배열' 두 가지 기본 구조를 사용합니다.
1. 객체(Object)
이름-값 쌍의 집합니다. 중괄호 '{}'로 감싸져 있으며, 각 이름은 문자열로 표시되고, 값은 문자열, 숫자, 배열, 다른 객체 등 여러 형식을 가질 수 있습니다. 예를 들어, 사용자 정보를 나타내는 JSON 객체는 다음과 같습니다.
{
"name": "John Doe",
"age": 30,
"email": "john.doe@example.com"
}
2. 배열(Array)
값의 순서 있는 목록입니다. 대활호 '[]'로 감싸져 있으며, 각 값은 쉼표로 구분됩니다. 예를 들어, 여러 사용자 정보를 담은 JSON 배열은 다음과 같습니다.
[
{
"name": "John Doe",
"age": 30,
"email": "john.doe@example.com"
},
{
"name": "Jane Smith",
"age": 25,
"email": "jane.smith@example.com"
}
]
위와 같은 형태로 데이터를 표현하고 전송하는 형식이라고 이해하면 됩니다.
JSON 데이터 보는 방법
브라우저 개발자 도구
크롬 브라우저에서 F12를 클릭한 후 "Network" 탭에서 API 요청을 찾은 후, 해당 요청을 클릭하여 "Response" 섹션에서 JSON 응답을 확인할 수 있습니다.
이때 JSON Viewer와 같은 플러그인을 사용하면 JSON을 더 이쁘게 볼 수 있습니다.
JavaScript에서 데이터 처리
fetch를 사용하여 API 요청을 보내고, 응답을 JSON 형식으로 파싱하여 콘솔에 출력합니다.
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data));
Postman과 같은 도구 활용
Postman은 API 요청을 보내고 응답을 JSON 형식으로 깔끔하게 보여줍니다. Postman에서 URL을 입력하고 요청을 보내면 응답 탭에서 JSON 데이터를 확인할 수 있습니다.
API 에러 제보 방법
JSON에 대한 이해를 갖고 있다면 아래와 같은 방법으로 개발자와 커뮤니케이션을 할 수 있습니다.
예시) 안녕하세요. 개발자님. 오늘 사용자가 API요청을 보낼 때 오류가 발생한다는 제보를 받았습니다. 제가 확인해본 바로는 'GET/user/profile' 엔드포인트에서 HTTP 403 오류가 발생하고 있어요. JSON 응답 데이터는 다음과 같습니다.
이 오류가 발생하는 상황은 다음과 같습니다.{ "status": "error", "message": "Forbidden", "errorCode": 403 }
1. 사용자가 로그인한 상태에서 프로필 페이지에 접근하려고 할 때
2. 특정 조건에서만 반복적으로 발생
JSON은 사실 완벽하게 이해하느라 애쓸 필요는 없는 지식이라고 생각합니다. 하지만 데이터를 다루는 방식이라는 정도만 이해하고 있어도 언젠가 급하게 데이터를 확인할 일이 있을 때 JSON을 받아도 당황하지 않고 문제를 해결할 수 있을 것 같습니다.
'이론' 카테고리의 다른 글
데이터베이스 설계의 핵심, ERD (0) | 2024.07.31 |
---|---|
기획자를 위한 <ROI> 활용법 (0) | 2024.07.24 |
품질 관리<QA>를 시작해야겠다고 마음을 먹었다면 (0) | 2024.07.12 |
기획자가 알아야 할 수준의 API 기본 개념 (0) | 2024.07.09 |
제품 개발의 첫 걸음 PRD 작성 (1) | 2024.07.05 |