Don't Panic
in JS ☕ 5분 읽기

[JS] DOM 트리와 AJAX 비동기 통신

#JS
목차

DOM 구조

  • HTML에서 인식하게 되는 구조가 DOM 구조(계층 구조)다.
  • HTML 태그부터 시작해서, 안에 포함되어 있는 태그들을 트리 형식으로 보여 준다. 그래서 **돔 트리(DOM Tree)**라고도 부른다.

DOM 트리 구조

  • 돔 트리를 구성할 때, 실제로 존재하는 코드는 아니지만 가상의 엘리먼트 태그를 만들어 두고, 그 밑의 HTML 태그 전체를 가리키는 가상 태그로 /(슬래시)를 사용하기도 한다.
  • 저 박스들 하나하나마다 document에서는 객체로 인식한다.

어제 코드 살펴보기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	<script type = "text/javascript">
		function go(code){
			if(code==1){
				alert('hello');
			}else if(code==2){
/* 				alert('welcome'); */
				var name = prompt("your name?", "tommy");
				alert(name);
			}else if(code==3){
				print();
			}else if(code==4){
//				open("functionTest.html","","width=400px,height=300px")
				open("https://www.naver.com","","width=400px,height=300px")

			}else if(code==5){
				close();
			}
		}
	</script>
</head>
<body>
	<h1>event test</h1>
	<input type = "button" value ="click" onclick="alert(111)"  onblur = "">		<!-- 이런건 구분자 줘서 알아서 구분되게(숫자) -->
	<input type = "button" value ="mouseover" onmouseover = "go(2)">
	<input type = "button" value ="print" onclick="go(3)">
	<input type = "button" value ="open" onclick="go(4)">
	<input type = "button" value ="close" onclick="go(5)">

</body>
</html>
  • head 밑에 meta가 들어가고, title 안에 Insert title here로 내용이 들어 있다. 이 일반 텍스트는 돔 트리에서 아래쪽으로 들어간다.
  • 텍스트로 이뤄진 구조는 돔 구조에서 해당 트리의 자식으로 밑에 그려진다.
  • html이 맨 위에 있고, 그 자식으로 head, body가 온다.

head와 body 계층 구조

노드(Node)의 종류

스크립트(script type="text/javascript")는 돔 트리에서 어떻게 표시될까? 자식일까?

  • 스크립트는 자식 취급은 아니다. 속성이 있으면 돔 트리에서 아래로 가는 게 아니라 옆으로 간다. (속성은 포함 관계가 아니므로)
구분노드 종류
태그(네모)엘리먼트 노드(Element Node)
속성(동그라미)어트리뷰트 노드(Attribute Node)
일반 텍스트텍스트 노드(Text Node)
  • 어쨌든 돔 트리 안에서는 다 노드로 칭한다.

자바스크립트의 객체

자바스크립트에서의 객체는 다음으로 나뉜다.

  • 사용자 정의 객체
  • 이미 만들어진 객체

객체 분류

이미 만들어진 객체는 다시 다음으로 나뉜다.

  1. 브라우저 객체
  2. 자바스크립트에서 만들어 둔 객체

자바스크립트 제공 객체

  • 위 그림: 자바스크립트에서 제공해 주는 것

브라우저 제공 객체

  • 위 그림: 브라우저에서 제공하는 것

웹에서 제공하는 객체

  • 위 그림: 웹에서 제공하는 것. 우리가 볼 것은 이것이다.
  • 보면 박스 하나하나가 다 태그이고, 이게 다 객체다. 돔 트리에서는 다 객체로 인식한다.

value vs innerHTML

  • value로 넣을 때는, 태그를 아무리 써도 텍스트로만 인식한다.
  • 찾은 태그가 span, div면 innerHTML로 태그 삽입이 가능하다.
  • 반면 value =면 태그를 아무리 넣어도 텍스트로 인식한다.

value와 innerHTML 비교

this 키워드

<a href="#" id="12345서울시 서초구" onclick="process(this)">12345 서울시 서초구</a><br>
  • 스크립트에서 this를 쓰면 자기 자신을 가리킨다.
  • 여기서 this는 다음을 가리킨다.
 href="#" id="12345서울시 서초구" onclick="process(this)"

질문과 토론 (비밀번호 칸 비우기)

Q. 비밀번호 칸을 비울 때 var passValue = password.value;를 선언하고 passValue="";를 하면 칸이 비워지지 않는데 왜 그런가요?

  • (추측) 노드가 아니라 값만 가져와서, 값을 변경해도 노드에는 영향을 미치지 않는 것 같다.
  • 즉, 값을 참조하는 게 아니라 복사해 가져오는 것이다.
  • JS의 타입 추론 때문인 듯하다. getElementBy...()로 할당받으면 변수가 node 자료형이 되어 참조가 가능한데, value를 할당받으면 string이나 int 형태가 되어 참조가 아닌 값 복사가 일어난다고 생각된다.

Q. process 함수 내부에서 this.id를 찾으면 undefined가 뜨는데, this로는 id를 못 찾는 건가요?

  • (정리) 두 번째 줄의 변수에는 값만 저장된다.

