Last active
November 25, 2018 09:05
-
-
Save rosd89/4ef60f42ff4f2cc76be9e28ef0889955 to your computer and use it in GitHub Desktop.
코드스피츠 S75 1일차 과제 제출
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Title</title> | |
| </head> | |
| <body> | |
| <section id="data"></section> | |
| <script type="text/javascript"> | |
| const CError = class extends Error { | |
| static invalidParam(param) { | |
| throw param ? `invalid ${param}` : 'invalid param'; | |
| } | |
| static invalidDataType() { | |
| throw 'invalid data type'; | |
| } | |
| static notOverride(name) { | |
| throw `${name} must override`; | |
| } | |
| }; | |
| const Validator = class { | |
| static isString(str) { | |
| return typeof str != 'string'; | |
| } | |
| static isArray(arr) { | |
| return Array.isArray(arr); | |
| } | |
| }; | |
| const Info = class { | |
| constructor(json) { | |
| const {title, header, items} = json; | |
| if (Validator.isString(title) || !title) CError.invalidParam('title'); | |
| if (!Validator.isArray(header) || !header.length) CError.invalidParam('header'); | |
| if (!Validator.isArray(items) || !items.length) CError.invalidParam('items'); | |
| const checkItem = items.map(v => v.reduce((p, c, i, arr) => i < 1 ? p + c : !arr[i - 1] && arr[i] === "change" ? p + c : p + ',' + c, '').split(',')); | |
| this._private = {title, header, items: checkItem} | |
| } | |
| get title() { | |
| return this._private.title; | |
| } | |
| get header() { | |
| return this._private.header; | |
| } | |
| get items() { | |
| return this._private.items; | |
| } | |
| }; | |
| const Data = class { | |
| async getData() { | |
| const data = await this._getData(); | |
| return new Info(data); | |
| } | |
| async _getData() { | |
| CError.notOverride('_getData'); | |
| } | |
| }; | |
| const JsonData = class extends Data { | |
| constructor(data) { | |
| super(); | |
| this._data = data; | |
| } | |
| async _getData() { | |
| let json; | |
| if (typeof this._data === 'string') { | |
| const response = await fetch(this._data); | |
| json = await response.json(); | |
| } else { | |
| json = this._data; | |
| } | |
| return json; | |
| } | |
| }; | |
| const Render = class { | |
| constructor() { | |
| } | |
| async render(data) { | |
| if (!(data instanceof Data)) CError.invalidDataType(); | |
| this._info = await data.getData(); | |
| this._render(); | |
| } | |
| _render() { | |
| CError.notOverride('_render'); | |
| } | |
| get title() { | |
| return this._info.title; | |
| } | |
| get header() { | |
| return this._info.header; | |
| } | |
| get items() { | |
| return this._info.items; | |
| } | |
| }; | |
| const TableRenderer = class extends Render { | |
| constructor(parent) { | |
| if (Validator.isString(parent) || !parent) CError.invalidParam(); | |
| super(); | |
| this._parent = parent; | |
| } | |
| _render() { | |
| const parent = this.selector(this._parent); | |
| if (!parent) CError.invalidParam('parent'); | |
| parent.innerHTML = ''; | |
| const [table, caption] = 'table,caption'.split(',').map(v => this.createEl(v)); | |
| caption.innerHTML = this.title; | |
| table.appendChild(caption); | |
| table.appendChild( | |
| this.header.reduce( | |
| (thead, data) => (thead.appendChild(this.createEl('th')).innerHTML = data, thead), this.createEl('thead')) | |
| ); | |
| parent.appendChild( | |
| this.items.reduce( | |
| (table, row) => (table.appendChild( | |
| row.reduce((tr, data) => (tr.appendChild(this.createEl('td')).innerHTML = data, tr), this.createEl('tr')) | |
| ), table), | |
| table)); | |
| } | |
| selector(el) { | |
| return document.querySelector(el); | |
| } | |
| createEl(v) { | |
| return document.createElement(v); | |
| } | |
| }; | |
| const data = new JsonData('./75_1.json'); | |
| const render = new TableRenderer('#data'); | |
| render.render(data); | |
| </script> | |
| </body> | |
| </html> |
1번(14) : 12
- JSON file(2) : 2
- Data class(2) : 2
- JsonData class(2) : 1 (생성자에서 전달받은 data를 validate하지 않았음)
- Renderer class(2) : 1 (생성자에서 title, header, items를 추출하여 멤버 필드로 초기화하지 않았음)
- TableRenderer class(2) : 2
- Info class(4) : 4
2번(4) : 4
- JsonData(2) : 2
- TableRenderer(2) : 2
16/18 = 89
수고 많이 하셨습니다.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
수정된 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%"] ] }