DOM 왜 알아야 하는가?

JSP는 서버에서 HTML을 동적으로 생성하는 서버 사이드 기술이지만,
결국 클라이언트(웹 브라우저)에서 실행될 때는 HTML, CSS, JavaScript 코드로 변환된다.
이때문에 DOM을 잘 이해하지 못하면, JSP에서 동적으로 생성된 HTML을 조작하는 데에
어려움이 생길 수 있다.

JSP와 DOM의 관계를 이해하면 다음을 할 수 있다.
✔ JSP에서 동적으로 HTML 요소를 생성하는 방식 이해
✔ JavaScript로 JSP에서 출력된 HTML을 조작하는 방법 습득
✔ 클라이언트 측에서 추가적인 인터랙션을 처리할 때 효과적인 코드 작성 가능

JSP에서 생성된 HTML과 DOM의 관계

JSP와 HTML의 관계

1. JSP는 서버에서 실행되어 HTML을 생성한다.
   
   JSP(JavaServer Pages)는 서버 측에서 실행되며, 클라이언트가 요청을 하면
   JSP가 HTML을 동적으로 생성하여 응답한다.
   JSP 자체는 클라이언트에 직접 전달되지 않고,
   최종적으로 브라우저는 HTML을 받음.
   
   결론, JSP 자체는 클라이언트에 직접 전달되지 않고,
   JSP로 만들어진 HTML을 받음
   
   
2. JSP 코드가 실행된 후, 브라우저는 HTML로만 인식한다.
   <%= "Hello, World!" %> 같은 표현식이나 <% for(...) { %> ... <% } %> 같은 제어문은 서버에서 실행되어 HTML로 변환 된 후에 반환되기에,
   클라이언트는 해당 HTML이 어떻게 만들어 진 것인지 알 수가 없음.

HTML과 DOM의 관계

1. 브라우저가 HTML을 해석하여 DOM 생성.
   클라이언트가 받은 HTML은 브라우저가 해석하면서 DOM(Document Object Model)
   트리 구조로 변환.

2. 자바스크립트를 이용해 DOM 조작
   HTML 요소들을 JavaScript를 이용해 동적으로 변경.

결론

서버에서는 JSP 파일을 실행하여 동적으로 HTML로 변환하고,
클라이언트에서는 해당 HTML을 받아서 DOM 형성
최종적으로 클라이언트는 JSP 코드가 아닌 HTML을 보고, JavaScript로 DOM을 조작한다!

이정도만 알고 있어도 기본적인 부분에서 막힐 일은 없을 것으로 보임