자바스크립트나 스타일시트를 JSP 에서 구현하는 이유..?

이곳에서 이야기 하는 내용은 명확한 근거 자료를 기준으로 설명하지는 않았다.
순전히 경험적인 요소를 기준으로 알맞게 재구성해 놓았음을 미리 밝힌다.
아마도 다른 곳에서 이 곳에 기술된 내용을 인용한다면 무언가 심각한 오해를 유발할 수도 있음을 경고한다.
그렇다고 아주 엉뚱한 이야기를 하는 것은 아니다.

자바스크립트는 .js 확장자로 작성하고 웹서버 (Web Server) 경로에 위치시키는 것이 관례(?)다.
마찬가지로 스타일시트는 .css 확장자로 작성하고 웹서버 경로에 위치시킨다.
혹, 왜 이렇게 사용하는지 모르는 분들이 계신 것같긴 하지만..

이렇게 하면 좋은 점이..
사용자의 PC 에 .js 와 .css 가 한번 다운로드 받아지면, 그 내용이 바뀌지 않는다는 가정하에..
다음 웹페이지에서 동일한 .js 나 .css 를 호출할때 PC 에 다운로드된 파일을 이용하기 때문에..
서버에서 .js 나 .css 를 다운로드 받지 않으니까 보다 빠른 로딩으로 화면이 구성되어
웹브라우저를 통해 모니터에 레이아웃이 갖춰진다는 것이다.
한동안 이것이 맞는줄 알았는데.. 요즈음은 그것이 아니라는 생각이 짙다.

궁금하다면 지금 바로, 웹브라우저의 인터넷옵션 (IE, 인터넷 익스폴로러 Internet Explorer 인 경우) 에서
임시 인터넷 파일의 설정이 어떻게 되어 있는지 확인해 보시라..
아마, 모르긴 몰라도.. 아래와 같이 되어 있을 것이다.

말인즉슨, 웹페이지를 구성하는 .js 나 .css 파일을 찾을때 새 버전인지 확인해고 새로운 버전이면 다운로드 받아서
PC 에 저장되어 있던 .js 나 .css 파일을 새로운 버전으로 업데이트 하여 보여준다는 얘기인데..
글쎄..? 무엇을 기준으로 새로운 버전인지 체크하는 것이지..?
파일명..? 파일이 최초에 생성된 시간..? 파일이 최종적으로 수정된 시간..?
관련 문건을 찾지는 못했지만.. (아, 이것이 나의 한계인가.. 크윽)
이런 것을 체크하려면 일단 서버에서 해당 .js 나 .css 파일을 어딘가 다운로드 받아야 하지 않느냐는 말.
한번 다운로드 받은 것을 그대로 사용해서 빠르다(?) 는 명제가 실종되는 순간이다.

'자동으로' 라고 설정했다면, PC 에 .js 나 .css 파일이 없으면 이를 다운로드 받고,
해당 파일이 PC 에 존재하지 않는다면 이를 다운로드 받아 비교해서 업데이트 한다는 건데..
말하자면 '페이지를 열 때마다' 와 대동소이 하다는 것.
'페이지를 열 때마다' 는 일단 먼저 다운로드 받아서 PC 에 이미 있었다면 비교를 한다는 것이고,
'자동으로' 는 먼저 PC 에 파일이 있는지 체크하고 없으면 다운로드 받아 버전을 비교하여 사용한다는 차이 정도.
그렇다면, 맨 처음에 .js 나 .css 가 한번 다운로드 된 것을 재사용 하니까 빠르다 라는 명제가 왜 사라진 걸까..?

일단 만들어진 .js 나 .css 는 시간이 갈수록 새로운 기능의 필요나 기존 기능의 버그를 패치하는 순간이 찾아온다.
PC 에 한번 받아 두었던 .js 나 .css 를 그대로 사용할때 문제가 발생할 수도 있다는 것이 문제가 된다.
이를 해결하려니까 당연히 일단 .js 나 .css 를 다운로드 받는 것이 안전빵이라는 거다.
그리고, 이미 PC 에 다운로드 받았던 이전 파일과 비교해서 새로운 버전으로 업데이트 하면 해피하다는 것인데.
이것도 문제가 있다. 매번 테스트를 해 보면 이런 설정에 의문이 든다는 것이다.
분명히 서버에서는 최신 버전으로 업데이트 되었음에도 불구하고 사용자의 PC 에는 이것이 반영되지 않는다는 것.
웹브라우저의 버그라고 보는 사람도 있고, 다른 영향 요소가 있다는 사람도 있는데..

웹페이지는 단일한 파일로 구성되지 않는다. 이를테면 이미지 파일, 플래시 파일, .js 나 .css, 그리고 기본 본문 등등.
그런데, 이들 파일을 한번에 그리고 동시에 받는 것이 아니다.
하나의 파일 단위로, 또는 각각의 파일을 쪼개서 순차적으로 받게 된다.
웹서버로부터 사용자의 PC 사이에 존재하는 네트워크나
웹브라우저의 종류와 버전에 따라 이를 구현하는 방식이 다르겠지만..
아무튼, 사용자에게 해당 웹페이지를 보여주어야 하는 적절한 시점에
필요한 파일들이 모두 다운로드 받아있지 않다면 어떻게 될까..?
1초도 못 기다리는 사용자를 위해서 웹브라우저는 자신이 정한 타임 아웃을 기준으로 적절하게 화면을 구성하여 보여준다.
.js 나 .css 가 웹서버에서는 변경되어 있음에도 불구하고 PC 에 새로운 버전이 정상적으로 당도하지 않았다면..?
웹브라우저는 기존에 다운로드 되어 있던 파일을 컨닝(?) 하게 된다.
(이거, 해당 웹브라우저 기술 문서에 이런 내용이 기술되어 있는지는 모르겠다. 그리고, 기술했을까 싶다)

