FrontEnd

Frontend

개요

브라우저에서 어떤 페이지를 요청하면 XpressEngine은 보통 모듈 스킨, 테���, 그리고 스킨�� 테���에서 사용한 위젯이나 UI오브젝트에서 생성한 html을 조합하여 하나의 html 문서를 만듭니다. 그리고 이 html 문서에는 여러가��� css와 js파일이 로드되��� meta 태그 같은 태그들이 html에 추���됩니다. Frontend 패키지는 이렇��� 하나의 html 문서를 출력할 때 필요한 다양한 태그�� 추���해주��� 관리하는 역할을 합니다.

목적

화면에 출력될 html을 생성하는 과정에서 다양한 컴포넌트가 관여�� 하는데, Frontend 패키지는 이 과정에서의 발생하는 여러가��� 문제를 처리해줍니다.

Frontend 패키지는 아래와 같은 역할을 제공합니다.

• html문서의 타이틀을 지정한다.
• body 태그에 특정 class�� 추���한다.
• js파일을 html 특정영역(head 또는 body의 상,하단)에 로드한다
• css파일을 html에 로드한다.
• 이�� 다�� 컴포넌트에서 로드된 js, css파일을 언로드(unload) 한다.
• meta 태그�� html에 로드한다.
• custom 태그(자유���운 형식의 text)�� html에 추���한다.
• form validation을 위한 rule을 지정한다.(브라우저에서 script�� 통해 실행되는 validation)
• script에서 사용할 언어팩을 로드한다.

위의 역할을 수행할 때 Frontend 패키지는 여러곳에서 로드된 js파일이나 css파일의 중복을 처리해줍니다. 또, js파일이나 css파일은 로드되는 순서도 매우 중요합니다. Frontend 패키지는 파일이 로드되는 순서를 지정하는 기능도 제공합니다.

사용법

Frontend 패키지의 기본적인 사용법입니다. 자세한 사용법은 API�� 참조하십시오. API 사용법

// 브라우저 타이틀 지정
Frontend::title('브라우저 타이틀입니다');

// body에 'profile' class지정
Frontend::bodyClass('profile');

// xe.js파일을 body의 하단에 로드함.
Frontend::js('assets/common/js/xe.js')->appendTo('body')->load();

// 로드된 xe.js파일을 언로드함.
Frontend::js('assets/common/js/xe.js')->unload();

// xe.css파일을 로드함. 반드시 bootstrap.css가 로드된 다음에 로드되도��� 우선순위를 지정
Frontend::js('assets/common/css/xe.css')->appendTo('body')->before('assets/vendor/bootstrap.css')->load();