컴포넌트를 만들어 배포하는 방법을 설명합니다.
_share 폴더 경로 사용Last updated
(function (){
// 컴포넌트 설치 정보
const component = {
// 컴포넌트 소스 파일 경로--
// (_share 폴더 아래에 중복되지 않을만한 경로가 좋음)
js: './_share/jikji.component/Navi/Tab.0.0.1.js',
// css: '로드할 css 파일이 있으면 경로 적어줌'
}
// 컴포넌트 설정
const config = {
// 처음 선택 버튼 (1 부터 카운팅)
select: 1,
// 탭 버튼 네이밍 prefix : 탭버튼_1, 탭버튼_2, ...
tabButtonName: '탭버튼_',
// 탭 컨텐츠 네이밍 prefix : 탭컨텐츠_1, 탭컨텐츠_2, ...
tabContentName: '탭컨텐츠_',
elements: {
prevButton: '이전버튼',
nextButton: '다음버튼',
// 탭 버튼으로 구성된 그룹
// 각 버튼의 네이밍 규칙: 탭메뉴01, 탭메뉴02 ... ~ 탭메뉴00
tabButtonGroup: '탭버튼 그룹',
// 탭 컨텐츠로 구성된 그룹
// 각 컨텐츠의 네이밍 규칙: 탭컨텐츠01, 탭컨텐츠02 ... ~ 탭컨텐츠00
tabContentGroup: '탭컨텐츠 그룹',
}
};
//-------------------------
// 깜빡임 방지 위해 초기화 완료 이전까지 감추기
$self.hide();
// 컴포넌트 로드 & 초기화
$self.loadComponent(component, (Component) => {
const onInitialize = () => $self.show();
// 컴포넌트 소스 파일에서 정의한 component 객체 참조
const Component = window['jikjiComponent'].Navi.Tab;
new Component($self, config, onInitialize);
});
})();
OPS/asset.file
컴포넌트 등록 후 경로: _share/<component-uid...>/asset.file
OPS/_share/asset.file
컴포넌트 등록 후 경로: _share/asset.file
// 처음부터 _share 폴더를 사용한 경우에는 경로가 그대로 유지됨(function(component){
// 버전 기록
Tab.version = '0.0.1';
// 최소 동작 가능 직지 버전 체크 (3.3.31 이상)
(function (major, minor, build){
// Jikji.API.version 체크
var warn = () => console.error(`${window.VERSION?.project} ${major}.${minor}.${build} 이상에서 출판해야 동작합니다. (현재 버전: ${window.VERSION.number})`);
if(!window.VERSION?.number) return warn();
var ar = window.VERSION.number.split('.').map(n=>parseInt(n));
if(ar[0] !== major) return ((ar[0] < major) ? warn() : undefined);
if(ar[1] !== minor) return ((ar[1] < minor) ? warn() : undefined);
return (ar[2] < build) ? warn() : undefined;
})(3, 3, 31);
//-------------------------------------
// Tab 컴포넌트 구현
//-------------------------------------
// 사용
// new window['jikjiComponent'].Navi.Tab($self, ...);
function Tab($self, config, onInitialize){
// 전달된 이름으로 api 객체 찾기
((elements)=>{
// 이전, 다음 버튼
elements.prevButton = findAPI(elements.prevButton);
elements.nextButton = findAPI(elements.nextButton);
// 탭 버튼으로 구성된 그룹
// 각 버튼의 네이밍 규칙: 탭메뉴01, 탭메뉴02 ... ~ 탭메뉴00
elements.tabButtonGroup = findAPI(elements.tabButtonGroup);
// 탭 컨텐츠로 구성된 그룹
// 각 컨텐츠의 네이밍 규칙: 탭컨텐츠01, 탭컨텐츠02 ... ~ 탭컨텐츠00
elements.tabContentGroup = findAPI(elements.tabContentGroup);
// ...
function findAPI(name){
return (typeof name === 'string') ? $self.children(name, true) : name;
}
})(config.elements);
// 컴폰넌트 구현 코드...
setTimeout(function (){
// 초기화 완료 콜백
if(onInitialize) onInitialize();
}, 250);
}
//-------------------------------------
// Export
//-------------------------------------
if(!component.Navi) component.Navi = {};
if(!component.Navi.Tab) component.Navi.Tab = Tab;
window['jikjiComponent'] = component;
})(window['jikjiComponent'] || {});
// 컴포넌트 설치 정보
const component = {
// 컴포넌트 소스 파일 경로--
// (_share 폴더 아래에 중복되지 않을만한 경로가 좋음)
js: './_share/jikji.component/Navi/Tab.0.0.1.js',
css: ''
}// 문자열로 명시
const component = {
js: 'js 파일 경로 문자열',
css: 'css 파일 경로 문자열'
}
// 문자열배열로 명시
const component = {
js: [
'js 1 파일 경로 문자열',
'js 2 파일 경로 문자열', ...
],
css: [
'css 1 파일 경로 문자열',
'css 2 파일 경로 문자열', ...
]
}
// 객체로 명시
// css 파일은 문자열로만 설정함
const component = {
js: {source: 'js 파일 경로 문자열', type: 'module'},
}
// 객체 배열로 명시
const component = {
js: [
'window["jikjiComponent"].Media.Video 객체가 정의된 js 파일 경로 문자열',
// 모듈 로드, 로드된 모듈은 콜백 함수로 참조전달됨
{ type: 'module', source: './_share/jikji.component/Media/Video.js' }
{ code: `console.log('pure 코드 실행');` },
{ type: 'module', code: `console.log('모듈코드 실행');` },
// 전역변수로 직접 참조하여 콜백함수에서 모듈 사용
{ type: 'module', code: `
import {Video} from "Video.js 모듈 파일 경로";
window._temperaryModule = Video;
` },
],
}
$self.loadComponent(component, (module) => {
// 모듈이 아닌 전역 변수 참조
const VideoComp = window['jikjiComponent'].Media.Video;
new VideoComp($self, config, onInitialize);
// 로드한 모듈 파일 경로로 모듈 참조
const {Video} = module['./_share/jikji.component/Media/Video.js'];
new Video($self, config, onInitialize);
// 전역변수로 직접 참조한 모듈
const Video = window._temperaryModule;
delete window._temperaryModule;
});