{"data":{"site":{"siteMetadata":{"title":"lastrites2018","author":"lastrites2018","siteUrl":"https://lastrites2018.netlify.com","comment":{"disqusShortName":"","utterances":"lastrites2018/gatsby-first-blog"},"sponsor":{"buyMeACoffeeId":""}}},"markdownRemark":{"id":"32fea751-2ed2-5a5d-8cac-8b55bcc843be","excerpt":"checkpoint 3 this free function invocation -> free function invocation은 그냥 function invocation이라고 생각하면 됨. free에 특별한 의미는 없다. sprint review 멈춰서서 생각하거나 되돌아보지 않을 경우엔 실수를 반복한다. 그래서 되돌아보기 위한 장치가 필요하다. Computer Programming CPU는 연산. Compile -> 기계어로 변환. -> 10101…","html":"<h2 id=\"checkpoint-3-this\"><a href=\"#checkpoint-3-this\" aria-label=\"checkpoint 3 this 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>checkpoint 3 this</h2>\n<div class=\"gatsby-highlight\" data-language=\"js\"><pre class=\"language-js\"><code class=\"language-js\"><span class=\"token number\">1.</span> <span class=\"token keyword\">this</span>는 arrow <span class=\"token keyword\">function</span> 일 경우에만 lexicial\n\n<span class=\"token string\">'this'</span> means An object that the invoked <span class=\"token keyword\">function</span> points to when executing<span class=\"token punctuation\">.</span>\n\n<span class=\"token number\">2.</span>\n<span class=\"token keyword\">var</span> x <span class=\"token operator\">=</span> <span class=\"token number\">10</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">var</span> <span class=\"token function-variable function\">strangeAdd</span> <span class=\"token operator\">=</span> <span class=\"token keyword\">function</span> <span class=\"token punctuation\">(</span>y<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">var</span> x <span class=\"token operator\">=</span> <span class=\"token number\">20</span><span class=\"token punctuation\">;</span>\n  <span class=\"token keyword\">return</span> <span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span>x <span class=\"token operator\">+</span> y\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span>\nresult <span class=\"token operator\">=</span> <span class=\"token function\">strangeAdd</span><span class=\"token punctuation\">(</span><span class=\"token number\">10</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token string\">'this'</span>는 window\n    <span class=\"token operator\">-</span><span class=\"token operator\">></span> <span class=\"token keyword\">function</span> invocation<span class=\"token punctuation\">,</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> 로 호출하는 경우엔 bind를 하지 않는 이상은 보통 window\n\n\n<span class=\"token number\">3.</span>\nLook to the <span class=\"token keyword\">function</span> <span class=\"token keyword\">in</span> <span class=\"token operator\">*</span>which<span class=\"token operator\">*</span> it is defined\n<span class=\"token operator\">-</span> that's what the context is bound to<span class=\"token punctuation\">.</span>\n<span class=\"token comment\">// 이건 arrow function 에서의 this 설명.</span>\n\n<span class=\"token function\">which</span><span class=\"token punctuation\">(</span>lexical 하다는 의미<span class=\"token punctuation\">)</span> arrow <span class=\"token keyword\">function</span>을 사용한 함수는 <span class=\"token string\">'어디에서'</span> 호출되는지만 고려해도 되기 때문<span class=\"token punctuation\">.</span>\n\n화살표 함수는 언제나 자신을 포함하는 외부 스코프에서 <span class=\"token keyword\">this</span>를 계승 받는다<span class=\"token punctuation\">.</span>\n화살표 함수는 자신만의 <span class=\"token keyword\">this</span>를 생성하지 않고 자신을 포함하고 있는 상위 컨텍스트로 부터 <span class=\"token keyword\">this</span>를 계승 받는다<span class=\"token punctuation\">.</span>\n이를 Lexical <span class=\"token keyword\">this</span>라 한다\n\n<span class=\"token number\">5.</span> window or the global object<span class=\"token punctuation\">.</span>\n<span class=\"token number\">6.</span> obj\n<span class=\"token number\">7.</span>\n<span class=\"token comment\">// 틀림</span>\n<span class=\"token keyword\">var</span> obj <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  foo<span class=\"token punctuation\">:</span> <span class=\"token keyword\">function</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><span class=\"token keyword\">this</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token keyword\">var</span> fn <span class=\"token operator\">=</span> obj<span class=\"token punctuation\">.</span>foo<span class=\"token punctuation\">;</span>\n<span class=\"token function\">fn</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\nwindow or the global object<span class=\"token punctuation\">.</span>\n\n<span class=\"token number\">8.</span>\n<span class=\"token keyword\">var</span> obj <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  foo<span class=\"token punctuation\">:</span> <span class=\"token keyword\">function</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><span class=\"token keyword\">this</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token keyword\">var</span> obj2 <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  foo<span class=\"token punctuation\">:</span> obj<span class=\"token punctuation\">.</span>foo\n<span class=\"token punctuation\">}</span>\n\nobj<span class=\"token punctuation\">.</span>foo<span class=\"token punctuation\">.</span><span class=\"token function\">call</span><span class=\"token punctuation\">(</span>obj2<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token comment\">//obj2</span>\n    obj<span class=\"token punctuation\">.</span>foo<span class=\"token punctuation\">.</span><span class=\"token function\">call</span><span class=\"token punctuation\">(</span>obj2<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    call 나온 경우 앞뒤 안 <span class=\"token function\">보고</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span>안만 보면 됨<span class=\"token punctuation\">.</span></code></pre></div>\n<h2 id=\"free-function-invocation\"><a href=\"#free-function-invocation\" aria-label=\"free function invocation 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>free function invocation</h2>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token function\">foo</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token comment\">// function invocation</span>\nobj<span class=\"token punctuation\">.</span><span class=\"token function\">foo</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token comment\">// method invocation</span></code></pre></div>\n<p>-> free function invocation은 그냥 function invocation이라고 생각하면 됨. free에 특별한 의미는 없다.</p>\n<h2 id=\"sprint-review\"><a href=\"#sprint-review\" aria-label=\"sprint review 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>sprint review</h2>\n<p>멈춰서서 생각하거나 되돌아보지 않을 경우엔 실수를 반복한다. 그래서 되돌아보기 위한 장치가 필요하다.</p>\n<h2 id=\"computer-programming\"><a href=\"#computer-programming\" aria-label=\"computer programming 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>Computer Programming</h2>\n<p>CPU는 연산.</p>\n<p>Compile -> 기계어로 변환. -> 101010으로 한번 더 바꿈.</p>\n<p>컴파일은 오래 걸림. embeded programming(C, 한정된 메모리에서 최적화하기 위해 애를 쓰게 됨)</p>\n<hr>\n<p>ES6 -> ES5 transpiler -> babel</p>\n<p>HL languages -> High-Level</p>\n<p>기존 프로그래밍은 procedural languages 위에서 아래로 내려가는 식의 절차적인 언어(procedural Languages)</p>\n<h2 id=\"oopobject-oriented-languages\"><a href=\"#oopobject-oriented-languages\" aria-label=\"oopobject oriented languages 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>OOP(Object-Oriented Languages)</h2>\n<p>과거엔 웹 앱의 개념이 없었음</p>\n<p>웹 사이트 - 정적static임</p>\n<p>웹 앱 - 동적임dynamic</p>\n<p>OOP는 확고한 무언가가 아니라 추상적인 프로그램 디자인 철학</p>\n<ul>\n<li>\n<p>OOP는 세상이 객체로 이루어져있다고 생각하는 게 핵심 아이디어다.</p>\n<p>— 세상을 객체로 생각하기에 객체를 지향하는 프로그래밍인 거겠지.</p>\n</li>\n<li>\n<p>클래스는 객체를 만들기 위한 프로토타입이자 아이디어, 청사진이다.</p>\n</li>\n</ul>\n<p>뭔가 하나의 틀을 만들자! - 객체!</p>\n<p>class -> 자바스크립트는 결국 function인데, (function은 object니까??)</p>\n<ul>\n<li>특징(property)과 액션(method)</li>\n</ul>\n<p>정적static인 성질(property), 동적인 메소드(dynamic) 2가지로 나눔.</p>\n<h2 id=\"oop의-4가지-컨셉\"><a href=\"#oop%EC%9D%98-4%EA%B0%80%EC%A7%80-%EC%BB%A8%EC%85%89\" aria-label=\"oop의 4가지 컨셉 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>OOP의 4가지 컨셉</h2>\n<ul>\n<li>캡슐화Encapsulation</li>\n</ul>\n<p>두 가지 색으로 구분되는 하나의 알약을 떠올려보자.\n하얀색 면엔 밸류variables를 담고, 파란색 면엔 메소드methods를 담는다.\n그 두 가지를 가지고 있는 캡슐이 클래스.</p>\n<p>자바스크립트는 외부에서 수정 가능했다. 그 문제를 해결한 타입스크립트 이후 자바 세계가 달라짐.</p>\n<p>캡슐화를 잘 해놓으면 하나만 바꾸면 되는데, 그렇지 못하면 전부 다 바꿔야 하니까 문제가 생김.</p>\n<ul>\n<li>\n<p>상속 Inheritance</p>\n<p>재사용성이 높아짐.</p>\n<p>class는 틀 , instance는 object, 즉 틀로 찍은 object</p>\n<p><code class=\"language-text\">new DATE</code> -> 여기서 DATE가 틀</p>\n</li>\n<li>\n<p>추상적 Abstarction</p>\n<p>무대 뒤(내부)를 보여주지 않음. 계산기를 떠올려보자. 중간과정을 보여주지 않고, 입력과 결과만 보여준다.</p>\n</li>\n<li>\n<p>다형성 Polymorphism ??? (어려운 개념)</p>\n<p>아빠 class의 Draw()메소드와 아들 클래스sub class에서 쓰는 메소드가 다를 수 있다, 상속 받았는데도.</p>\n</li>\n</ul>\n<p>객체 지향 자체가 철학에 가깝기 때문에 추상적으로 대답할 수밖에 없다.\n누가 물어본다면 OOP의 특징을 잘 설명하려고 할 것.</p>\n<h2 id=\"알고리즘\"><a href=\"#%EC%95%8C%EA%B3%A0%EB%A6%AC%EC%A6%98\" 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<ul>\n<li>슈도코드 : 스케치</li>\n</ul>\n<p>중요한 건 전략이지, 문법이 아니다.</p>\n<ul>\n<li>알고리즘을 설계할 때의 고려할 두 요소</li>\n</ul>\n<p>시간</p>\n<p>공간 - 부동산 개념</p>\n<h1 id=\"자료구조\"><a href=\"#%EC%9E%90%EB%A3%8C%EA%B5%AC%EC%A1%B0\" 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>자료구조</h1>\n<p>데이터를 어떤 공간에 어떻게 저장할 것인지 설계</p>\n<p>ex) Array, Object</p>\n<blockquote>\n<p>적절한 자료 구조를 선택하는 것이 좋은 알고리즘을 만들 수 있다</p>\n</blockquote>\n<ul>\n<li>Queue : 줄</li>\n</ul>\n<p>선입선출. 먼저 들어온 것이 먼저 빠짐. (KFC 줄 서기 생각)</p>\n<blockquote>\n<p>과제에서 큐 구현시에 최적화는 신경쓰지 않고 구현한다</p>\n</blockquote>\n<ul>\n<li>\n<p>Stack : 쌓인 접시 또는 프링글스</p>\n<p>선입후출.\n뒤에 들어온 애가 먼저 나감, 접시가 쌓여있는 걸 생각해보자. 맨 위에 올라온 접시가 맨 먼저 사용된다.</p>\n<ul>\n<li>전자계산기</li>\n<li>미로</li>\n<li>컴퓨터 메모리 관리 (call, stack)</li>\n</ul>\n</li>\n</ul>","frontmatter":{"title":"IM08D03 DATA Structure Day 1 - OOP, QueueStack","date":"September 19, 2018"}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"slug":"/til/20180919 IM08D03 DATA Structure Day 1 - OOP, QueueStack/","previous":{"fields":{"slug":"/til/20180918 IM08D02 underbar review/"},"frontmatter":{"title":"Immersive Sprint - underbar review","category":"TIL"}},"next":{"fields":{"slug":"/til/20180920 IM08D04 DATA Structure Day 2/"},"frontmatter":{"title":"Immersive Sprint - DATA Structure Day 2","category":"TIL"}}}}