{"data":{"site":{"siteMetadata":{"title":"lastrites2018","author":"lastrites2018","siteUrl":"https://lastrites2018.netlify.com","comment":{"disqusShortName":"","utterances":"lastrites2018/gatsby-first-blog"},"sponsor":{"buyMeACoffeeId":""}}},"markdownRemark":{"id":"765ba17a-6175-5502-a7fd-eda5569d5ac4","excerpt":"IAT 준비 IAT를 대비해서 공부해야 할 부분들. IAT에서 중점적으로 체크하는 부분 : basic conditional statement & operator array iteration, object manipulation underbar 구현 (not advanced) underbar 일부 재구현해보기. DOM manipulation (jQuery 사용은 optional) & event handling 전반 DOM…","html":"<h1 id=\"iat-준비\"><a href=\"#iat-%EC%A4%80%EB%B9%84\" aria-label=\"iat 준비 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>IAT 준비</h1>\n<p>IAT를 대비해서 공부해야 할 부분들. IAT에서 중점적으로 체크하는 부분 :</p>\n<ul>\n<li>\n<p>basic conditional statement &#x26; operator</p>\n</li>\n<li>\n<p>array iteration, object manipulation</p>\n</li>\n<li>\n<p>underbar 구현 (not advanced)</p>\n<p>underbar 일부 재구현해보기.</p>\n</li>\n<li>\n<p>DOM manipulation (jQuery 사용은 optional) &#x26; event handling 전반</p>\n<p>DOM 조작이야 트렐로 하면서 좀 더 익숙해지면 될 거고, 이벤트 핸들링은 여러가지 해보기.</p>\n</li>\n<li>\n<p>scope, closure, <code class=\"language-text\">this</code> binding pattern 개념 및 구현</p>\n</li>\n<li>\n<p>recursion searching algorithm 구현</p>\n</li>\n</ul>\n<p>시험과정은 모두 녹화해야하며, 실제 시험시에는 official documents만 참조할 수 있습니다.</p>\n<ul>\n<li>참조 가능: mdn, w3school, api.jquery.com</li>\n<li>참조 불가능: Stack Overflow, 런코, 생활코딩 등</li>\n</ul>\n<h2 id=\"더글라스-크락포드-자바스크립트-핵심-가이드\"><a href=\"#%EB%8D%94%EA%B8%80%EB%9D%BC%EC%8A%A4-%ED%81%AC%EB%9D%BD%ED%8F%AC%EB%93%9C-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%ED%95%B5%EC%8B%AC-%EA%B0%80%EC%9D%B4%EB%93%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>자바스크립트에서는 함수에서 쓰는 모든 변수를 함수 첫 부분에 선언하는 것이 최선</li>\n</ul>\n<p>대부분의 언어에서는 변수를 가능한 늦게, 즉 처음 사용하기 바로 전에 선언해서 사용할 것을 권고. 하지만, 블록 유효범위를 지원하지 않기 때문에 권고가 적용되지 않음.</p>\n<p>-> ES6부터는 let, const 지원하기 때문에 상황에 따라서 다르지 않을까?</p>\n<p>존재하지 않는 속성, 즉 undefined의 속성을 참조하려 할 때 TypeError 예외가 발생합니다. 이런 상황을 방지하기 위해서 다음과 같이 &#x26;&#x26; 연산자를 사용할 수 있습니다.</p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\">flight<span class=\"token punctuation\">.</span>equipment <span class=\"token comment\">// undefined</span>\nflight<span class=\"token punctuation\">.</span>equipment<span class=\"token punctuation\">.</span>model <span class=\"token comment\">// throw \"TypeError\"</span>\nflight<span class=\"token punctuation\">.</span>equipment <span class=\"token operator\">&amp;&amp;</span> flight<span class=\"token punctuation\">.</span>equipment<span class=\"token punctuation\">.</span>model <span class=\"token comment\">//undefined</span></code></pre></div>\n<ul>\n<li>\n<p>객체는 참조 방식으로 전달됩니다. 결코 복사되지 않습니다.</p>\n</li>\n<li>\n<p>클로저(closure)</p>\n</li>\n</ul>\n<p>내부 함수에서 자신을 포함하고 있는 외부 함수의 매개변수와 변수들을 접근할 수 있다는 것. this와 arguments는 예외. 외부 함수가 사라져도, 내부 함수에서 계속 해서 외부 함수의 변수에 접근하는 상황.</p>\n<p>함수가 자신이 생성된 함수, 즉 자신을 내포하는 함수의 문맥(context)에 접근할 수 있을 때, 이러한 것을 클로저라고 부른다.</p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">function</span> <span class=\"token function\">outer</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">var</span> a <span class=\"token operator\">=</span> <span class=\"token number\">3</span>\n  <span class=\"token keyword\">function</span> <span class=\"token function\">inner</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>a<span class=\"token punctuation\">)</span>\n  <span class=\"token punctuation\">}</span>\n  <span class=\"token function\">inner</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token function\">outer</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token comment\">//3</span>\n<span class=\"token function\">outer</span><span class=\"token punctuation\">(</span><span class=\"token number\">4</span><span class=\"token punctuation\">)</span> <span class=\"token comment\">// 3</span></code></pre></div>\n<p>클로저의 다른 정의들</p>\n<blockquote>\n<p>자바스크립트내에서는 함수의 생명주기는 끝이 났지만 함수내의 변수를 내부함수가 참조하고 있기 때문에 유지되어 접근할수 있는 함수를 클로저라고 합니다.</p>\n<p><a href=\"https://blog.outsider.ne.kr/506\">출처</a></p>\n<p>클로져(Closure) is what?</p>\n<p>Scope에 제약을 받지 않는 변수들을 포함하고 있는 코드블록이다.</p>\n<p>출처:</p>\n<p><a href=\"http://rhio.tistory.com/208\">http://rhio.tistory.com/208</a> [Rhio.Kim’s Blog - drawing Laputa Web -]</p>\n</blockquote>\n<p>(function(i) {})(i);</p>\n<h1 id=\"this-5가지-컨텍스트-안-보고-정리\"><a href=\"#this-5%EA%B0%80%EC%A7%80-%EC%BB%A8%ED%85%8D%EC%8A%A4%ED%8A%B8-%EC%95%88-%EB%B3%B4%EA%B3%A0-%EC%A0%95%EB%A6%AC\" aria-label=\"this 5가지 컨텍스트 안 보고 정리 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>this 5가지 컨텍스트 안 보고 정리</h1>\n<ol>\n<li>global -> window</li>\n<li>function -> window</li>\n<li>메소드 -> 부모</li>\n<li>new -> 새로운 인스턴스</li>\n<li>call, array -> 첫번째 인자</li>\n</ol>\n<blockquote>\n<p>함수가 특정 오브젝트의 실행 컨텍스트로 실행될 때… 그러니까 메소드로 실행될 때 메소드 내부에 있는 함수의 컨텍스트는 글로벌.</p>\n</blockquote>\n<h2 id=\"생성자constructor가-뭐지\"><a href=\"#%EC%83%9D%EC%84%B1%EC%9E%90constructor%EA%B0%80-%EB%AD%90%EC%A7%80\" aria-label=\"생성자constructor가 뭐지 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>생성자constructor가 뭐지?</h2>\n<p>자바스크립트에서 생성자(construtor)는 객체를 생성할 때 최초로 호출되는 함수를 의미합니다.</p>\n<p><a href=\"https://www.bsidesoft.com/?p=6102\">https://www.bsidesoft.com/?p=6102</a></p>\n<h2 id=\"노드가-뭐야\"><a href=\"#%EB%85%B8%EB%93%9C%EA%B0%80-%EB%AD%90%EC%95%BC\" 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>HTML 문서의 모든 것이 노드</p>\n<p>노드의 종류</p>\n<ul>\n<li>문서 노드 document node</li>\n<li>요소 노드 element node html 태그 포함</li>\n<li>속성 노드 attribute node</li>\n<li>텍스트 노드 text node</li>\n<li>주석 노드</li>\n</ul>","frontmatter":{"title":"IAT 준비","date":"August 16, 2018"}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"slug":"/til/20180816-0817 IAT 준비/","previous":{"fields":{"slug":"/til/20180814 trello 구현하기 2회차/"},"frontmatter":{"title":"trello 구현하기 2회차","category":"TIL"}},"next":{"fields":{"slug":"/til/20180818 트렐로 작업을 하며 느낀 점/"},"frontmatter":{"title":"트렐로 작업을 하며 느낀 점","category":"TIL"}}}}