{"data":{"site":{"siteMetadata":{"title":"lastrites2018","author":"lastrites2018","siteUrl":"https://lastrites2018.netlify.com","comment":{"disqusShortName":"","utterances":"lastrites2018/gatsby-first-blog"},"sponsor":{"buyMeACoffeeId":""}}},"markdownRemark":{"id":"40e04078-0d6d-5514-a211-f6feea076763","excerpt":"고민, 구상 시작하면 가운데 보드가 있고 보드가 없을 경우에 no boards 표현 데이터를 어떻게 가져갈 것인가? +를 누르면 new board 생성// 보드를 클릭하는 순간 기존의 메인 보드 객체에선 벗어나서 세부 객체로 들어감 세부 객체 데이타가 없을 경우에 왼쪽에 + 버튼(버튼으로 구현?) 버튼 클릭시 첫 리스트 객체 생성 엑스 누르면 삭제 가능 List 에서 + 누를때마다 Item textarea…","html":"<h2 id=\"고민-구상\"><a href=\"#%EA%B3%A0%EB%AF%BC-%EA%B5%AC%EC%83%81\" aria-label=\"고민 구상 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>고민, 구상</h2>\n<p>시작하면 가운데 보드가 있고 보드가 없을 경우에 no boards 표현</p>\n<p>데이터를 어떻게 가져갈 것인가?</p>\n<p>+를 누르면 new board 생성// 보드를 클릭하는 순간 기존의 메인 보드 객체에선 벗어나서</p>\n<p>세부 객체로 들어감</p>\n<p>세부 객체 데이타가 없을 경우에 왼쪽에 + 버튼(버튼으로 구현?)</p>\n<p>버튼 클릭시 첫 리스트 객체 생성 엑스 누르면 삭제 가능</p>\n<p>List 에서 + 누를때마다 Item textarea</p>\n<p>텍스트 에어리어 마우스 아웃 되거나 다른 부위를 클릭했을 경우에만 입력 됨</p>\n<p>삭제 기능 구현</p>\n<p>보드를 클릭하면 이름 바꿀 수 있다</p>\n<h2 id=\"개선할-점\"><a href=\"#%EA%B0%9C%EC%84%A0%ED%95%A0-%EC%A0%90\" aria-label=\"개선할 점 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>개선할 점</h2>\n<ul>\n<li>함수, 변수 이름 명명의 중요성, 처음부터 제대로 해놓지 않으면 헷갈린다. 나중에 고치면 되겠지란 생각으로 명명을 그냥 지나치지 말고, camelCase 적용시켜서 이름을 지을 것.</li>\n<li>데이타 저장방법과 데이터 불러오는 방법에 대해 미리 생각해볼 것.</li>\n<li>구현 과정에 맞춰서 불필요한 주석 제 때 삭제해줄 것. 당일 작업 마칠 때 정리해주는 습관.</li>\n<li>코드 작성 전, 데이터를 언제 만들고 불러올지 밑그림을 그려봤어야 한다.</li>\n<li>데이터를 어떻게 관리할 것인가? 배열 인덱스를 언제 생성해줄 것인가?</li>\n<li>함수를 쪼개는 것이 절실. 함수가 단 한 가지 역할만 수행해야 오류가 적고, 재사용이 쉬워진다.</li>\n</ul>\n<h2 id=\"트렐로-원본-분석\"><a href=\"#%ED%8A%B8%EB%A0%90%EB%A1%9C-%EC%9B%90%EB%B3%B8-%EB%B6%84%EC%84%9D\" aria-label=\"트렐로 원본 분석 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>트렐로 원본 분석</h2>\n<p>트렐로에서 데이터는 전체 배열 하나에 들어가고, 각 데이터는 하나의 객체로 구분되는데, 이 객체에는 id, title,lists 가 있다. ex) [{id, title, lists}]</p>\n<p>id는 랜덤으로 생성하고, title은 제목, lists는 또 다시 배열.</p>\n<p>처음에는 보드를 데이터를 다 배열로 구성해서 힘들었다. 보드 또한 오브젝트로 할 것.</p>\n<p>트렐로 원본의 장점 : 함수명이 무척 직관적이고 무슨 일을 하는지 알 수 있다</p>\n<p>getBoards</p>\n<p>getList</p>\n<p>getListBoard</p>\n<p>같은 일을 하는 함수끼리 묶여있다</p>\n<hr>\n<h2 id=\"다음-목표\"><a href=\"#%EB%8B%A4%EC%9D%8C-%EB%AA%A9%ED%91%9C\" aria-label=\"다음 목표 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>다음 목표</h2>\n<ul>\n<li>\n<p>데이터 구조 개선하고, 배치를 다시 새롭게 하고 함수를 그나마 쪼갤 것.</p>\n</li>\n<li>\n<p>프로토 타입 기능은 써먹지 못한다. 아직 그럴 능력이 안 됨.</p>\n</li>\n<li>\n<p>정도님 이야기</p>\n</li>\n</ul>\n<div class=\"gatsby-highlight\" data-language=\"text\"><pre class=\"language-text\"><code class=\"language-text\">//getelements는 array로 가져오니까 [0]으로 설정해줘야 할 것\n\n//onclick은 하나의 이벤트만 붙음\n\n//복수 이벤트의 붙이려면 attachment라던가\n\nfloat -&gt; css left 지정, 자주 쓰기 때문에 배워둘 가치가 있다\n\nSpan input 보여주기 숨기기\n\n\n\nnextelementsibling\n\nthis.style.display = &#39;none&#39;\n\nheader.InputField.focus();\n\ncard.queryselector  // 범위를 좁혀주는 식으로 셀렉터 지정.\n\nthis.blur(); //포커스 아웃\n\ncard.remove() -&gt; none은 아님\n\n\ninsertAdjacentHTML 유용 꼭 배워둘 것</code></pre></div>\n<p><a href=\"https://developer.mozilla.org/ko/docs/Web/API/Element/insertAdjacentHTML\">https://developer.mozilla.org/ko/docs/Web/API/Element/insertAdjacentHTML</a></p>\n<p><a href=\"https://wonism.github.io/innerhtml-insertadjacenthtml/\">https://wonism.github.io/innerhtml-insertadjacenthtml/</a> innerHTML과 insertAdjacentHTML의 차이</p>\n<ul>\n<li>\n<p>다음에는 영어 타자연습 프로그램을 제작해볼까?</p>\n<p>생각 : 카운터로 쓰고, 배열에서 문장 불러오고, 버튼이나 엔터 눌러서 입력하고, 일치 여부 검사해서 점수 매기고.</p>\n</li>\n</ul>","frontmatter":{"title":"트렐로 작업을 하며 느낀 점","date":"August 18, 2018"}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"slug":"/til/20180818 트렐로 작업을 하며 느낀 점/","previous":{"fields":{"slug":"/til/20180816-0817 IAT 준비/"},"frontmatter":{"title":"IAT 준비","category":"TIL"}},"next":{"fields":{"slug":"/til/20180820 What is node + html review/"},"frontmatter":{"title":"What is node + html review","category":"TIL"}}}}