{"data":{"site":{"siteMetadata":{"title":"lastrites2018","author":"lastrites2018","siteUrl":"https://lastrites2018.netlify.com","comment":{"disqusShortName":"","utterances":"lastrites2018/gatsby-first-blog"},"sponsor":{"buyMeACoffeeId":""}}},"markdownRemark":{"id":"7bf99e75-d9b2-5174-bb18-72836775c18e","excerpt":"조잡한 트위틀러 방식으로 일단 구현해보고, 후일에 나은 방식으로 구현해보자. css는 무시하고, 최대한 돔 문법을 활용해서 진행할 것. 아직은 정제된 코드로, 깔끔한 방식으로 구현할 수 없다. 잘해야 한다는 생각을 버리고, 구현할 수 있는 방식으로… 트렐로 구현…","html":"<p>조잡한 트위틀러 방식으로 일단 구현해보고, 후일에 나은 방식으로 구현해보자. css는 무시하고, 최대한 돔 문법을 활용해서 진행할 것. 아직은 정제된 코드로, 깔끔한 방식으로 구현할 수 없다. 잘해야 한다는 생각을 버리고, 구현할 수 있는 방식으로…</p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\">동적 요소 덧붙이기\n<span class=\"token keyword\">var</span> newElement <span class=\"token operator\">=</span> document<span class=\"token punctuation\">.</span><span class=\"token function\">createElement</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"BUTTON\"</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">var</span> textnode <span class=\"token operator\">=</span> document<span class=\"token punctuation\">.</span><span class=\"token function\">createTextNode</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"+\"</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\nnewElement<span class=\"token punctuation\">.</span>id <span class=\"token operator\">=</span> <span class=\"token string\">\"\"</span><span class=\"token punctuation\">;</span> 아이디 부여\nnewbtn<span class=\"token punctuation\">.</span><span class=\"token function\">appendChild</span><span class=\"token punctuation\">(</span>textnode<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">var</span> where <span class=\"token operator\">=</span> document<span class=\"token punctuation\">.</span><span class=\"token function\">getElementById</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"base\"</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\nwhere<span class=\"token punctuation\">.</span><span class=\"token function\">insertBefore</span><span class=\"token punctuation\">(</span>newbtn<span class=\"token punctuation\">,</span> where<span class=\"token punctuation\">.</span>childNodes<span class=\"token punctuation\">[</span><span class=\"token number\">1</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span></code></pre></div>\n<h1 id=\"트렐로-구현-3일차\"><a href=\"#%ED%8A%B8%EB%A0%90%EB%A1%9C-%EA%B5%AC%ED%98%84-3%EC%9D%BC%EC%B0%A8\" aria-label=\"트렐로 구현 3일차 permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>트렐로 구현 3일차</h1>\n<p>깨달은 사실 :</p>\n<p>개발자도구에서 아이디 이름은 보라색으로 표시된다.</p>\n<p>개발자도구에서 클래스 이름은 하늘색으로 여러개 있을 경우 .으로 구분된다.</p>\n<p>(실제로는 공백으로 보인다)</p>\n<p>트렐로 클론 정말 잘 짜여있다. 함수는 단 한가지의 역할만 수행한다. 지금 내 소스는 하나의 함수에서 너무 다중 역할을 하기 때문에 꼬여버린다. 코드의 재사용을 위한 분할의 필요성.</p>\n<p>그때그때 문제를 해결하는 식으로 짜왔기 때문에 기본적인 설계 하는 방법 자체를 잘 모르고 있다.</p>\n<hr>\n<p>결국은 MVC 패턴을 배워야 한다.</p>\n<p><a href=\"https://www.bsidesoft.com/?p=5948\">https://www.bsidesoft.com/?p=5948</a></p>\n<p>model, view, controller, templete 개념을 아주 약간은 알 것 같다. 하지만 아직 이해하긴 어렵다.</p>","frontmatter":{"title":"trello 구현하기 2회차","date":"August 14, 2018"}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"slug":"/til/20180814 trello 구현하기 2회차/","previous":{"fields":{"slug":"/til/20180811 trello 구현하기 1회차/"},"frontmatter":{"title":"trello 구현하기 1회차","category":"TIL"}},"next":{"fields":{"slug":"/til/20180816-0817 IAT 준비/"},"frontmatter":{"title":"IAT 준비","category":"TIL"}}}}