[JSP] JSTL, EL, HTML, CSS, JS 동작 순서 (클라이언트 서버 사이드)

 

ajax를 할 때 EL식을 작성해 오류가 발생한 경우가 빈번하게 발생해 관련 내용을 확실하게 정리해 놓기 위해 기록한다.

 

요약

 

1. JSTL과 EL은 서버에서 먼저 처리되어 순수 HTML로 변환된다.
2. 이후 HTML, CSS, JS는 브라우저에서 순차적으로 처리된다.

(JS는 실행 시점을 async/defer로 제어 가능)

 

실행은 서버 사이드 -> 클라이언트 사이드 순으로 실행된다.

 

서버 사이드

백단 작업을 의미하며 서버(제공자)측에서 즉시 처리하는 것으로 서버 사이드는 클라이언트로 보낼 웹페이지를 만들며 중요한 작업을 수행한다. JSTL, EL이 여기에 속한다.

 

JSTL (JavaServer Pages Standard Tag Library)

JSP 페이지가 서블릿으로 변환될 때 실행되어 <c:if>, <c:forEach> 등의 태그 처리한다.

 

EL (Expression Language)

JSTL과 함께 서버에서 실행된다. ${} 표현하며 객체나 속성값을 JSP에 반환한다.

 

 

클라이언트 사이드

클라이언트(사용자) 측에서 처리하는 것으로 클라이언트가 입력한 것을 수신해서 HTML로 만들어 크롬과 같은 어플케이션에 해석해서 표시한다. 대표적으로 JavaScript가 있다.

 

HTML

브라우저에서 DOM 트리 구성한다. 페이지의 기본 구조 생성 역할을 수행한다.

 

CSS

HTML 파싱 중 CSS 파일 발견 시 다운로드한다. CSSOM(CSS Object Model) 구성한다. HTML 요소에 스타일 적용한다. 빠른 렌더링을 위해 head 태그 안에 위치한다.

 

JavaScript

HTML 파싱 중 <script> 태그 만나면 실행하며 기본적으로 파싱을 차단(블로킹)한다. defer/async 속성으로 비동기 로딩 가능하다. body 태그 끝에 배치하면 페이지 로딩 속도가 향상된다.

 

 

주의사항

서버 사이드 실행 후 클라이언트 사이드가 실행되기 때문에 JSTL은 JavaScript 값에 접근할 수 없고, JavaScript로 EL식이나 JSTL을 사용할 수 없다. 즉, ajax 등을 통해 요소를 넣을 때는 서버 사이드 언어를 제외한 클라이언트 사이드 언어로 처리해야한다.