<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CodeSpitz75-1</title>
</head>
<body>
<section id="data"></section>
<script>
const Table =(_=>{
// static private
const Private = Symbol();
return class {
//constructor
// public methods
// private methods
constructor(parent) {
// 전파되지 않게 여기서 validation
// DOM객체에 대한 조사는 최대한 미룬다.
if(typeof parent != 'string' || !parent) throw "invalid param";
this[Private] = {parent};
}
async load(url) {
const response = await fetch(url);
if(!response.ok) throw "invalid response";
const {title, header, items} = await response.json();
if(!items.length) throw "no items";
// 어떤 메소드가 함수다 => 인자와 지역변수로 작동.
// 어떤 메소드가 메소드다 => this 컨텍스트 이용
Object.assign(this[Private], {title, header, items});
this.render();
}
render(){
// 코드짜기전에 꼭 의사코드로 표현하기
// 부모, 데이터 체크
// table생성
// title을 caption으로
// header를 thead로
// items를 tr로
// 부모에 table삽입
const {parent, items} = this[Private];
const parentEl = document.querySelector(parent);
if(!parentEl) throw "invalid parent element";
if(! items || ! items.length) {
parentEl.innerHTML = "no data";
return;
}else parent.innerHTML = "";
const table = document.createElement("table");
const caption = document.createElement("caption");
caption.innerHTML = title;
table.appendChild(caption);
table.appendChild(
// 벡터를 스칼라로 변경하는게 reduce
header.reduce((thead, data) => {
const th = document.createElement("th");
th.innerHTML = data;
thead.appendChild(th);
return thead;
}, document.createElement("thead"))
);
table.appendChild(...items.map(
item => item.reduce((tr, data)=> {
const td = document.createElement("td");
td.innerHTML = data;
tr.appendChild(td);
return tr;
}, document.createElement("tr"))
));
parentEl.appendChild(table);
}
// 역할이 "변화율"에 따라 다르다면
}
})();
const table = new Table("#data");
table.load("75_1.json")
</script>
</body>
</html>
💡프로그래밍 세계에서 유일하게 변하지 않는 원칙 모든 프로그램은 변한다. 이미 작성된 복잡하고 거대한 프로그램을 어떻게 변경할 수 있을 것인가? ****⇒ 격리(Isolation)
결국 소프트웨어 공학의 상당 부분은 “격리 전략”
어떻게 격리할래? ⇒ 변화율(코드가 바뀌는 이유)에 따라 작성하기
변화율이란 시간적인 대칭성
“변화의 원인과 주기별로 정리” ⇒ 변화율표 2차원 메트릭스 (진리표 형태로 작성) ⇒ 확인해보기.
즉, 강한 응집성 & 약한 의존성
데이터로만 되어 있다면 도메인 모델.
도메인 모델이 아니라면 네이티브고 이를 구분해야 한다.
네이티브만 격리해야 한다.