WebApp Local 실행을 위한 HTML Include 방식

WebApp을 만드는 목적은 우선 Web상에서의 서비스가 첫번째 목적일 것이고, 더불어 Web 뿐만이 아니라 Local환경에서도 동일하게 동작하길 원할 것이다. WebServer없이 Local 환경에서 동작할 때, 서버에 특정 내용을 저장해야 한다면 인터넷이 연결되어 있지 않아도 정상적으로 동작하다가 인터넷이 연결되면 데이터를 동기화 시켜주는 방식으로도  만들어 질 수 있을 것이다.

또한 모바일에서도 동작하도록 WebApp을 PhoneGap등으로 감싸서 배포하는 형식으로도 고민하고 있을지도 모르며, 모바일로 배포된 앱은 인터넷이 연결되어 있지 않아도 정상적으로 동작해야 할 것이다.

이렇게 Web상에서 뿐만이 아니라 인터넷이 연결되어 있지 않은 다양한 환경에서도 내가 만든 WebApp이 정상 동작되어야 하는데, 이 때 한 가지 고민이 필요한 부분이 있다. 바로 브라우져 보안 때문에 발생될 수 있는 에러인데, 지금부터 이 부분을 함께 고민해 보았으면 좋겠다.

WebApp을 만들면서 보통 server를 구성해서 server 상에서만 실행해보다가 local의 특정 디렉토리에서 index.html파일을 실행 시키면, Web Server에서는 정상적으로 동작하던 WebApp이 에러가 발생하며 정상적으로 동작하지 않는 경우가 발생한다.
물론 모든 Browser가 동작하지 않는 것은 아니고, 사파리 같은 경우에는 로컬에서도 정상적으로 동작한다.

에러의 직접적인 원인은 Local에서 html에서 다른 html파일을 include하는 경우에 Browser의 보안 때문에 File를 읽지 못해서 발생하는 Error다. 크롬도 실행시에 특정 옵션을 주면 보안을 우회할 수도 있지만 서비스를 받는 모든 사용자에게 옵션을 주어서 브라우져를 실행하도록 강제할 수는 없는 일이다.

html에서 다른 html을 include 시키는 방식은 여러 가지 방식이 있는데, AngularJS, JQuery, HTML5, Polymer 등등 많은 방식이 존재한다. 각각의 방식은 웹서버 상에서는 모두 정상적으로 동작하지만 로컬에서 실행할 때는 역시 에러를 발생시킨다.

결국 다른 방식을 찾아보아야 했는데, 직접적인 include방식은 아니지만 AngularJS의 ng-template을 이용하면 include와 비슷하게 구현이 가능하다.

보통 우리는 Layout를 잡고 각각의 영역에 해당하는 파일을 include해서 사용하는데, 아래의 그림처럼 표현하기 위해서는 AngularJS에서 "ng-include='test.html'" , "templateUrl:test.html" 이런 식으로 Coding를 하는데, 이 부분을 아래의 코딩 방식으로 바꿔서 사용하면 비록 직접 include하는 방식은 아니지만 흡사하게 흉내내서 사용이 가능하다.

Plunker Edit

Index.html에서 우선 ng-template에 id를 선언하고 안에 구현할 HTML Code를 넣은 다음, 필요한 곳에서 id를 include하는 방식으로 사용하면 된다. 여기서는 Layout를 잡고 각 Layout에서 include하고 있다.
Script에서는 templates를 선언하고, 그 안에 include를 하길 원하는 ID를 url에 저장해서 가지고 있다.