PC 에 다운로드 받은 파일이 없거나 이것이 손상되어 있다고 판단하면 File Not Found 가 된다.
이미지 파일은 손상된 표시가 뜨고, 중요한 파일이 PC에 다운로드 되지 않았다면 화면에 오류메시지가 뜨고 난리다.
자바 스크립트 함수나 변수의 정의가 들어 있는 .js 파일이 PC 에 존재하지 않고,
본문에서 이를 호출했다면 스크립트 오류가 표시된다. 버튼을 클릭해도 해당 기능이 작동하지 않는다.
.css 에 문제가 있다면 정상적으로 보여야 할 화면의 레이아웃이나 문자 표시가 정상이 아니다.
PC 에 해당 파일이 없거나 파일이 손상되었다면 그래도 다행(?) 이지만..
파일이 있으되 최신 버전이 아니라 이전 버전이라면, 그것도 중대한 대목이 빠졌다면..?
더 곤란하고 난감한 일이 발생한다.

만약, DB 에 데이타를 저장해야 하는데, 최신 버전이라면 정상적인 데이타가 쌓이겠지만 아니라면..?
사용자는 정상적인 절차를 거쳐 정상적인 데이타가 쌓였을 것이라고 생각하겠지만,
실제 DB 에는 어처구니 없는 내용이 들어가 있을지도 모른다. 돈과 관련되기라도 했다면..? 크윽.
나머지 부분은 잘 되어 있음에도 불구하고 .js 스크립트 파일 하나 잘못 되어서 엉뚱한 클레임 소지가 발생한다.
서비스를 제공하는 쪽이 승자가 될지, 서비스를 제공받는 쪽이 승자가 될지는 모르지만..
분쟁이 발생하는 것을 피할 수는 없다.

그리고, 또 다른 문제도 있다.
웹서비스를 위한 서버 구성에 잉크토미 서버와 같은 캐시 장비가 구비되어 있기도 한데..
이를테면 .js, .css, .html, .swf, 각종 이미지 파일 등등에 대한 캐시를 서버가 가지고 있다가,
사용자의 PC 에서 웹브라우저가 해당 파일을 필요로 했을때 최신 버전의 파일이 존재하는 웹서버가 아니라..
구 버전의 파일이 캐시되어 있는 잉크토미 류의 장비에서 해당 파일을 다운로드 받을 수도 있다는 것이다.
서버 관리자의 실수로 볼 수도 있겠지만 해당 캐시를 Reset 하기 전에 벌어진 일은 누가 주워 담을 것인가.

이외에도 서버 사이드 페이지 (JSP, ASP 등등) 은 JSP 나 ASP 파일을 컴파일 하여,
사용자가 이를 필요로 했을때 (On Demand) HTML 텍스트의 형태로 해당 내용을 사용자의 PC 로 다운로드 하는데,
이렇게 미리 컴파일 되어 있는 파일이 웹서버의 일정 공간에 담겨져 있다.
최신의 서버 사이드 페이지에 오류가 있다면 이를 컴파일 하는 과정에서 최종 파일에 반영되지 않고,
이전에 정상적으로 컴파일 되어 적재되어 있던 파일이 그대로 서비스 되는데.. (물론 웹서버의 기종과 버전에 따라 다르다)
.js 파일 명과 관련된 미확인 오류가 있다면..?

장황하게 많이도 썼다 싶다. 여기까지 읽은 분이 있는지가 의심스럽다.. ^^>
아무튼, 이상과 같은 이유로.. .js 나 .css 파일에 담길 내용을 .jsp 에 담는 사례가 많다.
궁금하시면 포탈이나 자주 가시는 웹사이트에 가서 '소스보기' 를 해 보시라..
.js 나 .css 파일은 기술되어 있지 않고 자바스크립트 소스와 스타일 시트들이 잔뜩 적혀 있는 것을 발견하게 될 것이다.

그런데, .js 나 .css 를 .jsp 로 구현하면, 상기와 같은 문제를 회피하는 결과 외에도 좋은 점이 있다.
.js 나 .css 에 주석을 달려면 <!-- --> 나 또는 //, /* 과 */ 등의 이용할 수 있다.
그런데, 소스 보기를 하면 이것이 모두 노출된다.
.js 나 .css 를 .jsp 로 구현하면 (물론 .asp 나 php 도 엇비슷) <%-- ... --%> 로 주석을 구현할 수 있다.
그 외에도 편번(?) 이지만 <% /* ... */ %> 와 같은 주석도 가능하다.
이런류의 주석은 웹브라우저의 소스보기 기능을 이용하더라도 노출이 되지 않는다.
본문이 되는 .jsp 에 .js 나 .css 를 구현하라는 것이 아니다.
재사용성을 고려한다면 기존에 .js 나 .css 에 담겨 있던 내용을 확장자만 달리하여 .jsp 에 담고,
<%@ include 를 통한 정적 포함이나, <jsp:include 를 통한 동적 포함 관계를 사용하라는 것이다.
이만큼 설명했으면 필이 오리라 생각한다.

그런, 오늘은 여기까지.. (졸립다.. ㅠㅠ.. 눈도 침침..)