{"data":{"site":{"siteMetadata":{"title":"lastrites2018","author":"lastrites2018","siteUrl":"https://lastrites2018.netlify.com","comment":{"disqusShortName":"","utterances":"lastrites2018/gatsby-first-blog"},"sponsor":{"buyMeACoffeeId":""}}},"markdownRemark":{"id":"ad94324d-8427-5d91-8ad5-4abe56510ea3","excerpt":"첫 시간은 환경 설정. nvm을 이용한 node-js 설치 ubuntu 설치(window 환경인 경우에) node.js 설치 환경세팅 https://github.com/creationix/nvm cd ~ 홈 디렉토리 홈 디렉토리에 .bash_profile 로 저장해주기 js code 옵션 + 원하는 곳 클릭 커맨드 + d 입력 json의 경우는 무조건 \"\"로 작성해줄 것 scope review scope는 중첩 가능 기본적으로 function level scope 전역 변수는 window…","html":"<p>첫 시간은 환경 설정.</p>\n<ol>\n<li>nvm을 이용한 node-js 설치</li>\n<li>ubuntu 설치(window 환경인 경우에)</li>\n</ol>\n<h2 id=\"nodejs-설치-환경세팅\"><a href=\"#nodejs-%EC%84%A4%EC%B9%98-%ED%99%98%EA%B2%BD%EC%84%B8%ED%8C%85\" aria-label=\"nodejs 설치 환경세팅 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>node.js 설치 환경세팅</h2>\n<p><a href=\"https://github.com/creationix/nvm\">https://github.com/creationix/nvm</a></p>\n<p>cd ~ 홈 디렉토리</p>\n<p>홈 디렉토리에 .bash_profile 로 저장해주기</p>\n<h2 id=\"js-code\"><a href=\"#js-code\" aria-label=\"js code 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>js code</h2>\n<p>옵션 + 원하는 곳 클릭</p>\n<p>커맨드 + d 입력</p>\n<p>json의 경우는 무조건 \"\"로 작성해줄 것</p>\n<h2 id=\"scope-review\"><a href=\"#scope-review\" aria-label=\"scope 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>scope review</h2>\n<ul>\n<li>\n<p>scope는 중첩 가능</p>\n</li>\n<li>\n<p>기본적으로 function level scope</p>\n</li>\n<li>\n<p>전역 변수는 window 객체와 연결(node.js에서는 global)</p>\n</li>\n<li>\n<p>var 변수 선언은 scope 상단으로 hoisting 됨</p>\n</li>\n</ul>\n<h2 id=\"렉시컬-스코프-vs-다이나믹-스코프\"><a href=\"#%EB%A0%89%EC%8B%9C%EC%BB%AC-%EC%8A%A4%EC%BD%94%ED%94%84-vs-%EB%8B%A4%EC%9D%B4%EB%82%98%EB%AF%B9-%EC%8A%A4%EC%BD%94%ED%94%84\" aria-label=\"렉시컬 스코프 vs 다이나믹 스코프 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>렉시컬 스코프 vs 다이나믹 스코프</h2>\n<ul>\n<li>유효 범위(scope) : 코드를 작성할 때(lexical) 결정</li>\n<li>this(execution context) : 함수가 실행될 때(run-time, dynamically) 결정됨</li>\n</ul>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">for</span> <span class=\"token punctuation\">(</span><span class=\"token keyword\">let</span> i<span class=\"token operator\">=</span><span class=\"token number\">0</span><span class=\"token punctuation\">;</span> i<span class=\"token operator\">&lt;</span><span class=\"token number\">5</span> i<span class=\"token operator\">++</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>i<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\nconsole<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>i<span class=\"token punctuation\">)</span> <span class=\"token comment\">// 0,1,2,3,4, 참조 에러 i is not defined</span>\n<span class=\"token keyword\">for</span> <span class=\"token punctuation\">(</span><span class=\"token keyword\">var</span> i<span class=\"token operator\">=</span><span class=\"token number\">0</span><span class=\"token punctuation\">;</span> i<span class=\"token operator\">&lt;</span><span class=\"token number\">5</span> i<span class=\"token operator\">++</span><span class=\"token punctuation\">)</span>\n        console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>i<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\nconsole<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>i<span class=\"token punctuation\">)</span> <span class=\"token operator\">/</span> <span class=\"token operator\">?</span>\n\n    <span class=\"token comment\">//IIFE</span>\n    <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    <span class=\"token keyword\">var</span> a <span class=\"token operator\">=</span> <span class=\"token string\">'즉시 실행'</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><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\t<span class=\"token comment\">// let으로 커버 가능</span>\n<span class=\"token punctuation\">{</span>\n   <span class=\"token keyword\">var</span> a <span class=\"token operator\">=</span> <span class=\"token string\">'즉시 실행'</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><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<h2 id=\"the-closure-pattern\"><a href=\"#the-closure-pattern\" aria-label=\"the closure pattern 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>The Closure Pattern</h2>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\">바깥에서 접근가능하지 않은 변수가 클로저 변수\n\n<span class=\"token keyword\">var</span> <span class=\"token function-variable function\">makeMultiplier</span> <span class=\"token operator\">=</span> <span class=\"token keyword\">function</span><span class=\"token punctuation\">(</span>multiplier<span class=\"token punctuation\">)</span><span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">return</span> <span class=\"token keyword\">function</span><span class=\"token punctuation\">(</span>n<span class=\"token punctuation\">)</span><span class=\"token punctuation\">{</span>\n        <span class=\"token keyword\">return</span> miltiplier\n    <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<p>메모이즈 패턴 솔루션 보고 다시 한 번 공부해볼 것.</p>\n<h2 id=\"currying\"><a href=\"#currying\" aria-label=\"currying 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>CURRYING</h2>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token function-variable function\">makeTag</span> <span class=\"token operator\">=</span> <span class=\"token keyword\">function</span><span class=\"token punctuation\">(</span>tagName<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">return</span> <span class=\"token keyword\">function</span><span class=\"token punctuation\">(</span>content<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n<span class=\"token keyword\">return</span> <span class=\"token string\">''</span>\n    <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token operator\">-</span><span class=\"token operator\">></span>이걸 <span class=\"token operator\">&lt;</span>p<span class=\"token operator\">></span><span class=\"token string\">'여기'</span><span class=\"token operator\">&lt;</span><span class=\"token operator\">/</span>p<span class=\"token operator\">></span>\n\n<span class=\"token comment\">// 경진님 코드</span>\n<span class=\"token keyword\">const</span> <span class=\"token function-variable function\">makeTag</span> <span class=\"token operator\">=</span> <span class=\"token keyword\">function</span><span class=\"token punctuation\">(</span>tagName<span class=\"token punctuation\">)</span><span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">return</span> <span class=\"token keyword\">function</span><span class=\"token punctuation\">(</span>content<span class=\"token punctuation\">)</span><span class=\"token punctuation\">{</span>\n        <span class=\"token keyword\">return</span> <span class=\"token template-string\"><span class=\"token string\">`&lt;</span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${</span>tagName<span class=\"token interpolation-punctuation punctuation\">}</span></span><span class=\"token string\">> </span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${</span>content<span class=\"token interpolation-punctuation punctuation\">}</span></span><span class=\"token string\"> &lt;/</span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${</span>tagName<span class=\"token interpolation-punctuation punctuation\">}</span></span><span class=\"token string\">>`</span></span>\n    <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token comment\">//함수가 떨어진다는 것은 실행이 가능한 애라는 것makeTag('p')만 실행했을 경우</span>\n<span class=\"token function\">makeTag</span><span class=\"token punctuation\">(</span><span class=\"token string\">'p'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">(</span><span class=\"token string\">'내용'</span><span class=\"token punctuation\">)</span>\n<span class=\"token string\">\"&lt;p>내용&lt;/p>\"</span></code></pre></div>\n<ul>\n<li>커링을 리커시브하게 만들어보기(도전과제)</li>\n</ul>\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\">sum3</span><span class=\"token punctuation\">(</span>x<span class=\"token punctuation\">,</span> y<span class=\"token punctuation\">,</span> z<span class=\"token punctuation\">)</span></code></pre></div>\n<p>sum(3)(5)(7)(5)(3) -> 풀어보기 무한정</p>\n<p>내일은 this 관련 설명</p>\n<h2 id=\"페어-프로그래밍\"><a href=\"#%ED%8E%98%EC%96%B4-%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D\" 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>나눠서 할 수 있어야 한다. 내가 잘하면 어떻게 이 사람을 쉽게 이해시킬 수 있을까를 고민해야 한다. 고수는 쉬운 언어로 말한다. 쉬운 API. 내가 못하면 빨리 따라가야 한다. 어떻게 이 사람의 박자에 맞춰갈 수 있을까. 절대로 안 좋은 것은, 다른 박자로 가는 것.</p>\n<p>resolution. 혹시 이번 페어가 망하면, 깔끔하게 잊고 다음에 집중하면 됨.</p>\n<p>싸우는 것은 좋다. 안 싸우는 것이 더 이상하다. 다만, 감정적으로 가져가진 말 것. 불쾌한 행동이 있다고 느꼈다면, 바로 이야기를 꺼내고, 그 자리에서 바로 바로 말할 것. 감정을 오래 가져가지 말 것.</p>","frontmatter":{"title":"Immersive Sprint - Sprint","date":"September 17, 2018"}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"slug":"/til/20180917 IM08D01 Sprint/","previous":{"fields":{"slug":"/til/20180913-20180916 week summary/"},"frontmatter":{"title":"0913-0916 week summary","category":"TIL"}},"next":{"fields":{"slug":"/til/20180917 IM08D01 OT/"},"frontmatter":{"title":"이머시브 8기 오리엔테이션","category":"TIL"}}}}