웹 개발을 하다 보면 가장 자주 마주치는 데이터 형식 중 하나가 바로 JSON입니다.
API 호출, 서버 응답, 로컬 저장 등 다양한 곳에서 JSON은 빠지지 않고 등장하죠.
이번 포스트에서는 JSON의 개념, 문법, 특징, XML과의 차이점, 그리고 주의해야 할 보안 문제까지 한눈에 정리해보겠습니다!
📌 JSON이란?
JSON(JavaScript Object Notation)은
데이터를 저장하거나 전송할 때 사용하는 경량의 데이터 교환 형식입니다.
📍 이름은 자바스크립트에서 유래했지만, 모든 프로그래밍 언어에서 사용할 수 있는 범용 포맷이에요.
✅ 주요 특징
- 사람과 기계 모두 이해하기 쉬운 구조
- 텍스트 기반이기 때문에 가볍고 빠르다
- 자바스크립트 문법과 유사해서 웹 개발에 특히 적합
- 언어 독립적이며, 대부분의 언어에서 JSON 라이브러리를 지원함
🔧 JSON 문법 알아보기
{
"employees": [
{
"name": "Surim",
"lastName": "Son"
},
{
"name": "Someone",
"lastName": "Huh"
}
]
}
📚 JSON 기본 문법 규칙
- key와 value 쌍으로 구성 (key는 항상 쌍따옴표로 감싸야 함)
- 자료형: string, number, object, array, boolean, null
- 객체는 {} 로, 배열은 [] 로 표현
- 중첩도 자유롭게 가능
💬 JSON vs XML
항목 | XML | JSON |
구조 | 태그 기반 | 키-값 쌍, 중괄호/대괄호 |
가독성 | 다소 복잡 | 상대적으로 간결 |
무게 | 비교적 무거움 | 경량 포맷 |
사용처 | 예전 시스템, 금융/공공기관 | 웹, 앱, API 등 대부분의 현대 환경 |
JSON은 XML보다 간결하고 효율적이기 때문에 최근 데이터 교환에서 거의 표준처럼 사용되고 있어요.
💻 JSON 활용 예시 (JavaScript)
// JSON 형식의 문자열
var jsonText = '{ "name": "Someone else", "lastName": "Kim" }';
// 문자열 → JavaScript 객체로 변환
var realObject = JSON.parse(jsonText);
// JavaScript 객체 → JSON 문자열로 변환
var jsonText2 = JSON.stringify(realObject);
console.log(realObject);
console.log(jsonText2);
🔁 주요 함수
- JSON.parse(text) → 문자열을 객체로 변환
- JSON.stringify(object) → 객체를 JSON 문자열로 변환
⚠️ JSON의 잠재적인 보안 문제
"JSON은 단순한 데이터 포맷이지만, 그 안에 악성 스크립트가 들어올 수도 있다?"
예를 들어, 서버에서 받는 JSON 데이터에 의도치 않은 자바스크립트 코드가 포함되어 있으면, 브라우저가 이를 실행해 보안에 위협이 될 수 있습니다.
💻 해결 방법?
- 신뢰할 수 있는 JSON 라이브러리 사용 (예: JSON.parse)
- 절대 eval() 같은 함수를 사용하지 않기
- API 응답의 Content-Type이 올바르게 설정됐는지 확인하기
✅ 정리
- JSON은 가볍고, 직관적인 데이터 포맷
- XML을 대체하여 현대 웹 개발에서 표준처럼 사용
- 언어에 종속되지 않고, 어떤 환경에서도 활용 가능
- 보안 측면에서 조심해야 할 점도 존재
JSON은 단순하면서도 강력한 데이터 포맷으로, 우리가 웹 개발을 하면서 API 통신, 로컬 저장, 상태 관리 등 다양한 곳에서 끊임없이 마주치게 됩니다.
기본적인 문법과 활용 방법, 그리고 JSON이 가진 보안 이슈까지 잘 숙지해두면 더 안전하고 안정적인 개발을 할 수 있습니다.
👀 웹과 관련한 다른 포스팅도 궁금하시다면 아래의 글을 추천해요
[네트워크]웹(Web)이란? - 웹의 발전, 보안의 중요성
현대 사회에서 ‘웹’은 단순한 정보 공유 수단을 넘어 우리의 일상을 바꾸는 핵심 기술로 자리 잡았습니다. 이번 글에서는 웹의 개념, 발전 과정, 그리고 웹 보안 및 구조적 개념(프론트엔드와
dev-yeonwha.tistory.com
'네트워크' 카테고리의 다른 글
[네트워크] 웹 렌더링(Web Rendering)이란? (0) | 2025.03.28 |
---|---|
[네트워크] URL이란 무엇인가요? | 웹 주소의 구조 이해하기 (0) | 2025.03.27 |
[네트워크] 웹 브라우저란? (0) | 2025.03.27 |
[네트워크] 웹 클라이언트와 서버의 통신 (1) | 2025.03.26 |
[네트워크] 웹 리소스란? 웹을 구성하는 정보 자산 (0) | 2025.03.26 |