Skip to content

Instantly share code, notes, and snippets.

@hohoonlee

hohoonlee/75_1.json

Last active March 13, 2018 10:07
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save hohoonlee/6eadd47b8bc865b9e7a9f0d56d61b23a to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save hohoonlee/6eadd47b8bc865b9e7a9f0d56d61b23a to your computer and use it in GitHub Desktop.
Download ZIP
Raw
75_1.json
{
"title":"TIOBE Index for June 2017",
"header":["Jun-17","Jun-16","Change","Programming Language","Ratings","Change"],
"items":[
[1,1,"","Java","14.49%","-6.30%"],
[2,2,"","C","6.85%","-5.53%"],
[3,3,"","C++","5.72%","-0.48%"],
[4,4,"","Python","4.33%","0.43%"],
[5,5,"","C#","3.53%","-0.26%"],
[6,9,"change","Visual Basic .NET","3.11%","0.76%"],
[7,7,"","JavaScript","3.03%","0.44%"],
[8,6,"change","PHP","2.77%","-0.45%"],
[9,8,"change","Perl","2.31%","-0.09%"],
[10,12,"change","Assembly language","2.25%","0.13%"],
[11,10,"change","Ruby","2.22%","-0.11%"],
[12,14,"change","Swift","2.21%","0.38%"],
[13,13,"","Delphi/Object Pascal","2.16%","0.22%"],
[14,16,"change","R","2.15%","0.61%"],
[15,48,"change","Go","2.04%","1.83%"],
[16,11,"change","Visual Basic","2.01%","-0.24%"],
[17,17,"","MATLAB","2.00%","0.55%"],
[18,15,"change","Objective-C","1.96%","0.25%"],
[19,22,"change","Scratch","1.71%","0.76%"],
[20,18,"change","PL/SQL","1.57%","0.22%"]
]
}
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>강한 응집성, 약한 의존성 [책임+권한=역할]</title>
</head>
<body>
<section id='data'></section>
<script>
const Info = class {
constructor(json) {
const {title, header, items} = json;
if(!title || (typeof title != 'string')) throw 'invalid title';
if(!Array.isArray(header) || !header.length) throw 'invalid header';
if(!Array.isArray(items) || !items.length) throw 'invalid items';
items.map((x, i)=>{
if(x.length != header.length) throw 'invalid item length at index(' + i + ')';
});
this._private = {title, header, items};
}
get title() { return this._private.title;}
get header() { return this._private.header;}
get items() { return this._private.items}
}
const Data = class {
async getData() {
const json = await this._getData();
return new Info(json);
}
async _getData() {
throw '_getData must overrided'
}
}
const JsonData = class extends Data {
constructor(data) {
super();
this._data = data;
}
async _getData() {
if(typeof this._data == 'string') {
const response = await fetch(this._data)
this._data = await response.json();
}
return this._data;
}
}
const Renderer = class {
constructor() {}
async render(data) {
if(!(data instanceof Data)) throw 'invalid data type';
this._info = await data.getData();
this._render();
}
_render() {
throw '_render must overrided';
}
get title() { return this._info.title;}
get header() { return this._info.header;}
get items() { return this._info.items}
}
const TableRenderer = class extends Renderer {
constructor(parent) {
if(!parent || typeof parent != 'string') throw 'invalid param';
super();
this._parent = parent;
}
_render() {
const parent = document.querySelector(this._parent);
if(!parent) throw 'invalid parent';
parent.innerHTML = '';
const [table, cpation] = 'table,caption'.split(',').map(v=>document.createElement(v));
cpation.innerHTML = this.title;
table.appendChild(cpation);
table.appendChild(
this.header.reduce(
(thead, data)=>(thead.appendChild(document.createElement('th')).innerHTML = data, thead)
, document.createElement('thead'))
);
parent.appendChild(
this.items.reduce(
(table, row)=>(table.appendChild(
row.reduce(
(tr, data)=>(tr.appendChild(document.createElement('td')).innerHTML = data, tr)
, document.createElement('tr'))
), table)
,table)
);
}
}
const data = new JsonData('75_1.json');
const renderer = new TableRenderer('#data');
renderer.render(data);
</script>
</body>
</html>
@fureweb-com
Copy link

fureweb-com commented Mar 13, 2018

1번 - 총 14점, 획득 10점

  • JSON 데이터 파일 관련(배점 2점 / 획득 0점)
    • 오류를 수정한 json 파일이 첨부되었는가 (X, -2점)
  • Data 클래스 구현 관련(배점 2점 / 획득 2점) : getData, _getData 메서드가 바르게 작성되었는가
    • getData 메서드에서 _getData로부터 얻어온 결과를 Info의 인스턴스의 인자로 넘겨 알맞은 형태로 받아오게 작성됐는가 (O)
    • _getData 메서드를 자식이 반드시 구현하도록 강제하는 코드가 있는가 (O)
  • JsonData 클래스 구현 관련(배점 2점 / 획득 1점) : 상속관계, constructor, _getData 메서드가 바르게 작성되었는가
    • 생성자에서 받아온 url이 string인지 검사하고, 부모의 생성자를 호출하며, 받아온 url을 멤버 필드로 설정했는가 (-1점)
    • _getData 메서드에서 fetch(url멤버필드) 결과를 json 메서드를 통해 응답했는가 (O)
  • Renderer 클래스 구현 관련(배점 2점 / 획득 2점) : render, _render 메서드가 바르게 작성되었는가
    • render 메서드에서 data 인자가 Data 타입인지 검증하고 있으며, 얻어온 data의 getData 메서드를 통해 JSON 데이터를 얻어온 뒤, 해당 데이터에서 title, header, items를 추출하거나 객체로 멤버 필드를 초기화하고, _render 메서드를 호출하도록 되어있는가 (O)
    • _render 메서드를 자식이 반드시 구현하도록 강제하는 코드가 있는가 (O)
  • TableRenderer 클래스 구현 관련(배점 2점 / 획득 2점) : 상속관계, constructor, _render 메서드가 바르게 작성되었는가
    • constructor에서 받아온 인자의 존재여부 및 string 타입인지 검사한 뒤, 멤버필드에 받아온 인자를 초기화하는가 (O)
    • _render 메서드 내에서 DOM 객체가 실제 존재하는지 검증한 뒤 table을 생성하는 코드를 작성했는가 (O)
  • Info 클래스 구현 관련(배점 4점 / 획득 3점) : constructor 및 title, header, items 에 대한 getter 메서드가 바르게 작성되었는가
    • constructor에서 데이터에 대한 유효성 검증을 충분히 했는가 (-1점) : 각 item 컬럼별 데이터타입이 옳은지 작성하는 코드까지 존재해야 감점이 없습니다.
    • title, header, items를 getter를 통해 제공하도록 코드를 작성했는가 (O)

2번 - 총 4점, 획득 4점

  • JsonData 및 TableRenderer 클래스의 Info 클래스에 대한 의존성이 제거되었는가 (배점 4점 / 획득 4점)
    • Data의 getData 메서드가 JsonData._getData 메서드를 통해 받아온 JSON 데이터로 Info 객체를 생성한 결과를 리턴하는가 (O)
    • TableRenderer의 _render 메서드 내에서 부모가 초기화한 멤버필드를 이용하여 DOM에 테이블을 작성하는가 (O)

총점 14/18 = 78점

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment