728x90
반응형
HTML과 export 키워드에 대한 고민은 JavaScript 모듈 시스템이 브라우저에서 동작하는 방식과 관련이 있습니다. 하지만, HTML 내에서 JavaScript를 사용하거나, 모듈 시스템을 사용하지 않는 상황에서는 export를 제거하고 순수 스크립트 방식으로 작업할 수 있습니다. 여기서는 HTML 포함과 함께, 스크립트 파일을 브라우저에서 바로 사용할 수 있는 형태로 재작성하겠습니다.
1. HTML 코드
html
코드 복사
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Components</title>
</head>
<body>
<section id="section1"></section>
<section id="section2"></section>
<section id="section3"></section>
<!-- Script Files -->
<script src="combobox.js"></script>
<script src="pages.js"></script>
<script src="common.js"></script>
<script>
// 페이지 초기화
generatePageComponents(page1Components);
</script>
</body>
</html>
// pages.js
const page1Components = [
{
id: 1,
type: 'select',
name: 'country',
label: 'Country',
container: 'section1',
source: 'countries'
},
{
id: 2,
type: 'select',
name: 'category',
label: 'Category',
container: 'section2',
apiUrl: 'https://your-server-url.com/api/categories'
},
{
id: 3,
type: 'text',
name: 'username',
label: 'Username',
container: 'section3'
}
];
// combobox.js
const comboBoxData = {
countries: [
{ id: 'us', name: 'United States' },
{ id: 'kr', name: 'South Korea' },
{ id: 'jp', name: 'Japan' }
],
categories: [
{ id: 1, name: 'Technology' },
{ id: 2, name: 'Finance' },
{ id: 3, name: 'Education' }
]
};
// Static 데이터 가져오기
function getComboBoxData(key) {
return comboBoxData[key] || [];
}
// API 데이터 가져오기
async function fetchComboBoxData(url) {
try {
const response = await fetch(url);
const data = await response.json();
return data; // 데이터 형식: [{ id: 'value1', name: 'Option 1' }, ...]
} catch (error) {
console.error('Error fetching combo box data:', error);
return [];
}
}
// common.js
// Select 컴포넌트 생성
async function createSelectComponent(component) {
const container = document.getElementById(component.container);
const selectElement = document.createElement('select');
selectElement.id = `input-${component.id}`;
selectElement.name = component.name;
let options;
// 옵션 데이터 가져오기
if (component.apiUrl) {
options = await fetchComboBoxData(component.apiUrl);
} else if (component.source) {
options = getComboBoxData(component.source);
} else {
console.error('No data source specified for select component:', component);
return;
}
// 옵션 추가
options.forEach(option => {
const opt = document.createElement('option');
opt.value = option.id;
opt.textContent = option.name;
selectElement.appendChild(opt);
});
container.appendChild(selectElement);
}
// Input 컴포넌트 생성
function createInputComponent(component) {
const container = document.getElementById(component.container);
const inputElement = document.createElement('input');
inputElement.id = `input-${component.id}`;
inputElement.name = component.name;
inputElement.type = component.type || 'text';
container.appendChild(inputElement);
}
// Radio 컴포넌트 생성
function createRadioComponent(component) {
const container = document.getElementById(component.container);
const values = component.value.split(',');
values.forEach(value => {
const radioWrapper = document.createElement('div');
const radioInput = document.createElement('input');
radioInput.type = 'radio';
radioInput.name = component.name;
radioInput.value = value;
radioWrapper.appendChild(radioInput);
const radioLabel = document.createElement('label');
radioLabel.textContent = value;
radioWrapper.appendChild(radioLabel);
container.appendChild(radioWrapper);
});
}
// 페이지 컴포넌트 생성
function generatePageComponents(pageComponents) {
pageComponents.forEach(component => {
if (component.type === 'select') {
createSelectComponent(component);
} else if (component.type === 'radio') {
createRadioComponent(component);
} else {
createInputComponent(component);
}
});
}
반응형
'개발 > Javascript' 카테고리의 다른 글
| input component development (0) | 2024.11.30 |
|---|---|
| input Components 관리 (0) | 2024.11.30 |
| input과 form 연결 (0) | 2024.11.30 |
| Form Data. (0) | 2024.11.30 |
| [javascript] ajax 폼 전송 (0) | 2022.11.06 |