tag:blogger.com,1999:blog-82776010564357853972024-03-05T03:36:01.261-08:00코드여행Anonymoushttp://www.blogger.com/profile/00143779259898222603noreply@blogger.comBlogger22125tag:blogger.com,1999:blog-8277601056435785397.post-70185945185403347632018-09-02T18:21:00.000-07:002018-09-02T18:21:28.577-07:00Prettier 적용하기(with vscode & eslint)<div data-pm-slice="1 1 []">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">Prettier 는 표준이라고 할만한 Code Formatter 입니다. 아래 공식 사이트에 가면 좋은 설명을 볼 수 있습니다.</span></div>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">기존 사용되던 .editorconfig 설정 파일을 인식하므로 따로 editorconfig와 연동할 필요는 없습니다. (.prettier 설정파일이 있을시 그것을 더 우선시 하므로 주의)</span><br />
<a href="https://prettier.io/"><span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">https://prettier.io/</span></a><br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">적용 방법은 다음과 같습니다.</span><br />
<h2>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">1.Install <span class="code" style="white-space: pre-wrap;">prettier-eslint</span></span></h2>
<pre><code class=""><span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">npm install --save-dev prettier-eslint</span></code></pre>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">prettier-eslint 를 설치하면 prettier 도 같이 설치되므로 prettier는 따로 설치할 필요 없습니다.</span><br />
<h2>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">2.Install <span class="code" style="white-space: pre-wrap;">prettier-vscode</span> plugin at marketplace</span></h2>
<pre><code class=""><span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">ext install esbenp.prettier-vscode</span></code></pre>
<h2>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">3.Set "prettier.eslintIntegration: true" in vs-code settings</span></h2>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
<h2>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">Reference</span></h2>
<ul>
<li><span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><a href="https://prettier.io/blog/2017/12/05/1.9.0.html#add-editorconfig-support-3255-https-githubcom-prettier-prettier-pull-3255-by-josephfrazier-https-githubcom-josephfrazier">https://prettier.io/blog/2017/12/05/1.9.0.html#add-editorconfig-support-3255-https-githubcom-prettier-prettier-pull-3255-by-josephfrazier-https-githubcom-josephfrazier</a> (.editorconfig 파일 지원에 대한 글)</span></li>
<li><span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><a href="https://github.com/prettier/prettier-eslint/issues/135">https://github.com/prettier/prettier-eslint/issues/135</a>(추가 설명)</span></li>
</ul>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
<br />Anonymoushttp://www.blogger.com/profile/00143779259898222603noreply@blogger.com0tag:blogger.com,1999:blog-8277601056435785397.post-36664896658893307922017-03-04T19:08:00.001-08:002017-03-05T00:42:52.588-08:00Webpack2 에서 React HMR(Hot Module Replacement) 설정하기<h1 id="webpack2">
Webpack2</h1>
<a href="https://medium.com/webpack/webpack-2-and-beyond-40520af9067f#.h3mdduasu">얼마 전에</a> Webpack이 2버전을 올린지 꽤 되었죠? <br />
오늘은 Webpack2 버전 부터 시작하는 저같은 분을 위해 간단한 세팅하는 포스팅을 올릴께요.<br />
<br />
먼저 Webpack은, Javascript 모듈 번들러입니다. 프론트엔드 환경은 서버측과 달리 기본적으로 모듈 시스템이 제공되지 않기 때문에 Webpack이 모든 asset(.html, .js, .css, 이미지, … 등)을 하나 이상의 bundle.js 파일로 통합하고, 그 과정에서 import, require 등의 구문을 읽어들여서 의존성 관리를 Webpack이 알아서 해주는 것입니다.<br />
<br />
Webpack 을 이해하는데 있어서 기본적인 4가지 Concept 은 <a href="https://webpack.js.org/concepts/">여기</a>에 잘 나와있지만, 간단하게 정리하고 넘어가겠습니다.<br />
<h2 id="entry">
Entry</h2>
Entry는 웹팩이 Application 을 읽어들일 첫번째 시작점입니다. ‘여기서부터 시작해서, 여기에 추가된 의존성을 따라서 번들링해라’라고 지정해주는 것입니다.<br />
<h2 id="output">
Output</h2>
Output 은 번들링이 끝난 후 결과물을 어느 경로에 놓고, 무슨 파일명으로 저장할 지 등을 설정하는 옵션입니다.<br />
<h2 id="loaders">
Loaders</h2>
Webpack은 모든 파일(.css, .html, .scss, .jpg, …등)을 모듈로 취급합니다. Loaders는 이러한 파일들을 의존성 그래프에 추가할때 Webpack이 알아들을 수 있는 Javascript module 로 모조리 변형시킵니다.<br />
<br />
Loaders 에서는 두 가지 개념이 중요합니다.<br />
<blockquote>
<code>test</code>: 어떤 특정 파일이 로더에 의해 변형되어야 하는지 설정 <br />
<code>use</code>: 여기에 명시한 로더를 사용해서 파일이 종속성 그래프에 추가될 수 있도록 변형합니다.</blockquote>
<pre class="prettyprint"><code class=" hljs rust"><span class="hljs-comment">//e.g)</span>
module: {
rules: [
{test: /\.(js|jsx)$/, <span class="hljs-keyword">use</span>: <span class="hljs-string">'babel-loader'</span>}
]
}</code></pre>
예를 들어 위 문장은 웹팩에게, “프로젝트 내에서 <code>import</code> 나 <code>require()</code> 문 안의 ’js’나 ‘jsx’ 확장자 파일을 보면 번들에 추가하기 전에 babel-loader를 사용해서 변형시켜” 라고 말하는 것입니다.<br />
<h2 id="plugins">
Plugins</h2>
플러그인은 흔히 생각하는 확장기능이라고 생각하면 됩니다. 원하는 기능을 plugins array에 new 구문과 함께 추가하기만 하면 됩니다.<br />
<h2 id="hmrhod-module-replacement">
HMR(Hot Module Replacement)</h2>
React.js 프로젝트에서 <a href="https://webpack.js.org/guides/hmr-react/">Hot Module Replacement(HMR)</a> 를 설정하려면, 먼저 <a href="https://webpack.js.org/guides/development/#webpack-dev-server">webpack-dev-server</a>에 대해 알아야 합니다. <br />
webpack-dev-server는 코드 변경을 감지하고 자동으로 recompiling 하여 페이지를 refresh 시켜 줍니다. <br />
<br />
더 나아가서, HMR은 앱이 실행중일 때 코드를 변경하였을 경우, 페이지 refresh 없이 해당 모듈을 교체, 추가, 삭제하는 편리한 기능입니다. 따라서 코드를 변경할 때마다 webpack을 실행해서 번들링하고, 앱을 구동하는 recompiling 과정을 생략할 수 있습니다.<br />
<br />
방법에 대한 것은 위 링크에 너무 잘 나와있기 때문에, 저는 <strong>몇가지 주의사항</strong>만 적도록 하겠습니다.<br />
<br />
<ol>
<li><blockquote>
devServer의 contentBase를 output 의 path와 일치시키고, 해당 경로내에 번들(예를 들어, bundle.js)을 불러오는 index.html 파일하나를 꼭 두셔야 합니다.(그렇지 않으면 앱 페이지 대신 디렉토리 구조가 나오는 화면만 보시게 될거에요)</blockquote>
</li>
<li><blockquote>
위 튜토리얼을 모두 따라했는데도 HMR이 아닌 전체 페이지 refresh가 계속 일어난다면, 코드에 에러가 있어서 그럴수도 있습니다. 예를 들어 정의되지 않은 함수를 사용했다거나…</blockquote>
</li>
<li><blockquote>
위 튜토리얼을 그대로 따라하지 않고 프로젝트에 맞게 필요한 부분만 넣으셔도 됩니다.</blockquote>
</li>
<li><blockquote>
react-hot-loader는 HMR 기능에서 state 초기화를 막는 효과를 추가하는 것입니다.</blockquote>
</li>
<li><blockquote>
.babelrc 파일에서 <code>{"modules": false}</code> 를 설정해서 Webpack2의 내장 import 구문 해석과 충돌하지 않도록 해줘야 합니다.</blockquote>
</li>
</ol>
마지막으로 제 프로젝트의 <code>webpack.config.js</code> 와 <code>.babelrc</code> 코드를 올릴테니 참고하시기 바랍니다.<br />
<br />
<pre class="prettyprint"><code class=" hljs coffeescript"><span class="hljs-regexp">//</span> webpack.config.js
<span class="hljs-reserved">const</span> path = <span class="hljs-built_in">require</span>(<span class="hljs-string">'path'</span>);
<span class="hljs-reserved">const</span> webpack = <span class="hljs-built_in">require</span>(<span class="hljs-string">'webpack'</span>);
<span class="hljs-built_in">module</span>.<span class="hljs-built_in">exports</span> = {
<span class="hljs-attribute">entry</span>: [
<span class="hljs-string">'./src/app/index.jsx'</span>,
<span class="hljs-string">'webpack-dev-server/client?http://localhost:8080'</span>,
<span class="hljs-string">'react-hot-loader/patch'</span>,
<span class="hljs-string">'webpack/hot/only-dev-server'</span>,
],
<span class="hljs-attribute">output</span>: {
<span class="hljs-attribute">path</span>: path.resolve(__dirname, <span class="hljs-string">'dist'</span>),
<span class="hljs-attribute">filename</span>: <span class="hljs-string">'bundle.js'</span>,
<span class="hljs-attribute">publicPath</span>: <span class="hljs-string">'/'</span>
},
<span class="hljs-attribute">module</span>: {
<span class="hljs-attribute">rules</span>: [
{
<span class="hljs-attribute">test</span>: <span class="hljs-regexp">/\.(js|jsx)$/</span>,
<span class="hljs-attribute">exclude</span>: <span class="hljs-regexp">/node_modules/</span>,
<span class="hljs-attribute">use</span>: <span class="hljs-string">'babel-loader'</span>,
},
],
},
<span class="hljs-attribute">devtool</span>: <span class="hljs-string">'inline-source-map'</span>,
<span class="hljs-attribute">devServer</span>: {
<span class="hljs-attribute">contentBase</span>: path.join(__dirname, <span class="hljs-string">'dist'</span>),
<span class="hljs-attribute">hot</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attribute">publicPath</span>: <span class="hljs-string">'/'</span>
},
<span class="hljs-attribute">plugins</span>: [
<span class="hljs-keyword">new</span> webpack.HotModuleReplacementPlugin(),
<span class="hljs-keyword">new</span> webpack.NamedModulesPlugin(),
]
};</code></pre>
<pre class="prettyprint"><code class=" hljs cs"><span class="hljs-comment">//.babelrc</span>
{
<span class="hljs-string">"presets"</span>: [
[<span class="hljs-string">"es2015"</span>, {<span class="hljs-string">"modules"</span>: <span class="hljs-keyword">false</span>}],
<span class="hljs-string">"stage-2"</span>,
<span class="hljs-string">"react"</span>
],
<span class="hljs-string">"plugins"</span>: [
<span class="hljs-string">"react-hot-loader/babel"</span>
]
}</code></pre>
Anonymoushttp://www.blogger.com/profile/00143779259898222603noreply@blogger.com0tag:blogger.com,1999:blog-8277601056435785397.post-76584210484690438012016-08-18T21:31:00.001-07:002016-08-18T21:32:23.628-07:00Mac 에서 Android Studio 완전히 제거하기<a href="http://stackoverflow.com/questions/17625622/how-to-completely-uninstall-android-studio">Origin article from stack overflow link</a><br />
Execute these commands from the terminal <br />
<blockquote>
rm -Rf /Applications/Android\ Studio.app <br />
rm -Rf ~/Library/Preferences/AndroidStudio* <br />
rm ~/Library/Preferences/com.google.android.studio.plist <br />
rm -Rf ~/Library/Application\ Support/AndroidStudio* <br />
rm -Rf ~/Library/Logs/AndroidStudio* <br />
rm -Rf ~/Library/Caches/AndroidStudio* </blockquote>
if you would like to delete all projects: <br />
<blockquote>
rm -Rf ~/AndroidStudioProjects </blockquote>
to remove gradle related files (caches & wrapper) <br />
<blockquote>
rm -Rf ~/.gradle </blockquote>
use the below command to delete all Android Virtual Devices(AVDs) and *.keystore. <br />
<pre><code>note: this folder is used by others Android IDE as well, so if you still using other IDE you may not want to delete this folder)
</code></pre>
<blockquote>
rm -Rf ~/.android to delete Android SDK tools <br />
rm -Rf ~/Library/Android* </blockquote>
Anonymoushttp://www.blogger.com/profile/00143779259898222603noreply@blogger.com0tag:blogger.com,1999:blog-8277601056435785397.post-31357827820759134002016-07-24T01:07:00.002-07:002016-07-24T01:55:54.407-07:00Webstorm 에서 File watcher 사용하기(Babel)웹스톰에서 ES6 코딩을 하려고 설정을 바꾸면 File watcher 가 사용 가능하다는 알림이 뜨곤 하는데요..<br />
File watcher 사용법에 대해서 알아보겠습니다.<br />
<br />
먼저 웹스톰 설정(Language & Frameworks | JavaScript) 에서 ECMAScript 6 를 사용하도록 변경하셔야 합니다.<br />
<br />
그러면 ES6에 대해서 코드 자동 완성, 실시간 문법 체크, 모듈과 클래스 네비게이션 등의 보조 기능이 제공됩니다.<br />
<br />
현재 바벨은 트랜스파일러로서 가장 많이 사용되고 있습니다. 웹스톰의 File watchers 를 통해 설정할 수 있습니다.<br />
<br />
File watcher 는 웹스톰의 기본 도구로서 파일이 변경되었을 때 자동으로 커맨드 라인 명령을 실행할 수 있게 해줍니다. 웹스톰에는 바벨을 위한 기본 설정 파일이 제공됩니다. 어떻게 적용하는지 보겠습니다.<br />
<br />
npm 을 통해 Babel CLI 를 설치합니다.<br />
<br />
<blockquote>
npm install --save-dev babel-cli</blockquote>
<br />
그리고 Preferences->Tools->File watchers 메뉴에서 + 버튼을 눌러 바벨 file watcher 를 선택합니다.<br />
File watcher 설정에서, Babel CLI 의 경로를 설정해줍니다.(e.g. node_modules/.bin/babel on OS X)<br />
<br />
이 외에 ES6 트랜스파일링을 위한 Babel 6 을 설치하셔야 합니다. 터미널에서 다음을 실행하세요.<br />
<blockquote>
npm install --save-dev babel-preset-es2015</blockquote>
그리고 .babelrc 파일을 다음과 같이 작성하여 생성합니다.<br />
<br />
<pre class="brush: javascript">{
"presets": ["es2015"]
}
</pre>
그 외에 다른 Watcher 설정들은 미리 정의되어 있으므로, 바로 사용이 가능합니다.<br />
이제 컴파일된 파일들은 원본 파일과 같은 경로에 위치하게 됩니다.
<div
class="fb-like"
data-share="true"
data-width="450"
data-show-faces="true">
</div>Anonymoushttp://www.blogger.com/profile/00143779259898222603noreply@blogger.com3tag:blogger.com,1999:blog-8277601056435785397.post-53821427778652906702016-07-23T22:18:00.003-07:002016-07-23T22:20:18.735-07:00Windows 환경에서 리눅스 기본 명령어 사용하기<a href="http://cmder.net/">http://cmder.net/</a><br />
<br />
찾아봤는데 제일 사용하기 쉬운 것 같다.<br />
리눅스의 기본 명령어 cd,ls,... 같은 것 다 사용 가능하고<br />
예를 들어 cmd 에선<br />
<blockquote>
> node_modules/.bin/webpack</blockquote>
이렇게 상위 폴더에서 하위 폴더 리소스에 접근하는 명령이 불가능한데 이것도 되네..Anonymoushttp://www.blogger.com/profile/00143779259898222603noreply@blogger.com0tag:blogger.com,1999:blog-8277601056435785397.post-4161353160576150212016-07-21T00:45:00.000-07:002016-07-21T23:51:09.469-07:00비동기 함수를 다루는 방법 : PromiseExpress로 웹을 만들다보면 mysql 통신을 위해 비동기 함수를 쓸 일이 자주 생긴다.<br />
예를 들어서 다음과 같은 코드를 쓰고 싶을 때가 있다.<br />
<br />
<br />
<pre class="brush: javascript">router.get('/search', function(req, res){
var result = getSomethingFromDatabase(req.query.keyword);
/* do something with result */
}
function getSomethingFromDatabase(keyword){
var sql = 'SELECT * from TABLE' +
'WHERE column LIKE \'%' + keyword + '%\'';
conn.query(sql, function (err, results) {
return results;
});
}
</pre>
<br />
하지만 conn.query 가 호출되고 results 를 반환하기 전에 이미 search 메서드는 비어있는 변수 result 로 나머지 부분을 실행하게 되므로 원하는 결과는 나오지 않는다.<br />
<br />
conn.query 메서드 안에 원하는 로직을 전부 넣으면 동작이 되지만,<br />
웬지 그런방식으로 코드를 작성하고 싶지 않아서 열심히 구글링을 한 결과 async 나 promise 같은 것들이 있다는 걸 알게되었다.<br />
그러면 둘의 차이는 무엇일까?<br />
<br />
알아본 결과, Async 는 러닝 커브가 작으며 코드가 좀 더 깔끔해지는 장점이 있고, Promise 는 ECMA6 표준으로 채택되었다고 한다.<br />
주목할 점은 Promise 를 사용해 작성한 코드가 동기 프로그래밍 방식과 상당히 닮아있다는 점인데, 이에 관해서는 내가 찾은 어느 <a href="https://gamecodingschool.org/2015/05/28/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EC%9D%98-%EC%95%BD%EC%86%8Dpromise-2%EB%B6%80-%EB%B9%84%EA%B5%90/" target="_blank">블로그</a>에 상세히 설명되어 있다.<br />
결국 Promise 는 Async 에 비교하여 단순히 스타일이 다른 비동기 프로그래밍 방식이 아닌 동기 프로그래밍에 가깝게 작성하는 방법이고, 그 다음 구현체가 ES7의 async/await 라고 볼 수 있겠다.<br />
<br />
나는 우선 둘 중에 표준인 Promise 로 구현해 보기로 했다.<br />
ES6 를 사용중이라면 아무런 준비과정 없이 바로 Promise 를 사용할 수 있고
<br />
아니라면 npm 으로 설치해야 한다.<br />
<br />
<blockquote>
> npm install promise
</blockquote>
그리고 <a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise" target="_blank">MDN의 promise 문서</a>를 참고해서 기존의 코드를 수정했다.<br />
<br />
<pre class="brush: javascript">router.get('/search', function (req, res) {
/* create new promise object */
var promise = new Promise(
function (resolve, reject) {
var sql = 'SELECT * from TABLE' +
'WHERE column LIKE \'%' + keyword + '%\'';
conn.query(sql, function (err, results) {
if (err) {
console.error(err);
reject(err);
}
resolve(results);
});
}
);
/* do something with result */
promise.then(function (results) {
res.render('view/result', result);
}, function (err) {
throw err;
});
});
</pre>
<br />
Promise 객체를 생성하면서 비동기 함수가 성공적으로 수행되었을 때(resolve), 또는 실패하였을 때(reject)의 경로를 정의해준다.<br />
그리고 then( OnFullfilled, OnRejected )을 사용한 부분이 실제 비동기 함수를 호출하는 부분이다.<br />
결론적으로 썩 내가 원하던 코드의 모습은 아니지만(데이터 불러오는 루틴을 밖으로 빼고 싶었음) 방식은 비슷하게 구현된 것 같다.<br />
나중에 ES7 의 async/await 를 사용하면 코드가 훨씬 간결해질 듯 하다.<br />
<br />Anonymoushttp://www.blogger.com/profile/00143779259898222603noreply@blogger.com0tag:blogger.com,1999:blog-8277601056435785397.post-51270390466205175502016-07-19T19:45:00.001-07:002016-07-22T07:35:38.716-07:00JavaScript 로 submit 할 경우 유효성 체크하기JS 로 폼을 전송하고 있다면 JS 단에서 유효성 체크를 직접 호출해주어야 한다.<br />
단, 모든 브라우저가 html5 유효성 체크를 지원하지는 않는다는 점에 주의해야 한다.<br />
<br />
<pre class="brush: javascript"> function submitform() {
// Get first form element
var $form = $('form')[0];
// Check if valid using HTML5 checkValidity() builtin function
if ($form.checkValidity()) {
console.log('valid');
$form.submit();
} else {
console.log('not valid');
}
return false;
</pre>
Anonymoushttp://www.blogger.com/profile/00143779259898222603noreply@blogger.com0tag:blogger.com,1999:blog-8277601056435785397.post-51946181474335851962016-06-21T08:02:00.001-07:002016-07-01T15:50:03.450-07:00[번역] Understanding JavaScript Closures아래는 Understanding JavaScript Closures 라는 아티클에 대한 번역입니다.<br />
원문 링크는 <a href="https://javascriptweblog.wordpress.com/2010/10/25/understanding-javascript-closures/" target="_blank">여기</a>를 참조해주세요.<br />
<br />
<br />
<br />
<br />
<h1 class="entry-title" style="box-sizing: inherit; clear: both; color: #333333; font-family: "open sans", sans-serif; font-size: 2.25rem; line-height: 1.4; margin: 0px 0px 1.1rem; word-wrap: break-word;">
<span style="background-color: white;">
Understanding JavaScript Closures</span></h1>
<div>
<br /></div>
자바스크립트에서, 클로져는 컨텍스트 내의 변수들이 참조로 바인딩되는 함수입니다. <br />
<br />
<br />
<div class="line number1 index0 alt2" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: #333333; direction: ltr !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace; font-size: 18px; height: auto !important; left: auto !important; line-height: 19.8px; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="jscript keyword" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 102, 153) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; font-weight: bold !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">function</code> <code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">getMeAClosure() {</code></div>
<div class="line number2 index1 alt1" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: #333333; direction: ltr !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace; font-size: 18px; height: auto !important; left: auto !important; line-height: 19.8px; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="jscript spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> </code><code class="jscript keyword" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 102, 153) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; font-weight: bold !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">var</code> <code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">canYouSeeMe = </code><code class="jscript string" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: blue !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">"here I am"</code><code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">;</code></div>
<div class="line number3 index2 alt2" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: #333333; direction: ltr !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace; font-size: 18px; height: auto !important; left: auto !important; line-height: 19.8px; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="jscript spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> </code><code class="jscript keyword" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 102, 153) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; font-weight: bold !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">return</code> <code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">(</code><code class="jscript keyword" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 102, 153) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; font-weight: bold !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">function</code> <code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">theClosure() {</code></div>
<div class="line number4 index3 alt1" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: #333333; direction: ltr !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace; font-size: 18px; height: auto !important; left: auto !important; line-height: 19.8px; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="jscript spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> </code><code class="jscript keyword" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 102, 153) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; font-weight: bold !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">return</code> <code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">{canYouSeeIt: canYouSeeMe ? </code><code class="jscript string" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: blue !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">"yes!"</code><code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">: </code><code class="jscript string" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: blue !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">"no"</code><code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">}; </code></div>
<div class="line number5 index4 alt2" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: #333333; direction: ltr !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace; font-size: 18px; height: auto !important; left: auto !important; line-height: 19.8px; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="jscript spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> </code><code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">});</code></div>
<div class="line number6 index5 alt1" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: #333333; direction: ltr !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace; font-size: 18px; height: auto !important; left: auto !important; line-height: 19.8px; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">}</code></div>
<div class="line number7 index6 alt2" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: #333333; direction: ltr !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace; font-size: 18px; height: auto !important; left: auto !important; line-height: 19.8px; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
</div>
<div class="line number8 index7 alt1" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: #333333; direction: ltr !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace; font-size: 18px; height: auto !important; left: auto !important; line-height: 19.8px; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="jscript keyword" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 102, 153) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; font-weight: bold !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">var</code> <code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">closure = getMeAClosure();</code></div>
<div class="line number9 index8 alt2" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: #333333; direction: ltr !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace; font-size: 18px; height: auto !important; left: auto !important; line-height: 19.8px; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">closure().canYouSeeIt; </code><code class="jscript comments" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 130, 0) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">//"yes!"</code></div>
<div class="line number9 index8 alt2" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: #333333; direction: ltr !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace; font-size: 18px; height: auto !important; left: auto !important; line-height: 19.8px; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="jscript comments" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 130, 0) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><br /></code></div>
모든 javscript 함수들은 생성시 클로져를 형성합니다.<br />
이 글에서는 그 이유를 설명하고 클로져가 형성되는 과정을 살펴보겠습니다.<br />
그 다음 몇가지 일반적인 클로져에 대한 오해를 다루고, 실용적인 예제로 마무리 짓겠습니다. 그에 앞서 짧은 요약을 하자면:<br />
클로져는 어휘적 범위(Lexical Scope)와 변수 환경(VariableEnvironment)을 갖습니다.<br />
<br />
<span style="font-size: large;">어휘적 범위(Lexical Scope)</span><br />
<br />
본래 어휘적인(lexical)이라는 말은 단어나 일반적인 언어에서 쓰이는 용어입니다.<br />
그래서 함수의 '어휘적 범위'(Lexical Scope)란 함수가 기술된 물리적인 코드상의 위치에 의해 정적으로 정의되는 범위를 말합니다.<br />
<br />
아래 예제를 참고:<br />
<br />
<div class="line number1 index0 alt2" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: #333333; direction: ltr !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace; font-size: 18px; height: auto !important; left: auto !important; line-height: 19.8px; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="jscript keyword" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 102, 153) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; font-weight: bold !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">var</code> <code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">x = </code><code class="jscript string" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: blue !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">"global"</code><code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">;</code></div>
<div class="line number2 index1 alt1" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: #333333; direction: ltr !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace; font-size: 18px; height: auto !important; left: auto !important; line-height: 19.8px; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
</div>
<div class="line number3 index2 alt2" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: #333333; direction: ltr !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace; font-size: 18px; height: auto !important; left: auto !important; line-height: 19.8px; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="jscript keyword" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 102, 153) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; font-weight: bold !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">function</code> <code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">outer() {</code></div>
<div class="line number4 index3 alt1" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: #333333; direction: ltr !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace; font-size: 18px; height: auto !important; left: auto !important; line-height: 19.8px; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="jscript spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> </code><code class="jscript keyword" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 102, 153) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; font-weight: bold !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">var</code> <code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">y = </code><code class="jscript string" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: blue !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">"outer"</code><code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">; </code></div>
<div class="line number5 index4 alt2" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: #333333; direction: ltr !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace; font-size: 18px; height: auto !important; left: auto !important; line-height: 19.8px; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
</div>
<div class="line number6 index5 alt1" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: #333333; direction: ltr !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace; font-size: 18px; height: auto !important; left: auto !important; line-height: 19.8px; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="jscript spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> </code><code class="jscript keyword" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 102, 153) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; font-weight: bold !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">function</code> <code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">inner() {</code></div>
<div class="line number7 index6 alt2" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: #333333; direction: ltr !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace; font-size: 18px; height: auto !important; left: auto !important; line-height: 19.8px; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="jscript spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> </code><code class="jscript keyword" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 102, 153) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; font-weight: bold !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">var</code> <code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">x = </code><code class="jscript string" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: blue !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">"inner"</code><code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">; </code></div>
<div class="line number8 index7 alt1" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: #333333; direction: ltr !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace; font-size: 18px; height: auto !important; left: auto !important; line-height: 19.8px; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="jscript spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> </code><code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">}</code></div>
<div class="line number9 index8 alt2" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: #333333; direction: ltr !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace; font-size: 18px; height: auto !important; left: auto !important; line-height: 19.8px; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">}</code></div>
<div class="line number9 index8 alt2" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: #333333; direction: ltr !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace; font-size: 18px; height: auto !important; left: auto !important; line-height: 19.8px; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><br /></code></div>
함수 inner 는 함수 outer 가 물리적으로 감싸고 있고 그 밖에는 global context가 감싸고 있습니다.<br />
우리는 아래와 같은 lexical 계층 구조를 형성했습니다.<br />
<br />
<span style="background-color: white; color: #333333; font-family: "source sans pro" , sans-serif; font-size: 18px; line-height: 29.7px;">global</span><br />
<span style="background-color: white; color: #333333; font-family: "source sans pro" , sans-serif; font-size: 18px; line-height: 29.7px;"> outer</span><br />
<span style="background-color: white; color: #333333; font-family: "source sans pro" , sans-serif; font-size: 18px; line-height: 29.7px;"> inner</span><br />
<span style="background-color: white; color: #333333; font-family: "source sans pro" , sans-serif; font-size: 18px; line-height: 29.7px;"><br /></span>
어떤 함수든지 간에 outer lexical scope 는 그것의 lexical 계층 구조의 조상에 의해 정해집니다.<br />
따라서, inner 함수의 outer lexical scope 는 전역 객체와 outer 함수를 포함하게 됩니다.<br />
<br />
<span style="font-size: large;">변수 환경(VariableEnvironment)</span><br />
<br />
전역 객체는 실행 컨텍스트와 관련이 있습니다.<br />
또한 함수의 모든 호출은 새로운 실행 컨텍스트를 생성하고 그 안으로 진입합니다.<br />
실행 컨텍스트는 정적 lexical scope 에 동적으로 대응됩니다.<br />
각 실행 컨텍스트는 컨텍스트 안에서 선언된 변수들의 저장소인 변수 환경을 정의합니다.<br />
<br />
[EcmaScript3 에서, VariableEnvironment 는 활성객체(ActivationObject)로 알려졌었다. - 저자가 이전 글에서 사용하던 용어]<br />
<br />
의사코드로 변수 환경을 표현할 수 있습니다.<br />
<br />
<table border="0" cellpadding="0" cellspacing="0" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-collapse: collapse; border-radius: 0px !important; border-spacing: 0px; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: #333333; direction: ltr !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 18px; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; table-layout: auto !important; top: auto !important; vertical-align: baseline !important; width: 727.273px;"><tbody style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">
<tr style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><td class="gutter" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(175, 175, 175) !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><div class="line number1 index0 alt2" style="background: none white !important; border-radius: 0px !important; border-right-color: rgb(108, 226, 108) !important; border-right-style: solid !important; border-width: 0px 3px 0px 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
1</div>
<div class="line number2 index1 alt1" style="background: none white !important; border-radius: 0px !important; border-right-color: rgb(108, 226, 108) !important; border-right-style: solid !important; border-width: 0px 3px 0px 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
2</div>
<div class="line number3 index2 alt2" style="background: none white !important; border-radius: 0px !important; border-right-color: rgb(108, 226, 108) !important; border-right-style: solid !important; border-width: 0px 3px 0px 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
3</div>
<div class="line number4 index3 alt1" style="background: none white !important; border-radius: 0px !important; border-right-color: rgb(108, 226, 108) !important; border-right-style: solid !important; border-width: 0px 3px 0px 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
4</div>
<div class="line number5 index4 alt2" style="background: none white !important; border-radius: 0px !important; border-right-color: rgb(108, 226, 108) !important; border-right-style: solid !important; border-width: 0px 3px 0px 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
5</div>
<div class="line number6 index5 alt1" style="background: none white !important; border-radius: 0px !important; border-right-color: rgb(108, 226, 108) !important; border-right-style: solid !important; border-width: 0px 3px 0px 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
6</div>
<div class="line number7 index6 alt2" style="background: none white !important; border-radius: 0px !important; border-right-color: rgb(108, 226, 108) !important; border-right-style: solid !important; border-width: 0px 3px 0px 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
7</div>
<div class="line number8 index7 alt1" style="background: none white !important; border-radius: 0px !important; border-right-color: rgb(108, 226, 108) !important; border-right-style: solid !important; border-width: 0px 3px 0px 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
8</div>
<div class="line number9 index8 alt2" style="background: none white !important; border-radius: 0px !important; border-right-color: rgb(108, 226, 108) !important; border-right-style: solid !important; border-width: 0px 3px 0px 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
9</div>
<div class="line number10 index9 alt1" style="background: none white !important; border-radius: 0px !important; border-right-color: rgb(108, 226, 108) !important; border-right-style: solid !important; border-width: 0px 3px 0px 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
10</div>
<div class="line number11 index10 alt2" style="background: none white !important; border-radius: 0px !important; border-right-color: rgb(108, 226, 108) !important; border-right-style: solid !important; border-width: 0px 3px 0px 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
11</div>
<div class="line number12 index11 alt1" style="background: none white !important; border-radius: 0px !important; border-right-color: rgb(108, 226, 108) !important; border-right-style: solid !important; border-width: 0px 3px 0px 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
12</div>
<div class="line number13 index12 alt2" style="background: none white !important; border-radius: 0px !important; border-right-color: rgb(108, 226, 108) !important; border-right-style: solid !important; border-width: 0px 3px 0px 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
13</div>
<div class="line number14 index13 alt1" style="background: none white !important; border-radius: 0px !important; border-right-color: rgb(108, 226, 108) !important; border-right-style: solid !important; border-width: 0px 3px 0px 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
14</div>
<div class="line number15 index14 alt2" style="background: none white !important; border-radius: 0px !important; border-right-color: rgb(108, 226, 108) !important; border-right-style: solid !important; border-width: 0px 3px 0px 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
15</div>
</td><td class="code" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: 677.273px;"><div class="container" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: relative !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">
<div class="line number1 index0 alt2" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="jscript comments" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 130, 0) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">//variableEnvironment: {x: undefined, etc.};</code></div>
<div class="line number2 index1 alt1" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="jscript keyword" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 102, 153) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; font-weight: bold !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">var</code> <code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">x = </code><code class="jscript string" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: blue !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">"global"</code><code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">;</code></div>
<div class="line number3 index2 alt2" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="jscript comments" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 130, 0) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">//variableEnvironment: {x: "global", etc.};</code></div>
<div class="line number4 index3 alt1" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
</div>
<div class="line number5 index4 alt2" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="jscript keyword" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 102, 153) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; font-weight: bold !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">function</code> <code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">outer() {</code></div>
<div class="line number6 index5 alt1" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="jscript spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> </code><code class="jscript comments" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 130, 0) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">//variableEnvironment: {y: undefined};</code></div>
<div class="line number7 index6 alt2" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="jscript spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> </code><code class="jscript keyword" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 102, 153) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; font-weight: bold !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">var</code> <code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">y = </code><code class="jscript string" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: blue !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">"outer"</code><code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">;</code></div>
<div class="line number8 index7 alt1" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="jscript spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> </code><code class="jscript comments" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 130, 0) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">//variableEnvironment: {y: "outer"};</code></div>
<div class="line number9 index8 alt2" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
</div>
<div class="line number10 index9 alt1" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="jscript spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> </code><code class="jscript keyword" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 102, 153) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; font-weight: bold !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">function</code> <code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">inner() {</code></div>
<div class="line number11 index10 alt2" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="jscript spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> </code><code class="jscript comments" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 130, 0) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">//variableEnvironment: {x: undefined};</code></div>
<div class="line number12 index11 alt1" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="jscript spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> </code><code class="jscript keyword" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 102, 153) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; font-weight: bold !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">var</code> <code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">x = </code><code class="jscript string" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: blue !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">"inner"</code><code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">; </code></div>
<div class="line number13 index12 alt2" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="jscript spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> </code><code class="jscript comments" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 130, 0) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">//variableEnvironment: {x: "inner"};</code></div>
<div class="line number14 index13 alt1" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="jscript spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> </code><code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">}</code></div>
<div class="line number15 index14 alt2" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">}</code></div>
<div class="line number15 index14 alt2" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><br /></code></div>
</div>
</td></tr>
</tbody></table>
<br />
하지만, 이는 전체적인 그림의 일부만을 보여줄 뿐입니다.<br />
각각의 VariableEnvironment 는 해당 lexical scope의 VariableEnvironment 를 물려받습니다.<br />
<br />
<br />
<span style="font-size: large;">[[scope]] 속성</span><br />
<br />
실행 컨텍스트가 코드 안에서 함수의 정의를 만나게 되면,<br />
현재의 변수 환경을 가리키는 [[scope]] 라는 이름의 프로퍼티를 가진 새로운 함수 객체가 생성됩니다.<br />
모든 함수는 [[scope]] 속성을 가지고, 함수가 호출되면 [[scope]] 속성의 값은 변수 환경의<br />
외부 어휘 환경 레퍼런스 프러퍼티(<em style="background-color: white; box-sizing: inherit; color: #333333; font-family: "Source Sans Pro", sans-serif; font-size: 18px; line-height: 29.7px;">outer lexical environment reference 또는 outerLex)</em>에 할당됩니다.<br />
이러한 방식으로, 각 변수환경은 어휘적 부모의 변수환경으로부터 상속받게 됩니다.<br />
이 스코프 체이닝은 전역 객체로부터 시작하여 어휘적 계층의 깊이만큼 실행됩니다.<br />
<br />
<table border="0" cellpadding="0" cellspacing="0" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-collapse: collapse; border-radius: 0px !important; border-spacing: 0px; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: #333333; direction: ltr !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 18px; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; table-layout: auto !important; top: auto !important; vertical-align: baseline !important; width: 1076.36px;"><tbody style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">
<tr style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><td class="gutter" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(175, 175, 175) !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><div class="line number1 index0 alt2" style="background: none white !important; border-radius: 0px !important; border-right-color: rgb(108, 226, 108) !important; border-right-style: solid !important; border-width: 0px 3px 0px 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
1</div>
<div class="line number2 index1 alt1" style="background: none white !important; border-radius: 0px !important; border-right-color: rgb(108, 226, 108) !important; border-right-style: solid !important; border-width: 0px 3px 0px 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
2</div>
<div class="line number3 index2 alt2" style="background: none white !important; border-radius: 0px !important; border-right-color: rgb(108, 226, 108) !important; border-right-style: solid !important; border-width: 0px 3px 0px 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
3</div>
<div class="line number4 index3 alt1" style="background: none white !important; border-radius: 0px !important; border-right-color: rgb(108, 226, 108) !important; border-right-style: solid !important; border-width: 0px 3px 0px 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
4</div>
<div class="line number5 index4 alt2" style="background: none white !important; border-radius: 0px !important; border-right-color: rgb(108, 226, 108) !important; border-right-style: solid !important; border-width: 0px 3px 0px 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
5</div>
<div class="line number6 index5 alt1" style="background: none white !important; border-radius: 0px !important; border-right-color: rgb(108, 226, 108) !important; border-right-style: solid !important; border-width: 0px 3px 0px 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
6</div>
<div class="line number7 index6 alt2" style="background: none white !important; border-radius: 0px !important; border-right-color: rgb(108, 226, 108) !important; border-right-style: solid !important; border-width: 0px 3px 0px 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
7</div>
<div class="line number8 index7 alt1" style="background: none white !important; border-radius: 0px !important; border-right-color: rgb(108, 226, 108) !important; border-right-style: solid !important; border-width: 0px 3px 0px 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
8</div>
<div class="line number9 index8 alt2" style="background: none white !important; border-radius: 0px !important; border-right-color: rgb(108, 226, 108) !important; border-right-style: solid !important; border-width: 0px 3px 0px 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
9</div>
<div class="line number10 index9 alt1" style="background: none white !important; border-radius: 0px !important; border-right-color: rgb(108, 226, 108) !important; border-right-style: solid !important; border-width: 0px 3px 0px 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
10</div>
<div class="line number11 index10 alt2" style="background: none white !important; border-radius: 0px !important; border-right-color: rgb(108, 226, 108) !important; border-right-style: solid !important; border-width: 0px 3px 0px 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
11</div>
<div class="line number12 index11 alt1" style="background: none white !important; border-radius: 0px !important; border-right-color: rgb(108, 226, 108) !important; border-right-style: solid !important; border-width: 0px 3px 0px 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
12</div>
<div class="line number13 index12 alt2" style="background: none white !important; border-radius: 0px !important; border-right-color: rgb(108, 226, 108) !important; border-right-style: solid !important; border-width: 0px 3px 0px 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
13</div>
<div class="line number14 index13 alt1" style="background: none white !important; border-radius: 0px !important; border-right-color: rgb(108, 226, 108) !important; border-right-style: solid !important; border-width: 0px 3px 0px 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
14</div>
<div class="line number15 index14 alt2" style="background: none white !important; border-radius: 0px !important; border-right-color: rgb(108, 226, 108) !important; border-right-style: solid !important; border-width: 0px 3px 0px 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
15</div>
</td><td class="code" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: 1026.36px;"><div class="container" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: relative !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">
<div class="line number1 index0 alt2" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="jscript comments" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 130, 0) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">//VariableEnvironment: {x: undefined, etc.};</code></div>
<div class="line number2 index1 alt1" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="jscript keyword" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 102, 153) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; font-weight: bold !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">var</code> <code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">x = </code><code class="jscript string" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: blue !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">"global"</code><code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">;</code></div>
<div class="line number3 index2 alt2" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="jscript comments" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 130, 0) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">//VariableEnvironment: {x: "global", etc.};</code></div>
<div class="line number4 index3 alt1" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
</div>
<div class="line number5 index4 alt2" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="jscript keyword" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 102, 153) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; font-weight: bold !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">function</code> <code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">outer() {</code></div>
<div class="line number6 index5 alt1" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="jscript spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> </code><code class="jscript comments" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 130, 0) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">//VariableEnvironment: {y: undefined, outerLex: {x: "global", etc.}};</code></div>
<div class="line number7 index6 alt2" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="jscript spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> </code><code class="jscript keyword" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 102, 153) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; font-weight: bold !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">var</code> <code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">y = </code><code class="jscript string" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: blue !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">"outer"</code><code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">; </code></div>
<div class="line number8 index7 alt1" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="jscript spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> </code><code class="jscript comments" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 130, 0) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">//VariableEnvironment: {y: "outer", outerLex: {x: "global", etc.}};</code></div>
<div class="line number9 index8 alt2" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
</div>
<div class="line number10 index9 alt1" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="jscript spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> </code><code class="jscript keyword" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 102, 153) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; font-weight: bold !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">function</code> <code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">inner() {</code></div>
<div class="line number11 index10 alt2" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="jscript spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> </code><code class="jscript comments" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 130, 0) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">//VariableEnvironment: {x: undefined, outerLex: {y: "outer", outerLex: {x:"global", etc.}};</code></div>
<div class="line number12 index11 alt1" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="jscript spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> </code><code class="jscript keyword" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 102, 153) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; font-weight: bold !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">var</code> <code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">x = </code><code class="jscript string" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: blue !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">"inner"</code><code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">; </code></div>
<div class="line number13 index12 alt2" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="jscript spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> </code><code class="jscript comments" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 130, 0) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">//VariableEnvironment: {x: "inner", outerLex: {y: "outer", outerLex: {x:"global", etc.}};</code></div>
<div class="line number14 index13 alt1" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="jscript spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> </code><code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">}</code></div>
<div class="line number15 index14 alt2" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">}</code></div>
<div class="line number15 index14 alt2" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; float: none !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><br /></code></div>
</div>
</td></tr>
</tbody></table>
[[scope]] 는 중첩된 variableEnvironments 간의 다리 역할을 수행하며<br />
내부 VariableEnvironments 에 저장된 외부 변수를 통해 이 프로세스를 가능하게 합니다.<br />
[[scope]] 는 또한 클로져를 가능하게 하는데, 만약 [[scope]]가 없다면, 외부 함수의 변수들은 참조되지 않을 것(dereferenced)이고, 외부 함수가 리턴되면 가비지 콜렉터에 의해 제거될 것이기 때문입니다.<br />
<br />
결국은, 클로져는 단지 어휘적 스코핑(Lexical scoping)의 피할 수 없는 부작용인 것입니다.<br />
<br />
<span style="font-size: x-large;">클로져에 대한 오해</span><br />
<br />
이제 클로져가 어떻게 돌아가는지 대충 이해했으니, 클로져와 관련된 요상한 루머를 다뤄보겠습니다.<br />
<br />
<b><span style="font-size: large;">1. 클로져는 내부 함수가 리턴된 후에만 생성된다.</span></b><br />
<br />
함수가 생성 될 때, 외부 렉시컬 스코프의 변수를 가리키는 scope 프로퍼티가 할당 되고, <br />
이것이 가비지 콜렉트되는 것을 막습니다.<br />
그러므로 클로져는 함수 생성과 동시에 형성되는 것입니다.<br />
따라서 클로져가 되기 전에 반드시 함수가 리턴되어야 한다는 법은 없습니다.<br />
아래는 함수의 리턴없이 동작하는 클로져입니다.<br />
<br />
<div class="line number1 index0 alt2" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: #333333; direction: ltr !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace; font-size: 18px; height: auto !important; left: auto !important; line-height: 19.8px; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="jscript keyword" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 102, 153) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; font-weight: bold !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">var</code> <code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">callLater = </code><code class="jscript keyword" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 102, 153) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; font-weight: bold !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">function</code><code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">(fn, args, context) {</code></div>
<div class="line number2 index1 alt1" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: #333333; direction: ltr !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace; font-size: 18px; height: auto !important; left: auto !important; line-height: 19.8px; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="jscript spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> </code><code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">setTimeout(</code><code class="jscript keyword" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 102, 153) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; font-weight: bold !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">function</code><code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">(){fn.apply(context, args)}, 2000);</code></div>
<div class="line number3 index2 alt2" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: #333333; direction: ltr !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace; font-size: 18px; height: auto !important; left: auto !important; line-height: 19.8px; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">}</code></div>
<div class="line number4 index3 alt1" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: #333333; direction: ltr !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace; font-size: 18px; height: auto !important; left: auto !important; line-height: 19.8px; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
</div>
<div class="line number5 index4 alt2" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: #333333; direction: ltr !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace; font-size: 18px; height: auto !important; left: auto !important; line-height: 19.8px; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">callLater(alert,[</code><code class="jscript string" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: blue !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">'hello'</code><code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">]); </code></div>
<div class="line number5 index4 alt2" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: #333333; direction: ltr !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace; font-size: 18px; height: auto !important; left: auto !important; line-height: 19.8px; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><br /></code></div>
<b><span style="font-size: large;">2. 외부 변수의 값은 클로져에 복사되거나 내장된다.</span></b><br />
<br />
앞에서 봤듯이, 클로져는 '값'이 아닌 '변수'를 참조합니다.<br />
<br />
<div class="line number1 index0 alt2" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: #333333; direction: ltr !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace; font-size: 18px; height: auto !important; left: auto !important; line-height: 19.8px; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="jscript comments" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 130, 0) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">//Bad Example</code></div>
<div class="line number2 index1 alt1" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: #333333; direction: ltr !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace; font-size: 18px; height: auto !important; left: auto !important; line-height: 19.8px; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="jscript comments" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 130, 0) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">//Create an array of functions that add 1,2 and 3 respectively </code></div>
<div class="line number3 index2 alt2" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: #333333; direction: ltr !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace; font-size: 18px; height: auto !important; left: auto !important; line-height: 19.8px; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="jscript keyword" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 102, 153) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; font-weight: bold !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">var</code> <code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">createAdders = </code><code class="jscript keyword" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 102, 153) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; font-weight: bold !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">function</code><code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">() {</code></div>
<div class="line number4 index3 alt1" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: #333333; direction: ltr !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace; font-size: 18px; height: auto !important; left: auto !important; line-height: 19.8px; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="jscript spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> </code><code class="jscript keyword" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 102, 153) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; font-weight: bold !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">var</code> <code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">fns = [];</code></div>
<div class="line number5 index4 alt2" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: #333333; direction: ltr !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace; font-size: 18px; height: auto !important; left: auto !important; line-height: 19.8px; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="jscript spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> </code><code class="jscript keyword" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 102, 153) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; font-weight: bold !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">for</code> <code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">(</code><code class="jscript keyword" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 102, 153) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; font-weight: bold !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">var</code> <code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">i=1; i<4; i++) { </code></div>
<div class="line number6 index5 alt1" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: #333333; direction: ltr !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace; font-size: 18px; height: auto !important; left: auto !important; line-height: 19.8px; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="jscript spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> </code><code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">fns[i] = (</code><code class="jscript keyword" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 102, 153) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; font-weight: bold !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">function</code><code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">(n) {</code></div>
<div class="line number7 index6 alt2" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: #333333; direction: ltr !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace; font-size: 18px; height: auto !important; left: auto !important; line-height: 19.8px; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="jscript spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> </code><code class="jscript keyword" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 102, 153) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; font-weight: bold !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">return</code> <code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">i+n;</code></div>
<div class="line number8 index7 alt1" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: #333333; direction: ltr !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace; font-size: 18px; height: auto !important; left: auto !important; line-height: 19.8px; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="jscript spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> </code><code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">});</code></div>
<div class="line number9 index8 alt2" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: #333333; direction: ltr !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace; font-size: 18px; height: auto !important; left: auto !important; line-height: 19.8px; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="jscript spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> </code><code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">}</code></div>
<div class="line number10 index9 alt1" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: #333333; direction: ltr !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace; font-size: 18px; height: auto !important; left: auto !important; line-height: 19.8px; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="jscript spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> </code><code class="jscript keyword" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 102, 153) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; font-weight: bold !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">return</code> <code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">fns;</code></div>
<div class="line number11 index10 alt2" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: #333333; direction: ltr !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace; font-size: 18px; height: auto !important; left: auto !important; line-height: 19.8px; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">}</code></div>
<div class="line number12 index11 alt1" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: #333333; direction: ltr !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace; font-size: 18px; height: auto !important; left: auto !important; line-height: 19.8px; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
</div>
<div class="line number13 index12 alt2" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: #333333; direction: ltr !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace; font-size: 18px; height: auto !important; left: auto !important; line-height: 19.8px; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="jscript keyword" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 102, 153) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; font-weight: bold !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">var</code> <code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">adders = createAdders();</code></div>
<div class="line number14 index13 alt1" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: #333333; direction: ltr !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace; font-size: 18px; height: auto !important; left: auto !important; line-height: 19.8px; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">adders[1](7); </code><code class="jscript comments" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 130, 0) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">//11 ??</code></div>
<div class="line number15 index14 alt2" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: #333333; direction: ltr !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace; font-size: 18px; height: auto !important; left: auto !important; line-height: 19.8px; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">adders[2](7); </code><code class="jscript comments" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 130, 0) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">//11 ??</code></div>
<div class="line number16 index15 alt1" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: #333333; direction: ltr !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace; font-size: 18px; height: auto !important; left: auto !important; line-height: 19.8px; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">adders[3](7); </code><code class="jscript comments" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 130, 0) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">//11 ??</code></div>
<div class="line number16 index15 alt1" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: #333333; direction: ltr !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace; font-size: 18px; height: auto !important; left: auto !important; line-height: 19.8px; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="jscript comments" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 130, 0) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><br /></code></div>
<div class="line number16 index15 alt1" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: #333333; direction: ltr !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace; font-size: 18px; height: auto !important; left: auto !important; line-height: 19.8px; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<span style="color: black; font-family: "malgun gothic"; font-size: small; line-height: normal; white-space: normal;">세 개의 adder 함수는 모두 같은 i 변수를 가리키고 있습니다. 그리고 어떤 함수가 호출되든, i 의 값은 4 입니다.</span></div>
<div class="line number16 index15 alt1" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: #333333; direction: ltr !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace; font-size: 18px; height: auto !important; left: auto !important; line-height: 19.8px; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<span style="color: black; font-family: "malgun gothic"; font-size: small; line-height: normal; white-space: normal;"><br /></span></div>
<div class="line number16 index15 alt1" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: #333333; direction: ltr !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace; font-size: 18px; height: auto !important; left: auto !important; line-height: 19.8px; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<span style="color: black; font-family: "malgun gothic"; font-size: small; line-height: normal; white-space: normal;">해답 중 하나는 각 인자를 즉시 실행 함수로 전달하는 것입니다.</span></div>
<div class="line number16 index15 alt1" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: #333333; direction: ltr !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace; font-size: 18px; height: auto !important; left: auto !important; line-height: 19.8px; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<span style="color: black; font-family: "malgun gothic"; font-size: small; line-height: normal; white-space: normal;">모든 함수 호출은 각자의 유일한 실행 컨텍스트를 발생시키기 때문에, 연속적인 함수 호출로 인자 변수의 유일성을 보장할 수 있습니다.</span></div>
<div class="line number16 index15 alt1" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: #333333; direction: ltr !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace; font-size: 18px; height: auto !important; left: auto !important; line-height: 19.8px; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<span style="color: black; font-family: "malgun gothic"; font-size: small; line-height: normal; white-space: normal;"><br /></span></div>
<div class="line number16 index15 alt1" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: #333333; direction: ltr !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace; font-size: 18px; height: auto !important; left: auto !important; line-height: 19.8px; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="jscript comments" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 130, 0) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><br /></code></div>
<div class="line number16 index15 alt1" style="background: none white; border-radius: 0px; border: 0px; bottom: auto; box-shadow: none; box-sizing: content-box; color: #333333; direction: ltr; float: none; font-family: consolas, "bitstream vera sans mono", "courier new", courier, monospace; height: auto; left: auto; line-height: 19.8px; margin: 0px; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: pre; width: auto;">
<div style="font-size: 18px;">
<code class="jscript comments" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 130, 0) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"></code><br /></div>
<div class="line number1 index0 alt2" style="background-image: none; border-image-outset: initial; border-image-repeat: initial; border-image-slice: initial; border-image-source: initial; border-image-width: initial; border-radius: 0px; border: 0px; bottom: auto; box-shadow: none; box-sizing: content-box; color: #333333; direction: ltr; float: none; font-size: 18px; height: auto; left: auto; line-height: 19.8px; margin: 0px; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">
<code class="jscript comments" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 130, 0) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><code class="jscript comments" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 130, 0) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">//Good Example</code></code></div>
<div style="font-size: 18px;">
<code class="jscript comments" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 130, 0) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">
</code>
</div>
<div class="line number2 index1 alt1" style="background-image: none; border-image-outset: initial; border-image-repeat: initial; border-image-slice: initial; border-image-source: initial; border-image-width: initial; border-radius: 0px; border: 0px; bottom: auto; box-shadow: none; box-sizing: content-box; color: #333333; direction: ltr; float: none; font-size: 18px; height: auto; left: auto; line-height: 19.8px; margin: 0px; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">
<code class="jscript comments" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 130, 0) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><code class="jscript comments" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 130, 0) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">//Create an array of functions that add 1,2 and 3 respectively </code></code></div>
<div style="font-size: 18px;">
<code class="jscript comments" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 130, 0) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">
</code></div>
<div class="line number3 index2 alt2" style="background-image: none; border-image-outset: initial; border-image-repeat: initial; border-image-slice: initial; border-image-source: initial; border-image-width: initial; border-radius: 0px; border: 0px; bottom: auto; box-shadow: none; box-sizing: content-box; color: #333333; direction: ltr; float: none; font-size: 18px; height: auto; left: auto; line-height: 19.8px; margin: 0px; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">
<code class="jscript comments" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 130, 0) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><code class="jscript keyword" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 102, 153) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; font-weight: bold !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">var</code> <code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">createAdders = </code><code class="jscript keyword" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 102, 153) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; font-weight: bold !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">function</code><code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">() {</code></code></div>
<code class="jscript comments" style="background-attachment: initial; background-clip: initial; background-color: initial; background-image: none; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-image-outset: initial; border-image-repeat: initial; border-image-slice: initial; border-image-source: initial; border-image-width: initial; border-radius: 0px; border: 0px; bottom: auto; box-shadow: none; box-sizing: content-box; color: #008200; direction: ltr; display: inline; float: none; height: auto; left: auto; line-height: 1.1em; margin: 0px; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"><span style="font-size: 1em;">
</span><div class="line number4 index3 alt1" style="background-image: none; border-image-outset: initial; border-image-repeat: initial; border-image-slice: initial; border-image-source: initial; border-image-width: initial; border-radius: 0px; border: 0px; bottom: auto; box-shadow: none; box-sizing: content-box; color: #333333; direction: ltr; float: none; font-size: 1em; height: auto; left: auto; line-height: 19.8px; margin: 0px; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">
<code class="jscript spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> </code><code class="jscript keyword" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 102, 153) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; font-weight: bold !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">var</code> <code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">fns = [];</code></div>
<span style="font-size: 1em;">
</span><div class="line number5 index4 alt2" style="background-image: none; border-image-outset: initial; border-image-repeat: initial; border-image-slice: initial; border-image-source: initial; border-image-width: initial; border-radius: 0px; border: 0px; bottom: auto; box-shadow: none; box-sizing: content-box; color: #333333; direction: ltr; float: none; font-size: 1em; height: auto; left: auto; line-height: 19.8px; margin: 0px; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">
<code class="jscript spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> </code><code class="jscript keyword" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 102, 153) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; font-weight: bold !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">for</code> <code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">(</code><code class="jscript keyword" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 102, 153) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; font-weight: bold !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">var</code> <code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">i=1; i<4; i++) { </code></div>
<span style="font-size: 1em;">
</span><div class="line number6 index5 alt1" style="background-image: none; border-image-outset: initial; border-image-repeat: initial; border-image-slice: initial; border-image-source: initial; border-image-width: initial; border-radius: 0px; border: 0px; bottom: auto; box-shadow: none; box-sizing: content-box; color: #333333; direction: ltr; float: none; font-size: 1em; height: auto; left: auto; line-height: 19.8px; margin: 0px; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">
<code class="jscript spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> </code><code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">(</code><code class="jscript keyword" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 102, 153) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; font-weight: bold !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">function</code><code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">(i) {</code></div>
<span style="font-size: 1em;">
</span><div class="line number7 index6 alt2" style="background-image: none; border-image-outset: initial; border-image-repeat: initial; border-image-slice: initial; border-image-source: initial; border-image-width: initial; border-radius: 0px; border: 0px; bottom: auto; box-shadow: none; box-sizing: content-box; color: #333333; direction: ltr; float: none; font-size: 1em; height: auto; left: auto; line-height: 19.8px; margin: 0px; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">
<code class="jscript spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> </code><code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">fns[i] = (</code><code class="jscript keyword" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 102, 153) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; font-weight: bold !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">function</code><code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">(n) {</code></div>
<span style="font-size: 1em;">
</span><div class="line number8 index7 alt1" style="background-image: none; border-image-outset: initial; border-image-repeat: initial; border-image-slice: initial; border-image-source: initial; border-image-width: initial; border-radius: 0px; border: 0px; bottom: auto; box-shadow: none; box-sizing: content-box; color: #333333; direction: ltr; float: none; font-size: 1em; height: auto; left: auto; line-height: 19.8px; margin: 0px; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">
<code class="jscript spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> </code><code class="jscript keyword" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 102, 153) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; font-weight: bold !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">return</code> <code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">i+n;</code></div>
<span style="font-size: 1em;">
</span><div class="line number9 index8 alt2" style="background-image: none; border-image-outset: initial; border-image-repeat: initial; border-image-slice: initial; border-image-source: initial; border-image-width: initial; border-radius: 0px; border: 0px; bottom: auto; box-shadow: none; box-sizing: content-box; color: #333333; direction: ltr; float: none; font-size: 1em; height: auto; left: auto; line-height: 19.8px; margin: 0px; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">
<code class="jscript spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> </code><code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">});</code></div>
<span style="font-size: 1em;">
</span><div class="line number10 index9 alt1" style="background-image: none; border-image-outset: initial; border-image-repeat: initial; border-image-slice: initial; border-image-source: initial; border-image-width: initial; border-radius: 0px; border: 0px; bottom: auto; box-shadow: none; box-sizing: content-box; color: #333333; direction: ltr; float: none; font-size: 1em; height: auto; left: auto; line-height: 19.8px; margin: 0px; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">
<code class="jscript spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> </code><code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">})(i) </code></div>
<span style="font-size: 1em;">
</span><div class="line number11 index10 alt2" style="background-image: none; border-image-outset: initial; border-image-repeat: initial; border-image-slice: initial; border-image-source: initial; border-image-width: initial; border-radius: 0px; border: 0px; bottom: auto; box-shadow: none; box-sizing: content-box; color: #333333; direction: ltr; float: none; font-size: 1em; height: auto; left: auto; line-height: 19.8px; margin: 0px; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">
<code class="jscript spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> </code><code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">}</code></div>
<span style="font-size: 1em;">
</span><div class="line number12 index11 alt1" style="background-image: none; border-image-outset: initial; border-image-repeat: initial; border-image-slice: initial; border-image-source: initial; border-image-width: initial; border-radius: 0px; border: 0px; bottom: auto; box-shadow: none; box-sizing: content-box; color: #333333; direction: ltr; float: none; font-size: 1em; height: auto; left: auto; line-height: 19.8px; margin: 0px; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">
<code class="jscript spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> </code><code class="jscript keyword" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 102, 153) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; font-weight: bold !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">return</code> <code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">fns;</code></div>
<span style="font-size: 1em;">
</span><div class="line number13 index12 alt2" style="background-image: none; border-image-outset: initial; border-image-repeat: initial; border-image-slice: initial; border-image-source: initial; border-image-width: initial; border-radius: 0px; border: 0px; bottom: auto; box-shadow: none; box-sizing: content-box; color: #333333; direction: ltr; float: none; font-size: 1em; height: auto; left: auto; line-height: 19.8px; margin: 0px; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">
<code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">}</code></div>
<span style="font-size: 1em;">
</span><div class="line number14 index13 alt1" style="background-image: none; border-image-outset: initial; border-image-repeat: initial; border-image-slice: initial; border-image-source: initial; border-image-width: initial; border-radius: 0px; border: 0px; bottom: auto; box-shadow: none; box-sizing: content-box; color: #333333; direction: ltr; float: none; font-size: 1em; height: auto; left: auto; line-height: 19.8px; margin: 0px; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">
</div>
<span style="font-size: 1em;">
</span><div class="line number15 index14 alt2" style="background-image: none; border-image-outset: initial; border-image-repeat: initial; border-image-slice: initial; border-image-source: initial; border-image-width: initial; border-radius: 0px; border: 0px; bottom: auto; box-shadow: none; box-sizing: content-box; color: #333333; direction: ltr; float: none; font-size: 1em; height: auto; left: auto; line-height: 19.8px; margin: 0px; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">
<code class="jscript keyword" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 102, 153) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; font-weight: bold !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">var</code> <code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">adders = createAdders();</code></div>
<span style="font-size: 1em;">
</span><div class="line number16 index15 alt1" style="background-image: none; border-image-outset: initial; border-image-repeat: initial; border-image-slice: initial; border-image-source: initial; border-image-width: initial; border-radius: 0px; border: 0px; bottom: auto; box-shadow: none; box-sizing: content-box; color: #333333; direction: ltr; float: none; font-size: 1em; height: auto; left: auto; line-height: 19.8px; margin: 0px; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">
<code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">adders[1](7); </code><code class="jscript comments" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 130, 0) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">//8 (-:</code></div>
<span style="font-size: 1em;">
</span><div class="line number17 index16 alt2" style="background-image: none; border-image-outset: initial; border-image-repeat: initial; border-image-slice: initial; border-image-source: initial; border-image-width: initial; border-radius: 0px; border: 0px; bottom: auto; box-shadow: none; box-sizing: content-box; color: #333333; direction: ltr; float: none; font-size: 1em; height: auto; left: auto; line-height: 19.8px; margin: 0px; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">
<code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">adders[2](7); </code><code class="jscript comments" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 130, 0) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">//9 (-:</code></div>
<span style="font-size: 1em;">
</span><div class="line number18 index17 alt1" style="background-image: none; border-image-outset: initial; border-image-repeat: initial; border-image-slice: initial; border-image-source: initial; border-image-width: initial; border-radius: 0px; border: 0px; bottom: auto; box-shadow: none; box-sizing: content-box; color: #333333; direction: ltr; float: none; font-size: 1em; height: auto; left: auto; line-height: 19.8px; margin: 0px; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">
<code class="jscript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">adders[3](7); </code><code class="jscript comments" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 130, 0) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">//10 (-:</code></div>
<span style="font-size: large;">
</span></code></div>
<span style="font-size: large;"><br /></span>
<b><span style="font-size: large;">3. 클로져는 오로지 내부 함수에 대해서만 적용된다.</span></b><br />
<b><br /></b>
<span style="background-color: white; color: #333333; font-family: "source sans pro" , sans-serif; font-size: 18px; line-height: 29.7px;">[[scope]]</span><span style="background-color: white; color: #333333; font-family: "source sans pro" , sans-serif; font-size: 18px; line-height: 29.7px;"> </span>프로퍼티가 오로지 전역적으로 언제든지 접근 가능한 전역 스코프를 참조하므로, 외부 함수에 의해 생성된 클로져는 특별히 흥미로울 것이 없다고 생각할 수도 있습니다.(여기서 외부 함수란 window 객체 바로 하위의 전역 함수를 말하는 것입니다.)<br />
그럼에도 불구하고 클로져의 형성 과정은 모든 함수가 동일하고, 모든 함수는 클로져를 형성한다는 점을 아는 것이 중요합니다.<br />
<br />
<b><span style="font-size: large;">4. 클로져는 익명 함수에만 적용된다.</span></b><br />
<br />
이전 글에서 너무 많이 거론했으므로 생략합니다.<br />
<br />
<b><span style="font-size: large;">5. 클로져는 메모리릭의 주범이다.</span></b><br />
<br />
클로져 그 자체는 순환 참조를 만들지 않습니다. 우리의 원래 예제에서,<br />
inner 함수는 scope 속성을 통해 외부 변수를 참조하는 것이지,<br />
참조 변수나 함수 outer가 inner 함수 혹은 지역 변수를 참조하지 않습니다.<br />
<br />
IE의 구버전들은 메모리 릭으로 악명이 높고 주로 클로져를 비난의 대상으로 삼았습니다.<br />
일반적인 원인은 함수에 의해 참조되는 DOM 요소이며, 같은 돔 요소가 같은 렉시컬 스코프 안의 다른 객체를 함수로 참조하기 떄문입니다.<br />
IE 6~8 버전들은 대부분 이러한 순환 참조 문제가 있습니다.<br />
<br />
<span style="font-size: large;">마무리</span><br />
<br />
프로그래밍 용어에서, 클로져는 우아함과 세련됨의 높이를 표현합니다.<br />
클로져는 코드를 간결하고, 읽기 쉽고, 아름답게 만들고 기능적인 재사용을 촉진합니다.<br />
클로져의 동작과정과 사용하는 이유를 알면 클로져를 사용하는데 있어 불확실성을 제거할 수 있습니다.<br />
나는 이 문서가 그런 측면에서 도움되기를 바랍니다. 댓글이나 질문, 의견 등 모두 환영합니다.<br />
<br />Anonymoushttp://www.blogger.com/profile/00143779259898222603noreply@blogger.com0tag:blogger.com,1999:blog-8277601056435785397.post-34599526613748650332016-05-03T21:13:00.000-07:002016-05-03T22:11:35.637-07:00[Secrets of the JavaScript Ninja] 예제 코드 분석 github 저장소를 만들었습니다.'자바스크립트 닌자의 비밀' 스터디 중<br />
이해가 어려웠던 예제를 골라 코드분석한 내용을 기록하려고 합니다.<br />
현재 5챕터 진도를 나가고 있는데 꾸준히 올려보도록 하겠습니다.<br />
<br />
<span style="font-size: large;"><b><a href="https://github.com/ifndefdeadmau5/Javascript-Ninja-Study" target="_blank">링크</a></b></span>Anonymoushttp://www.blogger.com/profile/00143779259898222603noreply@blogger.com0tag:blogger.com,1999:blog-8277601056435785397.post-48514605709085631522016-03-26T07:39:00.003-07:002016-03-28T21:38:03.116-07:00react-starter-kit 으로 React 시작하기<div class="p1">
<span style="font-size: large;"><span class="s1">react </span>폴더<span class="s1"> </span>구조와<span class="s1"> </span>환경설정에<span class="s1"> </span>익숙해지기<span class="s1"> </span>위해<span class="s1">,</span></span></div>
<div class="p2">
<span style="font-size: large;">react-starter-kit <span class="s2">으로</span> <span class="s2">빠른</span> <span class="s2">시작을</span> <span class="s2">해볼</span> <span class="s2">것입니다</span>. IDE<span class="s2">는</span> Webstorm<span class="s2">을</span> <span class="s2">사용합니다</span>.</span></div>
<div class="p2">
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">npm <span class="s2">은</span> 3.3, node<span class="s2">는</span> 5.0 <span class="s2">이상의</span> <span class="s2">버전이</span> <span class="s2">필요합니다</span>.</span></div>
<div class="p2">
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">https://github.com/kriasoft/react-starter-kit</span></div>
<div class="p2">
<span style="font-size: large;"><br /></span>
<span style="font-size: large;"><span class="s2">위</span> <span class="s2">저장소를</span> fork <span class="s2">하여</span> <span class="s2">자신의</span> <span class="s2">저장소로</span> <span class="s2">땡겨온</span> <span class="s2">후</span>, Clone <span class="s2">하여</span> Webstorm <span class="s2">에서</span> <span class="s2">열어주세요</span>.</span></div>
<div class="p1">
<span style="font-size: large;"><span class="s1"><br />
</span>우리는<span class="s1"> Webpack </span>이라는<span class="s1"> </span>모듈<span class="s1"> </span>번들러를<span class="s1"> </span>사용하겠습니다<span class="s1">.</span></span></div>
<div class="p2">
<span style="font-size: large;"><span class="s2">먼저</span> Webpack<span class="s2">을</span> <span class="s2">설치해주시구요</span>.</span></div>
<div class="p2">
<span style="font-size: large;"><br /></span></div>
<blockquote class="tr_bq">
<span style="font-size: large;">$ npm install webpack --g</span></blockquote>
<div class="p2">
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Terminal <span class="s2">탭에서</span> <span class="s2">아래와</span> <span class="s2">같이</span> <span class="s2">입력해주세요</span>.</span></div>
<div class="p2">
<span style="font-size: large;"><br /></span></div>
<blockquote class="tr_bq">
<span style="font-size: large;">$ npm install --save react react-dom babel-preset-react</span></blockquote>
<div class="p2">
<span style="font-size: large;"><br /></span></div>
<blockquote class="tr_bq">
<span style="font-size: large;">$ webpack </span></blockquote>
<div class="p2">
<span style="font-size: large;"><span class="s2">만약</span> ES2015 <span class="s2">문법을</span> <span class="s2">사용하려면</span> <span class="s2">위에서</span> babel-preset-es2015 <span class="s2">패키지도</span> <span class="s2">함께</span> <span class="s2">설치해야</span> <span class="s2">합니다</span>.</span></div>
<div class="p2">
<span style="font-size: large;"><br /></span>
<span style="font-size: large;"><span class="s2">다</span> <span class="s2">하셨다면</span> $npm install <span class="s2">로</span> package.json <span class="s2">의</span> dependency <span class="s2">와</span> <span class="s2">필요한</span> <span class="s2">개발툴을</span> <span class="s2">모두</span> <span class="s2">설치한</span> <span class="s2">후</span></span></div>
<div class="p2">
<span style="font-size: large;"><br /></span></div>
<blockquote class="tr_bq">
<span style="font-size: large;">$ npm start</span></blockquote>
<div class="p2">
<span style="font-size: large;"><br /></span>
<span style="font-size: large;"><span class="s2">하신</span> <span class="s2">후</span> http://localhost:3001 <span class="s2">로</span> <span class="s2">접속하시면</span>...</span></div>
<div class="p2">
<span style="font-size: large;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicrqfRtKNxF99qXCl3BIZrIOQJO18LMTKIDVKmrqz5Sr5CyeSKoMHJE0IuHPu8R-wlWVB6lcpM-BlGZVmf72ZywV6wY2WYnS9B3gT3A87NhyphenhyphenVoxRXMTUhMDCQhBT7O3MnUlkdJYTqSqmh0/s1600/react.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-size: large;"><img border="0" height="268" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicrqfRtKNxF99qXCl3BIZrIOQJO18LMTKIDVKmrqz5Sr5CyeSKoMHJE0IuHPu8R-wlWVB6lcpM-BlGZVmf72ZywV6wY2WYnS9B3gT3A87NhyphenhyphenVoxRXMTUhMDCQhBT7O3MnUlkdJYTqSqmh0/s400/react.png" width="400" /></span></a></div>
<div class="p3">
</div>
<div class="p1">
<span style="font-size: large;"><span class="s1">
</span>끝입니다<span class="s1">.</span></span></div>
Anonymoushttp://www.blogger.com/profile/00143779259898222603noreply@blogger.com0tag:blogger.com,1999:blog-8277601056435785397.post-14449574335616466432016-03-21T21:32:00.005-07:002016-07-19T19:51:26.001-07:00[HLAPI] IndexOutOfRangeException:NetworkReader:ReadByte out of range : NetBuf sz: ... pos: ... 에러<span style="font-family: inherit; font-size: large;">아마 서버와 클라이언트 간 메시지를 주고 받다가 이런 에러를 보았을 것이다.</span><br />
<span style="font-family: inherit; font-size: large;">처음엔 메시지 크기가 커서 그런 줄 알았는데...</span><br />
<span style="font-family: inherit; font-size: large;">유니티 공식 문서에는 한번에 최대 1400 바이트는 보낼 수 있다고 되어있다.</span><br />
<span style="font-family: inherit; font-size: large;">알고보니 서버의 메시지 클래스와 클라이언트의 메시지 클래스 간 규격이 일치하지 않아서</span><br />
<span style="font-family: inherit; font-size: large;">발생한 문제였다.</span><br />
<span style="font-family: inherit; font-size: large;"><span style="font-family: inherit;"><br /></span>
<span style="font-family: inherit;">예를 들어 서버에서 정의한 사용자 메시지 클래스가</span></span><br />
<pre class="brush: javascript">public class MyMessage : MessageBase
{
public string a;
public string b;
public string c;
}
</pre>
<span style="font-family: inherit; font-size: large;">
<span style="font-family: "menlo";">위와 같다면, 클라이언트에서 역시 위와 동일한 코드로 메시지가 정의되어있어야 한다.</span></span><br />
<span style="font-family: inherit; font-size: large;"><span style="font-family: inherit;">구글링해도 명확한 답변이 없어서 잠시 헤맸는데... 쉽게 해결되는 에</span><span style="font-family: "menlo";">러였다.</span></span>Anonymoushttp://www.blogger.com/profile/00143779259898222603noreply@blogger.com0tag:blogger.com,1999:blog-8277601056435785397.post-40695896577406751412016-01-19T04:43:00.001-08:002016-03-26T06:29:24.536-07:00유니티 5 네트워킹 시스템 HLAPI를 사용하여 LAN 멀티플레이 기본 틀 만들기 - 3(완결)<div style="line-height: 16.3636px;">
<div style="text-align: left;">
<span style="font-family: inherit;"><br /></span></div>
</div>
<div style="line-height: 16.3636px;">
<div style="text-align: left;">
<span style="font-family: inherit;">마지막 장입니다!</span></div>
<div style="text-align: left;">
<span style="font-family: inherit;">1 편에서 예고했던 대로, 동일한 네트워크 내에 존재하는 서버나, 클라이언트를 인식하고, 연결하는 것을 해보겠습니다.</span></div>
</div>
<div style="line-height: 16.3636px;">
<div style="text-align: left;">
<span style="font-family: inherit;">예를 들어, 게임에 접속해서 방을 만들고, 접속한 유저들이 자동으로 뜨는 목록을 보고 싶다거나 할 때 유용하게 쓰일 것 같습니다.</span></div>
</div>
<div style="line-height: 16.3636px;">
<div style="text-align: left;">
<span style="font-family: inherit;">다행히도, HLAPI 의 NetworkDiscovery 컴퍼넌트를 사용해서 이를 쉽게 구현해볼 수 있습니다.</span></div>
</div>
<div style="line-height: 16.3636px;">
<div style="text-align: left;">
<span style="font-family: inherit;"><br /></span></div>
</div>
<div style="line-height: 16.3636px;">
<div style="text-align: left;">
<span style="font-family: inherit;">이 컴퍼넌트는 전송 계층의 UDP Broadcasting 기능을 사용하며, 따라서 인터넷에서 작동하는 것이라 오로지 LAN 상에서만 사용할 수 있습니다.</span></div>
</div>
<div style="line-height: 16.3636px;">
<div style="text-align: left;">
<span style="font-family: inherit;">컨셉은 단순히 특정 포트번호로 '방송'을 송신하는 개체와 수신하는 개체 두 가지가 있고, 방송을 수신하였을 때 이벤트를 받아서 송신한 개체의 IP에 접속하는 것입니다.(송신할 때 IP 주소나 기타 데이터를 를 같이 내보냅니다.)</span></div>
</div>
<div style="line-height: 16.3636px;">
<div style="text-align: left;">
<span style="font-family: inherit;"><br /></span></div>
</div>
<div style="line-height: 16.3636px;">
<div style="text-align: left;">
<span style="font-family: inherit;">역시나, NetworkManager 와 같이 빈 오브젝트에 NetworkDIscovery 컴퍼넌트를 추가하면 됩니다만,</span></div>
</div>
<div style="line-height: 16.3636px;">
<div style="text-align: left;">
<span style="font-family: inherit;">우리는 기본 제공 GUI 를 사용하지 않고 커스텀하기 위해 코드를 조금 더 쳐 보겠습니다.</span></div>
</div>
<div style="line-height: 16.3636px;">
</div>
<div style="line-height: 16.3636px;">
<div style="text-align: left;">
<span style="font-family: inherit;">앞서 작성한 MyNetManager 를 불러와, 다음 노랗게 색칠한 코드 한 줄을 추가합니다.</span></div>
</div>
<div style="line-height: 16.3636px;">
<div style="text-align: left;">
<span style="font-family: inherit;"><br /></span></div>
<div style="text-align: left;">
<span style="font-family: inherit;"><br /></span></div>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGHhihA04PCoF0HUww2YMPVC-uY4mylSsGTL1y35wL5KgOcL0bo8V7rTjHKsLd0ValNmhXdWnAjH4c6d2PQ5IqnEzUYE8focvWEJpb0Wxpu7bLsKIFwTrMeI1ChL7Mc6_SmVQy6l-Dj1hF/s1600/discovery.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em; text-align: left;"><span style="font-family: inherit;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGHhihA04PCoF0HUww2YMPVC-uY4mylSsGTL1y35wL5KgOcL0bo8V7rTjHKsLd0ValNmhXdWnAjH4c6d2PQ5IqnEzUYE8focvWEJpb0Wxpu7bLsKIFwTrMeI1ChL7Mc6_SmVQy6l-Dj1hF/s1600/discovery.PNG" /></span></a><span style="font-family: inherit;"></span><br />
<div style="text-align: left;">
<span style="font-family: inherit;"><span style="font-family: inherit; line-height: 16.3636px;"> </span></span></div>
<br />
<div style="text-align: left;">
<span style="font-family: inherit;"><br /></span></div>
</div>
<div style="line-height: 16.3636px;">
<span style="font-family: inherit;"></span></div>
<div style="line-height: 16.3636px;">
<div style="text-align: left;">
<span style="font-family: inherit;"><br /></span></div>
</div>
<div style="line-height: 16.3636px;">
<br />
<div style="text-align: left;">
<span style="line-height: 16.3636px;"><br /></span></div>
<div style="text-align: left;">
<span style="line-height: 16.3636px;"><br /></span></div>
<div style="text-align: left;">
<span style="line-height: 16.3636px;"><br /></span></div>
<div style="text-align: left;">
<span style="line-height: 16.3636px;"><br /></span></div>
<div style="text-align: left;">
<span style="line-height: 16.3636px;"><br /></span></div>
<div style="text-align: left;">
<span style="line-height: 16.3636px;"><br /></span></div>
<div style="text-align: left;">
<span style="line-height: 16.3636px;"><br /></span></div>
<div style="text-align: left;">
<span style="font-family: inherit; line-height: 16.3636px;">다음은 서버와 클라이언트로 구동을 시작하는 SetupServer, SetupClient 메서드에 </span><span style="font-family: inherit; line-height: 16.3636px;">각각</span><span style="font-family: inherit; line-height: 16.3636px;"> </span></div>
</div>
<div style="line-height: 16.3636px;">
<div style="text-align: left;">
<span style="font-family: inherit;">UDP 브로드캐스팅을 시작하는 명령을 넣습니다.</span></div>
</div>
<div style="line-height: 16.3636px;">
<div style="text-align: left;">
<span style="font-family: inherit;">공통으로 Initialize() 를 실행하여 컴퍼넌트를 초기화 한 뒤,</span></div>
</div>
<div style="line-height: 16.3636px;">
<div style="text-align: left;">
<span style="font-family: inherit;">서버에서는 StartAsServer( ), 클라이언트에서는 StartAsClient( ) 를 각각 실행하면</span></div>
</div>
<div style="line-height: 16.3636px;">
<div style="text-align: left;">
<span style="font-family: inherit;">이제 동일한 네트워크 내의 유니티 게임들이 서로를 인식하게 됩니다.</span></div>
</div>
<div style="line-height: 16.3636px;">
<div style="text-align: left;">
<span style="font-family: inherit;"><br /></span></div>
</div>
<div style="line-height: 16.3636px;">
<div style="line-height: 16.3636px; text-align: left;">
<span style="font-family: inherit;"><br /></span></div>
<div style="line-height: 16.3636px; text-align: left;">
<span style="font-family: inherit;"><br /></span></div>
<div class="separator" style="clear: both; line-height: 16.3636px; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWUb7aMdf6yvavLJttq1FyC7bL0dR1kp84MMiGQv23Hil5rfR_OEsWDfZPOaaphBoOaNPgIJnOB-MSQKaDd1EsOmqoslpUYBN6KMpegptvEob7P1mPoLpfJxHMr7IcqgbZk5NYaHSDjXNj/s1600/serverDiscovery.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em; text-align: left;"><span style="font-family: inherit;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWUb7aMdf6yvavLJttq1FyC7bL0dR1kp84MMiGQv23Hil5rfR_OEsWDfZPOaaphBoOaNPgIJnOB-MSQKaDd1EsOmqoslpUYBN6KMpegptvEob7P1mPoLpfJxHMr7IcqgbZk5NYaHSDjXNj/s1600/serverDiscovery.PNG" /></span></a></div>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSMmtlzobHSL8_IVEQxwhRAFox1qND8tSi78Hs0yo-jEMSxL9ElLPzsWwK2OrWYRDM3eQdtbbmReW3XncKYk5sZTtT5CNKYUSO2A4mb2GkLSsM0TDoGXhkqzl9VOEqOpBatHa19jL5eL8t/s1600/clientDiscovery.PNG" imageanchor="1" style="clear: left; float: left; line-height: 16.3636px; margin-bottom: 1em; margin-right: 1em; text-align: left;"><span style="font-family: inherit;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSMmtlzobHSL8_IVEQxwhRAFox1qND8tSi78Hs0yo-jEMSxL9ElLPzsWwK2OrWYRDM3eQdtbbmReW3XncKYk5sZTtT5CNKYUSO2A4mb2GkLSsM0TDoGXhkqzl9VOEqOpBatHa19jL5eL8t/s1600/clientDiscovery.PNG" /></span></a><span style="font-family: "georgia" , "times new roman" , serif;"></span><br />
<div style="line-height: 16.3636px; text-align: left;">
<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span></div>
</div>
<div style="line-height: 16.3636px;">
<div style="text-align: left;">
<span style="font-family: inherit;"><br /></span></div>
</div>
<div style="line-height: 16.3636px;">
<div style="line-height: 16.3636px;">
<br />
<div style="text-align: left;">
<span style="line-height: 16.3636px;"><br /></span></div>
<div style="text-align: left;">
<span style="line-height: 16.3636px;"><br /></span></div>
<div style="text-align: left;">
<span style="line-height: 16.3636px;"><br /></span></div>
<div style="text-align: left;">
<span style="line-height: 16.3636px;"><br /></span></div>
<div style="text-align: left;">
<span style="line-height: 16.3636px;"><br /></span></div>
<div style="text-align: left;">
<span style="line-height: 16.3636px;"><br /></span></div>
<div style="text-align: left;">
<span style="line-height: 16.3636px;"><br /></span></div>
<div style="text-align: left;">
<span style="line-height: 16.3636px;"><br /></span></div>
<div style="text-align: left;">
<span style="line-height: 16.3636px;"><br /></span></div>
<div style="text-align: left;">
<span style="line-height: 16.3636px;"><br /></span></div>
<div style="text-align: left;">
<span style="line-height: 16.3636px;"><br /></span></div>
<div style="text-align: left;">
<span style="line-height: 16.3636px;"><br /></span></div>
<div style="text-align: left;">
<span style="line-height: 16.3636px;"><br /></span></div>
<div style="text-align: left;">
<span style="line-height: 16.3636px;"><br /></span></div>
<div style="text-align: left;">
<span style="line-height: 16.3636px;"><br /></span></div>
<div style="text-align: left;">
<span style="line-height: 16.3636px;"><br /></span></div>
<div style="text-align: left;">
<span style="line-height: 16.3636px;"><br /></span></div>
<div style="text-align: left;">
<span style="line-height: 16.3636px;"><br /></span></div>
<div style="text-align: left;">
<span style="line-height: 16.3636px;"><br /></span></div>
<div style="text-align: left;">
<span style="line-height: 16.3636px;"><br /></span></div>
<div style="text-align: left;">
<span style="line-height: 16.3636px;"><br /></span></div>
<div style="text-align: left;">
<span style="line-height: 16.3636px;"><br /></span></div>
<div style="text-align: left;">
<span style="line-height: 16.3636px;"><br /></span></div>
<div style="text-align: left;">
<span style="font-family: inherit; line-height: 16.3636px;">하지만 이대로 실행하면 인식을 했는지 전혀 알 수가 없겠죠??</span></div>
</div>
<div style="line-height: 16.3636px;">
<div style="text-align: left;">
<span style="font-family: inherit;"><br /></span></div>
</div>
<div style="line-height: 16.3636px;">
<div style="text-align: left;">
<span style="font-family: inherit;">클라이언트에서 방송을 수신했을 때 발생하는 이벤트를 가로채서 처리를 해야 합니다.</span></div>
</div>
</div>
<div style="line-height: 16.3636px;">
<div style="text-align: left;">
<span style="font-family: inherit;"><br /></span></div>
</div>
<div style="line-height: 16.3636px;">
<div style="text-align: left;">
<span style="font-family: inherit;">빈 게임오브젝트를 생성하고 이름을 'Broadcaster'로 변경하고, 다음 C# Script 를 새로 생성하여 붙입니다.</span></div>
</div>
<div style="line-height: 16.3636px;">
<div style="text-align: left;">
<span style="font-family: inherit;"><br /></span></div>
</div>
<div style="line-height: 16.3636px;">
<div style="text-align: left;">
<span style="font-family: , "nanumgothic" ,;"><span style="font-family: inherit; font-size: 12pt;">// MyNetworkDiscovery.cs</span></span></div>
</div>
<div style="line-height: 16.3636px;">
<div style="text-align: left;">
<span style="font-family: inherit;"><br /></span></div>
</div>
<div style="line-height: 16.3636px;">
<div style="line-height: 16.3636px; text-align: left;">
<span style="font-family: inherit;"><span style="font-family: "georgia" , "times new roman" , serif;"><span style="font-family: , "nanumgothic" ,;"></span><br /></span>
</span></div>
<div style="line-height: 16.3636px;">
<div style="text-align: left;">
<span style="font-family: , "nanumgothic" ,;"><span style="font-family: inherit; font-size: 12pt;">using UnityEngine;</span></span></div>
</div>
<div style="line-height: 16.3636px;">
<div style="text-align: left;">
<span style="font-family: inherit; font-size: 12pt;">using System.Collections;</span></div>
</div>
<div style="line-height: 16.3636px;">
<div style="text-align: left;">
<span style="font-family: inherit; font-size: 12pt;">using UnityEngine.Networking;</span></div>
</div>
<div style="line-height: 16.3636px;">
<div style="text-align: left;">
<span style="font-family: inherit;"><br /></span></div>
</div>
<div style="line-height: 16.3636px;">
<div style="text-align: left;">
<span style="font-family: inherit; font-size: 12pt;">public class MyNetworkDiscovery : NetworkDiscovery</span></div>
</div>
<div style="line-height: 16.3636px;">
<div style="text-align: left;">
<span style="font-family: inherit; font-size: 12pt;">{</span></div>
</div>
<div style="line-height: 16.3636px;">
<div style="text-align: left;">
<span style="font-family: inherit;"><br /></span></div>
</div>
<div style="line-height: 16.3636px;">
<div style="text-align: left;">
<span style="font-family: inherit; font-size: 12pt;"> public override void OnReceivedBroadcast(string fromAddress, string data)</span></div>
</div>
<div style="line-height: 16.3636px;">
<div style="text-align: left;">
<span style="font-family: inherit; font-size: 12pt;"> {</span></div>
</div>
<div style="line-height: 16.3636px;">
<div style="text-align: left;">
<span style="font-family: inherit; font-size: 12pt;"> //서버로부터 브로드캐스트 메시지를 받았을 때 실행됩니다.</span></div>
</div>
<div style="line-height: 16.3636px;">
<div style="text-align: left;">
<span style="font-family: inherit; font-size: 12pt;"> base.OnReceivedBroadcast(fromAddress, data);</span></div>
</div>
<div style="line-height: 16.3636px;">
<div style="text-align: left;">
<span style="font-family: inherit; font-size: 12pt;"> Debug.Log("recived broadcast from : " + fromAddress);</span></div>
</div>
<div style="line-height: 16.3636px;">
<div style="text-align: left;">
<span style="font-family: inherit;"><br /></span></div>
</div>
<div style="line-height: 16.3636px;">
<div style="text-align: left;">
<span style="font-family: inherit; font-size: 12pt;"> StartCoroutine("TweenAnim");</span></div>
</div>
<div style="line-height: 16.3636px;">
<div style="text-align: left;">
<span style="font-family: inherit; font-size: 12pt;"> }</span></div>
</div>
<div style="line-height: 16.3636px;">
<div style="text-align: left;">
<span style="font-family: inherit; font-size: 12pt;">}</span></div>
</div>
<div style="line-height: 16.3636px;">
<div style="text-align: left;">
<span style="font-family: inherit; font-size: 12pt;"><br /></span></div>
</div>
<div style="line-height: 16.3636px;">
<div style="text-align: left;">
<span style="font-family: inherit;">그리고 NetworkManager 컴퍼넌트의 인스펙터창에서 빈 칸으로 되어있는</span></div>
</div>
<div style="line-height: 16.3636px;">
<div style="text-align: left;">
<span style="font-family: inherit;">NetworkDiscovery 에 Broadcaster 를 다음과 같이 끌어다 놓습니다.</span></div>
</div>
<div style="line-height: 16.3636px;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGYdUXTFcj_28ddA7wTeFcZ3WuFBhAPi1qZTqgSB_-bW5o75wlkGwDP9-ExDRlOwEG0fpRanjg3q77z9ch-nmlZPdNhgbewqitDiaXo3Yyr0f-hmFSOG-QmgepAPmIH7rD2kQ3wLZRWlPc/s1600/%25EB%2581%258C%25EC%2596%25B4%25EB%258B%25A4%25EB%2586%2593%25EA%25B8%25B0.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em; text-align: left;"><span style="font-family: inherit;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGYdUXTFcj_28ddA7wTeFcZ3WuFBhAPi1qZTqgSB_-bW5o75wlkGwDP9-ExDRlOwEG0fpRanjg3q77z9ch-nmlZPdNhgbewqitDiaXo3Yyr0f-hmFSOG-QmgepAPmIH7rD2kQ3wLZRWlPc/s1600/%25EB%2581%258C%25EC%2596%25B4%25EB%258B%25A4%25EB%2586%2593%25EA%25B8%25B0.PNG" /></span></a></div>
<div style="text-align: left;">
<span style="font-family: inherit;"><br /></span></div>
</div>
<div style="line-height: 16.3636px;">
<div style="text-align: left;">
<span style="font-family: inherit;"><br /></span></div>
</div>
<div style="line-height: 16.3636px;">
<br />
<div style="text-align: left;">
<span style="line-height: 16.3636px;"><br /></span></div>
<div style="text-align: left;">
<span style="line-height: 16.3636px;"><br /></span></div>
<div style="text-align: left;">
<span style="line-height: 16.3636px;"><br /></span></div>
<div style="text-align: left;">
<span style="line-height: 16.3636px;"><br /></span></div>
<div style="text-align: left;">
<span style="line-height: 16.3636px;"><br /></span></div>
<div style="text-align: left;">
<span style="line-height: 16.3636px;"><br /></span></div>
<div style="text-align: left;">
<span style="line-height: 16.3636px;"><br /></span></div>
<div style="text-align: left;">
<span style="line-height: 16.3636px;"><br /></span></div>
<div style="text-align: left;">
<span style="line-height: 16.3636px;"><br /></span></div>
<div style="text-align: left;">
<span style="line-height: 16.3636px;"><br /></span></div>
<div style="text-align: left;">
<span style="line-height: 16.3636px;"><br /></span></div>
<div style="text-align: left;">
<span style="line-height: 16.3636px;"><br /></span></div>
<div style="text-align: left;">
<span style="line-height: 16.3636px;"><br /></span></div>
<div style="text-align: left;">
<span style="line-height: 16.3636px;"><br /></span></div>
<div style="text-align: left;">
<span style="line-height: 16.3636px;"><br /></span></div>
<div style="text-align: left;">
<span style="line-height: 16.3636px;"><br /></span></div>
<div style="text-align: left;">
<span style="line-height: 16.3636px;"><br /></span></div>
<div style="text-align: left;">
<span style="line-height: 16.3636px;"><br /></span></div>
<div style="text-align: left;">
<span style="line-height: 16.3636px;"><br /></span></div>
<div style="text-align: left;">
<span style="line-height: 16.3636px;"><br /></span></div>
<div style="text-align: left;">
<span style="line-height: 16.3636px;"><br /></span></div>
<div style="text-align: left;">
<span style="line-height: 16.3636px;"><br /></span></div>
<div style="text-align: left;">
<span style="line-height: 16.3636px;"><br /></span></div>
<div style="text-align: left;">
<span style="line-height: 16.3636px;"><br /></span></div>
<div style="text-align: left;">
<span style="line-height: 16.3636px;"><br /></span></div>
<div style="text-align: left;">
<span style="line-height: 16.3636px;"><br /></span></div>
<div style="text-align: left;">
<span style="line-height: 16.3636px;"><br /></span></div>
<div style="text-align: left;">
<span style="line-height: 16.3636px;"><br /></span></div>
<div style="text-align: left;">
<span style="line-height: 16.3636px;"><br /></span></div>
<div style="text-align: left;">
<span style="line-height: 16.3636px;"><br /></span></div>
<div style="text-align: left;">
<span style="line-height: 16.3636px;"><br /></span></div>
<div style="text-align: left;">
<span style="line-height: 16.3636px;"><br /></span></div>
<div style="text-align: left;">
<span style="line-height: 16.3636px;"><br /></span></div>
<div style="text-align: left;">
<span style="line-height: 16.3636px;"><br /></span></div>
<div style="text-align: left;">
<span style="line-height: 16.3636px;"><br /></span></div>
<div style="text-align: left;">
<span style="line-height: 16.3636px;"><br /></span></div>
<div style="text-align: left;">
<span style="line-height: 16.3636px;"><br /></span></div>
<div style="text-align: left;">
<span style="line-height: 16.3636px;"><br /></span></div>
<div style="text-align: left;">
<span style="line-height: 16.3636px;"><br /></span></div>
<div style="text-align: left;">
<span style="line-height: 16.3636px;"><br /></span></div>
<div style="text-align: left;">
<span style="font-family: inherit; line-height: 16.3636px;">NetworkDiscovery 로 부터 상속받은 OnReceivedBroadcast 메서드는 fromAddress 에 </span></div>
</div>
<div style="line-height: 16.3636px;">
<div style="text-align: left;">
<span style="font-family: inherit;">브로드캐스트 메시지를 송신한 개체의 IP 주소, 함께 보낸 data 를 인자로 받습니다.</span></div>
</div>
<div style="line-height: 16.3636px;">
<div style="text-align: left;">
<span style="font-family: inherit;">IP 주소 같은 경우, 게임 내에서 빈번하게 쓰일 것이므로 위 콜백에</span></div>
</div>
<div style="line-height: 16.3636px;">
<div style="text-align: left;">
<span style="font-family: inherit;"><br /></span></div>
</div>
<div style="line-height: 16.3636px;">
<div>
<div style="text-align: left;">
<span style="font-family: inherit; line-height: 16.3636px;"> NetworkManager.singleton.networkAddress = fromAddress;</span></div>
</div>
<div>
<div style="text-align: left;">
<span style="font-family: inherit; line-height: 16.3636px;"><br /></span></div>
</div>
<div>
<div style="text-align: left;">
<span style="font-family: inherit; line-height: 16.3636px;">코드를 추가하여 네트워크 매니저 싱글턴이 IP 주소를 저장하도록 할 수도 있습니다.</span></div>
</div>
</div>
<div style="line-height: 16.3636px;">
<div style="text-align: left;">
<span style="font-family: inherit; line-height: 16.3636px;"><br /></span></div>
</div>
<div style="line-height: 16.3636px;">
<div style="text-align: left;">
<span style="font-family: inherit; line-height: 16.3636px;">이제 두 모바일 기기를 같은 와이파이로 접속시킨 후, 각각을 서버와 클라이언트로 구동하여,</span></div>
</div>
<div style="line-height: 16.3636px;">
<div style="text-align: left;">
<span style="font-family: inherit;"><span style="line-height: 16.3636px;">클라이언트에서는 </span><span style="line-height: 16.3636px;">OnReceivedBroadcast 콜백에서 라벨을 띄워준다거나, 어떤 표시를 하여 송수신이 이루어졌는지 확인해봅시다.</span></span></div>
</div>
<div style="line-height: 16.3636px;">
<div style="text-align: left;">
<span style="font-family: inherit; line-height: 16.3636px;"><br /></span></div>
</div>
<div style="line-height: 16.3636px;">
<div style="text-align: left;">
<span style="font-family: inherit; line-height: 16.3636px;">다음 동영상은 서버로부터 메시지를 수신하면 라벨에 트윈 애니메이션을 적용시켜 수신하였음을 알려주는 시연 동영상입니다.</span></div>
</div>
<div style="line-height: 16.3636px;">
<div style="text-align: left;">
<span style="font-family: inherit;"><br /></span></div>
</div>
<div style="line-height: 16.3636px;">
<div style="text-align: left;">
<span style="font-family: inherit;"><br /></span></div>
</div>
<div style="line-height: 16.3636px;">
<div style="text-align: left;">
<span style="font-family: inherit; line-height: 16.3636px;"><br /></span></div>
</div>
<div style="line-height: 16.3636px;">
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: inherit;"><iframe allowfullscreen='allowfullscreen' webkitallowfullscreen='webkitallowfullscreen' mozallowfullscreen='mozallowfullscreen' width='320' height='266' src='https://www.blogger.com/video.g?token=AD6v5dzP-rOZynAvs1ajDDPflpL1odTI_ffe_-tQZo1_lom-ztSOD7Fcs5S19_M7W3C63CxSmYdsWt05M0mSM5I7DA' class='b-hbp-video b-uploaded' frameborder='0'></iframe></span></div>
<span style="font-family: inherit;"></span></div>
<div style="line-height: 16.3636px;">
<div style="text-align: left;">
<span style="font-family: inherit;">완성된 코드는 다음 저장소에서 다운 받으실 수 있습니다.</span></div>
</div>
<div style="line-height: 16.3636px;">
<div style="text-align: left;">
<span style="font-family: inherit;"><br /></span></div>
</div>
<div style="line-height: 16.3636px;">
<div style="text-align: left;">
<a href="https://github.com/ifndefdeadmau5/HLAPI_tutorial" target="_blank"><span style="font-family: inherit;">https://github.com/ifndefdeadmau5/HLAPI_tutorial</span></a></div>
</div>
<div style="line-height: 16.3636px;">
<div style="text-align: left;">
<span style="font-family: inherit;"><br /></span></div>
</div>
<div style="line-height: 16.3636px;">
<div style="line-height: 16.3636px;">
<div style="text-align: left;">
<span style="font-family: inherit; line-height: 16.3636px;">지금까지 유니티5의 HLAPI 를 사용해 네트워크 객체를 서로 연결하고, 네트워크 메시지를 수신할 수 있는 기본적인 기능을 구현하는 법을 알아보았습니다.</span></div>
</div>
<div style="line-height: 16.3636px;">
<div style="text-align: left;">
<span style="font-family: inherit; line-height: 16.3636px;">읽어주셔서 감사드리고, 많은 도움이 됬으면 좋겠습니다</span><span style="font-family: inherit; font-size: large; line-height: 16.3636px;">^^</span></div>
</div>
</div>
</div>
Anonymoushttp://www.blogger.com/profile/00143779259898222603noreply@blogger.com0tag:blogger.com,1999:blog-8277601056435785397.post-24092153683869855752016-01-12T05:10:00.000-08:002016-01-12T05:10:55.606-08:00유니티 5 네트워킹 시스템 HLAPI를 사용하여 LAN 멀티플레이 기본 틀 만들기 - 2<span style="font-family: Arial, Helvetica, sans-serif;">전 편에서 서버와 클라이언트의 연결까지 되었으니,</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">이제 서로 메시지를 주고받는 기능을 넣어보겠습니다.</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Arial, Helvetica, sans-serif;">메시지를 보내기 위해서는 메시지의 <span style="color: blue;">'타입'</span>과 <span style="color: blue;">'자료형'</span></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">두가지에 대한 정의가 필요합니다.</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">간단한 정수나, 문자열, 구조체 등등 보내고 싶은 걸 보냅시다.</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">저는 간단하게 int 형 변수 하나만 보내보겠습니다.</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Arial, Helvetica, sans-serif;"><자료형></span><br />
<pre style="background: rgb(0, 24, 0); color: #55cc66;"><span style="font-family: Arial, Helvetica, sans-serif;"><span style="color: #508050; font-weight: bold;">public</span> <span style="color: #508050; font-weight: bold;">class</span> MyMessage <span style="color: #808030;">:</span> MessageBase
<span style="color: purple;">{</span>
<span style="color: #508050; font-weight: bold;">public</span> <span style="color: #508050; font-weight: bold;">int</span> number<span style="color: purple;">;</span>
<span style="color: purple;">}</span></span></pre>
<span style="font-family: Arial, Helvetica, sans-serif;">메시지클래스는 MessageBase 기반 클래스를 상속받아 작성해야 합니다. 규칙입니다.</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Arial, Helvetica, sans-serif;"><타입></span><br />
<pre style="background: rgb(0, 24, 0); color: #55cc66;"><span style="font-family: Arial, Helvetica, sans-serif;"><span style="color: #508050; font-weight: bold;">public</span> <span style="color: #508050; font-weight: bold;">class</span> MyMsgType <span style="color: purple;">{</span>
<span style="color: #508050; font-weight: bold;">public</span> <span style="color: #508050; font-weight: bold;">static</span> <span style="color: #508050; font-weight: bold;">short</span> CustomMsgType<span style="color: #808030;">=</span> MsgType<span style="color: #808030;">.</span>Highest <span style="color: #808030;">+</span> <span style="color: #778c77;">1</span><span style="color: purple;">;</span>
<span style="color: purple;">}</span><span style="color: purple;">;</span></span></pre>
<span style="font-family: Arial, Helvetica, sans-serif;">Msgtype 은 정의를 보면 아래와 같이 여러 네트워크 상황에 대한 상수를 정의해놓고 있습니다. Highest 가 46 으로 가장 높은 값을 가지므로 1을 더한 사용자정의 메시지타입을 정의하였습니다.</span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVhVG4ZxzthM1QunUIMj4bFolhfhbdRaWnALgd1zzmGWV3HZpfSHWUXtE85wXglAz8wpQhxJPCk6Zk79SRSDbzOBkTYPNBNRvWonp6VRBRBuKhBW3G9rZ2wXB6JvKsoTqTv1rHOSqs8_FF/s1600/MsgType.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: Arial, Helvetica, sans-serif;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVhVG4ZxzthM1QunUIMj4bFolhfhbdRaWnALgd1zzmGWV3HZpfSHWUXtE85wXglAz8wpQhxJPCk6Zk79SRSDbzOBkTYPNBNRvWonp6VRBRBuKhBW3G9rZ2wXB6JvKsoTqTv1rHOSqs8_FF/s320/MsgType.PNG" width="315" /></span></a></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></div>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Arial, Helvetica, sans-serif;">다음으로 메시지를 수신하였을 때 호출할 콜백을 정의하고, 등록합니다.</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Arial, Helvetica, sans-serif;"><콜백 정의></span><br />
<pre style="background: rgb(0, 24, 0); color: #55cc66;"><span style="font-family: Arial, Helvetica, sans-serif;"><span style="color: #508050; font-weight: bold;">public</span> <span style="color: #508050; font-weight: bold;">void</span> <b>OnMessage</b><span style="color: #808030;">(</span>NetworkMessage netMsg<span style="color: #808030;">)</span>
<span style="color: purple;">{</span>
MyMessage msg <span style="color: #808030;">=</span> netMsg<span style="color: #808030;">.</span>ReadMessage<span style="color: #808030;"><</span>MyMessage<span style="color: #808030;">></span><span style="color: #808030;">(</span><span style="color: #808030;">)</span><span style="color: purple;">;</span>
Debug<span style="color: #808030;">.</span>Log<span style="color: #808030;">(</span><span style="color: maroon;">"</span><span style="color: #cc5555;">OnScoreMessage </span><span style="color: maroon;">"</span> <span style="color: #808030;">+</span> msg<span style="color: #808030;">.</span>number<span style="color: #808030;">)</span><span style="color: purple;">;</span>
<span style="color: purple;">}</span></span></pre>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Arial, Helvetica, sans-serif;"><콜백 등록></span><br />
<pre style="background: rgb(0, 24, 0); color: #55cc66;"><span style="font-family: Arial, Helvetica, sans-serif;"><span style="color: #508050; font-weight: bold;">public</span> <span style="color: #508050; font-weight: bold;">void</span> SetupServer<span style="color: #808030;">(</span><span style="color: #808030;">)</span>
<span style="color: purple;">{</span>
Debug<span style="color: #808030;">.</span>Log<span style="color: #808030;">(</span><span style="color: maroon;">"</span><span style="color: #cc5555;">SetupServer()</span><span style="color: maroon;">"</span><span style="color: #808030;">)</span><span style="color: purple;">;</span>
StartServer<span style="color: #808030;">(</span><span style="color: #808030;">)</span><span style="color: purple;">;</span>
NetworkServer<span style="color: #808030;">.</span>Listen<span style="color: #808030;">(</span><span style="color: #778c77;">4444</span><span style="color: #808030;">)</span><span style="color: purple;">;</span>
NetworkServer<span style="color: #808030;">.</span>RegisterHandler<span style="color: #808030;">(</span> MyMsgType<span style="color: #808030;">.</span>CustomMsgType<span style="color: #808030;">,</span> <b>OnMessage</b><span style="color: #808030;">)</span><span style="color: purple;">;</span> <span style="color: #b96969;">// 서버측에서 콜백을 등록하는 부분입니다.</span>
<span style="color: purple;">}</span></span></pre>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Arial, Helvetica, sans-serif;">전 편에서 서버를 셋업하는 코드에 콜백을 등록하는 한 줄만 추가했습니다.</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">이렇게 하면 서버에서는 클라이언트가 MyMsgType.CustomMsgType(47) 형 메시지를 보낸 것을 감지하면 OnMessage 콜백을 호출하게 되고, </span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">NetworkMessage 타입 변수를 인자로 받아 메시지의 내용, 보낸 개체의 ip 등등 포함된 정보를 확인할 수 있습니다.</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">반대로 클라이언트에서 콜백을 등록하려면, NetworkClient 클래스에도 동일한 RegisterHandler 메서드가 있으므로 myClient.RegisterHandler 와 같이 사용하시면 됩니다.</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Arial, Helvetica, sans-serif;">그럼 마지막으로 제일 중요한 메시지를 보내는 부분을 작성하면 되겠네요.</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Arial, Helvetica, sans-serif;"><클라이언트에서 서버로 메시지 송신></span><br />
<pre style="background: rgb(0, 24, 0); color: #55cc66;"><span style="font-family: Arial, Helvetica, sans-serif;"><span style="color: #508050; font-weight: bold;">public</span> <span style="color: #508050; font-weight: bold;">void</span> SendMessage<span style="color: #808030;">(</span><span style="color: #508050; font-weight: bold;">int</span> number<span style="color: #808030;">)</span>
<span style="color: purple;">{</span>
MyMessage msg <span style="color: #808030;">=</span> <span style="color: #508050; font-weight: bold;">new</span> MyMessage<span style="color: #808030;">(</span><span style="color: #808030;">)</span><span style="color: purple;">;</span>
msg<span style="color: #808030;">.</span>number <span style="color: #808030;">=</span> number<span style="color: purple;">;</span>
myClient<span style="color: #808030;">.</span>Send<span style="color: #808030;">(</span> MyMsgType<span style="color: #808030;">.</span>CustomMsgType<span style="color: #808030;">,</span> msg<span style="color: #808030;">)</span><span style="color: purple;">;</span>
<span style="color: purple;">}</span></span></pre>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Arial, Helvetica, sans-serif;">서버에서 보낼 때는 NetworkServer.Send , NetworkServer.SendToAll 와 같이 작성하면 됩니다.</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">코드를 다 작성하였으니 GUI 를 구성하고, Client 버튼에 SetupClient()를, Server 버튼에 SetupServer()를, Send 버튼은 SendMessage(int number) 에 각각 이벤트를 연결 시킵니다.</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Arial, Helvetica, sans-serif;">빌드 후 따로 실행시킨 프로그램은 클라이언트로,</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">에디터에서는 서버로 각각 접속한 후, 클라이언트에서 Send 버튼을 눌러봅시다.</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZQ73fAo_fJBsFhyphenhyphenDmdaGJ5_pL0C7J8WnF-HruTal83AYYevE5P9PG9rogsseyjhvgrZcGHjrsB8Ssz2Kve8oN3mCuTgi_GkONPAMLymAU9pu0a6lij_xEkSTPF_YSp53tE1SrR-CMrQJd/s1600/gui.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: Arial, Helvetica, sans-serif;"><img border="0" height="295" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZQ73fAo_fJBsFhyphenhyphenDmdaGJ5_pL0C7J8WnF-HruTal83AYYevE5P9PG9rogsseyjhvgrZcGHjrsB8Ssz2Kve8oN3mCuTgi_GkONPAMLymAU9pu0a6lij_xEkSTPF_YSp53tE1SrR-CMrQJd/s640/gui.PNG" width="640" /></span></a></div>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Arial, Helvetica, sans-serif;">참조 : </span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">http://docs.unity3d.com/kr/current/Manual/UNetMessages.html</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">http://docs.unity3d.com/ScriptReference/Networking.NetworkClient.Send.html</span><br />
<br />Anonymoushttp://www.blogger.com/profile/00143779259898222603noreply@blogger.com0tag:blogger.com,1999:blog-8277601056435785397.post-6980101022969566832016-01-06T18:44:00.002-08:002016-01-06T18:44:17.668-08:00Git 등 SVN 으로 코드관리시 꼭 필요한 폴더<span style="background-color: white; font-size: 12px; line-height: 16.8px;"><span style="font-family: Arial, Helvetica, sans-serif;">Assets, ProjectSettings 폴더의 내용만 필요하다고 하네요..</span></span>Anonymousnoreply@blogger.com0tag:blogger.com,1999:blog-8277601056435785397.post-64518186933348726072016-01-06T05:25:00.000-08:002016-07-23T23:22:21.272-07:00유니티 5 네트워킹 시스템 HLAPI를 사용하여 LAN 멀티플레이 기본 틀 만들기외부 인터넷을 거치지 않고, 로컬 와이파이만을 이용한 멀티 플레이를 구현하기 위해 유니티 매뉴얼을 보다가 좋은 재료를 발견하여 짧게 적어보겠습니다.<br />
<div>
<br /></div>
<div>
본 튜토리얼에서는 LAN 환경에서 네트워크 객체(유니티 애플리케이션)들이 서로의 존재를 인식하고, 접속하여 네트워크 메시지를 주고받고, 각종 콜백처리를 하기 위한 기본 틀을 구현해보겠습니다. 그리고 간단한 UI 구성을 위해 NGUI 를 사용하겠습니다.</div>
<div>
<br /></div>
<div>
유니티가 5.1 버전 이후로 새로운 네트워킹 시스템을 발표하여 이전보다 더 간편하고 쉽게 좋은 성능을 가진 멀티플레이를 구현할 수 있게 되었습니다.</div>
<div>
<br /></div>
<div>
<a href="http://docs.unity3d.com/kr/current/Manual/UNetManager.html">NetworkManager</a> 와 <a href="http://docs.unity3d.com/kr/current/Manual/UNetUsingHLAPI.html">HLAPI(High-Level)</a> 를 사용하여 시작할 수 있습니다.</div>
<div>
간단하게 위의 한글 매뉴얼을 흝어보고 오시면 더 이해가 쉽습니다.</div>
<div>
<br /></div>
<div>
먼저 새 프로젝트를 만들고, 빈 게임 오브젝트 하나를 생성합니다.</div>
<div>
원래는 'Add Component' 버튼을 눌러 NetworkManager 컴퍼넌트를 추가하는 것으로 끝나지만, 입맛대로 커스터마이징하기 위해 NetworkManager 를 상속한 사용자 정의 스크립트를 생성하겠습니다. </div>
<div>
<br /></div>
<div>
새로운 C# 스크립트를 생성하여 MyNetManager 로 이름을 변경한 후 빈 게임 오브젝트에 붙입니다.</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvzrzGO-9BisrdR7hNI3s7Ggc0nUXeA_OKkznBUVxJ75SEpiBYd7qG9hU1wzA_cUHfgicw_VcLiw4ldV7rvh0WMs_TY6Te9xzWEyU5NpSZgz5jgCP6AlMgNaXb25bIRzzIfswFLlE5HboR/s1600/1.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvzrzGO-9BisrdR7hNI3s7Ggc0nUXeA_OKkznBUVxJ75SEpiBYd7qG9hU1wzA_cUHfgicw_VcLiw4ldV7rvh0WMs_TY6Te9xzWEyU5NpSZgz5jgCP6AlMgNaXb25bIRzzIfswFLlE5HboR/s320/1.PNG" width="283" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
그리고 아래처럼 코딩해주세요.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<pre class="brush: javascript">using UnityEngine;
using System.Collections;
using UnityEngine.Networking; /* 유니티 네트워킹 API 입니다. */
public class MyNetManager : NetworkManager /* NetworkManager 를 상속합니다. */
{
NetworkClient myClient;
/* 확장 함수 */
public override void OnStartServer()
{
Debug.Log("OnStartServer( )");
}
public override void OnStartClient(NetworkClient client)
{
Debug.Log("OnStartClient( )");
}
public override void OnStopClient()
{
Debug.Log("OnStopClient( )");
}
/* 사용자 정의 함수 */
public void SetupServer()
{
Debug.Log("SetupServer()");
StartServer();
NetworkServer.Listen(4444);
NetworkServer.RegisterHandler(MsgType.Connect, OnConnected);
}
public void SetupClient()
{
Debug.Log("SetupClient()");
StartClient();
myClient = new NetworkClient ();
myClient.Connect("127.0.0.1", 4444);
}
public void OnConnected(NetworkMessage netMsg)
{
Debug.Log("Connected to server");
}
}
</pre>
<div class="separator" style="clear: both; font-family: 'Malgun Gothic'; white-space: normal;">
OnStartServer( ), OnStartClient( ),OnStopClient( ) 는NetworkManager 를 확장한 메서드들입니다. 나중에 이 부분에서 서버를 구동시켰을 때, 클라이언트가 접속했을 때의 처리를 할 것입니다. 이 외의 여러 네트워크 이벤트를 처리할 수 있는 가상 함수들은 공식문서를 참조하시기 바랍니다. </div>
<div class="separator" style="clear: both; font-family: 'Malgun Gothic'; white-space: normal;">
</div>
<div class="separator" style="clear: both; font-family: 'Malgun Gothic'; white-space: normal;">
아래의 SetupServer( ), SetupClient( ) 메서드는 본 튜토리얼에서 <b><a href="http://docs.unity3d.com/kr/current/Manual/class-NetworkManagerHUD.html">NetworkManagerHUD</a>(기본 GUI) 를 사용하지 않을 것이기 때문에</b> 사용자 정의로 직접 서버를 구동하고 클라이언트를 접속시키는 코드를 작성하기 위해 만든 것입니다.</div>
<div class="separator" style="clear: both; font-family: 'Malgun Gothic'; white-space: normal;">
</div>
<div class="separator" style="clear: both; font-family: 'Malgun Gothic'; white-space: normal;">
NetworkServer.RegisterHandler 메서드는 서버측에서 네트워크 이벤트를 처리할 처리기를 등록하고 있습니다. 위 코드는 클라이언트 접속시 발생할 이벤트를 처리합니다.</div>
<div class="separator" style="clear: both; font-family: 'Malgun Gothic'; white-space: normal;">
</div>
<div class="separator" style="clear: both; font-family: 'Malgun Gothic'; white-space: normal;">
마지막으로 아래와 같이 각각 서버, 클라이언트 모드로 구동하기 위한 버튼을 두 개 배치합니다. 한쪽엔 버튼 클릭시 MyNetManager 의 SetupSever( )를, 다른 하나는 SetupClient( ) 가 실행되도록 클릭 이벤트를 연결합시다.</div>
<div class="separator" style="clear: both; font-family: 'Malgun Gothic'; white-space: normal;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-kRbPOkR2kLyCd1dreRlZQXznIO3MLexuCC8IVYvJfg62yoPFrCiIWDaR1wNSZ9IxaddDTnp9Vf1gBSFw7URy2Gq1xfSWsmcfOSIyC0j_8BwpcDZVUMzBF-CLNj49IcGjhyphenhyphenxaijArGuyf/s1600/2.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="250" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-kRbPOkR2kLyCd1dreRlZQXznIO3MLexuCC8IVYvJfg62yoPFrCiIWDaR1wNSZ9IxaddDTnp9Vf1gBSFw7URy2Gq1xfSWsmcfOSIyC0j_8BwpcDZVUMzBF-CLNj49IcGjhyphenhyphenxaijArGuyf/s400/2.PNG" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="font-family: "malgun gothic"; white-space: normal;">
</span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: "arial" , "helvetica" , sans-serif;">접속이 이루어졌는지 확인하기 위해, 유니티 에디터에서 서버를 실행하고, PC 버전으로 빌드하여 클라이언트로 실행해봅니다.</span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: "arial" , "helvetica" , sans-serif;">그러면 다음과 같이 클라이언트로 접속했을 때 콘솔창에 메시지가 뜨는 것을 볼 수 있습니다.</span></div>
<div class="separator" style="clear: both; font-family: 'Malgun Gothic'; white-space: normal;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFY2jmBh8MUy_YXHFAGhK_cJkHP6us7yrypEE9Yov8ko8C7jf_sza3sm1U1xGGhjOoeXhUmp5M0f_ChxcPDVMd2Lmbf6pKcYgIGvoDnGX97ISEcaafF9_3zlbSfxbqCaV9G9MFNol0nCtf/s1600/3.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="126" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFY2jmBh8MUy_YXHFAGhK_cJkHP6us7yrypEE9Yov8ko8C7jf_sza3sm1U1xGGhjOoeXhUmp5M0f_ChxcPDVMd2Lmbf6pKcYgIGvoDnGX97ISEcaafF9_3zlbSfxbqCaV9G9MFNol0nCtf/s640/3.PNG" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<span style="font-family: "arial" , "helvetica" , sans-serif; text-align: left;">
</span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: "arial" , "helvetica" , sans-serif;">2편에서는 서버와 클라이언트가 연결 된 상태에서 서로 메시지를 주고받는 기능을 구현해보겠습니다.</span></div>
<div>
</div>
Anonymoushttp://www.blogger.com/profile/00143779259898222603noreply@blogger.com0tag:blogger.com,1999:blog-8277601056435785397.post-63667466085885052072015-12-18T21:17:00.005-08:002016-03-26T06:27:48.032-07:00Public 필드 선언과 [SerializeField] 선언의 차이<span style="font-family: inherit;"><br /></span>
<span style="font-family: inherit;"><br /></span>
<span style="font-family: inherit;">유니티 스크립트에서 public 으로 변수를 선언한 경우 자동적으로 인스펙터창에서 공개 된다.</span><br />
<span style="font-family: inherit;">또한 변수에 [SerializeField] 속성을 지정했을 때에도 마찬가지로 같은 결과를 볼 수 있다.</span><br />
<span style="font-family: inherit;">둘 중에 어떤</span><br />
<span style="font-family: inherit;"><br /></span>
<span style="font-family: inherit;">일반적으로, 항상 변수를 생성할 때 가능한 최소의 접근 레벨을 갖도록( i.e.private ) 해야 한다.</span><br />
<span style="font-family: inherit;">이에 대한 많은 근거들이 있지만, 그 중에 하나는 여러분이 큰 팀에서 협업을 하거나 또는 혼자서 작업할지라도,</span><br />
<span style="font-family: inherit;">실수로 다른 클래스에서 작성된 코드로 인해 변경되지 않아야 하는 변수들이 변경되기 쉽기 때문이다.</span><br />
<span style="font-family: inherit;">여러분이 선언한 대부분의 클래스 내에서 필요한 변수들은 private 여야 한다.</span><br />
<span style="font-family: inherit;"><br /></span>
<span style="font-family: inherit;">public 변수 선언으로 유니티가 자동적으로 인스펙터창에 띄워주는 편리한 면이 있지만, 그보다</span><br />
<span style="font-family: inherit;">private 선언 후 [SerializeField] 속성을 지정해 주는 것이 좋다. 어떻게 보면 private 선언의 목적을 깨는 것이지만,</span><br />
<span style="font-family: inherit;">이것은 그나마 다른 스크립트의 오류를 찾는 것보다 훨씬 수월할 것이다.</span><br />
<span style="font-family: inherit;"><br /></span>
<a href="http://docs.unity3d.com/ScriptReference/SerializeField.html"><span style="font-family: inherit;">유니티 공식 문서</span></a><br />
<span style="font-family: inherit;"><br /></span>
<span style="font-family: inherit;"><br /></span>
<span style="font-family: inherit;">유니티 공식 문서를 보면 [SerializeField] 를 거의 사용할 일이 없을 것이라고 나오고, public 변수의 선언을 권장하지만,</span><br />
<span style="font-family: inherit;">다른 여러 프로그래머의 의견은 이것이 나쁜 OOP 습관이라고 주장한다.</span><br />
<span style="font-family: inherit;"><br /></span>
<span style="font-family: inherit;">한편, 아래는 Unite 2015 Europe 에서</span><br />
<span style="font-family: inherit;">Public 선언이 Private 선언보다 더 나은 성능을 낼 수 있다는 주장을 하고 있는 동영상이다.</span><br />
<span style="font-family: inherit;"><br /></span>
<a href="https://www.youtube.com/watch?v=4lAam8Marns&feature=youtu.be&t=7m00s"><span style="font-family: inherit;">유튜브 링크</span></a><br />
<span style="font-family: inherit;"><br /></span>
<span style="font-family: inherit;"><br /></span>
<span style="font-family: inherit;">성능이 중요시 되는 저사양 디바이스에서는 이 점을 고려해서 개발에 참고하면 좋을 듯 하다.</span>Anonymousnoreply@blogger.com0tag:blogger.com,1999:blog-8277601056435785397.post-25525360653734666402015-12-17T16:47:00.000-08:002015-12-18T04:26:31.852-08:00좌표계좌표계<br />
<div>
<br /></div>
<div>
월드좌표계와 로컬좌표계가 있다.</div>
<div>
월드좌표계는 유니티의 씬 내부에서 전체적으로 쓰이는 좌표이고,</div>
<div>
로컬좌표계는 어떤 객체마다의 고유한 좌표계를 말한다.</div>
<div>
유니티에서 이 두 좌표계의 관계(부모-자식 관계)는 게임오브젝트를 부모 게임오브젝트의 자식으로 등록하는 것으로 구현이 가능하다.</div>
<div>
결국, 자식 게임오브젝트의 좌표 = 부모의 월드좌표계 + 자식의 로컬좌표계로 표현 된다.</div>
Anonymousnoreply@blogger.com0tag:blogger.com,1999:blog-8277601056435785397.post-59606408034706806092015-12-12T02:42:00.003-08:002015-12-12T03:16:18.028-08:002015년도 주목할만한 언어, 프레임워크<div class="postTitle" style="color: #5d5d5d; font-family: 'Apple SD Gothic NEO', NanumBarunGothic, NanumGothic, '맑은 고딕', 돋움, Arial, sans-serif; height: 170px; padding: 37px 170px 0px 60px; position: relative;">
<h2 class="subject" id="cyco-post-title" style="-webkit-box-orient: vertical; -webkit-line-clamp: 2; color: #202020; display: -webkit-box; font-size: 28px; height: 96px; line-height: 44px; margin: 0px; overflow: hidden; padding: 0px 15px 0px 0px; text-overflow: ellipsis; vertical-align: middle; word-wrap: break-word;">
2015년도 주목할만한 언어, 프레임워크</h2>
</div>
<br />
<article class="postDetail" style="color: #5d5d5d; font-family: 'Apple SD Gothic NEO', NanumBarunGothic, NanumGothic, '맑은 고딕', 돋움, Arial, sans-serif; padding: 0px 60px;"><section class="post textBox cyco-textlet" style="color: #464646; line-height: 28px; margin-bottom: 16px; padding: 0px;"><div class="textData">
<b>원문은 <a href="http://tutorialzine.com/2014/12/the-languages-and-frameworks-that-you-should-learn-in-2015/" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; color: #464646; text-decoration: none;" target="_blank">http://tutorialzine.com/2014/12/the-languages-and-frameworks-that-you-should-learn-in-2015/</a></b></div>
<div class="textData">
<b><br /></b><span style="font-size: 14px;">내용은 요약 및 의역(오역)이 가득하오니 보다 상세한 내용은 원문을 참조하시기 바랍니다. </span><br />
<span style="font-size: 14px;">귀찮아서 아래 등장하는 명사 외래어는 한국어 표기로 했습니다.</span><br />
<span style="font-size: 14px;">(본 번역물은 어디서든 인용 및 수정 배포하셔도 상관없습니다.)</span><br />
<span style="font-size: 14px;">언어 / 플랫폼</span><br />
<span style="font-size: 14px;">Node.js가 최종적으로는 승자네요. 그 뒤로는 PHP 였습니다. 3위는 자바스크립트고요. 이 이야기는 얼마나 Node.js의 영역이 커졌는지를 알 수 있는 겁니다. 만약 자바스크립트를 알고 있다면 벌써 반은 먹고 들어가는거에요, Node.js로 앱을 만드는데 있어서는요.</span><br />
<span style="font-size: 14px;">(역주: 투표 결과는 원문링크를 참조하세요.)</span><br />
<span style="font-size: 14px;">프레임워크</span><br />
<span style="font-size: 14px;">AngularJS가 프레임워크 카테고리에서 최고를 달렸습니다. 많은 회사들과 기업들이 앵글러를 도입했습니다. 구글의 뛰어난 개발자들이 AngularJS 뒤에서 지원해주었으니 당연한 결과랄까요. </span><br />
<span style="font-size: 14px;">(역주: 투표 결과는 원문 링크를 참조하세요.2위는 루비 온 레일즈, 3위는 라라벨(?), 4위는 쟝고 등.. ) </span><br />
<span style="font-size: 14px;">이제부터 2015년 당신이 배워야 하는 것들을 쭉 나열해 보겠습니다.</span><br />
<span style="font-size: 14px;"><b>1. 자바스크립트가 온세상에 가득해</b></span><br />
<span style="font-size: 14px;">당신이 웹 개발을 한다면 이젠 자바스크립트 언어는 '반드시' 알아야 합니다. 백엔드를 무엇을 쓰던간에 '반드시' 말이에요. 3일만 투자하면 브라우저에서 자바스크립트를 쓰실 수 있고, 서버에서도 쓸 수 있어요. 모바일 앱에서는 심지어는 하드웨어를 제어할 수도 있답니다. ES6에 들어서면 더욱 강력하고 사용하기 쉽게 진보될 겁니다. Bower와 npm을 보시는것도 좋아요. 그리고 jshink와 jscs는 당신의 코드스타일과 이슈 리포팅에 큰 도움을 줄거에요.</span><br />
<span style="font-size: 14px;"><b>2. AngularJS</b></span><br />
<span style="font-size: 14px;">AngularJS는 구글에서 내놓은 자바스크립트 프레임워크입니다. 정말 빠르게 기업환경에서 사용가능한 강력한 웹 앱을 구현할 수 있습니다. 조만간 모든 자바스크립트 관련 직업에서는 AngularJS를 다뤄보았냐고 묻게 될 겁니다. 그렇지만 지금 바로 뛰어드는건 잠깐 참으세요. AngularJS 2.0가 곧 출시될 겁니다. 과거와는 많은 변경사항이 있다고 합니다. 그러니 잠시 기다렸다가 뛰어드시는게 더 좋을 수도 있어요.</span><br />
<span style="font-size: 14px;"><b>3. react</b></span><br />
<span style="font-size: 14px;">react는 이 리스트에 새내기로 등장한 녀석입니다. 이 라이브러리는 페이스북에서 개발했고 가상 DOM을 쓰기에 엄청난 속도를 자랑하며, 기존 프로젝트에 연동성도 좋습니다. 게다가 개발자 커뮤니티도 몹시 활성화 되어 있지요. 우리의 의견으로는, react는 2015년에는 보다 많은 잠재력을 가진 프레임워크가 될 겁니다.</span><br />
<span style="font-size: 14px;"><b>4. Node.js</b></span><br />
<span style="font-size: 14px;">Node.js와 함께라면 당신은 네트워크에 연결된 서버를 자바스크립트로 만들 수 있습니다. 익스프less나 API엔드포인트, 웹소켓 등을 사용하면 웹사이트의 백엔드로도 쓸 수 있고 심지어는 토렌트 클라이언트로도 쓸 수 있습니다. 노드는 엄청나게 활성화된 커뮤니티와 온갖 다른 언어로 구현된 다양한 모듈 들이 쏟아지고 있습니다. 만약 새내기라면, 인터렉티브 Node.js 튜토리얼인 노드스쿨을 추천합니다.</span><br />
<span style="font-size: 14px;"><b>5. NoSql 데이터베이스</b></span><br />
<span style="font-size: 14px;">데이터베이스 중에 테이블이나 시퀄을 요구치 않는 것들을 요즘의 웹 개발자들과 우리는 아주 높은 가치를 지니고 있다고 봅니다. 이런 녀석들이 내년에는 더욱 유명해지겠지요. 두 가지 주목할만한 선택지는 몽고디비와 레디스가 아닐까 합니다. 포스트그less나 마이에스큐엘보다는 시작하는데 훨씬 쉽습니다. 그렇지만 NoSql 데이터베이스를 완벽한 대체자로 여기는 우를 범하지는 마세요. 어찌되었건 전통적 관계형 데이터베이스가 더 유용한 경우도 있습니다. 관계형 디비가 이거저거 해야 할 작업이 많음에도 불구하고요.</span><br />
<span style="font-size: 14px;"><b>6. Less/Sass/Stylus</b></span><br />
<span style="font-size: 14px;">CSS는 너무 많은 불편함이 있습니다. 일단 천줄이 넘어가면 찾고 수정하는거도 힘들어지죠. 이런 일을 해결하기 위해 등장한 것이 Less/Sass/Stylus입니다. 이녀석들은 변수나 매크로들을 만들어 최종적으로 CSS로 컴파일 시켜줍니다. 다시말해서 더 좋은 코드를 덜 피곤하게 만들 수 있습니다. 이 녀석들은 반나절이면 모든 걸 이해할 수 있을거에요.</span><br />
<span style="font-size: 14px;"><b>7. 이미 출시된 '새' 프레임워크</b></span><br />
<span style="font-size: 14px;">Meteor는 웹 어플리케이션 개발에 있어서 프론트와 백엔드의 경계를 흐릿하게 만든 새로운 접근 방식의 프레임워크입니다. 이 녀석은 실시간 앱을 개발 가능하게 해주고요, 점점 빠른 속도로 커뮤니티가 성장해 이를 위한 패키지도 많이 출시하고 있습니다. Hood.ie 는 좀 더 작은 경쟁자입니다만 백엔드를 당신을 위해서 제어를 해줍니다. 이를 통해서 개발자의 역량을 프론트엔드로 집중 시킬 수 있습니다.</span><br />
<span style="font-size: 14px;"><b>8. 이미 출시된 '새' 언어들</b></span><br />
<span style="font-size: 14px;">새로운 언어를 탐닉하는 분들을 위해서 여기 이렇게 한말씀 올립니다. Golang, Rust, Elixir 요 녀석들이 이제 프로그래밍 모임에서 엄청난 성능 개선을 목전에 두고 있습니다. 진정하세요, 우리는 당신의 개발 환경을 당장 바꾸라고 그러는게 아닙니다. 그렇지만 기꺼이 그러고 싶으시다면 해당 언어의 웹 사이트에서 튜토리얼부터 진행해보세요.</span><br />
<span style="font-size: 14px;"><b>9. 고전적 풀 스택 프레임워크들</b></span><br />
<span style="font-size: 14px;">요새는 한 페이지 웹 어플리케이션도 주목 받습니다. 그렇지만 여전히 서버 사이드의 웹 앱들이 필요하죠. Ruby on Rails, Django, Laravel, Play, ASP.NET 이 풀 스택 프레임워크 들이 있습니다. 그렇지만 아시다시피 견고한 MVC 패턴의 프레임워크를 다루며 생산성을 늘리기 위해서는 먼저 공부해야 하는 시간이 필요합니다.</span><br />
<span style="font-size: 14px;">10. 오래된 수문장들</span><br />
<span style="font-size: 14px;">여기 태고적부터 개발 세계를 지켜왔던 수문장들이 있습니다. Java, .NET, Python, Ruby. 이들은 전부 거대한 커뮤니티를 가지고 있으며 이력서도 화려하죠. 각자 장단점도 명확합니다. 그렇지만 작은 규모의 프로젝트에는 태고적 개발자와 오늘날 개발자가 불평 없이 쓸 수 있는 녀석들입니다. 알아서 이 녀석들 중 어떤 녀석이 입맞에 맞는지 금방 느끼실 수 있을거에요.</span><br />
<span style="font-size: 14px;"><b>11. jQuery를 잊지 마세요.</b></span><br />
<span style="font-size: 14px;">PHP, WordPress, jQuery 는 여전히 웹 사이트를 만드는데 매우 효율적인 녀석들입니다. Wordpress는 블로그 플랫폼에서 이미 과거에 두각을 나타내었고, 이제는 더 나아가 CMS/프레임워크 개발 영역을 아우르는 광대한 웹 어플리케이션까지 뻗어나갔습니다. 디자이너라도 일단 이걸 써먹을지 고민하셔야 할 정도에요. 만약 PHP를 백엔드로 쓰겠다고 마음 먹었다면, PHP의 바른 사용이라는 문서를 꼭 참조하세요.(역주:본문 링크 참조) 또한 아직 준비가 덜 되었다면, Bootstrap을 보세요. 이 녀석은 프론트 엔드의 코드를 작성하는 여러분들을 도울 겁니다. Boostrap은 이를 위한 플러그인도 많답니다.</span></div>
</section></article>Anonymoushttp://www.blogger.com/profile/00143779259898222603noreply@blogger.com0tag:blogger.com,1999:blog-8277601056435785397.post-65098758856181354312015-12-12T02:40:00.001-08:002016-03-26T06:30:03.559-07:00Meteor 공식 튜토리얼 번역 - 3.Collection 부터 5.Update and Remove 까지<a href="https://www.meteor.com/tutorials/blaze/collections"><span style="font-family: inherit; font-size: large;">미티어 공식 튜터리얼</span></a><br />
<span style="font-family: inherit; font-size: large;"><br /></span>
<span style="font-family: inherit; font-size: large;">위 링크를 번역한 것입니다. 오타나 오역은 댓글로 지적해주시면 수정하겠습니다.</span><br />
<span style="font-family: inherit; font-size: large;"><br /></span>
<span style="font-family: inherit; font-size: large;">===========================================================</span><br />
<span style="font-family: inherit; font-size: large;"><br /></span>
<span style="font-family: inherit; font-size: large;"><br /></span>
<span style="color: #464646; line-height: 28px;"><span style="font-family: inherit; font-size: large;">컬렉션 : 지속적인 데이터를 저장하는 방법</span></span><br />
<span style="font-family: inherit; font-size: large;"><span style="color: #464646; line-height: 28px;"><br /></span>
<span style="color: #464646; font-family: "apple sd gothic neo" , "nanumbarungothic" , "nanumgothic" , , , "arial" , sans-serif;"><span style="line-height: 28px;"><b>새 컬렉션을 생성하는 것은 간단히 아래의 문장을 적으면 된다.</b></span></span></span><br />
<b><span style="font-family: inherit; font-size: large;"><span style="color: #464646; line-height: 28px;">MyCollection = new </span><span style="color: #464646; line-height: 28px;">Mongo.Collection("my-collection");</span></span></b><br />
<span style="font-family: inherit; font-size: large;"><span style="color: #464646; line-height: 28px;"><br /></span>
</span><br />
<span style="font-family: inherit; font-size: large;"><br style="color: #464646; line-height: 28px;" /></span>
<span style="color: #464646; font-family: inherit; font-size: large; line-height: 28px;">Inserting tasks from the console</span><br />
<span style="color: #464646; font-family: inherit; font-size: large; line-height: 28px;"><b>- 콘솔로부터 task 삽입하기</b></span><br />
<span style="font-family: inherit; font-size: large;"><br style="color: #464646; line-height: 28px;" /></span>
<span style="color: #464646; font-family: inherit; font-size: large; line-height: 28px;">Items inside collections are called documents. </span><br />
<span style="color: #464646; font-family: inherit; font-size: large; line-height: 28px;"><b>- 콜렉션 내에 항목들은 도큐먼트라고 부른다</b></span><br />
<span style="font-family: inherit; font-size: large;"><br style="color: #464646; line-height: 28px;" /></span>
<span style="color: #464646; font-family: inherit; font-size: large; line-height: 28px;">Let's use the server database console to insert some documents into our </span><br />
<span style="color: #464646; font-family: inherit; font-size: large; line-height: 28px;">collection. In a new terminal tab, go to your app directory and type:</span><br />
<span style="color: #464646; font-family: inherit; font-size: large; line-height: 28px;">meteor mongo</span><br />
<b><span style="font-family: inherit; font-size: large;"><span style="color: #464646; line-height: 28px;">- 콜렉션에 도큐먼트를 넣어봅시다(콘솔로부터) 새로운 cmd 창을 열고, 작업 </span><br style="color: #464646; line-height: 28px;" /><span style="color: #464646; line-height: 28px;">디렉토리로 가서 meteor mongo 라고 칩니다</span></span></b><br />
<span style="font-family: inherit; font-size: large;"><br style="color: #464646; line-height: 28px;" /></span>
<span style="color: #464646; font-family: inherit; font-size: large; line-height: 28px;">This opens a console into your app's local development database. Into </span><br />
<span style="color: #464646; font-family: inherit; font-size: large; line-height: 28px;">the prompt, type:</span><br />
<b><span style="font-family: inherit; font-size: large;"><span style="color: #464646; line-height: 28px;">- 이 명령은 당신의 앱에 로컬 데이터베이스를 불러옵니다 cmd 에 다음과 같</span><br style="color: #464646; line-height: 28px;" /><span style="color: #464646; line-height: 28px;">이 입력:</span></span></b><br />
<span style="font-family: inherit; font-size: large;"><br style="color: #464646; line-height: 28px;" /></span>
<span style="color: #464646; font-family: inherit; font-size: large; line-height: 28px;">db.tasks.insert({ text: "Hello world!", createdAt: new Date() });</span><br />
<span style="color: #464646; font-family: inherit; font-size: large; line-height: 28px;">In your web browser, you will see the UI of your app immediately update </span><br />
<span style="color: #464646; font-family: inherit; font-size: large; line-height: 28px;">to show the new task.</span><br />
<b><span style="font-family: inherit; font-size: large;"><span style="color: #464646; line-height: 28px;">-니 웹브라우저에서, 새로운 task 가 업데이트 됨에 따라 즉각적으로 바뀌는 </span><br style="color: #464646; line-height: 28px;" /><span style="color: #464646; line-height: 28px;">UI를 볼 수 있을 것이다.</span></span></b><br />
<span style="font-family: inherit; font-size: large;"><span style="color: #464646; line-height: 28px;"><br /></span>
<span style="color: #464646; line-height: 28px;">You can see that we di</span><span style="color: #464646; line-height: 28px;">dn't have to write any code to connect the </span></span><br />
<span style="color: #464646; font-family: inherit; font-size: large; line-height: 28px;">server-side database to our front-end code — </span><br />
<span style="color: #464646; font-family: inherit; font-size: large; line-height: 28px;">it just happened automatically.</span><br />
<b><span style="font-family: inherit; font-size: large;"><span style="color: #464646; line-height: 28px;">- 또한 우리가 서버사이드 db 와 우리의 프론엔드 코드를 연결하기 위해 아</span><br style="color: #464646; line-height: 28px;" /><span style="color: #464646; line-height: 28px;">무런 코드도 작성할 필요가 없다는 것을 볼 수 있다.</span><br style="color: #464646; line-height: 28px;" /><span style="color: #464646; line-height: 28px;">그저 자동으로 일어난다.</span></span></b><br />
<span style="font-family: inherit; font-size: large;"><br style="color: #464646; line-height: 28px;" /></span>
<span style="color: #464646; font-family: inherit; font-size: large; line-height: 28px;">Insert a few more tasks from the database console with different text. </span><br />
<span style="color: #464646; font-family: inherit; font-size: large; line-height: 28px;"><b>- 데이터베이스로부터 몇 가지 다른 텍스트를 더 삽입해봐라. </b></span><br />
<span style="font-family: inherit; font-size: large;"><br style="color: #464646; line-height: 28px;" /></span>
<span style="font-family: inherit; font-size: large;"><span style="color: #464646; line-height: 28px;">In the next step, we'll see how to add functionality to ou</span><span style="color: #464646; line-height: 28px;">r app's UI so </span></span><br />
<span style="color: #464646; font-family: inherit; font-size: large; line-height: 28px;">that we can add tasks without using the database console.</span><br />
<b><span style="font-family: inherit; font-size: large;"><span style="color: #464646; line-height: 28px;">- 다음 단계에서, 데이터베이스 콘솔 없이 task 를 추가하기 위해 어떻게 </span><br style="color: #464646; line-height: 28px;" /><span style="color: #464646; line-height: 28px;">app 의 UI 에 기능을 추가하는지 살펴본다</span></span></b><br />
<span style="font-family: inherit; font-size: large;"><br style="color: #464646; line-height: 28px;" /></span>
<span style="color: #464646; font-family: inherit; font-size: large; line-height: 28px;"><Adding tasks with a form></span><br />
<span style="color: #464646; font-family: inherit; font-size: large; line-height: 28px;"><b>- 폼으로 task 추가하기</b></span><br />
<span style="font-family: inherit; font-size: large;"><br style="color: #464646; line-height: 28px;" /></span>
<span style="color: #464646; font-family: inherit; font-size: large; line-height: 28px;">In this step, we'll add an input field for users to add tasks to the </span><br />
<span style="color: #464646; font-family: inherit; font-size: large; line-height: 28px;">list.</span><br />
<b><span style="font-family: inherit; font-size: large;"><span style="color: #464646; line-height: 28px;">- 이번 단계에서, 유저들이 list 에 task 를 추가하기 위한 입력칸을 추가할 </span><br style="color: #464646; line-height: 28px;" /><span style="color: #464646; line-height: 28px;">것입니다</span></span></b><br />
<span style="font-family: inherit; font-size: large;"><br style="color: #464646; line-height: 28px;" /></span>
<span style="color: #464646; font-family: inherit; font-size: large; line-height: 28px;">First, let's add a form to our HTML:</span><br />
<span style="color: #464646; font-family: inherit; font-size: large; line-height: 28px;"><b>-먼저 니 html에 폼을 추가합시다</b></span><br />
<span style="font-family: inherit; font-size: large;"><br style="color: #464646; line-height: 28px;" /></span>
<span style="color: #464646; font-family: inherit; font-size: large; line-height: 28px;">Here's the JavaScript code we need to add to listen to the submit event </span><br />
<span style="color: #464646; font-family: inherit; font-size: large; line-height: 28px;">on the form:</span><br />
<span style="color: #464646; font-family: inherit; font-size: large; line-height: 28px;"><b>- 이것은 폼의 전송이벤트를 감지하기 위해 추가할 자바스크립트 코드입니다.</b></span><br />
<span style="font-family: inherit; font-size: large;"><br style="color: #464646; line-height: 28px;" /></span>
<span style="color: #464646; font-family: inherit; font-size: large; line-height: 28px;">Now your app has a new input field. To add a task, just type into the </span><br />
<span style="color: #464646; font-family: inherit; font-size: large; line-height: 28px;">input field and hit enter. If you open a new browser window and open </span><br />
<span style="color: #464646; font-family: inherit; font-size: large; line-height: 28px;">the app again, you'll see that the list is automatically synchronized </span><br />
<span style="color: #464646; font-family: inherit; font-size: large; line-height: 28px;">between all clients.</span><br />
<b><span style="font-family: inherit; font-size: large;"><span style="color: #464646; line-height: 28px;">- 이제 니 앱은 새로운 입력필드가 추가되었습니다. 태스크를 추가하기 위해 </span><br style="color: #464646; line-height: 28px;" /><span style="color: #464646; line-height: 28px;">그저 타이핑 후 엔터를 치면 됩니다.</span></span></b><br />
<b><span style="font-family: inherit; font-size: large;"><span style="color: #464646; line-height: 28px;">새로운 창이나 윈도우를 다시 열게되면 리스트가 클라이언트들 사이에서 자</span><br style="color: #464646; line-height: 28px;" /><span style="color: #464646; line-height: 28px;">동으로 동기화되는 것을 볼 수 있을겁니다.</span></span></b><br />
<span style="font-family: inherit; font-size: large;"><br style="color: #464646; line-height: 28px;" /></span>
<span style="color: #464646; font-family: inherit; font-size: large; line-height: 28px;"><Attaching events to templates></span><br />
<span style="color: #464646; font-family: inherit; font-size: large; line-height: 28px;"><b>템플릿에 이벤트 추가하기</b></span><br />
<span style="font-family: inherit; font-size: large;"><br style="color: #464646; line-height: 28px;" /></span>
<span style="color: #464646; font-family: inherit; font-size: large; line-height: 28px;">Event listeners are added to templates in much the same way as helpers </span><br />
<span style="color: #464646; font-family: inherit; font-size: large; line-height: 28px;">are: </span><br />
<span style="color: #464646; font-family: inherit; font-size: large; line-height: 28px;"><b>- 이벤트 리스너는 헬퍼와 거의 동일한 방법으로 추가됩니다...</b></span><br />
<span style="font-family: inherit; font-size: large;"><br style="color: #464646; line-height: 28px;" /></span>
<span style="color: #464646; font-family: inherit; font-size: large; line-height: 28px;">by calling Template.templateName.events(...) with a dictionary. </span><br />
<span style="color: #464646; font-family: inherit; font-size: large; line-height: 28px;"><b>- Template.templateName.events(...) 와 dictionary 를 호출함으로써요.</b></span><br />
<span style="font-family: inherit; font-size: large;"><br style="color: #464646; line-height: 28px;" /></span>
<span style="color: #464646; font-family: inherit; font-size: large; line-height: 28px;">The keys describe the event to listen for, and the values are event </span><br />
<span style="color: #464646; font-family: inherit; font-size: large; line-height: 28px;">handlers that are called when the event happens.</span><br />
<b><span style="font-family: inherit; font-size: large;"><span style="color: #464646; line-height: 28px;">- 키는 우리가 감지하는 이벤트, 값은 이벤트가 일어났을때 호출되는 이벤트 </span><br style="color: #464646; line-height: 28px;" /><span style="color: #464646; line-height: 28px;">핸들러를 의미합니다..</span></span></b><br />
<b><span style="font-family: inherit; font-size: large;"><br style="color: #464646; line-height: 28px;" /><span style="color: #464646; line-height: 28px;">방금 살펴본 코드에서는 우리는 submit 이벤트를 리스닝 중이고 엔터를 치면 </span><br style="color: #464646; line-height: 28px;" /><span style="color: #464646; line-height: 28px;">이벤트 핸들러가 발동되는 것입니다.</span></span></b><br />
<span style="font-family: inherit; font-size: large;"><br style="color: #464646; line-height: 28px;" /></span>
<b><span style="font-family: inherit; font-size: large;"><span style="color: #464646; line-height: 28px;">이벤트 핸들러는 'event' 라는 인자를 받는데 감지한 이벤트에 대한 정보를 </span><br style="color: #464646; line-height: 28px;" /><span style="color: #464646; line-height: 28px;">담고있습니다. 이 경우에서 event.target 은 우리의 form element 이고 우리</span><br style="color: #464646; line-height: 28px;" /><span style="color: #464646; line-height: 28px;">는 'event.target.text.value'를 통해 입력된 값을 얻을 수 있습니다.</span></span></b><br />
<b><span style="font-family: inherit; font-size: large;"><br style="color: #464646; line-height: 28px;" /><span style="color: #464646; line-height: 28px;">console.log(event) 코드를 삽입함으로써 event 의 모든 properties 를 볼 </span><br style="color: #464646; line-height: 28px;" /><span style="color: #464646; line-height: 28px;">수 있습니다.</span></span></b><br />
<b><span style="font-family: inherit; font-size: large;"><br style="color: #464646; line-height: 28px;" /><span style="color: #464646; line-height: 28px;">마지막 줄은 일종의 초기화 작업을 합니다. 입력 창을 빈 칸으로 만들고, </span><br style="color: #464646; line-height: 28px;" /><span style="color: #464646; line-height: 28px;">false 를 return 하여 웹 브라우저에게 기본 폼 전송 동작을 하지 말것을 명</span><br style="color: #464646; line-height: 28px;" /><span style="color: #464646; line-height: 28px;">령합니다 왜냐면 우리는 이미 그것을 핸들링 했기 떄문입니다.</span></span></b><br />
<span style="font-family: inherit; font-size: large;"><br style="color: #464646; line-height: 28px;" /></span>
<span style="color: #464646; font-family: inherit; font-size: large; line-height: 28px;"><Inserting into a collection></span><br />
<span style="color: #464646; font-family: inherit; font-size: large; line-height: 28px;">Inside the event handler, we are adding a task to the tasks collection </span><br />
<span style="color: #464646; font-family: inherit; font-size: large; line-height: 28px;">by calling Tasks.insert().</span><br />
<span style="color: #464646; font-family: inherit; font-size: large; line-height: 28px;"><b>- 이벤트 핸들러 내에서, 우리는 'Task.Insert()' 를 호출해서 tasks 콜렉션에 task를 추가할 수 있습니다.</b></span><br />
<span style="font-family: inherit; font-size: large;"><br style="color: #464646; line-height: 28px;" /></span>
<span style="color: #464646; font-family: inherit; font-size: large; line-height: 28px;">We can assign any properties to the task object,</span><br />
<span style="color: #464646; font-family: inherit; font-size: large; line-height: 28px;"><b>- 우리는 task 객체 에 어떤 속성이든지 할당할 수 있습니다.</b></span><br />
<span style="font-family: inherit; font-size: large;"><br style="color: #464646; line-height: 28px;" /></span>
<span style="color: #464646; font-family: inherit; font-size: large; line-height: 28px;">such as the time created, since we don't ever have to define a </span><br />
<span style="color: #464646; font-family: inherit; font-size: large; line-height: 28px;">schema for the collection.</span><br />
<span style="color: #464646; font-family: inherit; font-size: large; line-height: 28px;"><b>- 예로 생성 날짜와 같은... , 우리는 콜렉션의 스키마 같은 것을 전혀 정의하지 않았기 때문입니다.</b></span><br />
<span style="font-family: inherit; font-size: large;"><br /></span>
<span style="color: #464646; font-family: inherit; font-size: large; line-height: 28px;">Being able to insert anything into the database from the client isn't </span><br />
<span style="color: #464646; font-family: inherit; font-size: large; line-height: 28px;">very secure,</span><br />
<span style="color: #464646; font-family: inherit; font-size: large; line-height: 28px;"><b>- 클라이언트로 부터 어떤 값이든 입력받게 하는것은 보안상 좋지 않지만,</b></span><br />
<span style="font-family: inherit; font-size: large;"><b><br style="color: #464646; line-height: 28px;" /></b><span style="color: #464646; line-height: 28px;">but it's okay for now. </span></span><br />
<span style="color: #464646; font-family: inherit; font-size: large; line-height: 28px;"><b>-지금 당장은 괜찮습니다</b></span><br />
<span style="font-family: inherit; font-size: large;"><b><br style="color: #464646; line-height: 28px;" /></b><span style="color: #464646; line-height: 28px;">In step 10 we'll learn how we can </span></span><br />
<span style="color: #464646; font-family: inherit; font-size: large; line-height: 28px;">make our app secure and restrict how data is inserted into the </span><br />
<span style="color: #464646; font-family: inherit; font-size: large; line-height: 28px;">database.</span><br />
<span style="color: #464646; font-family: inherit; font-size: large; line-height: 28px;"><b>- 10단계에서 우리는 어떻게 우리 앱의 보안을 강화하고 어떻게 데이터가 데이터베이스에 들어오는 지를 제한하는지 배울겁니다</b></span><br />
<span style="font-family: inherit; font-size: large;"><br style="color: #464646; line-height: 28px;" /></span>
<span style="color: #464646; font-family: inherit; font-size: large; line-height: 28px;"><Sorting our tasks></span><br />
<span style="color: #464646; font-family: inherit; font-size: large; line-height: 28px;">Currently, our code displays all new tasks at the bottom of the list.</span><br />
<span style="color: #464646; font-family: inherit; font-size: large; line-height: 28px;"><b>-현재, 우리의 코드는 모든 새로운 태스크를 리스트 하단에 뿌려줍니다.</b></span><br />
<span style="font-family: inherit; font-size: large;"><br style="color: #464646; line-height: 28px;" /></span>
<span style="color: #464646; font-family: inherit; font-size: large; line-height: 28px;">That's not very good for a task list, because we want to see the newest tasks first.</span><br />
<span style="color: #464646; font-family: inherit; font-size: large; line-height: 28px;"><b>- 그것은 작업리스트로서 별로 좋지 않습니다 우리는 새로운 것이 상단에 위치되기 원하기 때문입니다..</b></span><br />
<span style="font-family: inherit; font-size: large;"><br style="color: #464646; line-height: 28px;" /></span>
<span style="color: #464646; font-family: inherit; font-size: large; line-height: 28px;">We can solve this by sorting the results using the createdAt field that is automatically added by our new code. Just add a sort option to the find call inside the tasks helper:</span><br />
<span style="color: #464646; font-family: inherit; font-size: large; line-height: 28px;"><b>-우리는 createdAt 필드를 이용해서 리스트가 자동정렬되도록 할 것입니다..그저 task helper 내의 find call 을 이용해서..</b></span><br />
<span style="font-family: inherit; font-size: large;"><br style="color: #464646; line-height: 28px;" /></span>
<span style="color: #464646; font-family: inherit; font-size: large; line-height: 28px;"><Getting data in event handlers></span><br />
<span style="color: #464646; font-family: inherit; font-size: large; line-height: 28px;">Inside the event handlers, this refers to an individual task object. </span><br />
<span style="color: #464646; font-family: inherit; font-size: large; line-height: 28px;"><b>- 이벤트 핸들러내에서, "this"는 각각의 태스크 오브젝트를 가리킵니다</b></span><br />
<span style="font-family: inherit; font-size: large;"><br style="color: #464646; line-height: 28px;" /></span>
<span style="color: #464646; font-family: inherit; font-size: large; line-height: 28px;">In a collection, every inserted document has a unique _id field that can be used to refer to that specific document. </span><br />
<span style="color: #464646; font-family: inherit; font-size: large; line-height: 28px;"><b>- 컬렉션에서, 모든 삽입된 도큐먼트는 유니크한 _id 필드를 가지고 있습니다. 그리고 그것은 특정 도큐먼트를 가리킬 때 사용됩니다.</b></span><br />
<span style="font-family: inherit; font-size: large;"><br style="color: #464646; line-height: 28px;" /></span>
<span style="color: #464646; font-family: inherit; font-size: large; line-height: 28px;">We can get the _id of the current task with this._id. Once we have the _id, we can use update and remove to modify the relevant task.</span><br />
<b><span style="font-family: inherit; font-size: large;"><span style="color: #464646; line-height: 28px;">- 우리는 this._id 문장을 통해 현재 태스크의 _id 필드 밸류를 얻어올 수 있습니다.</span><br style="color: #464646; line-height: 28px;" /><span style="color: #464646; line-height: 28px;">한번 _id를 얻으면, 해당 태스크를 업데이트하거나 삭제할 수 있습니다..</span></span></b><br />
<span style="font-family: inherit; font-size: large;"><br style="color: #464646; line-height: 28px;" /></span>
<span style="color: #464646; font-family: inherit; font-size: large; line-height: 28px;"><Update></span><br />
<span style="color: #464646; font-family: inherit; font-size: large; line-height: 28px;">The update function on a collection takes two arguments.</span><br />
<span style="color: #464646; font-family: inherit; font-size: large; line-height: 28px;"><b>- 컬렉션의 update 함수는 2개의 인자를 가집니다..</b></span><br />
<span style="font-family: inherit; font-size: large;"><br style="color: #464646; line-height: 28px;" /></span>
<span style="color: #464646; font-family: inherit; font-size: large; line-height: 28px;">The first is a selector that identifies a subset of the collection, and the second is an update parameter that specifies what should be done to the matched objects.</span><br />
<span style="color: #464646; font-family: inherit; font-size: large; line-height: 28px;"><b>- 첫 번째는 컬렉션의 subset을 의미하는 선택자입니다. 그리고 두 번째는 update 인자로, 매치된 개체가 바뀌어야 할 값을 의미합니다.</b></span><br />
<span style="font-family: inherit; font-size: large;"><br style="color: #464646; line-height: 28px;" /></span>
<span style="color: #464646; font-family: inherit; font-size: large; line-height: 28px;">In this case, the selector is just the _id of the relevant task. The update parameter uses $set to toggle the checked field, which will represent whether the task has been completed.</span><br />
<span style="color: #464646; font-family: inherit; font-size: large; line-height: 28px;"><b>- 이 경우에서, 선택자는 해당 task의 _id 입니다. 업데이트 인자는 $set 을 사용하여 check 영역(작업이 완료되었는지를 표시하는)을 토글합니다.</b></span><br />
<span style="font-family: inherit; font-size: large;"><br style="color: #464646; line-height: 28px;" /></span>
<span style="color: #464646; font-family: inherit; font-size: large; line-height: 28px;"><Remove></span><br />
<span style="color: #464646; font-family: inherit; font-size: large; line-height: 28px;">The remove function takes one argument, a selector that determines which item to remove from the collection.</span><br />
<span style="color: #464646; font-family: inherit; font-size: large; line-height: 28px;"><b>- 삭제 함수는 하나의 인자를 가지고, 선택자는 컬렉션에서 삭제할 항목을 결정합니다.</b></span><br />
<span style="font-family: inherit; font-size: large;"><br style="color: #464646; line-height: 28px;" /></span>
<span style="color: #464646; font-family: inherit; font-size: large; line-height: 28px;"><Using object properties or helpers to add/remove classes></span><br />
<span style="font-family: inherit; font-size: large;"><br style="color: #464646; line-height: 28px;" /></span>
<span style="color: #464646; font-family: inherit; font-size: large; line-height: 28px;">If you try checking off some tasks after adding all of the above code, </span><br />
<span style="color: #464646; font-family: inherit; font-size: large; line-height: 28px;"><b>- 너가 아래의 코드를 모드 추가한 후, 체크를 해제하면</b></span><br />
<span style="color: #464646; font-family: inherit; font-size: large; line-height: 28px;">you will see that checked off tasks have a line through them. </span><br />
<span style="color: #464646; font-family: inherit; font-size: large; line-height: 28px;"><b>- 해제한 항목들에 줄이 그어지는 것을 확인할 수 있다</b></span><br />
<span style="font-family: inherit; font-size: large;"><br style="color: #464646; line-height: 28px;" /></span>
<span style="color: #464646; font-family: inherit; font-size: large; line-height: 28px;">This is enabled by the following snippet:</span><br />
<span style="color: #464646; font-family: inherit; font-size: large; line-height: 28px;"><b>- 다음 스니펫으로 이것을 작동한다</b></span><br />
<span style="font-family: inherit; font-size: large;"><br style="color: #464646; line-height: 28px;" /></span>
<span style="color: #464646; font-family: inherit; font-size: large; line-height: 28px;"><li class="{{#if checked}}checked{{/if}}"></span><br />
<span style="font-family: inherit; font-size: large;"><br style="color: #464646; line-height: 28px;" /></span>
<span style="font-family: inherit; font-size: large;"><span style="color: #464646; line-height: 28px;">With this code, if the checked property of a task i</span><span style="color: #464646; line-height: 28px;">s true, the checked class is added to our list item. </span></span><br />
<span style="color: #464646; font-family: inherit; font-size: large; line-height: 28px;"><b>- 이 코드에서는, task 의 체크 속성값이 참이면, 체크된 class 는 우리의 list item에 추가된다.</b></span><br />
<span style="font-family: inherit; font-size: large;"><br style="color: #464646; line-height: 28px;" /></span>
<span style="color: #464646; font-family: inherit; font-size: large; line-height: 28px;">Using this class, we can make checked-off tasks look different in our CSS.</span><br />
<span style="color: #464646; font-family: inherit; font-size: large; line-height: 28px;"><b>- 이 class를 사용해서, 우리는 체크 해제된 tasks가 우리의 CSS 에서 다르게 보여지도록 할 수 있다.</b></span>Anonymoushttp://www.blogger.com/profile/00143779259898222603noreply@blogger.com0tag:blogger.com,1999:blog-8277601056435785397.post-85790027199052643062015-12-12T02:27:00.003-08:002016-03-26T06:29:42.387-07:00Meteor 시작하기<div class="postTitle" style="color: #5d5d5d; font-family: 'Apple SD Gothic NEO', NanumBarunGothic, NanumGothic, '맑은 고딕', 돋움, Arial, sans-serif; height: 170px; padding: 37px 170px 0px 60px; position: relative;">
<h2 class="subject" id="cyco-post-title" style="color: #202020; height: 96px; line-height: 44px; margin: 0px; overflow: hidden; padding: 0px 15px 0px 0px; text-overflow: ellipsis; vertical-align: middle; word-wrap: break-word;">
<span style="font-family: inherit; font-size: large;"><br /></span></h2>
</div>
<span style="font-family: inherit; font-size: large;"><br /></span>
<br />
<article class="postDetail" style="color: #5d5d5d; font-family: 'Apple SD Gothic NEO', NanumBarunGothic, NanumGothic, '맑은 고딕', 돋움, Arial, sans-serif; padding: 0px 60px;"><section class="post textBox cyco-textlet" style="color: #464646; line-height: 28px; margin-bottom: 16px; padding: 0px;"><div class="textData">
<span style="font-family: inherit; font-size: large;">아래의 URL 에서 각자 맞는 OS 대로 설치하면 된다</span><br />
<a href="https://www.meteor.com/install" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; color: #464646; text-decoration: none;" target="_blank"><span style="font-family: inherit; font-size: large;">https://www.meteor.com/install</span></a><br />
<span style="font-family: inherit; font-size: large;">나는 창문이므로 인스톨러를 다운받았음</span><br />
<span style="font-family: inherit; font-size: large;">1. 설치 중</span></div>
</section><section class="post imageBox cyco-imagelet" style="margin-bottom: 16px; padding: 0px;"><figure style="margin: 0px;"><span style="font-family: inherit; font-size: large;"><img alt="" src="http://cythumb.cyworld.com/810x0/c2down.cyworld.co.kr/download?fid=64224b43796c86444b054ed31e0cca8a&name=1527110347129641947916619.jpg" srctext="http://c2down.cyworld.co.kr/download?fid=64224b43796c86444b054ed31e0cca8a&name=1527110347129641947916619.jpg" style="border: 0px; max-width: 100%; vertical-align: top;" /></span></figure></section><section class="post textBox cyco-textlet" style="color: #464646; line-height: 28px; margin-bottom: 16px; padding: 0px;"><div class="textData">
<span style="font-family: inherit; font-size: large;">2. 설치 완료 시 화면. cmd 에서 meteor 를 치란다..</span></div>
</section><section class="post imageBox cyco-imagelet" style="margin-bottom: 16px; padding: 0px;"><figure style="margin: 0px;"><span style="font-family: inherit; font-size: large;"><img alt="" src="http://cythumb.cyworld.com/810x0/c2down.cyworld.co.kr/download?fid=64224b43796c86443ee44ed31e1c788a&name=1894212571148261854317487.jpg" srctext="http://c2down.cyworld.co.kr/download?fid=64224b43796c86443ee44ed31e1c788a&name=1894212571148261854317487.jpg" style="border: 0px; max-width: 100%; vertical-align: top;" /></span></figure></section><section class="post textBox cyco-textlet" style="color: #464646; line-height: 28px; margin-bottom: 16px; padding: 0px;"><div class="textData">
<span style="font-family: inherit; font-size: large;">3. 쳤을 때의 화면. 설치가 된 것 같다... 꽤 간단하다</span></div>
</section><section class="post imageBox cyco-imagelet" style="margin-bottom: 16px; padding: 0px;"><figure style="margin: 0px;"><span style="font-family: inherit; font-size: large;"><img alt="" src="http://cythumb.cyworld.com/810x0/c2down.cyworld.co.kr/download?fid=64224b43796c864493c84ed31e29638a&name=1815117173199081662719126.jpg" srctext="http://c2down.cyworld.co.kr/download?fid=64224b43796c864493c84ed31e29638a&name=1815117173199081662719126.jpg" style="border: 0px; max-width: 100%; vertical-align: top;" /></span></figure></section></article>Anonymoushttp://www.blogger.com/profile/00143779259898222603noreply@blogger.com0tag:blogger.com,1999:blog-8277601056435785397.post-19434454819305369492015-12-12T02:15:00.004-08:002015-12-12T03:12:40.496-08:00NGUI vs UGUI ?<h2>
NGUI vs UGUI ?</h2>
<br />
<span style="color: #333333; font-family: "helvetica" , "arial" , sans-serif;"><span style="background-color: #fafafa; font-size: 14.6667px; line-height: 20.5333px;">유니티로 작업하면서 UI 관련해서 어떤 툴을 써야할지 검색하다보니 두 가지 선택사항이 있었다.</span></span><br />
<span style="color: #333333; font-family: "helvetica" , "arial" , sans-serif;"><span style="background-color: #fafafa; font-size: 14.6667px; line-height: 20.5333px;"><b>NGUI(Next-Gen UI)</b> 라는 기존의 범용적으로 쓰이는 플러그인과 </span></span><span style="background-color: #fafafa; color: #333333; font-family: "helvetica" , "arial" , sans-serif; font-size: 14.6667px; line-height: 20.5333px;">유니티 4.6버전부터 새로이 공개된<b> UGUI</b>가 있다.</span><br />
<span style="color: #333333; font-family: "helvetica" , "arial" , sans-serif;"><span style="background-color: #fafafa; font-size: 14.6667px; line-height: 20.5333px;"><br /></span></span>
<span style="color: #333333; font-family: "helvetica" , "arial" , sans-serif;"><span style="background-color: #fafafa; font-size: 14.6667px; line-height: 20.5333px;">NGUI는 일단 95$ 이며, 많은 개발자들이 오랫동안 써와서 레퍼런스가 충분하다는 장점을 가지고 있다. 반면 UGUI는 유니티 자체에서 공식적으로 지원하는 유일한 UI 도구이며, 무료라는 큰 메리트가있지만 역사가 오래되진 않았다.</span></span><br />
<span style="color: #333333; font-family: "helvetica" , "arial" , sans-serif;"><span style="background-color: #fafafa; font-size: 14.6667px; line-height: 20.5333px;"><br /></span></span>
<span style="color: #333333; font-family: "helvetica" , "arial" , sans-serif;"><span style="background-color: #fafafa; font-size: 14.6667px; line-height: 20.5333px;">아래 유니티 포럼 링크를 따라가면 둘의 장단점에 대해 유저들이 다양하고 디테일한 관점에서 분석하여 댓글을 달아놓은 것을 볼 수 있다.</span></span><br />
<span style="color: #333333; font-family: "helvetica" , "arial" , sans-serif;"><span style="background-color: #fafafa; font-size: 14.6667px; line-height: 20.5333px;"><br /></span></span>
<a href="http://forum.unity3d.com/threads/ugui-vs-ngui.281961/">링크</a><br />
<br />
<span style="color: #333333; font-family: "helvetica" , "arial" , sans-serif;"><span style="background-color: #fafafa; font-size: 14.6667px; line-height: 20.5333px;">UGUI 제작에 NGUI 개발자가 참여했다는 점에서 둘 중에 무엇을 써도 크게 상관은 없을 듯 하나,</span></span><br />
<span style="color: #333333; font-family: "helvetica" , "arial" , sans-serif;"><span style="background-color: #fafafa; font-size: 14.6667px; line-height: 20.5333px;">급하지 않다면 UGUI 를 쓰면서 사용이 활발해지기를 기다려도 나쁘지 않을 것 같다는 생각이다.</span></span><br />
<br />Anonymoushttp://www.blogger.com/profile/00143779259898222603noreply@blogger.com1tag:blogger.com,1999:blog-8277601056435785397.post-56971137175523316452015-12-07T01:49:00.000-08:002015-12-07T06:25:47.548-08:00[Sprites and bones]유니티 애드온으로 2D Skeletal Animation 구현하기<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">제가 소개할 애드온은 유니티 3D에서 2D Skeletal Animation을 생성하기위한 애드온입니다.</span></span></div>
<span style="font-size: 14.6667px; line-height: 1.38; white-space: pre-wrap;"><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">애드온을 사용하여 유니티 에디터에서 직접 뼈 계층 구조를 추가 할 수 있습니다.</span></span><br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">스프라이트는 뼈를 부모로 가질 수 있습니다.</span></span></div>
<span style="font-size: 14.6667px; line-height: 1.38; white-space: pre-wrap;"><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">뼈는 애니메이터 창에서 다른 게임 오브젝트와 같은 애니메이션을 적용 할 수 있습니다.</span></span><br />
<span style="font-size: 14.6667px; line-height: 1.38; white-space: pre-wrap;"><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">뼈는 메쉬 또는 입자 시스템과 같은 스프라이트가 아니더라도 다른 게임 오브젝트로 애니메이션을 구현할 수 있습니다.</span></span><br />
<br />
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">아래 주소에서 튜토리얼, github 페이지 등을 참고할 수 있습니다.</span></span><br />
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span>
</span><br />
<h4>
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><a href="http://forum.unity3d.com/threads/release-free-unity-sprites-and-bones-2d-skeleton-animation.219915/">http://forum.unity3d.com/threads/release-free-unity-sprites-and-bones-2d-skeleton-animation.219915/</a></span></h4>
<br />
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><b>※본 포스트는 위 링크의 동영상을 요약한 것이므로 </b></span></span><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><b>페이지에 나와있는 24분 가량의 동영상을 보셔도 되고, 대략적인 방법만 보실 분은 글만 빠르게 스캔하시면 되겠습니다.</b></span><br />
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span>
<br />
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">아래는 애드온이 제공하는 기능입니다.</span><br />
<h2>
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><b>#기능</b></span></h2>
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">* Skeletons 와 Bones</span></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">* IK(Inverse Kinematics)와 targets </span></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">* IK Helper 객체</span></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">* Bones 와 IK 는 완전히 애니메이션됩니다. </span></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">* Bone Splitting ( 뼈 분할 )</span></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">* 메쉬 변형 </span></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">* 가중치 그리기</span></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">* 뼈는 Ctrl 키와 왼쪽 클릭으로 추가됩니다.</span></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">* 저장 및 포즈의 불러오기. 포즈는 애셋으로 저장됩니다. </span></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">* 완전 유니티 에디터에 통합. </span></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">* 취소-지원 </span></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">* 수많은 기즈모</span></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">* 나는 역 기구학 언급 했습니까? </span></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">* 무료 및 오픈 소스</span></span></div>
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span>
</span><br />
<h4>
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">준비물 : 스프라이트 모음, Sprites and bones 애드온</span></h4>
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span>
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span>
</span><br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">스프라이트 에디터에서 기본값이 센터로 되어있는 피벗 좌표를 적절하게 설정하고</span></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">아래와 같이 씬에 하이어라키에 계층 구조로 배치합니다.</span></span></div>
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><img height="269px;" src="https://lh5.googleusercontent.com/i8S0LyemM_1MfR8RnMmVs2iCVdO_MjhjBI-4Sz-Aa9c50td7tElz3zeFC9DyWnG5zbRB3hY_w8Dhs--y4xRpGECtxd2jKtOydtXwbHc3wPBJ-U5A-RqCjLtwWMWk0PCYfffXc9b0" style="border: none; transform: rotate(0rad);" width="602px;" /></span></span></div>
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: Verdana, sans-serif; font-size: 14.6667px; line-height: 1.38; white-space: pre-wrap;">먼저 팔을 회전시켜보자, 이 때 피벗을 커스텀 설정했음에도, 스프라이트 중앙을 기준으로 회전할 수 있는데, 이 때는 유니티 좌측 상단에 Center 로 되어있는 토글 버튼을 pivot 으로 변경해주면 원래의 회전축대로 회전하게 됩니다.</span></div>
<span style="font-family: Verdana, sans-serif;"><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span>
</span><br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: Verdana, sans-serif;"><span style="font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">이제 Sprites and Bones 애드온을 쓸 차례인데 </span></span><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif; line-height: 1.38; white-space: pre-wrap;">우선 메뉴에서 Skeleton을 선택합니다.</span></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: Verdana, sans-serif;">그러면 초기에 하나의 Bone이 생성되고 씬에서는 흰 사람모양의 오브젝트가 보입니다.</span></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: Verdana, sans-serif;">처음 생성된 Bone 이름을 SpineBone으로 명명하고 노란 네모박스 영역을 머리 전까지 드래그합니다.</span></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: Verdana, sans-serif;">팔 부분을 리깅하기 위해서, SpineBone 을 다시 선택하고 Ctrl+좌클릭으로 새로운 Bone을 생성합니다. 이 때 Inspector 창에서 Bone 스크립트 부분을 보면 Snap to Parent 체크란에 체크가 되어있는데 이를 해제하면 리깅 시작점을 옮길 수 있습니다. 팔이나 다리는 이처럼 체크를 해제한 후 시작점을 옮겨서 리깅해야 합니다.</span></span></div>
<span style="font-family: Verdana, sans-serif;"><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span>
</span><br />
<span style="font-family: Verdana, sans-serif;"><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><b style="font-family: 'helvetica neue', arial, helvetica, sans-serif; font-size: 14.6667px; line-height: 20.24px; white-space: pre-wrap;">※ 리깅 : 모델링 된 데이터에 뼈를 붙이는 작업. 주로 T자 형태로 펴진 상태에서 한다.</b></span></span><br />
<span style="font-family: Verdana, sans-serif;"><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><b style="font-family: 'helvetica neue', arial, helvetica, sans-serif; font-size: 14.6667px; line-height: 20.24px; white-space: pre-wrap;"><br /></b></span></span>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: Verdana, sans-serif;">뼈대를 완성하였다면, 다음은 SpineBone을 제외한 각 Bone에 IK를 추가해야 합니다.</span></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: Verdana, sans-serif;">IK를 추가하는 방법은 먼저 Inspector 창에서 Add IK 버튼을 누르고 Chain Length 를 지정합니다.</span></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: Verdana, sans-serif;">Chain Length 는 해당 파츠에 딸려 움직이는 파츠 수를 입력하면 됩니다. 가령 머리는 한 개 파츠로 이루어져 있으므로 1 이 되고, 손, 팔 하단, 팔 상단으로 이루어진 팔에서 손 파츠의 Chain Length 는 3입니다.</span></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: Verdana, sans-serif;">그 다음 Create target helper 를 눌러서 헬퍼를 생성하면 됩니다. Type 옵션은 기본적으로 Wire Cube로 되어있는데, 팔 상단과 다리 상단 파츠만 Wire Sphere로 지정하고 나머지는 기본값을 사용하면 됩니다.</span></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: Verdana, sans-serif;">그러면 아래와 같이 리깅이 완료됩니다.</span></span><br />
<span style="font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br />
<a href="https://lh3.googleusercontent.com/07P2f2lf4UTUl5QluyB73qmypl5SRT4KWnc9J02Egps0gw_t8wohO3_Jl8V5pWPIyM5qfJkiCMR1uBRlodQJi91rfsW4t1WiL177wT2N4z4PlSARbmyZidZtNBK0b-vqWc7TanXj" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><img border="0" height="742px;" src="https://lh3.googleusercontent.com/07P2f2lf4UTUl5QluyB73qmypl5SRT4KWnc9J02Egps0gw_t8wohO3_Jl8V5pWPIyM5qfJkiCMR1uBRlodQJi91rfsW4t1WiL177wT2N4z4PlSARbmyZidZtNBK0b-vqWc7TanXj" style="border: none; transform: rotate(0rad);" width="558px;" /></span></a><br />
<span style="font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"></span></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><span style="font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span></span></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><span style="font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span></span></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><span style="font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span></span></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><span style="font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span></span></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><span style="font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span></span></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><span style="font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span></span></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><span style="font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span></span></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><span style="font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span></span></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><span style="font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span></span></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><span style="font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span></span></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><span style="font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span></span></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><span style="font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span></span></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><span style="font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span></span></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><span style="font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span></span></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><span style="font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span></span></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><span style="font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span></span></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><span style="font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span></span></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><span style="font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span></span></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><span style="font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span></span></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><span style="font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span></span></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><span style="font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span></span></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><span style="font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span></span></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><span style="font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span></span></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><span style="font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span></span></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><span style="font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span></span></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><span style="font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span></span></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><span style="font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span></span></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><span style="font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span></span></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><span style="font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span></span></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><span style="font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span></span></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><span style="font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span></span></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><span style="font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span></span></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><span style="font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span></span></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><span style="font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span></span></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span>
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span>
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span>
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span>
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif;">Skeleton 오브젝트를 선택해서 Edit Mode의 체크를 해제하고, 아무 파츠의 IK를 선택해서 이리저리 움직여봅시다.</span><br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: Trebuchet MS, sans-serif;"><br /></span></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: Trebuchet MS, sans-serif;">하지만 스프라이트와 뼈대가 연동이 되지 않았으므로 골격만 움직일 것입니다.</span></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: Trebuchet MS, sans-serif;">마지막으로 처음에 계층구조로 배치했던 각 스프라이트들을 해당 파츠 하위 계층으로 모두 옮겨주고, 빈 게임 오브젝트를 생성해서 Player 와 같은 이름으로 변경하고 Skeleton 객체를 하위에 추가합니다.</span></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: Trebuchet MS, sans-serif;">그러면 뼈대와 스프라이트가 같이 움직이는 모습을 볼 수 있습니다.</span></span></div>
<span style="font-family: Trebuchet MS, sans-serif;"><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span>
</span><br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: Trebuchet MS, sans-serif;">이제 모델링이 된 캐릭터에 애니메이션을 입히고 싶다면 Player 객체의 컴퍼넌트로 Animator를 추가하고, Animation 창을 열어 새로운 애니메이션 파일을 생성합니다.</span></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: Trebuchet MS, sans-serif;">간단한 예로 30프레임을 선택하고 IK를 이리저리 움직여보며 원하는 동작을 맞춥니다.</span></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-size: 14.6667px; vertical-align: baseline; white-space: pre-wrap;"><span style="font-family: Trebuchet MS, sans-serif;">그 다음 0프레임의 키프레임을 복사하여 60프레임에 붙여넣고 재생해보면 간단하게 반복되는 애니메이션을 볼 수 있습니다.</span></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><b><br /></b></span></div>
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><b>
</b></span>
Anonymoushttp://www.blogger.com/profile/00143779259898222603noreply@blogger.com0