[JS] DOM, 자바스크립트, JSON 개념
HTML은 웹 콘텐츠의 구조를 짜고 의미를 부여하는 마크업 언어로,
어디가 문단이고 헤딩이고, 데이터 형태, 구성을 정의해준다. 웹페이지 만드는데 사용하는 가장 기본적인 언어다.
자바스크립트 사용하기 앞서 DOM 개념을 잠깐 훑고 가보겠다.
DOM을 이해하면 웹개발을 하는데 좀더 큰 그림을 볼 수 있기 때문이다.
DOM 은 Document Object Model의 약자로, 한글로는 문서 객체 모델이다.
W3C의 표준이기 때문에 의 표준화한 API들의 기반이 된다. (W3C: 웹 표준과 가이드라인 개발 수행 조직)
DOM은 원본 HTML 문서의 객체 기반 표현 방식이며 DOM의 개체 구조는 “노드 트리”로 표현된다. HTML과 DOM은 서로 비슷하지만, 가장 큰 차이는 단순 텍스트로 구성된 HTML 문서의 내용과 구조가 DOM의 경우 객체 모델로 변환되어 다양한 프로그램에서 사용될 수 있다는 점이다.
그리고 바로 자바스크립트가 바로 DOM을 수정하는 방법 중 하나다. DOM은 프로그래밍 언어가 아니기 때문에 자바스크립트와 같은 스크립팅 언어를 통해 접근하고 조작할 수 있다.
<HTML과의 차이점>
1. 항상 유효한 HTML 형식이다. DOM은 HTML문서로부터 생성되지만 항상 동일한 것은 아니다.
2. 자바스크립트에 수정될 수 있는 동적 모델이어야 한다.
3. 가상요소를 포함하지 않는다.
4. 보이지 않는 요소를 포함하고 있다.
출처: What, exactly, is the DOM?,Ire Aderinokun 번역게시글, DOM은 정확히 무엇일까? | WIT블로그 (nts-corp.com)
자바스크립트(JAVASCRIPT)
자바스크립트(JavaScript)는 객체 기반의 스크립트 언어로 동적으로 콘텐츠를 바꾸고, 멀티미디어를 제어하고, 애니메이션을 추가하는 등 거의 모든 것을 만들 수 있게 해준다. 인터프리터 언어는 컴파일러 언어에 비해 속도가 느리고 수정이 편한 특징이 있기 때문에 현재 자바스크립트 엔진은 둘을 같이 조합해서 쓰고 있다.
자바스크립트의 특징. 짧게 세가지로 기억하자!
1. 객체지향 언어 2. 동적 성질 3. 인터프린터 언어
JSON
자바스크립트의 객체 표기법을 따르는 문자기반의 데이터 포맷.
(자바스크립트 팀에서 만든 것이니 당연히 자바스크립트와 매우 밀접한 관계겠지요?)
자바스크립트에서 사용할 목적으로 만들어진 포멧이지만 다른 언어에서도 JSON을 데이터 교환 목적으로 사용하는 경우가 많다.
JSON은 문자열 형태로 존재하기 때문에 네트워크를 통해 전송할 때 유용하다.
(문자열에서 네이티브 객체로 변환하는 것이 바로 파싱(Parsing).
객체를 문자열로 변환하는 과정은 문자열화(Stringification)이라 함.)
JSON 구조
{
"squadName": "Super hero squad",
"homeTown": "Metro City",
"formed": 2016,
"secretBase": "Super tower",
"active": true,
"members": [
{
"name": "Molecule Man",
"age": 29,
"secretIdentity": "Dan Jukes",
"powers": [
"Radiation resistance",
"Turning tiny",
"Radiation blast"
]
}이런 식으로 생겼다.
자바스크립트에서 지원하는 JSON 관련 메서드.
1. JSON.stringify()
2. JSON.parse()
3. toJSON()
D.O.N.E!