자바스크립트 리터럴

  • 리터럴(값) 방식의 객체 생성 방법
    • 클래스 정의와 동시에 인스턴스 생성
    • 인스턴스를 한 번에 하나 이상 만들 수 없음
    • 주 용도: 여러 개의 데이터를 하나의 단위(객체)로 포장

AJAX란?

Asynchronous JavaScript & XML

  • 자바스크립트에 의한 비동기적인(Asynchronous) 통신으로, XML 기반의 데이터를 클라이언트 웹 브라우저와 서버 사이에서 교환하는 방식을 의미한다.
  • 주 목적: 웹 애플리케이션을 데스크톱 애플리케이션처럼 빠른 응답을 갖는 구조로 개발하고자 함.

자바스크립트로 HTTP 요청을 보내고 XML, JSON, Text 등으로 응답받아 사용하는 비동기 통신 개발 기술.

AJAX 개념도

동기 통신과 비동기 통신

동기(Synchronous)

  • 웹 브라우저에서 서버에 요청을 보내고 응답을 받는다.
  • 이때 모든 정보를 받기 때문에, 화면이 하얗게 되면서 응답이 끝날 때까지 다른 작업을 할 수 없게 된다.

비동기(Asynchronous)

  • 웹 브라우저로부터 일부의 정보만 요청하기 때문에, 그 외 부분은 변하지 않는다.
  • 그렇기 때문에 화면이 하얗게 되는 일도 없고, 서버로부터 응답이 끝나지 않더라도 다른 작업을 할 수 있다.

동기와 비동기 비교

동기 통신은 form, 비동기는 ajax.

동기 통신 특징

  • 발생 가능한 문제점: 서버의 응답이 지연될 경우, 그 시스템에서 계속 딜레이가 발생한다.

비동기 통신 특징

  • 개발 코드: 응답을 기다리지 않고 다른 일을 할 수도 있기 때문에, 비동기적으로 응답 이벤트를 처리할 수 있는 핸들러를 개발한다.
  • 웹 브라우저: 서버로부터 전체 페이지를 반환받지 않기 때문에, 페이지 이동 및 새로고침 현상이 없다.
  • 발생 가능한 문제점
    • 웹 페이지와 서버 간에 벌어지는 대부분의 상호작용이 사용자에게 보이지 않아 신뢰할 수 없다는 단점이 있다.
    • 요청 후 응답 유무와 상관없이 다른 로직을 실행할 수 있기 때문에, 순차적으로 무언가 하기에는 부적합하다.

AJAX는 결국

HTML + DOM, XML, HTTP Request, JavaScript, 프로그래밍 언어 등의 기술을 통합해서 사용되는 기술이다.

AJAX 실행 프로세스

AJAX 실행 프로세스

  • 다양한 형식의 데이터를 보낼 수 있다.
  • 마지막으로 클라이언트로 답이 오면, 그 답(서버에서 온 것)을 화면 어딘가에 뿌려 줘야 한다.
  • 예) 회원 가입할 때 중복 확인 버튼. 사용하고 싶은 아이디를 넣고 중복 확인 버튼을 누르면 이벤트가 발생한다. 통신하려고 XHR 객체를 만든다.

실행 순서는 다음과 같다.

  1. 클라이언트에서 사건(이벤트) 발생
  2. 서버로 ajax 통신하기 위한 XHR 만들기 (그래야 통신 가능)
  3. 만든 XHR로 서버에 통신 요청 보내기
  4. 서버에서 작업 (응답 만듦)
  5. 응답 도착
  6. 도착한 응답으로 처리 (화면에 반영)

readyState 상태값

XHR의 readyState 값

값의미
0XHR 생성
1open
2send
3서버가 데이터를 작업한 결과를 보내주는 도중 (아직 다 도착하지 않음)
4서버에서 데이터 도착 완료 (올 거 다 온 경우)
  • ajax 통신을 위해 XHR을 만들면, 이 XHR이 가진 readyState 값은 맨 처음 0이다.
  • 통신을 준비하며 open이 실행되면 값이 1로 바뀌고, 콜백 메서드가 한 번 실행된다.
  • 실제 준비가 끝나면 “서버로 값 주세요” 요청을 보내고, send 메서드를 호출하면 값이 2로 바뀐다. 그리고 콜백 메서드가 또 실행된다.
  • 서버가 값을 보내 주기 시작하면 3으로 바뀌고(서버에서 오는 중), 콜백이 실행된다.
  • 다 도착하면 4가 되고(3에서 4로), 다시 콜백이 실행된다.

상태 전이와 콜백

서버 단독 실행으로 확인

서버가 어떤 데이터를 보내 주는지 궁금하면 서버를 단독으로 실행해 보자.

서버 단독 실행 결과

  • 이것이 서버에서 온 것이다.

다른 것으로 테스트하기

JSP 단독 실행 (null)

  • JSP를 실행시키면 맨 처음 null이 나온다. (서버는 잘 작동)
  • 주소창에 파라미터를 적어 두면 값이 들어가는 게 보인다.

주소창 파라미터로 값 전달

관련 글