tag:blogger.com,1999:blog-59436126854875814512024-10-25T14:13:06.621+09:00ㅋㅋ자바스크립트, jquery, node.js, coffeescript, phonegab 등 개발공유stevePakshttp://www.blogger.com/profile/07452508245080471986noreply@blogger.comBlogger101125tag:blogger.com,1999:blog-5943612685487581451.post-54738732947085887202018-04-13T10:11:00.001+09:002018-04-13T10:24:31.613+09:00Save-Data Client Hint<h1 class="_1st9amh" data-key="7d86fe987a004ac4950514801f1172ec" id="save-data-client-hint" style="background-color: white; box-sizing: inherit; color: #242a31; display: flex; font-family: Roboto, sans-serif; margin: 0px 0px 24px; outline: none; position: relative; white-space: pre-wrap;">
<div class="_bc4egv" style="box-sizing: inherit; flex: 1 1 0%; outline: none;">
<span class="_1a3b01i" style="box-sizing: inherit; font-size: 24px; line-height: 1.5; outline: none;">Save-Data Client Hint</span><a class="_i422ldx" contenteditable="false" href="https://pakss3.gitbook.io/http-performance/~/drafts/-L9rAT1qMRYGEpkbkXa7/primary/front/untitled#save-data-client-hint" style="box-sizing: inherit; color: #242a31; line-height: 1em; opacity: 0; outline: none; padding-left: 4px; transition: opacity 150ms ease; width: 20px;"><span class="_15qrizw" style="box-sizing: inherit; font-size: 16px; outline: none; vertical-align: middle;"><svg class="_13gjrqj" fill="currentColor" height="1em" preserveaspectratio="xMidYMid meet" stroke="none" viewbox="0 0 16 16" width="1em" xmlns="http://www.w3.org/2000/svg"><g><path d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z" fill-rule="evenodd"></path></g></svg></span></a></div>
</h1>
<div class="_v011fo" data-key="821c084060d142bc8f921d6d751fa7f7" style="background-color: white; box-sizing: inherit; margin-bottom: 24px; outline: none; position: relative;">
<div style="color: #3b454e; font-family: roboto, sans-serif; font-size: 16px; white-space: pre-wrap;">
<span class="_1yjweog" style="box-sizing: inherit; line-height: 1.625; outline: none;">ilya grigorik은 Client Hint라 하여 웹사이트에서 코드를 구현시에 그에 더 맞게 구현할 수 있도록 헤더 값 등을 통하여 제공해주어야 한다 제안하였다(</span><a href="https://tools.ietf.org/html/draft-ietf-httpbis-client-hints-05#section-6.5" style="font-family: "Malgun Gothic"; font-size: medium; white-space: normal;">Client Hint Draft</a>)</div>
<div style="color: #3b454e; font-family: roboto, sans-serif; font-size: 16px; white-space: pre-wrap;">
<span class="_1yjweog" style="box-sizing: inherit; line-height: 1.625; outline: none;">그 중 일부 Save-Data(데이터 절약모드 상태) 클라이언트(헤더 값) 힌트를 이용하면 헤더를 통해 선택적으로 컨텐츠를 제공 할 수 있다.
</span></div>
<div style="color: #3b454e; font-family: roboto, sans-serif; font-size: 16px; white-space: pre-wrap;">
<br /></div>
<div style="color: #3b454e; font-family: roboto, sans-serif; font-size: 16px; white-space: pre-wrap;">
<span class="_1yjweog" style="box-sizing: inherit; line-height: 1.625; outline: none;"><span style="color: #242a31; font-size: 20px; font-weight: 700;">Save-Data 기능 ON</span></span></div>
<ul style="color: #3b454e; font-family: roboto, sans-serif; font-size: 16px; white-space: pre-wrap;">
<li>직접 Header 값에서 Save-Data : On 이라 제공</li>
<li>아래 기기들에서 여러가지 모드 설정을 하면 Save-Data 헤더값에 On을 제공한다</li>
</ul>
<div style="color: #3b454e; font-family: roboto, sans-serif; font-size: 16px; white-space: pre-wrap;">
1. Chrome49+(PC) 브라우저 데이타세이버(Data Saver) 플러그인 사용</div>
<ul style="color: #3b454e; font-family: roboto, sans-serif; font-size: 16px; white-space: pre-wrap;">
<li>Chrome에서 데이터세이버 설치</li>
<ul>
<li><a href="https://chrome.google.com/webstore/detail/data-saver/pfmgfdlgomnbgkofeojodiodmgpgmkac">https://chrome.google.com/webstore/detail/data-saver/pfmgfdlgomnbgkofeojodiodmgpgmkac</a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivAVVnBMYuulrEQ4r3K2_C670yEe4FJap1X-06piEob7yWqTTx__KgaBShViu4JFttzZbDLX-CPcfAvtS5L0QRnS2xD4rZSy-vUC3Fha8drhQmHlZDZ7kpj-UDZZ9lnfDrVBBqdk_fpJeH/s1600/%25EC%25BA%25A1%25EC%25B2%2598.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" data-original-height="768" data-original-width="1219" height="251" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivAVVnBMYuulrEQ4r3K2_C670yEe4FJap1X-06piEob7yWqTTx__KgaBShViu4JFttzZbDLX-CPcfAvtS5L0QRnS2xD4rZSy-vUC3Fha8drhQmHlZDZ7kpj-UDZZ9lnfDrVBBqdk_fpJeH/s400/%25EC%25BA%25A1%25EC%25B2%2598.PNG" width="400" /></a></li>
</ul>
</ul>
<ul style="color: #3b454e; font-family: roboto, sans-serif; font-size: 16px; white-space: pre-wrap;"><ul>
<li>설치가 되면 우측 상단에 데이타 세이버가 설치 된 것을 알 수 있다.<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCVgfsiQv85mfZZuC8PuNh7cJ84ODgrxRWb_5Xq5HsB1ZpM_stw6gW4qpAfX6YLSA4IAY-ixWWQb7pNA1Jls8q3VC4q7ji62Tjw52uatTdDn9OrCF4yA4cgp-g3uzJJlmZcOMgptCGWTUE/s1600/%25EC%25BA%25A1%25EC%25B2%25981.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" data-original-height="476" data-original-width="428" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCVgfsiQv85mfZZuC8PuNh7cJ84ODgrxRWb_5Xq5HsB1ZpM_stw6gW4qpAfX6YLSA4IAY-ixWWQb7pNA1Jls8q3VC4q7ji62Tjw52uatTdDn9OrCF4yA4cgp-g3uzJJlmZcOMgptCGWTUE/s320/%25EC%25BA%25A1%25EC%25B2%25981.PNG" width="287" /></a> </li>
</ul>
</ul>
<div style="color: #3b454e; font-family: roboto, sans-serif; font-size: 16px; white-space: pre-wrap;">
<br /></div>
<div style="color: #3b454e; font-family: roboto, sans-serif; font-size: 16px; white-space: pre-wrap;">
2. 안드로이드 Chrome에서 데이터 절약모드 사용</div>
<div>
<span style="color: #3b454e; font-family: roboto, sans-serif;"><span style="white-space: pre-wrap;"> - 태블릿 혹은 스마트폰에서 Chrome 열기
- 오른쪽 상단 설정 클릭
- 고급에서 데이터 절약모드 선택</span></span></div>
<div>
<span style="color: #3b454e; font-family: roboto, sans-serif;"><span style="white-space: pre-wrap;"><br /></span></span></div>
<div style="color: #3b454e; font-family: roboto, sans-serif; font-size: 16px; white-space: pre-wrap;">
3. <span style="color: #3b454e; font-family: roboto, sans-serif;">Opera 35+ 에서 Opera Turbo Mode 사용 시</span></div>
<div style="color: #3b454e; font-family: roboto, sans-serif; font-size: 16px; white-space: pre-wrap;">
4. Yandex 16.2+ 에서 Turbo Mode 사용 시</div>
</div>
<h2 class="_1r75zq6v" data-key="1d226422507e4db3b5340cb1d722aa61" id="save-data" style="box-sizing: inherit; display: flex; font-family: roboto, sans-serif; margin: 32px 0px 24px; outline: none; position: relative; white-space: pre-wrap;">
<div class="_bc4egv" style="box-sizing: inherit; flex: 1 1 0%; outline: none;">
<div style="background-color: white; color: #242a31;">
<span style="font-size: 20px;">Data-Saver ??</span></div>
<blockquote class="tr_bq">
<span style="background-color: #eeeeee;"><span style="font-size: 16px;">데이터 절약 모드를 사용하면 웹 리소스가 구글 서버를 거쳐 압축이 이루어져서 </span><span class="_1yjweog" style="box-sizing: inherit; font-size: 16px; line-height: 1.625; outline: none;">데이터를 절약할 수 있다. </span><span style="font-size: 16px;">현재 안드로이드, 크롬에서만 사용 가능하며, apple에서도 </span><span style="font-size: 16px;">추가 할 예정 </span></span></blockquote>
</div>
</h2>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><img alt="데이터 압축 프록시 작동 방법" src="https://developer.chrome.com/multidevice/images/data-compression/compression-proxy.png" style="border: 1px solid rgb(219, 219, 219); box-sizing: border-box; color: #777777; font-family: "open sans", arial, "lucida grande", sans-serif; font-size: 13px; margin: 0px auto; max-width: 100%; padding: 0px; vertical-align: middle;" /></td></tr>
<tr><td class="tr-caption" style="text-align: center;">출처 : Data-Saver의 동작과정<br />
(https://developer.chrome.com/multidevice/data-compression)</td></tr>
</tbody></table>
<ul>
<li> 이를 이용하여 데이터 절약을 원하는 사람들에게 adaptive하게 리소스를 전달 할 수 있음</li>
</ul>
<br />
<span style="background-color: white; color: #242a31; font-family: "roboto" , sans-serif; font-size: 20px; font-weight: 700; white-space: pre-wrap;">Data-Saver 특징 </span><br />
<div>
<ul>
<li>암호화 되지 않은 상태에서 proxy 동작 후 https 대상에 https로 전달함</li>
<li>프록시를 통하기 때문에 ip는 X-Forwarded-For 헤더값을 통함</li>
<li>사이트 소유자의 콘텐츠 옵트아웃(Opt-out : 당사자가 자신의 데이터를 수집을 허용하지 않는다고 명시)에 대해서는 Cache-Control: no-transform 지시자를 존중<br />데이터를 변형하지 않고 직접 전달</li>
</ul>
</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
</div>
<a name='more'></a><br />
<blockquote class="tr_bq" style="clear: both;">
<h3>
"다시 본론으로 돌아와서 Data-Saver 값이 존재 할 경우 컨텐츠에 대해 적응적으로 압축된 형태의 이미지 혹은 다른 리소스들을 전달해주면 어떨까?"</h3>
</blockquote>
<br />
<div class="separator" style="clear: both;">
<span style="background-color: white; color: #242a31; font-family: "roboto" , sans-serif; font-size: 20px; font-weight: 700; white-space: pre-wrap;">Save-Data 구현</span></div>
<div class="separator" style="clear: both;">
<span style="background-color: white; color: #242a31; font-family: "roboto" , sans-serif; font-size: 20px; font-weight: 700; white-space: pre-wrap;"><br /></span></div>
<div class="separator" style="clear: both;">
<span style="background-color: white; color: #3b454e; font-family: "roboto" , sans-serif; font-size: 16px; white-space: pre-wrap;"> - Save-Data 구분(PHP)</span></div>
<pre><span style="font-family: "d2coding";">
<span style="color: blue;"><</span><span style="color: olive;">?php</span>
<span style="color: purple;">header</span>('<span style="color: purple;">Save-Data: on</span>');
<span style="color: purple;">$saveData </span><span style="color: blue;">= </span><span style="color: purple;">false</span>;
<span style="color: purple;">if </span>(<span style="color: purple;">isset</span>(<span style="color: purple;">$_SERVER</span>[<span style="color: magenta;">"HTTP_SAVE_DATA"</span>]) && <span style="color: purple;">strtolower</span>(<span style="color: purple;">$_SERVER</span>["<span style="color: purple;">HTTP_SAVE_DATA</span>"]) <span style="color: blue;">=== </span><span style="color: magenta;">"on"</span>) {
<span style="color: purple;">$saveData </span><span style="color: blue;">= </span><span style="color: purple;">true</span>;
}
<span style="color: purple;">?</span><span style="color: blue;">></span></span></pre>
<pre><span style="font-family: "d2coding";"><span style="color: blue;">
</span></span></pre>
<pre><span style="font-family: "d2coding";"> - Save-Data 구분(JS)</span></pre>
<pre><pre><span style="font-family: "d2coding";">
<span style="color: blue;"><script></span>
<span style="color: blue;">if </span><span style="color: maroon;">(</span><span style="color: magenta;">"connection"</span><span style="color: maroon;"> </span><span style="color: blue;">in </span><span style="color: red;">navigator</span><span style="color: maroon;">) { </span>
<span style="color: blue;">if </span><span style="color: maroon;">(</span><span style="color: red;">navigator</span><span style="color: maroon;">.connection.saveData === </span><span style="color: blue;">true</span><span style="color: maroon;">) { </span>
<span style="color: maroon;">}</span>
<span style="color: maroon;">}</span>
<span style="color: blue;"></script></span>
</span>
</pre>
</pre>
<pre><span style="font-family: "d2coding";"> - HTML에서 Save-Data 모드 상태 구분 </span></pre>
<pre><pre><span style="font-family: "d2coding";">
<span style="color: blue;"><html </span><span style="color: red;">class</span><span style="color: blue;">=</span><span style="color: magenta;">"<?=$saveData ? 'save-data' : ''?>" </span><span style="color: red;">lang</span><span style="color: blue;">=</span><span style="color: magenta;">"ko-kr"</span><span style="color: blue;">></span>
<span style="color: blue;"><head></span>
<span style="color: blue;"><meta </span><span style="color: red;">charset</span><span style="color: blue;">=</span><span style="color: magenta;">"utf-8"</span><span style="color: blue;">></span>
</span>
</pre>
<pre></pre>
<pre><span style="font-family: "d2coding";"> - 이미지를 Save-Data 상태에 따라 제공 </span></pre>
<pre><span style="font-family: "d2coding";">
</span></pre>
<pre><span style="font-family: "d2coding";"><pre><span style="font-family: "d2coding";"><span style="color: blue;"><</span><span style="color: olive;">?php</span></span></pre>
</span></pre>
<pre><span style="font-family: "d2coding";">if ($saveData) {
?><span style="color: blue;"><img </span><span style="color: red;">src</span><span style="color: blue;">=</span><span style="color: magenta;">"aa-100px.jpg" </span><span style="color: red;">alt</span><span style="color: blue;">=</span><span style="color: magenta;">"100픽셀 이미지 퀄리티 조정 ON"</span><span style="color: blue;">><</span><span style="color: olive;">?php</span>
}
<span style="color: purple;">else </span>{
<span style="color: purple;">?</span><span style="color: blue;">><img </span><span style="color: red;">src</span><span style="color: blue;">=</span><span style="color: magenta;">"aa-300px.jpg" </span><span style="color: red;">alt</span><span style="color: blue;">=</span><span style="color: magenta;">"300px 이미지 퀄리티 조정 OFF"</span><span style="color: blue;">><</span><span style="color: olive;">?php</span>
}
</span>
</pre>
<pre></pre>
<span style="background-color: white; color: #242a31; font-family: "roboto" , sans-serif; font-size: 20px; font-weight: 700; white-space: pre-wrap;">Save-Data 구현 결과</span></pre>
<pre><span style="background-color: white; color: #242a31; font-family: "roboto" , sans-serif; font-size: 20px; font-weight: 700; white-space: pre-wrap;">
</span></pre>
<pre><span style="background-color: white; color: #242a31; font-family: "roboto" , sans-serif; font-size: 20px; font-weight: 700; white-space: pre-wrap;"><div class="separator" style="clear: both; color: black; font-family: "Malgun Gothic"; font-size: medium; font-weight: 400; white-space: normal;">
<span style="color: #3b454e; font-family: "roboto" , sans-serif; font-size: 16px; white-space: pre-wrap;"> - save-data 미 사용시 원본 데이터</span></div>
</span></pre>
<pre><ul><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFiqOojZf7-nKaz8a2H4DaKb4aBTNRPdt-xdIV_9sFgo8DaPADPWYy6mkli1er8PAX61H7cU49P8Y6NgXcnutvZzf8x0okw0la9HdFVXFeEGDwNkYGeipqYUNDgqw8RrWfrd0DcxVUJGkZ/s1600/save-data-orign.png" imageanchor="1" style="font-family: "Malgun Gothic"; margin-left: 1em; margin-right: 1em; text-align: center; white-space: normal;"><img border="0" data-original-height="955" data-original-width="1300" height="470" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFiqOojZf7-nKaz8a2H4DaKb4aBTNRPdt-xdIV_9sFgo8DaPADPWYy6mkli1er8PAX61H7cU49P8Y6NgXcnutvZzf8x0okw0la9HdFVXFeEGDwNkYGeipqYUNDgqw8RrWfrd0DcxVUJGkZ/s640/save-data-orign.png" width="640" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFiqOojZf7-nKaz8a2H4DaKb4aBTNRPdt-xdIV_9sFgo8DaPADPWYy6mkli1er8PAX61H7cU49P8Y6NgXcnutvZzf8x0okw0la9HdFVXFeEGDwNkYGeipqYUNDgqw8RrWfrd0DcxVUJGkZ/s1600/save-data-orign.png" imageanchor="1" style="font-family: "Malgun Gothic"; margin-left: 1em; margin-right: 1em; text-align: center; white-space: normal;"><ul>
</ul>
</a></ul>
<h3>
<span style="font-weight: normal;"> - save-data 사용시 변형된 퀄리티와 Header값 확인</span><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7m7M0cNvTm2ALIj8Qqb0o1352de1XW26_0IAQT16m6cCx7dPFT_Z7zZ-CAxXlUOQ8RuWtKwzcK_l67QRLe6hffSxfVvpfyrL6IX1X2vH0MQdQaIYAj0ri4eUjxqU1JerpEoDyrG4cdL-z/s1600/save-data-on.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" data-original-height="964" data-original-width="1397" height="440" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7m7M0cNvTm2ALIj8Qqb0o1352de1XW26_0IAQT16m6cCx7dPFT_Z7zZ-CAxXlUOQ8RuWtKwzcK_l67QRLe6hffSxfVvpfyrL6IX1X2vH0MQdQaIYAj0ri4eUjxqU1JerpEoDyrG4cdL-z/s640/save-data-on.png" width="640" /></a>
<ul>
</ul>
</h3>
</pre>
<pre><span style="background-color: white; color: #242a31; font-family: "roboto" , sans-serif; font-size: 20px; font-weight: 700; white-space: pre-wrap;">결론</span></pre>
<pre><ul style="font-size: 15.21px;">
<li>Save-Data의 클라이언트 힌트를 이용하여 적응적으로 이미지를 적용 할 수 있다.</li>
<li>웹 서버 파일 룰을 이용하여 이미지의 확장자와 header 값을 비교하여 전체적으로 이미지를 적응적으로 보여준다면
훨씬 리소스를 줄여 줄 수 있을 것이다. </li>
<li>여러 브라우저 밴더사에서 구현에 움직임이 있어 권고안으로 발전하는 것을 기대해 볼 수 있지 않을까 조심스럽게 생각해봅니다.</li>
</ul>
</pre>
<pre></pre>
<h3>
참고</h3>
<ul>
<li><a href="https://tools.ietf.org/html/draft-ietf-httpbis-client-hints-05#section-6.5">Client Hint Draft</a></li>
<li><a href="https://support.google.com/chrome/answer/2392284?visit_id=1-636590921684926244-305380268&p=data_saver_off&rd=1&co=GENIE.Platform%3DDesktop&oco=1">Chrome의 데이터 절약 모드로 데이터 사용량 줄이기</a></li>
<li><a href="https://developer.chrome.com/multidevice/data-compression">Data-Saver</a></li>
<li><a href="https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/save-data/">저장 데이터로 빠르고 가벼운 어플리케이션 제공</a></li>
</ul>
stevePakshttp://www.blogger.com/profile/07452508245080471986noreply@blogger.com0tag:blogger.com,1999:blog-5943612685487581451.post-9148395396728855872018-03-25T16:00:00.001+09:002018-03-25T16:00:23.158+09:00script 태그 동작<span style="background-color: #f1f1f1; font-family: "verdana" , sans-serif; font-size: 15px;"><script></span><br />
클라이언트 자바스크립트에 대해 정의할 때 사용<br />
<br />
사용방법<br />
- 태그사이에 statement를 기입하거나 src를 통해 외부 자원을 갖고 오는 방법이 있다.<br />
-> 외부자원 즉 src 속성을 이용하여 갖고 올 경우, 태그 사이 문은 동작 하지 않음<br />
(<a href="https://www.w3schools.com/tags/tag_script.asp">https://www.w3schools.com/tags/tag_script.asp</a>)<br />
- 스크립트를 이용 할 수 없을 경우 noscript를 태그를 이용하여 자바스크립트에서 표현 하고자 하는 요소를 등록해야 함<br />
- async 요소를 이용하면 비동기 적으로 외부 스크립트를 가져올 수 있다.<br />
- defer 요소를 이용하면 페이지 구문 분석이 끝난 후 스크립트 요소를 가져 올 수 있다.<br />
- async, defer요소가 없을 경우 스크립트는 즉시 실행stevePakshttp://www.blogger.com/profile/07452508245080471986noreply@blogger.com0tag:blogger.com,1999:blog-5943612685487581451.post-81565197014649149822018-03-23T16:04:00.002+09:002018-03-23T16:04:36.596+09:00throttling(쓰로틀링)<h3>
throttling(쓰로틀링) </h3>
- 함수, 메서드 등 일정 시간 전에 호출 시 호출이 안되고, 해당 시간이 지나야 처리가 되는 기능<br />
- ajax와 같이 자주 호출 되는 함수들에 사용<br />
- 반복되서 사용되는 api 특히 비용이 들어갈 경우 더욱 쓰로틀링이 필요해 보인다.<br />
<br />
<h3>
Code</h3>
-------------------------------------------------------------------------------------------------<br />
<a id="throttling" href="#aa" >throttling</a><br />
<script><br />
<br />
document.querySelector("#throttling").onclick = throttling(function(e){<br />
console.log("throttling");<br />
},1000);<br />
<div>
<br /></div>
<div>
<br /></div>
// 1초 뒤에 호출 동작<br />
function throttling(fn, delay){<br />
let isRunning = false, timeoutFn, nextTime = 0;<br />
return (...args)=>{<br />
isRunning = (Date.now() - nextTime > delay);<br />
if(isRunning){<br />
let _this = this;<br />
timeoutFn = setTimeout(function(){<br />
fn.call(_this, ...args);<br />
},delay); <br />
nextTime = Date.now();<br />
}<br />
<br />
}<br />
}<br />
</script>stevePakshttp://www.blogger.com/profile/07452508245080471986noreply@blogger.com0tag:blogger.com,1999:blog-5943612685487581451.post-62374893640186702512018-03-23T14:23:00.002+09:002018-03-26T09:31:22.284+09:00debouncing(디바운싱)<h3>
<span style="background-color: white; font-family: "nanum barun gothic" , "nanumbarungothic" , , , "noto sans kr" , , "noto sans korean" , "apple sd gothic neo" , "malgun gothic" , "applegothic" , "dotum" , , sans-serif; font-size: 14px;">debouncing(디바운싱) </span></h3>
<span style="background-color: white; font-family: "nanum barun gothic" , "nanumbarungothic" , , , "noto sans kr" , , "noto sans korean" , "apple sd gothic neo" , "malgun gothic" , "applegothic" , "dotum" , , sans-serif; font-size: 14px;">- 연속적인 호출의 메서드, 함수들에 대해 맨 마지막에 호출한 한번의 함수만 실행 하는 것 </span><br />
<span style="background-color: white; font-family: "nanum barun gothic" , "nanumbarungothic" , , , "noto sans kr" , , "noto sans korean" , "apple sd gothic neo" , "malgun gothic" , "applegothic" , "dotum" , , sans-serif; font-size: 14px;">- 저장버튼 일 경우 마지막에 누른 한번만 동작 하도록 처리</span><br />
<span style="background-color: white; font-family: "nanum barun gothic" , "nanumbarungothic" , , , "noto sans kr" , , "noto sans korean" , "apple sd gothic neo" , "malgun gothic" , "applegothic" , "dotum" , , sans-serif; font-size: 14px;"><br /></span>
<br />
<a name='more'></a><h3>
code</h3>
<div>
---------------------------------------------------------------------------------------------------</div>
<span style="font-family: "nanum barun gothic" , "nanumbarungothic" , , , "noto sans kr" , , "noto sans korean" , "apple sd gothic neo" , "malgun gothic" , "applegothic" , "dotum" , , sans-serif;"><span style="background-color: white; font-size: 14px;"><a id="debouncing" >debouncing</a></span></span><br />
<span style="font-family: "nanum barun gothic" , "nanumbarungothic" , , , "noto sans kr" , , "noto sans korean" , "apple sd gothic neo" , "malgun gothic" , "applegothic" , "dotum" , , sans-serif;"><span style="font-size: 14px;"><script> </span></span><br />
<br />
<span style="font-family: "nanum barun gothic" , "nanumbarungothic" , , , "noto sans kr" , , "noto sans korean" , "apple sd gothic neo" , "malgun gothic" , "applegothic" , "dotum" , , sans-serif;"><span style="font-size: 14px;">//debouncing 마지막에 실행한 값만 실행 </span></span><br />
<span style="font-family: "nanum barun gothic" , "nanumbarungothic" , , , "noto sans kr" , , "noto sans korean" , "apple sd gothic neo" , "malgun gothic" , "applegothic" , "dotum" , , sans-serif;"><span style="font-size: 14px;">document.querySelector("#debouncing").onclick = debouncing(function(e,i){</span></span><br />
<span style="font-family: "nanum barun gothic" , "nanumbarungothic" , , , "noto sans kr" , , "noto sans korean" , "apple sd gothic neo" , "malgun gothic" , "applegothic" , "dotum" , , sans-serif;"><span style="font-size: 14px;"> alert("test"+i);</span></span><br />
<span style="font-family: "nanum barun gothic" , "nanumbarungothic" , , , "noto sans kr" , , "noto sans korean" , "apple sd gothic neo" , "malgun gothic" , "applegothic" , "dotum" , , sans-serif;"><span style="font-size: 14px;">}, 200);</span></span><br />
<span style="font-family: "nanum barun gothic" , "nanumbarungothic" , , , "noto sans kr" , , "noto sans korean" , "apple sd gothic neo" , "malgun gothic" , "applegothic" , "dotum" , , sans-serif;"><span style="font-size: 14px;"><br /></span></span>
<span style="font-family: "nanum barun gothic" , "nanumbarungothic" , , , "noto sans kr" , , "noto sans korean" , "apple sd gothic neo" , "malgun gothic" , "applegothic" , "dotum" , , sans-serif;"><span style="font-size: 14px;">function debouncing(fn, delay){</span></span><br />
<span style="font-family: "nanum barun gothic" , "nanumbarungothic" , , , "noto sans kr" , , "noto sans korean" , "apple sd gothic neo" , "malgun gothic" , "applegothic" , "dotum" , , sans-serif;"><span style="font-size: 14px;"> var evt, i = 0;</span></span><br />
<span style="font-family: "nanum barun gothic" , "nanumbarungothic" , , , "noto sans kr" , , "noto sans korean" , "apple sd gothic neo" , "malgun gothic" , "applegothic" , "dotum" , , sans-serif;"><span style="font-size: 14px;"> return function(e, i){</span></span><br />
<span style="font-family: "nanum barun gothic" , "nanumbarungothic" , , , "noto sans kr" , , "noto sans korean" , "apple sd gothic neo" , "malgun gothic" , "applegothic" , "dotum" , , sans-serif;"><span style="font-size: 14px;"> e.preventDefault();</span></span><br />
<span style="font-family: "nanum barun gothic" , "nanumbarungothic" , , , "noto sans kr" , , "noto sans korean" , "apple sd gothic neo" , "malgun gothic" , "applegothic" , "dotum" , , sans-serif;"><span style="font-size: 14px;"> clearTimeout(evt);</span></span><br />
<span style="font-size: 14px;"> evt = setTimeout(function(){</span><br />
<span style="font-family: "nanum barun gothic" , "nanumbarungothic" , , , "noto sans kr" , , "noto sans korean" , "apple sd gothic neo" , "malgun gothic" , "applegothic" , "dotum" , , sans-serif;"><span style="font-size: 14px;"> </span></span><br />
<span style="font-family: "nanum barun gothic" , "nanumbarungothic" , , , "noto sans kr" , , "noto sans korean" , "apple sd gothic neo" , "malgun gothic" , "applegothic" , "dotum" , , sans-serif;"><span style="font-size: 14px;"> fn(e, i); </span></span><br />
<span style="font-family: "nanum barun gothic" , "nanumbarungothic" , , , "noto sans kr" , , "noto sans korean" , "apple sd gothic neo" , "malgun gothic" , "applegothic" , "dotum" , , sans-serif;"><span style="font-size: 14px;"> }, delay);</span></span><br />
<span style="font-family: "nanum barun gothic" , "nanumbarungothic" , , , "noto sans kr" , , "noto sans korean" , "apple sd gothic neo" , "malgun gothic" , "applegothic" , "dotum" , , sans-serif;"><span style="font-size: 14px;"> }</span></span><br />
<span style="font-family: "nanum barun gothic" , "nanumbarungothic" , , , "noto sans kr" , , "noto sans korean" , "apple sd gothic neo" , "malgun gothic" , "applegothic" , "dotum" , , sans-serif;"><span style="font-size: 14px;">}</span></span><br />
<span style="font-family: "nanum barun gothic" , "nanumbarungothic" , , , "noto sans kr" , , "noto sans korean" , "apple sd gothic neo" , "malgun gothic" , "applegothic" , "dotum" , , sans-serif;"><span style="background-color: white; font-size: 14px;"></span></span><br />
<span style="font-family: "nanum barun gothic" , "nanumbarungothic" , , , "noto sans kr" , , "noto sans korean" , "apple sd gothic neo" , "malgun gothic" , "applegothic" , "dotum" , , sans-serif;"><span style="font-size: 14px;"></script></span></span>stevePakshttp://www.blogger.com/profile/07452508245080471986noreply@blogger.com0tag:blogger.com,1999:blog-5943612685487581451.post-7671566789377222892018-03-02T10:30:00.001+09:002018-03-02T10:34:42.340+09:00의존성 주입(dependency injection)<h2>
의존성(dependency)</h2>
<h3>
- 한국어로 일단 풀이를 해보자</h3>
=> 의존하다 : 부족한 주체가 도움을 받다. 그래서 도움을 받는 무언가를 신뢰하다.<br />
이러한 뜻을 갖고 있다.<br />
<br />
<h4>
더 쉬운 예를 들어보자</h4>
-> 나는 귀차니즘이 심해서 아침을 안먹는다. 그래서 엄마가 항상 아침을 차려준다.<br />
==> 이는 나는 엄마에게 "아침밥을 먹다"이라는 목적을 달성하기 위한 의존적이게 된다.<br />
하지만 나는 아침밥이라는 목적을 달성시켜줄 수 있는것은 엄마만이 될 수 있는것은 아니다.<br />
아빠가 차려줄 수도 있고 누나가 차려줄 수도 있다.<br />
<br />
이러한 의존성을 갖는 클래스(아침밥을 먹다)가 외부의 도움을 받아서 달성, 혹은 변할수 있는 행위(엄마, 아빠, 누나)를 주입(injection) 이라고 한다.<br />
<br />
<h4>
의사코드로 이를 구성해보면</h4>
class 아침밥먹다 { //의존성을 갖는 클래스<br />
<br />
public funciton set차려주는사람(대상){ //주입method<br />
Person target = new 대상();<br />
this.차려주는사람 = target;<br />
}<br />
<br />
}<br />
<br />
class 엄마{<br />
}<br />
class 누나{<br />
}<br />
class 아빠{<br />
}<br />
<br />
<a name='more'></a><h3>
<br />위키백과에는</h3>
<br />
<b style="background-color: white; color: #222222; font-family: sans-serif; font-size: 14px;">의존성 주입</b><span style="background-color: white; color: #222222; font-family: sans-serif; font-size: 14px;">(</span><span lang="en" style="background-color: white; color: #222222; font-family: sans-serif; font-size: 14px;" xml:lang="en">Dependency Injection</span><span style="background-color: white; color: #222222; font-family: sans-serif; font-size: 14px;">, </span><b style="background-color: white; color: #222222; font-family: sans-serif; font-size: 14px;">DI</b><span style="background-color: white; color: #222222; font-family: sans-serif; font-size: 14px;">)은 </span><a class="mw-redirect" href="https://ko.wikipedia.org/wiki/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D" style="background: none rgb(255, 255, 255); color: #0b0080; font-family: sans-serif; font-size: 14px; text-decoration-line: none;" title="프로그래밍">프로그래밍</a><span style="background-color: white; color: #222222; font-family: sans-serif; font-size: 14px;">에서 구성요소간의 의존 관계가 </span><a class="mw-redirect" href="https://ko.wikipedia.org/wiki/%EC%86%8C%EC%8A%A4%EC%BD%94%EB%93%9C" style="background: none rgb(255, 255, 255); color: #0b0080; font-family: sans-serif; font-size: 14px; text-decoration-line: none;" title="소스코드">소스코드</a><span style="background-color: white; color: #222222; font-family: sans-serif; font-size: 14px;"> 내부가 아닌 외부의 설정파일 등을 통해 정의되게 하는 </span><a href="https://ko.wikipedia.org/wiki/%EB%94%94%EC%9E%90%EC%9D%B8_%ED%8C%A8%ED%84%B4" style="background: none rgb(255, 255, 255); color: #0b0080; font-family: sans-serif; font-size: 14px; text-decoration-line: none;" title="디자인 패턴">디자인 패턴</a><span style="background-color: white; color: #222222; font-family: sans-serif; font-size: 14px;"> 중의 하나이다.</span><br />
<br />
<h3>
장점</h3>
<ul style="background-color: white; color: #222222; font-family: sans-serif; font-size: 14px; list-style-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%225%22 height=%2213%22%3E %3Ccircle cx=%222.5%22 cy=%229.5%22 r=%222.5%22 fill=%22%2300528c%22/%3E %3C/svg%3E"); margin: 0.3em 0px 0px 1.6em; padding: 0px;">
<li style="margin-bottom: 0.1em;">의존 관계 설정이 <a class="mw-redirect" href="https://ko.wikipedia.org/wiki/%EC%BB%B4%ED%8C%8C%EC%9D%BC" style="background: none; color: #0b0080; text-decoration-line: none;" title="컴파일">컴파일</a>시가 아닌 <a class="mw-redirect" href="https://ko.wikipedia.org/wiki/%EC%8B%A4%ED%96%89" style="background: none; color: #0b0080; text-decoration-line: none;" title="실행">실행</a>시에 이루어져 모듈들간의 <a href="https://ko.wikipedia.org/wiki/%EA%B2%B0%ED%95%A9%EB%8F%84" style="background: none; color: #0b0080; text-decoration-line: none;" title="결합도">결합도</a> 를 낮출 수 있다.</li>
<li style="margin-bottom: 0.1em;"><a href="https://ko.wikipedia.org/wiki/%EC%BD%94%EB%93%9C_%EC%9E%AC%EC%82%AC%EC%9A%A9" style="background: none; color: #0b0080; text-decoration-line: none;" title="코드 재사용">코드 재사용</a>을 높여서 작성된 모듈을 여러 곳에서 소스코드의 수정 없이 사용할 수 있다.</li>
<li style="margin-bottom: 0.1em;"><a href="https://ko.wikipedia.org/wiki/%EB%AA%A8%EC%9D%98_%EA%B0%9D%EC%B2%B4" style="background: none; color: #0b0080; text-decoration-line: none;" title="모의 객체">모의 객체</a> 등을 이용한 <a href="https://ko.wikipedia.org/wiki/%EC%9C%A0%EB%8B%9B_%ED%85%8C%EC%8A%A4%ED%8A%B8" style="background: none; color: #0b0080; text-decoration-line: none;" title="유닛 테스트">단위 테스트</a>의 편의성을 높여준다.</li>
</ul>
<br />
<br />
<div style="background-color: white; color: #222222; font-family: sans-serif; font-size: 14px; line-height: inherit; margin-bottom: 0.5em; margin-top: 0.5em;">
<a class="new" href="https://ko.wikipedia.org/w/index.php?title=%EB%A7%88%ED%8B%B4_%ED%8C%8C%EC%9A%B8%EB%9F%AC&action=edit&redlink=1" style="background: none; color: #a55858; text-decoration-line: none;" title="마틴 파울러 (없는 문서)">마틴 파울러</a>는 다음과 같은 세 가지의 의존성 주입 패턴을 제시하였다. </div>
<ul style="background-color: white; color: #222222; font-family: sans-serif; font-size: 14px; list-style-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%225%22 height=%2213%22%3E %3Ccircle cx=%222.5%22 cy=%229.5%22 r=%222.5%22 fill=%22%2300528c%22/%3E %3C/svg%3E"); margin: 0.3em 0px 0px 1.6em; padding: 0px;">
<li style="margin-bottom: 0.1em;">생성자 주입 : 필요한 의존성을 모두 포함하는 클래스의 생성자를 만들고 그 생성자를 통해 의존성을 주입한다.</li>
<li style="margin-bottom: 0.1em;">세터(Setter)를 통한 주입 : 의존성을 입력받는 세터(Setter) 메소드를 만들고 이를 통해 의존성을 주입한다.</li>
<li style="margin-bottom: 0.1em;"><a class="mw-disambig" href="https://ko.wikipedia.org/wiki/%EC%9D%B8%ED%84%B0%ED%8E%98%EC%9D%B4%EC%8A%A4" style="background: none; color: #0b0080; text-decoration-line: none;" title="인터페이스">인터페이스</a>(Interface)를 통한 주입 : 의존성을 주입하는 함수를 포함한 인터페이스를 작성하고 이 인터페이스를 구현하도록 함으로써 <a class="mw-redirect" href="https://ko.wikipedia.org/wiki/%EC%8B%A4%ED%96%89" style="background: none; color: #0b0080; text-decoration-line: none;" title="실행">실행</a>시에 이를 통하여 의존성을 주입한다.</li>
</ul>
<div>
<span style="color: #222222; font-family: sans-serif;"><span style="font-size: 14px;"><br /></span></span></div>
<div>
<span style="color: #222222; font-family: sans-serif;"><span style="font-size: 14px;">출처 위키백과 (https://ko.wikipedia.org/wiki/%EC%9D%98%EC%A1%B4%EC%84%B1_%EC%A3%BC%EC%9E%85)</span></span></div>
stevePakshttp://www.blogger.com/profile/07452508245080471986noreply@blogger.com0tag:blogger.com,1999:blog-5943612685487581451.post-33776313177624767582017-12-11T13:48:00.003+09:002017-12-11T13:48:43.639+09:00Classic Asp date_format Function <div style="color: #333333; font-family: Arial, sans-serif; font-size: 14px;">
언어별로 date_format 라는 함수가 있어 date값에 대해 원하는 string으로 출력해주는데 classic asp에는 없다.</div>
<div style="color: #333333; font-family: Arial, sans-serif; font-size: 14px; margin-top: 10px;">
그래서 다른 date_format 함수의 masking 방법을 빌려서 제작</div>
<div style="margin-top: 10px;">
<span style="color: #333333; font-family: Arial, sans-serif;"><span style="font-size: 14px;"><a href="https://github.com/pakss3/dateformat">https://github.com/pakss3/dateformat</a></span></span></div>
<table class="confluenceTable" style="border-collapse: collapse; color: #333333; font-family: Arial, sans-serif; font-size: 14px; margin: 10px 0px 0px; overflow-x: auto;"><tbody>
<tr><th class="confluenceTh" style="background-color: #f0f0f0; border: 1px solid rgb(221, 221, 221); padding: 7px 10px; text-align: left; vertical-align: top; white-space: pre-wrap;">format character</th><th class="confluenceTh" style="background-color: #f0f0f0; border: 1px solid rgb(221, 221, 221); padding: 7px 10px; text-align: left; vertical-align: top; white-space: pre-wrap;">Description</th></tr>
<tr><td class="confluenceTd" style="border: 1px solid rgb(221, 221, 221); padding: 7px 10px; vertical-align: top; white-space: pre-wrap;">yyyy</td><td class="confluenceTd" style="border: 1px solid rgb(221, 221, 221); padding: 7px 10px; vertical-align: top; white-space: pre-wrap;">연도 4자리</td></tr>
<tr><td class="confluenceTd" style="border: 1px solid rgb(221, 221, 221); padding: 7px 10px; vertical-align: top; white-space: pre-wrap;">yy</td><td class="confluenceTd" style="border: 1px solid rgb(221, 221, 221); padding: 7px 10px; vertical-align: top; white-space: pre-wrap;">연도 2자리</td></tr>
<tr><td class="confluenceTd" style="border: 1px solid rgb(221, 221, 221); padding: 7px 10px; vertical-align: top; white-space: pre-wrap;">mm</td><td class="confluenceTd" style="border: 1px solid rgb(221, 221, 221); padding: 7px 10px; vertical-align: top; white-space: pre-wrap;">월 2자리</td></tr>
<tr><td class="confluenceTd" style="border: 1px solid rgb(221, 221, 221); padding: 7px 10px; vertical-align: top; white-space: pre-wrap;">m</td><td class="confluenceTd" style="border: 1px solid rgb(221, 221, 221); padding: 7px 10px; vertical-align: top; white-space: pre-wrap;">월 1자리</td></tr>
<tr><td class="confluenceTd" style="border: 1px solid rgb(221, 221, 221); padding: 7px 10px; vertical-align: top; white-space: pre-wrap;">dd</td><td class="confluenceTd" style="border: 1px solid rgb(221, 221, 221); padding: 7px 10px; vertical-align: top; white-space: pre-wrap;">일 2자리</td></tr>
<tr><td class="confluenceTd" style="border: 1px solid rgb(221, 221, 221); padding: 7px 10px; vertical-align: top; white-space: pre-wrap;">d</td><td class="confluenceTd" style="border: 1px solid rgb(221, 221, 221); padding: 7px 10px; vertical-align: top; white-space: pre-wrap;">일 1자리</td></tr>
<tr><td class="confluenceTd" style="border: 1px solid rgb(221, 221, 221); padding: 7px 10px; vertical-align: top; white-space: pre-wrap;">hh</td><td class="confluenceTd" style="border: 1px solid rgb(221, 221, 221); padding: 7px 10px; vertical-align: top; white-space: pre-wrap;">시 2자리</td></tr>
<tr><td class="confluenceTd" style="border: 1px solid rgb(221, 221, 221); padding: 7px 10px; vertical-align: top; white-space: pre-wrap;">h</td><td class="confluenceTd" style="border: 1px solid rgb(221, 221, 221); padding: 7px 10px; vertical-align: top; white-space: pre-wrap;">시 1자리</td></tr>
<tr><td class="confluenceTd" style="border: 1px solid rgb(221, 221, 221); padding: 7px 10px; vertical-align: top; white-space: pre-wrap;">ii</td><td class="confluenceTd" style="border: 1px solid rgb(221, 221, 221); padding: 7px 10px; vertical-align: top; white-space: pre-wrap;">분 2자리</td></tr>
<tr><td class="confluenceTd" style="border: 1px solid rgb(221, 221, 221); padding: 7px 10px; vertical-align: top; white-space: pre-wrap;">i</td><td class="confluenceTd" style="border: 1px solid rgb(221, 221, 221); padding: 7px 10px; vertical-align: top; white-space: pre-wrap;">분 1자리</td></tr>
<tr><td class="confluenceTd" style="border: 1px solid rgb(221, 221, 221); padding: 7px 10px; vertical-align: top; white-space: pre-wrap;">ss</td><td class="confluenceTd" style="border: 1px solid rgb(221, 221, 221); padding: 7px 10px; vertical-align: top; white-space: pre-wrap;">초 2자리</td></tr>
<tr><td class="confluenceTd" style="border: 1px solid rgb(221, 221, 221); padding: 7px 10px; vertical-align: top; white-space: pre-wrap;">s</td><td class="confluenceTd" style="border: 1px solid rgb(221, 221, 221); padding: 7px 10px; vertical-align: top; white-space: pre-wrap;">초 1자리</td></tr>
<tr><td class="confluenceTd" style="border: 1px solid rgb(221, 221, 221); padding: 7px 10px; vertical-align: top; white-space: pre-wrap;">W</td><td class="confluenceTd" style="border: 1px solid rgb(221, 221, 221); padding: 7px 10px; vertical-align: top; white-space: pre-wrap;">W요일</td></tr>
<tr><td class="confluenceTd" style="border: 1px solid rgb(221, 221, 221); padding: 7px 10px; vertical-align: top; white-space: pre-wrap;">w</td><td class="confluenceTd" style="border: 1px solid rgb(221, 221, 221); padding: 7px 10px; vertical-align: top; white-space: pre-wrap;">ex> 금</td></tr>
</tbody></table>
<div style="color: #333333; font-family: Arial, sans-serif; font-size: 14px; margin-top: 10px;">
<br /></div>
<table class="wysiwyg-macro" data-macro-body-type="PLAIN_TEXT" data-macro-name="code" data-macro-parameters="collapse=true|firstline=1|language=vb|linenumbers=true|title=date_format 함수 소스" data-mce-style="background-image: url('http://sri-wiki.saraminhr.co.kr/plugins/servlet/confluence/placeholder/macro-heading?definition=e2NvZGU6dGl0bGU9ZGF0ZV9mb3JtYXQg7ZWo7IiYIOyGjOyKpHxsaW5lbnVtYmVycz10cnVlfGxhbmd1YWdlPXZifGZpcnN0bGluZT0xfGNvbGxhcHNlPXRydWV9&locale=ko_KR&version=2'); background-repeat: no-repeat;" style="background-color: #f0f0f0; background-image: url("/plugins/servlet/confluence/placeholder/macro-heading?definition=e2NvZGU6dGl0bGU9ZGF0ZV9mb3JtYXQg7ZWo7IiYIOyGjOyKpHxsaW5lbnVtYmVycz10cnVlfGxhbmd1YWdlPXZifGZpcnN0bGluZT0xfGNvbGxhcHNlPXRydWV9&locale=ko_KR&version=2"); background-position: 0px 0px; background-repeat: no-repeat; border: 1px solid rgb(221, 221, 221); color: #333333; cursor: move; font-family: Arial, sans-serif; font-size: 14px; margin-top: 10px; padding: 24px 2px 2px; width: 1877px;"><tbody>
<tr><td class="wysiwyg-macro-body" style="background-color: white; border: 1px solid rgb(221, 221, 221); cursor: text; margin: 0px; padding: 10px; white-space: pre-wrap;"><pre style="tab-size: 4; white-space: pre-wrap;">'/**
'**/
class DateValueObject
private dateObj, formatValue
public property let setDate(byval pDate)
dateObj = cdate(pDate)
end property
public property get getDate()
getDate = dateObj
end property
public property get getYear()
getYear = year(dateObj)
end property
public property get getMonth()
getMonth = month(dateObj)
end property
public property get getDay()
getDay = day(dateObj)
end property
public property get getHour()
getHour = hour(dateObj)
end property
public property get getMinute()
getMinute = minute(dateObj)
end property
public property get getSecond()
getSecond = second(dateObj)
end property
public property get getWeekDay()
getWeekDay = Weekdayname(Weekday(dateObj)) 'left('목요일',1)
end property
public property get getWeekDaySimple()
getWeekDaySimple = left(getWeekDay(),1) 'left('목요일',1)
end property
public property let setFormat(pFormat)
formatValue = pFormat
end property
public property get getFormat()
getFormat = formatValue
end property
private function zeroADD(byval pdate)
dim vDate
vDate = pdate
if len(vDate) = 1 then
zeroADD = "0" & vDate
else
zeroADD = vDate
end if
end function
public function dateParse()
dim resultDate
resultDate = formatValue
resultDate = replace(resultDate, "yyyy", getYear()) '연도(2017,1987)
resultDate = replace(resultDate, "yy", right(getYear(),2)) '연도(2017,1987)
resultDate = replace(resultDate, "mm", zeroADD(getMonth())) '월(12,01,03)
resultDate = replace(resultDate, "m", getMonth()) '월(12,1,3)
resultDate = replace(resultDate, "dd", zeroADD(getDay())) '일(12,01,03)
resultDate = replace(resultDate, "d", getDay()) '일(12,1,3)
resultDate = replace(resultDate, "hh", zeroADD(getHour())) '시간(14,06,05)
resultDate = replace(resultDate, "h", getHour()) '시간(14,6,5)
resultDate = replace(resultDate, "ii", zeroADD(getMinute())) '분(14,06,05)
resultDate = replace(resultDate, "i", getMinute()) '분(14,6,5)
resultDate = replace(resultDate, "ss", zeroADD(getSecond())) '초(14,06,05)
resultDate = replace(resultDate, "s", getSecond()) '초(14,6,5)
resultDate = replace(resultDate, "W", getWeekDay()) '금요일
resultDate = replace(resultDate, "w", getWeekDaySimple()) '금
dateParse = resultDate
end function
public function dateParseResult()
dateParseResult = dateParse()
end function
end class
'/**
' @example : date_format('2017-11-12 11:06:54','mm/dd/yyyy hh시 i분 s초') -> 11/12/2017 11시 6분 54초
'**/
function date_format(byval pdate, byval dateFormat)
dim dateCl
set dateCl = new DateValueObject
dateCl.setDate = pdate
dateCl.setFormat = dateFormat
date_format = dateCl.dateParseResult()
set dateCl = nothing
end function </pre>
<div>
<br /></div>
</td></tr>
</tbody></table>
stevePakshttp://www.blogger.com/profile/07452508245080471986noreply@blogger.com0tag:blogger.com,1999:blog-5943612685487581451.post-51796070104080072172017-11-09T09:33:00.004+09:002017-11-09T09:33:53.928+09:00브루스 웹스터 "사해효과"재능 있고 효과적인 IT 엔지니어가 떠날 가능성이 가장 큰 엔지니어 - 증발하는 경우가 발생합니다<br />
남아있는 경향이있는 것은 '잔여 물'입니다. 이는 가장 재능 있고 효과적인 IT 엔지니어입니다. 그들이 직장을 불쾌하다고 생각하더라도, 다른 곳에서 일자리를 찾을 수있는 가능성이 가장 적습니다.<br />
<br />
http://brucefwebster.com/2008/04/11/the-wetware-crisis-the-dead-sea-effect/stevePakshttp://www.blogger.com/profile/07452508245080471986noreply@blogger.com0tag:blogger.com,1999:blog-5943612685487581451.post-65433354771078251112017-09-26T09:08:00.000+09:002017-09-26T09:08:31.002+09:00발견적 평가방법제이콥 닐슨의 발견적 평가방법의 10가지 원리<br />
<br />
<ol style="background-color: white; color: #222222; font-family: sans-serif; font-size: 14px; list-style-image: none; margin: 0.3em 0px 0px 3.2em; padding: 0px;">
<li style="margin-bottom: 0.1em;">시스템 상태의 가시성 유지할 것</li>
<li style="margin-bottom: 0.1em;">실제 세상과 시스템의 일치</li>
<li style="margin-bottom: 0.1em;">사용자에게 부여하는 조종의 자유를 줄 것</li>
<li style="margin-bottom: 0.1em;">일관성과 표준 지킬 것</li>
<li style="margin-bottom: 0.1em;">실수를 방지할 것</li>
<li style="margin-bottom: 0.1em;">기억보다는 인식하게 할 것</li>
<li style="margin-bottom: 0.1em;">유연성을 가지고 사용의 효율성을 가질 것</li>
<li style="margin-bottom: 0.1em;">심미적이고 최소의 디자인을 할 것</li>
<li style="margin-bottom: 0.1em;">실수로부터 회복이 가능할 것</li>
<li style="margin-bottom: 0.1em;">도움을 줄 수 있는 문서를 제공할 것</li>
</ol>
<div>
<span style="color: #222222; font-family: sans-serif;"><span style="font-size: 14px;"><br /></span></span></div>
<div>
<span style="color: #222222; font-family: sans-serif;"><span style="font-size: 14px;"><br /></span></span></div>
<div>
<span style="color: #222222; font-family: sans-serif;"><span style="font-size: 14px;">http://times.kaist.ac.kr/news/articleView.html?idxno=2072</span></span></div>
stevePakshttp://www.blogger.com/profile/07452508245080471986noreply@blogger.com0tag:blogger.com,1999:blog-5943612685487581451.post-20316590749835689792017-09-08T11:23:00.002+09:002017-09-08T11:24:47.190+09:00php 이미지 글자 인식 (Tesseract OCR)<span style="background-color: white; color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol"; font-size: 16px;">Tesseract OCR이라는 라이브러리가 있다 </span><br />
<span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;">c++로 작성 되있으며, 다른 언어들도 호환하는데 </span></span><br />
<span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;">OS에 install 한 후 언어로 연결해주는 형태이다.</span></span><br />
<span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"><br /></span></span>
<span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;">지금 윈도우를 쓰니까 윈도우 기준으로 설치를 진행해보겠다.</span></span><br />
<span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"><br /></span></span>
<span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;">https://github.com/tesseract-ocr/tesseract/wiki/4.0-with-LSTM#400-alpha-for-windows</span></span><br />
<span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;">에서 </span></span><br />
<span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><span style="background-color: white;"><br /></span></span>
<br />
<ul style="background-color: white; box-sizing: border-box; color: #24292e; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 16px; margin-bottom: 16px; margin-top: 0px; padding-left: 2em;">
<li style="box-sizing: border-box;"><a href="http://digi.bib.uni-mannheim.de/tesseract/tesseract-ocr-setup-4.00.00dev.exe" style="background-color: transparent; box-sizing: border-box; color: #0366d6; outline-width: 0px;">Windows Installer made with MinGW-w64</a> from <a href="https://github.com/UB-Mannheim/tesseract/wiki" style="background-color: transparent; box-sizing: border-box; color: #0366d6; text-decoration-line: none;">UB Mannheim</a></li>
</ul>
<div>
<span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";">를 다운-> 설치한다. 언어 셋팅하는게 있는데 난 중국어 일본어 한국어 이거 3개를 추가했다.</span></div>
<div>
<span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";">용량이 꽤 크다 . 언어 셋팅하니까 200MB가 더 증가함.</span></div>
<div>
<br />
<br />
그다음 소스를 composer로 가져오겠다.<br />
<br />
https://github.com/thiagoalessio/tesseract-ocr-for-php<br />
<br />
<br />
<h3 style="box-sizing: border-box; color: #24292e; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 1.25em; line-height: 1.25; margin-bottom: 16px; margin-top: 24px;">
As a <a href="http://getcomposer.org/" style="box-sizing: border-box; color: #0366d6; text-decoration-line: none;">composer</a> dependency</h3>
<pre style="background-color: #f6f8fa; border-radius: 3px; box-sizing: border-box; color: #24292e; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 13.6px; line-height: 1.45; margin-bottom: 16px; overflow: auto; padding: 16px; word-wrap: normal;"><code style="background: transparent; border-radius: 3px; border: 0px; box-sizing: border-box; display: inline; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 13.6px; line-height: inherit; margin: 0px; overflow: visible; padding: 0px; word-break: normal; word-wrap: normal;">{
"require": {
"thiagoalessio/tesseract_ocr": "1.1.0"
}
}</code></pre>
</div>
<div>
<span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";"><br /></span></div>
<div>
<span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";">기본적으로 테스트 코드를 실행해보려하면 </span><span style="background-color: #f7faff; color: green; font-size: 9pt; font-weight: bold;">tesseract 를 찾을수 없다고 </span></div>
<div>
<span style="color: #24292e; font-family: , "blinkmacsystemfont" , "segoe ui" , "helvetica" , "arial" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol";">오류가 날것이다. </span></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<pre style="background-color: white; font-family: 굴림체; font-size: 9pt;"><span style="background-color: #f7faff;">-></span><span style="background-color: #f7faff;">executable(</span><span style="background-color: #f7faff; color: green; font-weight: bold;">'"D:\ProgramFiles\Tesseract-OCR\tesseract.exe"'</span><span style="background-color: #f7faff;">)</span></pre>
<pre style="background-color: white; font-family: 굴림체; font-size: 9pt;"><span style="background-color: #f7faff;">
</span></pre>
<pre style="background-color: white; font-family: 굴림체; font-size: 9pt;"><span style="background-color: #f7faff;">이런식으로 있는 경로에 대해서 쌍따옴표로 감싸줘서 경로 셋팅 후 </span></pre>
<pre style="background-color: white; font-family: 굴림체; font-size: 9pt;"><span style="background-color: #f7faff;">
</span></pre>
<pre style="font-family: 굴림체; font-size: 9pt;"><pre style="background-color: white; font-family: 굴림체; font-size: 9pt;"><span style="background-color: #f7faff; color: navy; font-weight: bold;">echo </span><span style="background-color: #f7faff;">(</span><span style="background-color: #f7faff; color: navy; font-weight: bold;">new </span><span style="background-color: #f7faff;">TesseractOCR((</span><span style="background-color: #f7faff; color: #660e7a; font-style: italic; font-weight: bold;">__DIR__</span><span style="background-color: #f7faff;">.</span><span style="background-color: #f7faff; color: green; font-weight: bold;">'\images\admin.bmp'</span><span style="background-color: #f7faff;">)))</span><span style="background-color: #f7faff;">->executable(</span><span style="background-color: #f7faff; color: green; font-weight: bold;">'"D:\ProgramFiles\Tesseract-OCR\tesseract.exe"'</span><span style="background-color: #f7faff;">)</span><span style="background-color: #f7faff;">->lang(</span><span style="background-color: #f7faff; color: green; font-weight: bold;">'kor'</span><span style="background-color: #f7faff;">)</span><span style="background-color: #f7faff;">->run()</span></pre>
<pre style="background-color: white; font-family: 굴림체; font-size: 9pt;"><span style="background-color: #f7faff;">
</span></pre>
<pre style="font-family: 굴림체; font-size: 9pt;"><span style="background-color: #f7faff;">이런식으로 실행해보면 된다. 이미지 경로 지정이야 알것이라 판단하고 lang 는 spread형태로 적어주면 된다.</span></pre>
<pre style="font-family: 굴림체; font-size: 9pt;">('kor','eng','jpn') 이러한 형태로 </pre>
<pre style="font-family: 굴림체; font-size: 9pt;"></pre>
<pre style="font-family: 굴림체; font-size: 9pt;">만약 오류가 난다면 </pre>
<pre style="font-family: 굴림체; font-size: 9pt;"></pre>
<pre style="font-family: 굴림체; font-size: 9pt;"><pre style="background-color: white; font-family: 굴림체; font-size: 9pt;"><span style="background-color: #f7faff; color: navy; font-weight: bold;">echo </span><span style="background-color: #f7faff;">(</span><span style="background-color: #f7faff; color: navy; font-weight: bold;">new </span><span style="background-color: #f7faff;">TesseractOCR((</span><span style="background-color: #f7faff; color: #660e7a; font-style: italic; font-weight: bold;">__DIR__</span><span style="background-color: #f7faff;">.</span><span style="background-color: #f7faff; color: green; font-weight: bold;">'\images\admin.bmp'</span><span style="background-color: #f7faff;">)))</span><span style="background-color: #f7faff;">->executable(</span><span style="background-color: #f7faff; color: green; font-weight: bold;">'"D:\ProgramFiles\Tesseract-OCR\tesseract.exe"'</span><span style="background-color: #f7faff;">)</span><span style="background-color: #f7faff;">->lang(</span><span style="background-color: #f7faff; color: green; font-weight: bold;">'kor'</span><span style="background-color: #f7faff;">)</span><span style="background-color: #f7faff;"> ->buildCommand()</span></pre>
<pre style="background-color: white; font-family: 굴림체; font-size: 9pt;"><span style="background-color: #f7faff;">
</span></pre>
<pre style="background-color: white; font-family: 굴림체; font-size: 9pt;"><span style="background-color: #f7faff;">이러한 형태로 build 를 해서 cmd 창에서 실행해보면 자세한 오류를 알수 있다. </span></pre>
</pre>
</pre>
<pre style="font-family: 굴림체; font-size: 9pt;">
</pre>
<pre style="font-family: 굴림체; font-size: 9pt;">다른 사람들은 잘 된다는데 난.. 한글이 잘 인식이 안된다...</pre>
<pre style="font-family: 굴림체; font-size: 9pt;">영어는 그럭저럭 인식이 되는거 같다.</pre>
</div>
stevePakshttp://www.blogger.com/profile/07452508245080471986noreply@blogger.com0tag:blogger.com,1999:blog-5943612685487581451.post-40518815828916221042017-08-28T10:01:00.002+09:002017-08-28T10:01:44.212+09:00논문작성법논문 작성지도 수업정리<br />
<br />
1~4장<br />
=====================================================<br />
(핵심어 + 핵심어 + 핵심어) 결론<br />
<br />
<결론을 제일 먼저 써라><br />
과정을 구구절절 모두 적을 필요가 없음<br />
A실험하다 방향이 틀어져 B가 나오면 A에 대해 언급할 필요가 없음<br />
고생한 것에 대해 알아달라고 적을 필요가 없음<br />
<br />
<결론이 나오면 제목이 정해짐><br />
결론을 갖고 제목을 정함, 결론에 가장 잘 도달하도록 작성<br />
<br />
<구성은 그림으로 짜라><br />
그림의 크기와 위치, 중요한 것은 크고 앞으로 작성<br />
<br />
<하나의 그림에는 하나의 결과를 써라><br />
그림 설명시 첫번째 문장에는 결론으로 그림에 나온 데이터는 빠짐없이 기입<br />
<br />
<br />
<그림이 완성되면 결과를 써라><br />
<br />
<논문 작성은 두괄식으로><br />
- 핵심문장 -> 설명1 -> 설명2(점점 구체적으로, 중요한건 앞으로)<br />
- 핵심문장 -> 결과1-> 결과분석->결과 부연설명1 -> 결과 부연설명2<br />
<br />
<br />
<br />
<논의(결론)에서 다룰 내용><br />
- 이 연구가 왜 중요한지?<br />
- 새로 알게 된 것은 무엇인지?<br />
- 이 결과의 어떤 의미인지?<br />
- 앞으로 뭐가 가능해진다는 것인지?<br />
- 연구의 한계는 무엇인지?(단점에 대해서 솔직하고 정확하게 써야됨, 안그럼 reviewr가 공격을 함)<br />
대안/보충 설명으로 보완(장점 강조는 구체적으로 강조,우리 기술들은 이러한 약점이 있으나, 어떻게 하면 아마도 해결이 되 라고 적어주면 됨)<br />
- 뭐가 새로운지 강조 (구체적이고 기존연구와의 차이점에 대해 설명)<br />
- 앞으로의 전망<br />
<br />
<br />
-tip<br />
> 쉬운 단어로 쉽게 설명하라<br />
> 독자의 입장에서 고민하라<br />
> 비중과 위치로 중요한 부분을 강조<br />
> 모든 결과를 논문에 다 넣을 필요가 없다<br />
<br />
- 논문은 표현은 쉬운데 내용은 깊게 -<br />
<br />
5장<br />
============================================<br />
서론은 논문의 예고편<br />
what? ;어떤 주제에 대해 연구해 봤는데,<br />
why? ; 이 연구가 왜 중요하냐면(지금까지는 어디까지 알려졌는데)<br />
how? ; 그래서 우리는 어떤 실험을 해봣다<br />
<br />
1.<br />
what?은 강렬하고 짧은 1-2문장으로 쓰는것 추천<br />
why? 앞에서의 what의 문장을 자연히 받아 구체적으로 풀어 써주면서 왜 이 주제가 흥미로운지, 이 연구가 의의가 중요한 의미가 될수 있다는 점을 시사하는것도 좋은 방법<br />
<br />
2. previous work<br />
- 이 연구가 왜 중요한지 부각시키는 것에 집중<br />
- 확신적인 표현보다는 완곡한 표현으로<br />
- 내가 조사를 해봣는데 내가 조사한거에는 없다.<br />
- 중요한것(직접관련된 내용) 부터 이야기 하고 덜 중요한것(간접 관련된 내용) 나중에 언급<br />
- 기존 연구들을 언급 한 뒤 , 다시한번 연구의 중요성을 강조하는 것도 좋은 방법<br />
<br />
3. HOW<br />
문단을 바꾸어서 논문의 핵심 방법론 기술<br />
그 다음 문장에서 구체적으로 실험 방법/내용을 소개<br />
<br />
3. abstract<br />
- intro 한번 더 요약<br />
- what+ (why) + how<br />
<br />
====================================================<br />
6장<br />
literature search : how<br />
왜 논문 조사를 해야하는가?<br />
- novelty : 기존 이론, 실험결과 등을 파악해야 함<br />
- methods : 내가 연구에 사용할 수 있는 방법 파악<br />
- comparision : 내 결과가 타당한지 비교 검토<br />
<br />
<br />
https://scholar.google.co.kr/ 에서 검색해봄<br />
<br />
<br />
=====================================================<br />
7장<br />
가능한 많은 사람들에게 보여줘라<br />
- 수정과정에서 논문의 구성을 바꾸는 것을 두려워 하지 말라<br />
- 가능한 쉽게 써라<br />
<br />
checklist: figure<br />
- scale bar, color bar & units 완벽하게 파악<br />
- 그림 속의 약어들은 모두 표현 되어야됨<br />
- 그림 속의 결과들은 모두 본문에 있는지<br />
<br />
- 본문에서 그림 호출(fig. 1) 다음에 그림이 배치되었는지<br />
- 문장 시작할 때는 fig.라는 축약대신 figure라고 다 풀어쓰길<br />
- 그림에서 subfigure (a)로 표기면 본문에서도 fig. 1(a)로 똑같이 쓰기<br />
<br />
checklist: result<br />
- 결과로 확신 할 수 있는지 주장인지? 다른 가능성은 없는지?(그에 맞게 작성)<br />
- 쉽게 설명이 되었는지?<br />
- 논리적인 비약이 없는지?<br />
<br />
checklist: text<br />
약어: 처음에 정의하고 그 이후 통일성 있게 쓰기 ctrl+f 활용<br />
약어: 3번 이상 사용하는 경우에만 약어 사용<br />
약어: 초록과 본문은 별개의 문서 = 초록에서 약어 정의 했어도 본문에서 사용한다면 다시 정의해야됨<br />
숫자+ 단위 사이에는 space: ex> 10%, 10c<br />
문장을 시작할때 기호로 시작하지 마시오<br />
<br />
checklist : refs. etc.<br />
중복된 참고문헌은 없는지<br />
issue #, page #, yr등 확인: endnote가 완벽하진 않다.<br />
be professional : 정확한 기호 표시<br />
정확한 표현으로 : 10개 정도-> 13개<br />
<br />
단어 뜻은 정확히 알고 사용<br />
강조 표현은 제대로<br />
부정적인 표현은 덜.. 쓰도록<br />
<br />
===============================================<br />
수강완료stevePakshttp://www.blogger.com/profile/07452508245080471986noreply@blogger.com0tag:blogger.com,1999:blog-5943612685487581451.post-82531904003088532732017-08-02T12:56:00.002+09:002017-08-02T12:56:24.540+09:00자바스크립트에서 csv 파일 생성시 한글 깨짐 문제 해결<br />
<br />
var data = "홍길동,1,2,3\r\n홍길동2,1,2,3"<br />
var pom = document.createElement('a');<br />
var blob = new Blob([data], {type: 'text/csv;charset=utf-8;'});<br />
var url = URL.createObjectURL(blob);<br />
pom.href = url;<br />
pom.setAttribute('download', '파일다운.csv');<br />
pom.click();<br />
<br />
다운로드 받으려 하니 한글이 깨져 문제에 대해 여러 가지를 찾아보았으나 다 되지 않았다.<br />
<br />
모든 형태가 utf-8로 되있었는데 한글이 깨져서 나오는 상황이었고<br />
해결 방법은<br />
<br />
var data = "홍길동,1,2,3\r\n홍길동2,1,2,3"<br />
var pom = document.createElement('a');<br />
var blob = new Blob([<b><span style="color: red;">"\ufeff"</span></b>+data+], {type: 'text/csv;charset=utf-8;'});<br />
var url = URL.createObjectURL(blob);<br />
pom.href = url;<br />
pom.setAttribute('download', '파일다운.csv');<br />
pom.click();<br />
<br />
<span style="color: red; font-weight: bold;">\ufeff </span>(utf-8 bom 문자열 추가) 하니 깨지지 않음을 확인 할 수 있었습니다.<br />
<br />
<br />
<br />
참고는 <a href="https://stackoverflow.com/questions/31959487/utf-8-encoidng-issue-when-exporting-csv-file-javascript">https://stackoverflow.com/questions/31959487/utf-8-encoidng-issue-when-exporting-csv-file-javascript</a><br />
<br />stevePakshttp://www.blogger.com/profile/07452508245080471986noreply@blogger.com2tag:blogger.com,1999:blog-5943612685487581451.post-38738206640197114012017-08-01T16:52:00.001+09:002017-08-01T16:53:56.001+09:00자바스크립트에서의 글자수 체크javascript 에서 textarea에서 엔터값을 넣었을때<br />
\n(Line Feed) 값으로 표시된다<br />
<br />
asp, mysql 에서는 chr(13)&chr(10) 즉 \r\n으로 개행문자가 표현되므로 이 것을 글자수로 체크하면 2자로 표현이 됨<br />
<br />
* \r\n은 도스(윈도우즈)/ \n은 유닉스, \r(Carriage Return)은 Mac에서 CR+LF 구실을 합니다.<br />
<br />
asp에서<br />
Carriage Return 은 chr(13)<br />
Line Feed 는 chr(10)<br />
<br />
<br />stevePakshttp://www.blogger.com/profile/07452508245080471986noreply@blogger.com0tag:blogger.com,1999:blog-5943612685487581451.post-11492852421656880852017-04-19T17:00:00.003+09:002017-04-19T17:00:41.656+09:0004-19utf-8 ? utf-8 bom? 무슨차이? 왜 오류?<br />
<br />
<br />
현상 : 가끔씩 페이지 맨 위에 빈 공백이 생김, 찾아보면 빈 공백만 있음, 크롬으로 찾아보면 &#65279; 문자열이 표시되있음<br />
<br />
The character in question &#65279 is the Unicode Character 'ZERO WIDTH NO-BREAK SPACE' (U+FEFF) attached to your code on a copy/paste or during a faulty Save its so simple to fix that, just open that file by notepad++ and step follow --> Encoding->Encode in UTF-8 without BOM. then save that. It work for me as well!<br />
<br />
http://stackoverflow.com/questions/15801043/php-include-creates-unwanted-gaps-in-html<br />
<br />
<br />
해결책 : UTF-8 BOM으로 되있는 페이지를 UTF-8로 변경<br />
<br />
QA 1 : BOM(Byte Order Mark)이란?<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>유니코드가, little-endian 인지 big-endian 인지 아니면 UTF-8 인지 쉽게 알 수 있도록, 유니코드 파일이 시작되는 첫부분에 보이지 않게, 2~3바이트의 문자열을 추가 이것을 BOM이라고 함.<br />
<br />
QA 2 : little-endian 인지 big-endian은 무엇인지?<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>MS윈도에서 내부적으로 사용되는 유니코드(UTF-16LE)는 16비트 즉 2바이트로 하나의 글자를 표현합니다. 바이트가 2개니까 이 바이트에 순서가 정해져 있어야 합니다. big-endian 은 있는 순서 그대로 바이트를 자연스럽게 나열하는 것이고, little-endian 은 속도를 빠르게 하기 위해서 거꾸로 나열하는 것입니다.<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>MS윈도의 유니코드는 리틀 엔디안 little-endian이 기본값입니다. 빅 엔디안 유니코드는, 울트라에디터 v11 등의 일부 프로그램에서 전혀 인식하지 못했습니다.<br />
<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>반면 UTF-8 에는 리틀 엔디안이나 빅 엔디안의 구분이 없습니다.<br />
<br />
<br />
결론 : UTF-8 BOM으로 되있는 페이지를 UTF-8로 변경stevePakshttp://www.blogger.com/profile/07452508245080471986noreply@blogger.com0tag:blogger.com,1999:blog-5943612685487581451.post-37674395090559606252017-04-04T09:18:00.002+09:002017-04-04T09:19:34.005+09:002017-04-03<h2>
char vs varchar 차이</h2>
char는 고정길이 데이터<br />
varchar는 가변길이(고정길이 포함)일 경우 사용<br />
<br />
varchar2 블럭분할 발생<br />
char 데이터가 없어도 빈(null) 데이터를 저장시 미리 공간 할당 하기때문에<br />
비어있는 데이터를 update 하더라도 미리 할당된 공간 내에서 저장<br />
<br />
2개의 블럭 I/O보다<br />
1개의 블럭 I/O를 읽어오는것이 성능에 더 이득<br />
<br />
<a href="https://okky.kr/article/217655">https://okky.kr/article/217655</a> 참고<br />
<br />
===================================<br />
<h2>
varchar(10)이면 한글은 대체 몇자?</h2>
<span style="color: #333333; font-family: "helvetica neue" , "helvetica" , "arial" , sans-serif; font-size: 15px;">mysql , MariaDB</span><br />
<div class="memoContent" id="memoContentDiv72309622" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0.298039); -webkit-text-stroke-width: 0px; box-sizing: border-box; color: #333333; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 15px; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal; letter-spacing: normal; line-height: 1.5; margin: 0px; max-width: 100%; orphans: 2; padding: 0px; text-align: start; text-decoration-color: initial; text-decoration-style: initial; text-indent: 0px; text-size-adjust: none; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; word-wrap: break-word;">
varchar(10) : 한글10자, 영문,숫자 10자<br />
<br style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0.298039); box-sizing: border-box;" />
MS-SQL<br />
varchar(10) : 한글 5자, 영문,숫자 10자<br />
nvarchar(10) : 한글 10자, 영문, 숫자 10자<br />
<br style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0.298039); box-sizing: border-box;" />
Oracle<br />
varchar2(10) : 한글 3자, 영문,숫자 10자<br />
nvarchar2(10) : 한글 10자, 영문,숫자 10자</div>
<br />stevePakshttp://www.blogger.com/profile/07452508245080471986noreply@blogger.com0tag:blogger.com,1999:blog-5943612685487581451.post-15483149307862009362017-03-22T17:26:00.003+09:002017-03-22T17:26:54.187+09:00라라벨(laravel) 동작정리1. 모든 시작점<br />
public/index.php<br />
<br />
2. apache/nginx 요청<br />
<br />
3. include bootstrap/app.php 실행(서비스 컨테이너 인스턴스를 생성);<br />
<br />
4. 서비스 컨테이너 인스턴스를 생성<br />
<br />
5. 각 요청에 따라 http커널 or console커널로 보냄<br />
<br />
5.1. HTTP 커널은 Illuminate\Foundation\Http\Kernel 클래스를 상속하고 있으며, 요청을 실행하기 전에 처리되는 bootstrappers (시작 코드)의 배열을 정의하고 있습니다. 이 시작 코드들은 에러 처리, 로그 설정, 어플리케이션 동작 환경의 감지 등 실제로 요청이 처리되기 전에 수행해야 되는 작업들을 의미합니다.<br />
<br />
5.1.1 커널 부팅(부트스트래핑) 과정의 가장 중요한 것 중의 하나는 어플리케이션의 서비스 프로바이더를 로딩하는 것입니다. 어플리케이션의 모든 서비스 프로바이더는 config/app.php 파일의 providers 배열에 설정되어 있습니다. 먼저, 모든 서비스 프로바이더의 register 메소드가 호출되고, 이후에 등록 된 모든 서비스 프로바이더의 boot 메소드가 호출되어 집니다.<br />
<br />
서비스 프로바이더는 프레임워크의 데이터베이스, 큐, validation, 라우팅 컴포넌트와 같은 다양한 컴포넌트의 부트스트래핑(부팅과 같은 기초 작업들)의 처리를 책임집니다. 프레임워크가 제공하는 모든 기능을 초기화 하고 설정하는 것으로, 서비스 프로바이더는 라라벨의 부팅(부트스트래핑) 과정에서 가장 중요한 기능이라고 할 수 있습니다.<br />
<br />stevePakshttp://www.blogger.com/profile/07452508245080471986noreply@blogger.com0tag:blogger.com,1999:blog-5943612685487581451.post-51674862406576251692017-02-09T10:17:00.003+09:002017-02-09T10:17:55.706+09:00php에서 메일제목 한글이 깨질때 <br />
<h2>
php에서 한글인코딩을 보낼 경우 한글이깨지는 경우가 발생한다.</h2>
<br />
<br />
<h4>
상황</h4>
<div>
- 홈페이지(php, linux, mysql)에서 메일(linux)을 보내는데 한글이 깨짐 </div>
<div>
<br /></div>
<h4>
현상확인</h4>
<br />
#그림1<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrXbUTGUSvhQIldrD6gFVjfjaWBQZloNv5ZaORi6JGWYgLf4cVfgnGrxHDj3uydxGDrUr-jrfl0RtqOfWvDvn9mxj0_vr10wyrG0aPyLnirGXH6G1LmLkRFVQRRx84OmBJYsJ5w87B_5vJ/s1600/%25EC%25BA%25A1%25EC%25B2%2598.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="27" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrXbUTGUSvhQIldrD6gFVjfjaWBQZloNv5ZaORi6JGWYgLf4cVfgnGrxHDj3uydxGDrUr-jrfl0RtqOfWvDvn9mxj0_vr10wyrG0aPyLnirGXH6G1LmLkRFVQRRx84OmBJYsJ5w87B_5vJ/s640/%25EC%25BA%25A1%25EC%25B2%2598.JPG" width="640" /></a></div>
(그림1 다음메일)<br />
<br />
<br />
그렇다고 모두 그런것은 아니다.<br />
<br />
#그림2<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7F7VevArzacl4OF9JRHGn-YzfL0bLEn9iZVCXhVD8dqshCaThuSydFc3AUjRDi_IN9d8eNwlD3slO0XMfKDcN9USEAAk6h51NYMcvGWFzy74W0puf7CpPSZzuWVY20YQDPv4U0RVHFLJw/s1600/%25EC%25BA%25A1%25EC%25B2%25981.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="25" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7F7VevArzacl4OF9JRHGn-YzfL0bLEn9iZVCXhVD8dqshCaThuSydFc3AUjRDi_IN9d8eNwlD3slO0XMfKDcN9USEAAk6h51NYMcvGWFzy74W0puf7CpPSZzuWVY20YQDPv4U0RVHFLJw/s640/%25EC%25BA%25A1%25EC%25B2%25981.JPG" width="640" /></a></div>
(그림2. 네이버 메일)<br />
<br />
<br />
많이 쓰는 메일들에 대해서 테스트 해보았는데<br />
(gmail, naver, daum or hanmail, nate 그리고 회사메일)<br />
daum과 회사메일이 그림1과 같은 현상이 발생되었다.<br />
<br />
<br />
<br />
<br />
<br />
<h4>
그럼 원인에 대해서 생각해보자</h4>
1. 메일서버<br />
2. 웹서버<br />
3. DB<br />
4. backend 언어<br />
5. etc...<br />
<br />
<br />
그럼 하나씩 짚고 넘어가보자<br />
<br />
1. 메일서버 (x)<br />
3. DB (x)<br />
- 기존 언어(asp, mysql) 홈페이지에서 메일(linux)을 보냈을때 정상적으로 발송됨<br />
<br />
2. 웹서버의 문제<br />
- 리눅스서버 설정은 확인하고 조작해보기 힘드므로 마지막순위로 밀겠다<br />
<br />
4. backend 언어(php)<br />
- 남은건 이거 하나<br />
<br />
<br />
<h3>
해결</h3>
<div>
1. php한글깨짐을 검색해보면 관련 블로그가 많다</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNskSckc5VZRQhLcX5XkqgwPLvcUyenagB-vkXdXXTfOFzlCRPISVuX7MlnX9h4leoxOs2YBuPT8GtYK7jnqZhQbOOyaO33_XGZPEveipcoe4dRT5kWnE13pkr5HjGKi2nTMHOieThwT1j/s1600/%25EC%25BA%25A1%25EC%25B2%25982.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="506" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNskSckc5VZRQhLcX5XkqgwPLvcUyenagB-vkXdXXTfOFzlCRPISVuX7MlnX9h4leoxOs2YBuPT8GtYK7jnqZhQbOOyaO33_XGZPEveipcoe4dRT5kWnE13pkr5HjGKi2nTMHOieThwT1j/s640/%25EC%25BA%25A1%25EC%25B2%25982.JPG" width="640" /></a></div>
<br />
<br />
내용을 살펴보면 메일을 보낼때 헤더값으로 관련 정보를 넘겨준다.<br />
넘겨줄때<br />
<br />
$subject = "메일제목";<br />
<br />
이럴경우<br />
<br />
$subject = '=?UTF-8?B?'.base64_encode( "메일제목" ).'?=';<br />
<br />
으로 utf-8로 메일을 보낸다는것을 명시해주면 된다.<br />
<br />
기본적으로 메일을 보낼때 ASCII 문자열로 넘어가기때문에 인코딩에 대한 명시를 해줘야된다 한다.<br />
<b><br /></b>
<b>이러한 형태로 인코딩을 적용되어 될 부분은 한글이 들어가야되는 부분(보내는이 이름, 받는이 이름) 들도 포함이다. </b><br />
그리고 <b>내용은 하지말아야 한다</b>.(해보니까 더 깨진다.. 그냥 보내야 정상임)<br />
이부분에 대해선 더 확인해봐야될듯 하다.<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />stevePakshttp://www.blogger.com/profile/07452508245080471986noreply@blogger.com1tag:blogger.com,1999:blog-5943612685487581451.post-81491844908899380042016-12-28T09:49:00.003+09:002016-12-28T09:49:51.923+09:00HTTP Referer ?? HTTP Referrer ?? 원래 Referrer 라고 써야하지만, 필립 할람-베이커Phillip Hallam-Baker가 HTTP스펙에 필드를 추가로 제안할때 오타로 Referer로 기재함.<br />
오타가 그대로 표준에 반영되어 RFC-1945 문서에 포함됐고, 현재까지 Referer로 사용하고 있다.stevePakshttp://www.blogger.com/profile/07452508245080471986noreply@blogger.com0tag:blogger.com,1999:blog-5943612685487581451.post-27275084985653832162016-12-27T14:30:00.001+09:002016-12-27T14:30:02.354+09:00제로데이 공격(Zero-Day Attack)<b style="background-color: white; color: #252525; font-family: sans-serif; font-size: 14px;">제로 데이 공격</b><span style="background-color: white; color: #252525; font-family: sans-serif; font-size: 14px;">(또는 </span><b style="background-color: white; color: #252525; font-family: sans-serif; font-size: 14px;">제로 데이 위협</b><span style="background-color: white; color: #252525; font-family: sans-serif; font-size: 14px;">, Zero-Day Attack)은 </span><a href="https://ko.wikipedia.org/wiki/%EC%BB%B4%ED%93%A8%ED%84%B0" style="background: none rgb(255, 255, 255); color: #0b0080; font-family: sans-serif; font-size: 14px; text-decoration: none;" title="컴퓨터">컴퓨터</a><span style="background-color: white; color: #252525; font-family: sans-serif; font-size: 14px;"> </span><a href="https://ko.wikipedia.org/wiki/%EC%86%8C%ED%94%84%ED%8A%B8%EC%9B%A8%EC%96%B4" style="background: none rgb(255, 255, 255); color: #0b0080; font-family: sans-serif; font-size: 14px; text-decoration: none;" title="소프트웨어">소프트웨어</a><span style="background-color: white; color: #252525; font-family: sans-serif; font-size: 14px;">의 </span><a class="mw-redirect" href="https://ko.wikipedia.org/wiki/%EC%B7%A8%EC%95%BD%EC%A0%90" style="background: none rgb(255, 255, 255); color: #0b0080; font-family: sans-serif; font-size: 14px; text-decoration: none;" title="취약점">취약점</a><span style="background-color: white; color: #252525; font-family: sans-serif; font-size: 14px;">을 공격하는 기술적 위협으로, 해당 취약점에 대한 </span><a class="mw-disambig" href="https://ko.wikipedia.org/wiki/%ED%8C%A8%EC%B9%98" style="background: none rgb(255, 255, 255); color: #0b0080; font-family: sans-serif; font-size: 14px; text-decoration: none;" title="패치">패치</a><span style="background-color: white; color: #252525; font-family: sans-serif; font-size: 14px;">가 나오지 않은 시점에서 이루어지는 공격을 말한다. 이러한 시점에서 만들어진 </span><a href="https://ko.wikipedia.org/wiki/%EC%B7%A8%EC%95%BD%EC%A0%90_%EA%B3%B5%EA%B2%A9" style="background: none rgb(255, 255, 255); color: #0b0080; font-family: sans-serif; font-size: 14px; text-decoration: none;" title="취약점 공격">취약점 공격</a><span style="background-color: white; color: #252525; font-family: sans-serif; font-size: 14px;">(익스플로잇)을 </span><b style="background-color: white; color: #252525; font-family: sans-serif; font-size: 14px;">제로 데이 취약점 공격</b><span style="background-color: white; color: #252525; font-family: sans-serif; font-size: 14px;">이라고도 한다.</span>stevePakshttp://www.blogger.com/profile/07452508245080471986noreply@blogger.com0tag:blogger.com,1999:blog-5943612685487581451.post-83995567775405570522016-12-21T14:38:00.003+09:002016-12-21T14:38:47.466+09:00드라이브 바이(drive by), 파밍(pharming) 공격드라이브 바이(drive by)<br />
~쪽으로 자동차를 운전하다 라는 의미<br />
온라인 광고업체에서 사용자가 아무런 의심없이 동의버튼을 누르는 버릇을 악용해 광고 콘텐츠 설치 유도(드라이브 바이 인스톨 - drive by install) 또는 한번 클릭하는 선택적 설치(one click opt install)<br />
사용자의 동의 없이 자동으로 악성코드 다운로드 및 실행하는 현상<br />
<br />
<br />
파밍(pharming)<br />
악성코드 또는 다른 공격으로 인해 DNS가 변경되어 피싱사이트로 유도하는 공격<br />
c:\window\system\drivers\etc 에 존재하는 host 파일 조작 혹은 레지스트리를 변조시켜 로컬프락시 설정, 악성코드 자체가 로컬 DNS가 되는 방식도 있다.stevePakshttp://www.blogger.com/profile/07452508245080471986noreply@blogger.com0tag:blogger.com,1999:blog-5943612685487581451.post-52060454483785410272016-11-30T09:46:00.002+09:002016-11-30T09:46:46.146+09:00페인트공 알고리즘, 마세라티 문제, 야크 털 깎기페인트공 알고리즘<br />
<br />
1. 페인트공이 첫날은 차선 페인트 작업을 300야드 칠함<br />
2. 둘째날은 150야드 칠함<br />
3. 셋째날은 30야드 칠함, 첫날은 어떻게 10배를 칠했는지 관리자가 묻자<br />
"저도 어쩔 수 없었습니다. 매일 페인트 통에서 점점 멀어지니까요."<br />
<br />
- 조엘 스폴스키의 “조엘 온 소프트웨어” 중<br />
<br />
--> 일정 이상 규모가 되면 급격히 성능 저하되고 문제를 일으키는 코드<br />
<br />
<br />
마세라티 문제<br />
<br />
1. 어떤 마세라티 모델과 색상을 구매할 지 고민하는 것.<br />
2. 나중에 마세라티 살 능력이 됐을 때 할 고민을 미리 하는 것.<br />
<br />
* 돈 많은 금융과 증권계에서는 “boat naming” 이라고 함.<br />
* 당장 필요하지 않은 기술을 담보되지 않은 미래의 큰 성공에 대비하여 준비하는 것<br />
* 천만명을 처리할 서비스는 사용자가 10만은 됐을 때 고민<br />
* 엔지니어만 있는 스타트업에서 자주 발생하는 현상<br />
<br />
야크 털깍기(Yak Shaving)<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>어떤 목적을 달성하기 위해 전혀 상관없는 연속된 작업을 해야 하는 상황.<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>그중 마지막 작업이 야크 털깍기<br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>봄이 와서 세차를 하려는데 호스가 터졌음<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>차로 홈 디포우에 가서 호스를 사려보니 다리를 지나야 하는데 통행 카드가 필요<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>통행카드가 없어서 옆집 Bob 한테 빌리려는데<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>아들이 캠핑가려고 Bob 한테 베개를 빌린 후에 안 갖다 줌<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>그런데 베개에 있는 야크털이 많이 빠져서 지금 베개를 갖다 줄 수 없음<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>그래서 세차를 하기 위해 동물원에 가서 야크 털을 깍는중<br />
<br />
- 세스 고딘의 “이제는 작은 것이 큰 것이다“ 중<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>* 야크 털깍기로 배우는 것도 많지만 문제는 일정<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>* 예정보다 많은 시간이 소요된다면 잠시 멈출 것<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>* 하려고 했던게 무엇인지 떠올려 보고 야크털깍기라 생각되면 했던 일을 과감히 중지stevePakshttp://www.blogger.com/profile/07452508245080471986noreply@blogger.com0tag:blogger.com,1999:blog-5943612685487581451.post-10798160701693216262016-09-09T09:30:00.004+09:002016-09-09T09:30:54.154+09:00datepicker 삭제 버튼(firefox 오류수정 버전)jquery datepicker를 사용 할 경우 해당 input text를 삭제버튼으로 한번에 내용을 제거 하고 싶을때가 있다.<br />
<br />
1.<br />
그래서 얼마전까지 사용했던 방법은 jquery 초기화 옵션중에<br />
<pre><span style="font-family: D2Coding;">
showButtonPanel: <span style="color: blue;">true</span>, <span style="color: green;">// 캘린더 하단에 버튼 패널을 표시한다. </span>
</span>
</pre>
showButtonPanel 옵션을 true로 주면<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjuph5ECe7OgtYMoFRKiM7_4P1DbO-yHulgcxqHCM7MJyQPgL9_hQYvpkmgXsPEC130zr9I9M8u_JAD24YyIz2F4yUa2v6QE-Yq2X_ZwTa6-CCch1TCefx8uCFRUgSn1DpEUaYx7_ywL_2/s1600/%25EB%258B%25AC%25EB%25A0%25A5%25EC%2599%2584%25EC%25A0%2584+%25EC%25B5%259C%25EC%25B4%2588.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjuph5ECe7OgtYMoFRKiM7_4P1DbO-yHulgcxqHCM7MJyQPgL9_hQYvpkmgXsPEC130zr9I9M8u_JAD24YyIz2F4yUa2v6QE-Yq2X_ZwTa6-CCch1TCefx8uCFRUgSn1DpEUaYx7_ywL_2/s1600/%25EB%258B%25AC%25EB%25A0%25A5%25EC%2599%2584%25EC%25A0%2584+%25EC%25B5%259C%25EC%25B4%2588.JPG" /></a></div>
이렇게 [오늘날짜]와 [닫기] 버튼이 최초에 생긴다.<br />
<br />
<br />
2. 이 닫기 버튼의 이름을 clear로 변경<br />
3. 닫기 버튼을 눌렀을때 해당 input text를 clear해주는 이벤트를 bind 해준다.<br />
<br />
<pre><span style="font-family: D2Coding;">
closeText: <span style="color: magenta;">'clear'</span>
,onClose: <span style="color: blue;">function </span>(dateText, inst) {
<span style="color: blue;">if </span>($(<span style="color: red;">window</span>.event.srcElement).hasClass(<span style="color: magenta;">'ui-datepicker-close'</span>))
{
<span style="color: red;">document</span>.getElementById(<span style="color: blue;">this</span>.id).value = <span style="color: magenta;">''</span>;
}
}
</span>
</pre>
<pre><span style="font-family: "Malgun Gothic"; white-space: normal;">이렇게 하면 ~ie엣지, 크롬에선 정상적으로 동작한다.</span></pre>
<pre><span style="font-family: Malgun Gothic;"><span style="white-space: normal;">문제는 firefox에서는 </span></span></pre>
<pre><span style="font-family: Malgun Gothic;"><span style="white-space: normal;">
</span></span></pre>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvtNv7Doq0bXPJU24r1jS4KjsLqfbVPlel9VkqSI8fTXoUuE9ve55wNHQh9J0B4Uab88n61yxfACEu-owUCov38Y8N3XEa4AGPcfGktmKNjJp2fkyl1AfzbO1xcZTGEOqw-eCVW7hqAo2d/s1600/%25EB%258B%25AC%25EB%25A0%25A5+%25EC%2588%2598%25EC%25A0%2595%25EC%25A0%2584+%25EC%2597%2590%25EB%259F%25AC+.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="40" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvtNv7Doq0bXPJU24r1jS4KjsLqfbVPlel9VkqSI8fTXoUuE9ve55wNHQh9J0B4Uab88n61yxfACEu-owUCov38Y8N3XEa4AGPcfGktmKNjJp2fkyl1AfzbO1xcZTGEOqw-eCVW7hqAo2d/s640/%25EB%258B%25AC%25EB%25A0%25A5+%25EC%2588%2598%25EC%25A0%2595%25EC%25A0%2584+%25EC%2597%2590%25EB%259F%25AC+.JPG" width="640" /></a></div>
<pre><span style="font-family: Malgun Gothic;"><span style="white-space: normal;">라 에러가 생김 </span></span></pre>
<pre><span style="font-family: Malgun Gothic;"><span style="white-space: normal;">기존에 onClose 안에 준 이벤트 자체가 현재 이벤트가 일어나는 엘리먼트의 클래스를 여부를 판단하는것인다. window.event 자체가 firefox에서는 존재 하지 않아 해당라인에서 error발생</span></span></pre>
<pre><span style="font-family: Malgun Gothic;"><span style="white-space: normal;">
</span></span></pre>
<pre><span style="font-family: Malgun Gothic;"><span style="white-space: normal;">구글링 후 가장 깔끔하게 처리되는것은</span></span></pre>
<pre><span style="font-family: Malgun Gothic;"><span style="white-space: normal;">
</span></span></pre>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<pre><pre><span style="font-family: D2Coding;"><span style="color: blue;">function </span>cleanDatepicker(){
<span style="color: blue;">var </span>old_fn = $.datepicker._updateDatepicker;
$.datepicker._updateDatepicker = <span style="color: blue;">function</span>(inst) {
old_fn.call(<span style="color: blue;">this</span>, inst);
<span style="color: blue;">var </span>buttonPane = $(<span style="color: blue;">this</span>).datepicker(<span style="color: magenta;">"widget"</span>).find(<span style="color: magenta;">".ui-datepicker-buttonpane"</span>);
$(<span style="color: magenta;">"<button type='button' class='ui-datepicker-clean ui-state-default ui-priority-primary ui-corner-all'>clear</button>"</span>).appendTo(buttonPane).click(<span style="color: blue;">function</span>(ev) {
$.datepicker._clearDate(inst.input);
}) ;
}
}
</span>
</pre>
<pre>
</pre>
<pre><span style="font-family: Malgun Gothic;"><span style="white-space: normal;">위 함수를 선언 후 datepicker init 하기전에 한번 실행해주는 것이 가장 브라우저도 안타고 잘 동작하게 해결하는 방법이었습니다.</span></span></pre>
<pre><span style="font-family: Malgun Gothic;"><span style="white-space: normal;">
</span></span></pre>
<pre><span style="font-family: Malgun Gothic;"><span style="white-space: normal;">4. 해당 함수를 실행하고 </span></span></pre>
<pre><span style="font-family: Malgun Gothic;"><span style="white-space: normal;">5. 기존에 clear버튼을 "닫기" 버튼으로 변경 </span></span></pre>
<pre><span style="font-family: Malgun Gothic;"><span style="white-space: normal;">6. onClose에 bind했던 함수는 제거하면</span></span></pre>
<pre><span style="font-family: Malgun Gothic;"><span style="white-space: normal;"> 아래와 같이 버튼 3개가 생기고 각 버튼들이 잘 동작 하는걸 확인 할 수 있다.</span></span></pre>
<pre>
</pre>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-787YodPXEYopBvsFDNfnSqO4RmdOutGjefmFHKpwVR9oHsu7fNLUNi2IiO4Q5rPwo5p6oN5JdF0GvkK9R2FfUAuTG35KRuSh0ZvAsdSRAvXQhM3Ds178IIqxhqZuCAR5t_0bYwKxTiEb/s1600/%25EB%258B%25AC%25EB%25A0%25A5%25EC%2588%2598%25EC%25A0%2595.JPG" imageanchor="1" style="font-family: "Malgun Gothic"; margin-left: 1em; margin-right: 1em; text-align: center; white-space: normal;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-787YodPXEYopBvsFDNfnSqO4RmdOutGjefmFHKpwVR9oHsu7fNLUNi2IiO4Q5rPwo5p6oN5JdF0GvkK9R2FfUAuTG35KRuSh0ZvAsdSRAvXQhM3Ds178IIqxhqZuCAR5t_0bYwKxTiEb/s1600/%25EB%258B%25AC%25EB%25A0%25A5%25EC%2588%2598%25EC%25A0%2595.JPG" /></a></pre>
<pre>
</pre>
<pre>
</pre>
<pre><span style="font-family: Malgun Gothic;"><span style="white-space: normal;">
</span></span></pre>
<pre><span style="font-family: Malgun Gothic;"><span style="white-space: normal;">
</span></span></pre>
<pre><span style="font-family: Malgun Gothic;"><span style="white-space: normal;">
</span></span></pre>
<pre><span style="font-family: Malgun Gothic;"><span style="white-space: normal;">
</span></span></pre>
<pre><span style="font-family: Malgun Gothic;"><span style="white-space: normal;">
</span></span></pre>
<pre><span style="font-family: Malgun Gothic;"><span style="white-space: normal;">
</span></span></pre>
stevePakshttp://www.blogger.com/profile/07452508245080471986noreply@blogger.com0tag:blogger.com,1999:blog-5943612685487581451.post-53318714272450727522016-08-10T11:23:00.002+09:002016-08-10T11:29:27.410+09:00Laravel 5 optimization commandsLaravel 5 optimization commands<br />
<br />
============================<br />
php artisan optimize<br />
php artisan config:cache<br />
php artisan route:cache<br />
============================<br />
<br />
1. storage paths optimize<br />
optimize 명령을 사용하면 "bootstrap/cache/" 폴더 안에 컴파일 된 파일 기록<br />
<br />
2. artisan optimize<br />
php artisan optimize 명령어를 실행하면 "bootstrap/cache/compiled.php" 형태로 저장 하거나 덮어쓴다.<br />
더 컴파일 하고 싶은 class가 있을경우 config/compile.php 에서 추가 할 수 있다.<br />
--force 옵션을 사용하면 컴파일 되는 것을 피할 수 있다.<br />
<br />
service provider는 "bootstrap/cache/services.php" 파일 생성(json) 경로를 등록해두고 최적화를 시도한다.<br />
<br />
php artisan clear-compiled 명령을 하면 compile된 파일 캐시를 지움<br />
<br />
artisan optimize는 "config/app.php"의 설정에 따라 달라질수 있다.<br />
배포중에도 php artisan config:cache 명령으로 캐시 클리어 가능<br />
<br />
3. artisan config:cache<br />
config 파일 들에 대한 캐싱을 진행<br />
bootstrap/cache/config.php 라는 파일명으로 생성된다.<br />
기존에 생성되 있을경우 덮어쓴다.<br />
삭제 하는 방법은 php artisan config:clear<br />
<br />
4. artisan route:cache<br />
route에 대한 정보도 cache로 등록.<br />
bootstrap/cache/routes.php 라는 파일명으로 생성된다.<br />
기존에 생성되 있을경우 덮어쓴다.<br />
<br />
삭제 하는 방법은 php artisan route:clear<br />
<br />
5. artisan view:clear<br />
프레임워크를 통해 최초 렌더링 되는 파일을 해당 경로(storage/framework/views) 에 (MD5).php파일 형태로 컴파일 됨<br />
캐시를 없애고 싶으면 artisan view:clear<br />
<br />
<br />
<br />
Laravel 5.0<br />
<br />
5.1 버전 이전에는 artisan 명령을 사용하면 vendor 폴더에 기록됨<br />
경로를 storage/framework/ 바꾸고 싶을 경우 bootstrap/app.php안에 $app->useStoragePathForOptimizations(true);<br />
<br />
출처 : http://sentinelstand.com/article/laravel-5-optimization-commandsstevePakshttp://www.blogger.com/profile/07452508245080471986noreply@blogger.com0tag:blogger.com,1999:blog-5943612685487581451.post-50998964344711365262016-07-22T18:24:00.004+09:002016-08-16T16:02:30.303+09:00카카오api 나에게 보내기 (REST API) classic asp 카카오api 주소 (https://developers.kakao.com/)<br />
<br />
예제 소스는 classic asp로 구현했습니다.<br />
<br />
<h4 id="나에게-보내기" style="background-color: #fbfbfb; box-sizing: content-box; color: #222222; font-family: "Noto Sans Medium", "Malgun gothic", "맑은 고딕", "Apple SD Gothic Neo", sans-serif; font-size: 20px; font-weight: 500; letter-spacing: -2px; line-height: 1.1; margin: -86px 0px 20px; padding: 112px 0px 0px;">
나에게 보내기<a class="copy-url zeroclipboard-is-hover" data-clipboard-text="https://developers.kakao.com/docs/restapi#카카오톡-나에게-보내기" href="https://www.blogger.com/null" style="background: url("/assets/img/docs/icon_urlcopy.png"); box-sizing: border-box; color: transparent; display: inline-block; height: 19px; margin-left: 7px; vertical-align: middle; width: 51px;">Copy URL</a></h4>
<div style="background-color: #fbfbfb; box-sizing: border-box; color: #4e5665; font-family: "Noto Sans Light", "Malgun gothic", "맑은 고딕", "Apple SD Gothic Neo", sans-serif; font-size: 14px; line-height: 20px; margin-top: 7px; padding: 0px;">
카카오톡 나에게 보내기는 사용자 중에서 <u><b>카카오계정에 연결한 카카오톡 사용자에 한해 카카오톡 나와의 챗팅방으로 메시지를 보낼 수 있는 기능입니다</b></u>. 해당 기능을 사용하기 위해서는 성공적인 로그인 후에 얻을 수 있는 사용자 토큰이 필요합니다.</div>
(https://developers.kakao.com/docs/restapi#카카오톡-나에게-보내기)<br />
<br />
<br />
1. 카카오 개발자 등록<br />
https://accounts.kakao.com/login?continue=https://developers.kakao.com/login<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKWg4cjs5938cCKq248xaRyeU-ntkUdQlP4ZKo-J8PYGZA73xUqFomFJ6pGyf85zEpQH5LTR3c3NwOXzhocpvnH6LT7lSY9RyPxc5QR0882UVwzNXjbNGzltAp_X375ehRmZHaG7LVmtxb/s1600/1.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="294" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKWg4cjs5938cCKq248xaRyeU-ntkUdQlP4ZKo-J8PYGZA73xUqFomFJ6pGyf85zEpQH5LTR3c3NwOXzhocpvnH6LT7lSY9RyPxc5QR0882UVwzNXjbNGzltAp_X375ehRmZHaG7LVmtxb/s640/1.JPG" width="640" /></a></div>
<br />
<br />
2. 내 애플리케이션 추가작업<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEdJpzI-BqsoBdZ9dBOZuO20cOyu4RyY3uIP4QytUzwkErjcD1YOIIBcIST9M_g2b6bRkUe5-3na39tnF5Rqi5tf7edGcK89z39TbS3IGUzXQOl_qrCPCzrocpJtTi29HERBYRrwEfyDtg/s1600/2.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="314" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEdJpzI-BqsoBdZ9dBOZuO20cOyu4RyY3uIP4QytUzwkErjcD1YOIIBcIST9M_g2b6bRkUe5-3na39tnF5Rqi5tf7edGcK89z39TbS3IGUzXQOl_qrCPCzrocpJtTi29HERBYRrwEfyDtg/s640/2.JPG" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />
3. 사용자관리 설정<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgt_VuPUKjBE4Dch3lBNJLNZDJjmM-BrB4K16JifSSOOHiJ8R-bP7fZiGIQIYlXK4q5VFmEfD0xYT2CdCnud6NVgTTjTesUP9RkdzVJY9fDmfEyHhKe-OIISnXH1e0e70h3KfhepD_AsMv8/s1600/3.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgt_VuPUKjBE4Dch3lBNJLNZDJjmM-BrB4K16JifSSOOHiJ8R-bP7fZiGIQIYlXK4q5VFmEfD0xYT2CdCnud6NVgTTjTesUP9RkdzVJY9fDmfEyHhKe-OIISnXH1e0e70h3KfhepD_AsMv8/s640/3.JPG" width="640" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr_C63vvorlFXhxEwYacsCwd8RoFbfoOnmH-YwsS-l9jiwe4O1GAx46hojgCbrLbEvNbbLZrxMg6i7wyn7qfctTdk-y4xUZx1JQ0un1sP4-vyQPBAGLWg39x_-C-p1yy0qQe8bwec6m6Dg/s1600/10.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="408" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr_C63vvorlFXhxEwYacsCwd8RoFbfoOnmH-YwsS-l9jiwe4O1GAx46hojgCbrLbEvNbbLZrxMg6i7wyn7qfctTdk-y4xUZx1JQ0un1sP4-vyQPBAGLWg39x_-C-p1yy0qQe8bwec6m6Dg/s640/10.JPG" width="640" /></a></div>
<br />
일반을 클릭하면 rest api 키를 얻을수 있습니다. 밑에 소스에서 client_id 변수에 이 값을 넣어주셔야됩니다.<br />
<br />
<br />
4. 템플릿 추가<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgM_KgEYNZr8OToT0PtZ8_AloZr-slHbYUckjZ7HPVy-8T6m_RZprblaY633Vhk_R94VPkN2p-3zej_fmWz-8wr9bD39G8Pt347csA4mWctoo1ZeTKS1N_ql8qMRVfTWalbXsnxqg4wDWAY/s1600/4.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="270" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgM_KgEYNZr8OToT0PtZ8_AloZr-slHbYUckjZ7HPVy-8T6m_RZprblaY633Vhk_R94VPkN2p-3zej_fmWz-8wr9bD39G8Pt347csA4mWctoo1ZeTKS1N_ql8qMRVfTWalbXsnxqg4wDWAY/s640/4.JPG" width="640" /></a></div>
<br />
<br />
5. restapi key 확인 및 도메인 등록<br />
내어플리케이션 > 설정 > 일반 > REST API 키 확인, 사이트 도메인 등록, path 등록<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/AVvXsEhiVPonKKtvPEgbVYJnoI4HhKwozEGqNfridrJGanz1sCgO26Mi7S4_bNyLoL0RvTeGlIv6JK5iQmf7vab3oattLRJGkcj3NePBRhxh_lkR7-t0tvnTaigdV8S9ZyhzLvCNSOzmNBiVjKXb/s1600/5.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="344" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiVPonKKtvPEgbVYJnoI4HhKwozEGqNfridrJGanz1sCgO26Mi7S4_bNyLoL0RvTeGlIv6JK5iQmf7vab3oattLRJGkcj3NePBRhxh_lkR7-t0tvnTaigdV8S9ZyhzLvCNSOzmNBiVjKXb/s640/5.JPG" width="640" /></a></div>
<br />
<br />
<br />
<br />
6. 로그인 처리<br />
<a href="https://developers.kakao.com/docs/restapi#사용자-관리-로그인">https://developers.kakao.com/docs/restapi#사용자-관리-로그인</a><br />
<br />
ex><br />
https://kauth.kakao.com/oauth/authorize?client_id={client_id}&redirect_uri={등록한 path}&response_type=code<br />
<br />
<br />
7. 토큰받기 처리 및 나에게 메시지 전송<br />
등록한 path 페이지에서 code라는 request 값을 받는다.<br />
받은 code값을 이용하여 token 값을 요청<br />
<pre><span style="font-family: "d2coding";">
</span>
</pre>
<br />
[aaa.asp 페이지]<br />
<pre><span style="font-family: "d2coding";">
<pre><span style="font-family: "d2coding";">
<pre><span style="font-family: "d2coding";">
<span style="color: green;">'async 함수</span>
</span></pre>
<span style="color: blue;">Function </span><span style="color: maroon;">postFormData(url, headerArr, data)</span>
<span style="color: blue;">Dim </span><span style="color: maroon;">xhr, i </span>
<span style="color: blue;">Set </span><span style="color: maroon;">xhr = Server.CreateObject(</span><span style="color: magenta;">"MSXML2.ServerXMLHTTP.3.0"</span><span style="color: maroon;">)</span>
<span style="color: maroon;">xhr.open </span><span style="color: magenta;">"POST"</span><span style="color: maroon;">, url, </span><span style="color: blue;">false</span>
<span style="color: blue;">for </span><span style="color: maroon;">i = </span><span style="color: purple;">0 </span><span style="color: blue;">to </span><span style="color: maroon;">ubound(headerArr)</span>
<span style="color: maroon;">xhr.setRequestHeader headerArr(i)(</span><span style="color: purple;">0</span><span style="color: maroon;">), headerArr(i)(</span><span style="color: purple;">1</span><span style="color: maroon;">)</span>
<span style="color: blue;">next</span>
<span style="color: maroon;">xhr.send data</span>
<span style="color: blue;">If </span><span style="color: maroon;">(xhr.Status = </span><span style="color: purple;">200</span><span style="color: maroon;">) </span><span style="color: blue;">then</span>
<span style="color: maroon;">postFormData = xhr.ResponseText</span>
<span style="color: red;">response</span><span style="color: maroon;">.write postFormData</span>
<span style="color: blue;">Else</span>
<span style="color: red;">Err</span><span style="color: maroon;">.Raise </span><span style="color: purple;">1001</span><span style="color: maroon;">, </span><span style="color: magenta;">"postFormData"</span><span style="color: maroon;">, </span><span style="color: magenta;">"Post to " </span><span style="color: maroon;">& url & </span><span style="color: magenta;">" failed with " </span><span style="color: maroon;">& xhr.Status&</span><span style="color: magenta;">" message "</span><span style="color: maroon;">&xhr.responseText</span>
<span style="color: blue;">End If</span>
<span style="color: blue;">End Function</span>
</span>
</pre>
<pre><span style="font-family: "d2coding";">
<span style="color: maroon;">client_id = </span><span style="color: magenta;">"38c9*********************8" </span>
<span style="color: maroon;">url = </span><span style="color: magenta;">"https://주소.co.kr/index22.asp"</span></span></pre>
</span></pre>
<pre><span style="font-family: "d2coding";"> <span style="color: maroon;">code = request(</span><span style="color: magenta;">"code"</span><span style="color: maroon;">)</span></span></pre>
<pre><span style="font-family: "d2coding";">
<span style="color: green;">'토큰 요청 값 받기 </span>
<span style="color: green;">'최초 요청을 보냈을시 access_token, refresh_token</span>
<span style="color: blue;">set </span><span style="color: maroon;">tokenObj = JSON.parse(</span></span></pre>
<pre><span style="font-family: "d2coding";"><span style="color: maroon;"> postFormData(</span><span style="color: magenta;">"https://kauth.kakao.com/oauth/token"</span><span style="color: maroon;">, </span></span></pre>
<pre><span style="font-family: "d2coding";"><span style="color: maroon;"> array(array(</span><span style="color: magenta;">"Content-Type"</span><span style="color: maroon;">,</span><span style="color: magenta;">"application/x-www-form-urlencoded"</span><span style="color: maroon;">)),</span></span></pre>
<pre><span style="font-family: "d2coding";"><span style="color: magenta;"> "grant_type=authorization_code&client_id="</span><span style="color: maroon;">&client_id&</span><span style="color: magenta;">"&redirect_uri="</span><span style="color: maroon;">&url&</span><span style="color: magenta;">"&code="</span><span style="color: maroon;">&code))</span>
<span style="color: maroon;">access_token = tokenObj.access_token </span>
<span style="color: maroon;">refresh_token = tokenObj.refresh_token</span>
<span style="color: green;">'refresh token 요청 값 받기 </span>
<span style="color: green;">'refresh_token은 기본 12시간~24시간이 아닌 더 긴 시간을 유지할수 있는 token임 </span>
<span style="color: blue;">set </span><span style="color: maroon;">refreshTokenObj = JSON.parse(</span></span></pre>
<pre><span style="font-family: "d2coding";"><span style="color: maroon;"> postFormData(</span><span style="color: magenta;">"https://kauth.kakao.com/oauth/token"</span><span style="color: maroon;">,</span></span></pre>
<pre><span style="font-family: "d2coding";"><span style="color: maroon;"> array(array(</span><span style="color: magenta;">"Content-Type"</span><span style="color: maroon;">,</span><span style="color: magenta;">"application/x-www-form-urlencoded"</span><span style="color: maroon;">)),</span></span></pre>
<pre><span style="font-family: "d2coding";"><span style="color: magenta;"> "grant_type=refresh_token&client_id="</span><span style="color: maroon;">&client_id&</span><span style="color: magenta;">"&redirect_uri="</span><span style="color: maroon;">&url&</span><span style="color: magenta;">"&refresh_token="</span><span style="color: maroon;">&refresh_token))</span>
<span style="color: green;">'refresh token 요청시 access_token만 넘어옴 </span>
<span style="color: maroon;">access_token = refreshTokenObj.access_token</span>
<span style="color: green;">'access_token 값을 이용하여 message 보내기</span>
<span style="color: red;">response</span><span style="color: maroon;">.write postFormData(</span><span style="color: magenta;">"https://kapi.kakao.com/v1/api/talk/memo/send?template_id=828&args="</span><span style="color: maroon;">&</span></span></pre>
<pre><span style="font-family: "d2coding";"><span style="color: maroon;"> Server.URLEncode(</span><span style="color: magenta;">"{""${message}"":""테스트적용완료"",""${subject}"":""적용완료""}"</span><span style="color: maroon;">),</span></span></pre>
<pre><span style="font-family: "d2coding";"><span style="color: maroon;"> array(array(</span><span style="color: magenta;">"Authorization"</span><span style="color: maroon;">, </span><span style="color: magenta;">"Bearer "</span><span style="color: maroon;">& access_token)),</span><span style="color: magenta;">""</span><span style="color: maroon;">)</span>
</span>
</pre>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFfRlXzyGTraJwR181EuioYzOqqtWYo9-P7nQtAXUZe-xmJ2BX0Sd5QLKwexdWE-KZkArfPatPBxShnfdcqJZoDmEN2H9s_Ba7NS6Aw6tCXYx8iLYsQShSkVmVG0Dgc8-BcrLfsqoTzX3z/s1600/6.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFfRlXzyGTraJwR181EuioYzOqqtWYo9-P7nQtAXUZe-xmJ2BX0Sd5QLKwexdWE-KZkArfPatPBxShnfdcqJZoDmEN2H9s_Ba7NS6Aw6tCXYx8iLYsQShSkVmVG0Dgc8-BcrLfsqoTzX3z/s1600/6.jpg" /></a></div>
<br />
<br />
<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;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBqM-VV01Gevr_yErcrBb5dtP4ere_mIJIpxeylEOIxXuM-OQYyBaqHgobfxqBWRyaEm0oUv1TDWDH8_gLVlH4LyyNZaCm-6KJyiLYGW4_IVI7ufC364sj6RTxEF8MVJc6vuUWt_oYC-6A/s1600/7.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBqM-VV01Gevr_yErcrBb5dtP4ere_mIJIpxeylEOIxXuM-OQYyBaqHgobfxqBWRyaEm0oUv1TDWDH8_gLVlH4LyyNZaCm-6KJyiLYGW4_IVI7ufC364sj6RTxEF8MVJc6vuUWt_oYC-6A/s1600/7.jpg" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
위와 같이 나에게 메시지가 옴 </div>
<div class="separator" style="clear: both; text-align: center;">
<br /></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;">
구현하시서 생각해보시길..</div>
stevePakshttp://www.blogger.com/profile/07452508245080471986noreply@blogger.com6tag:blogger.com,1999:blog-5943612685487581451.post-119779315867983592016-06-20T16:35:00.003+09:002016-08-05T11:29:52.344+09:00 flyweight 패턴 ■ 정의<br />
<br />
[GOF]<br />
- 공유를 통한 많은 수의 소립 객체들을 효과적으로 지원<br />
<br />
[ 실용주의 디자인패턴 ]<br />
- 메모리 사용량을 줄이기 위해 외부 상태(상태정보 저장, 계산)를 사용하거나<br />
공유(객체의 복사본 대신 단일 객체에 대한 다중 참조를 이용)한다.<br />
- 무엇을 하느냐에 의해 정의, 즉 메소드에 의해 정의됨<br />
<br />
▶ 즉 공유하는 객체를 이용하되 상태 정보를 외부 객체가 따로 관리<br />
<br />
<br />
<br />
■ 사용 예<br />
- game of life를 단순하게 구현할때 '셀'이 살아있는가?는 주변 상태를 참조를 지니고 있어야된다. 1024*1024를 표현하려해도 40mb가 필요함<br />
flywieght를 사용하면 동일한 상태를 지닌 객체가 단 하나의 객체를 통해 표현<br />
<br />
<br />
<br />
■ 장/단점<br />
- 장점 : flyweight를 사용하지 않으면 객체지향적으로 구현하기가 힘듬<br />
- 장점 : flyweight 풀을 이용하면 자바의 == 연산자로 객체의동일성 여부를 결정 할 수 있다.<br />
<br />
- 단점 : 외부상태가 계산되는 값이라면(매번 데이터베이스에 접근) 하면 접근이 느릴 수 있다.<br />
- 단점 : 코드가 복잡해짐, 유지보수를 어렵게하고 코드가 커질 수 있음<br />
<br />
<br />
■ 코드 예제<br />
쉬운 예><br />
ElementStyle e = new ElementStyle;<br />
e.setMargin(ElementStyleFactory.createMargin(10,10,20,10));<span class="Apple-tab-span" style="white-space: pre;"> </span>-> 객체는 공유하되 외부 객체가 따로 관리 되도록<br />
<div>
<br /></div>
<div>
게임프로그래밍 패턴예제(js로 구현)></div>
[origin]<br />
<pre style="background-color: white; font-family: "Courier New"; font-size: 9pt;"><!DOCTYPE html>
<<span style="color: navy; font-weight: bold;">html </span>lang=<span style="color: green; font-weight: bold;">"en"</span>>
<<span style="color: navy; font-weight: bold;">head</span>>
<<span style="color: navy; font-weight: bold;">meta </span>charset=<span style="color: green; font-weight: bold;">"UTF-8"</span>>
<<span style="color: navy; font-weight: bold;">title</span>>flyweight origin</<span style="color: navy; font-weight: bold;">title</span>>
</<span style="color: navy; font-weight: bold;">head</span>>
<<span style="color: navy; font-weight: bold;">body</span>>
경량패턴??<<span style="color: navy; font-weight: bold;">br</span>>
어떤 객체의 수가 너무 많아 좀 가볍게 만들고 싶을때 사용<<span style="color: navy; font-weight: bold;">br</span>>
고유상태와 외부상태로 나눔<<span style="color: navy; font-weight: bold;">br</span>>
<<span style="color: navy; font-weight: bold;">br</span>>
예제 : 지형 만들기<<span style="color: navy; font-weight: bold;">br</span>>
타일(고유상태)과 각 타일들이 갖고 있는 정보(외부상태)<<span style="color: navy; font-weight: bold;">br</span>>
<<span style="color: navy; font-weight: bold;">script</span>>
<span style="color: navy; font-weight: bold;">function </span><span style="font-style: italic;">Terrain</span>(kind){
<span style="color: navy; font-weight: bold;">return </span>{
<span style="color: green; font-weight: bold;">"TERRAIN_CLASS" </span>: <span style="color: green; font-weight: bold;">"TERRAIN_CLASS"</span>,
<span style="color: green; font-weight: bold;">"TERRAIN_HILL" </span>: <span style="color: green; font-weight: bold;">"TERRAIN_HILL"</span>,
<span style="color: green; font-weight: bold;">"TERRAIN_RIVER" </span>: <span style="color: green; font-weight: bold;">"TERRAIN_RIVER"</span><span style="color: green; font-weight: bold;"> </span>}[kind];
}
<span style="color: navy; font-weight: bold;">function </span><span style="font-style: italic;">World</span>(){
<span style="color: navy; font-weight: bold;">this</span>.<span style="color: #660e7a; font-weight: bold;">tiles </span>= {};
}
<span style="font-style: italic;">World</span>.<span style="color: #660e7a; font-weight: bold;">prototype</span>.<span style="color: #7a7a43;">getMovementCost </span>= <span style="color: navy; font-weight: bold;">function</span>(x,y){
<span style="color: navy; font-weight: bold;">return </span>{
<span style="color: green; font-weight: bold;">"TERRAIN_CLASS" </span>: <span style="color: blue;">1</span>,
<span style="color: green; font-weight: bold;">"TERRAIN_HILL" </span>: <span style="color: blue;">2</span>,
<span style="color: green; font-weight: bold;">"TERRAIN_RIVER" </span>: <span style="color: blue;">3</span><span style="color: blue;"> </span>}[<span style="color: navy; font-weight: bold;">this</span>.<span style="color: #660e7a; font-weight: bold;">tiles</span>[x][y]];
};
<span style="font-style: italic;">World</span>.<span style="color: #660e7a; font-weight: bold;">prototype</span>.<span style="color: #7a7a43;">getIsWater </span>= <span style="color: navy; font-weight: bold;">function</span>(x,y){
<span style="color: navy; font-weight: bold;">return </span>{
<span style="color: green; font-weight: bold;">"TERRAIN_CLASS" </span>: <span style="color: navy; font-weight: bold;">false</span>,
<span style="color: green; font-weight: bold;">"TERRAIN_HILL" </span>: <span style="color: navy; font-weight: bold;">false</span>,
<span style="color: green; font-weight: bold;">"TERRAIN_RIVER" </span>: <span style="color: navy; font-weight: bold;">true</span><span style="color: navy; font-weight: bold;"> </span>}[<span style="color: navy; font-weight: bold;">this</span>.<span style="color: #660e7a; font-weight: bold;">tiles</span>[x][y]];
};
<span style="font-style: italic;">World</span>.<span style="color: #660e7a; font-weight: bold;">prototype</span>.<span style="color: #7a7a43;">setTile </span>= <span style="color: navy; font-weight: bold;">function</span>(x,y, value){
<span style="color: navy; font-weight: bold;">this</span>.<span style="color: #660e7a; font-weight: bold;">tiles </span>= <span style="color: navy; font-weight: bold;">this</span>.<span style="color: #660e7a; font-weight: bold;">tiles</span>||{};
<span style="color: navy; font-weight: bold;">this</span>.<span style="color: #660e7a; font-weight: bold;">tiles</span>[x] = <span style="color: navy; font-weight: bold;">this</span>.<span style="color: #660e7a; font-weight: bold;">tiles</span>[x]||{};
<span style="color: navy; font-weight: bold;">this</span>.<span style="color: #660e7a; font-weight: bold;">tiles</span>[x][y] = <span style="color: navy; font-weight: bold;">this</span>.<span style="color: #660e7a; font-weight: bold;">tiles</span>[x][y]||<span style="color: green; font-weight: bold;">""</span>;
<span style="color: navy; font-weight: bold;">this</span>.<span style="color: #660e7a; font-weight: bold;">tiles</span>[x][y] = value;
};
<span style="color: navy; font-weight: bold;">function </span><span style="font-style: italic;">Main</span>(){
<span style="color: navy; font-weight: bold;">var </span><span style="color: #458383;">world </span>= <span style="color: navy; font-weight: bold;">new </span><span style="font-style: italic;">World</span>;
<span style="color: navy; font-weight: bold;">var </span><span style="color: #458383;">terrain_class </span>= <span style="font-style: italic;">Terrain</span>(<span style="color: green; font-weight: bold;">"TERRAIN_CLASS"</span>);
<span style="color: navy; font-weight: bold;">var </span><span style="color: #458383;">terrain_hill </span>= <span style="font-style: italic;">Terrain</span>(<span style="color: green; font-weight: bold;">"TERRAIN_HILL"</span>);
<span style="color: navy; font-weight: bold;">var </span><span style="color: #458383;">terrain_river </span>= <span style="font-style: italic;">Terrain</span>(<span style="color: green; font-weight: bold;">"TERRAIN_RIVER"</span>);
<span style="color: #458383;">world</span>.<span style="color: #7a7a43;">setTile</span>(<span style="color: blue;">1</span>,<span style="color: blue;">1</span>,<span style="color: #458383;">terrain_class</span>) ;
<span style="color: #458383;">world</span>.<span style="color: #7a7a43;">setTile</span>(<span style="color: blue;">1</span>,<span style="color: blue;">2</span>,<span style="color: #458383;">terrain_hill</span>) ;
<span style="color: #458383;">world</span>.<span style="color: #7a7a43;">setTile</span>(<span style="color: blue;">1</span>,<span style="color: blue;">3</span>,<span style="color: #458383;">terrain_river</span>) ;
<span style="color: #660e7a; font-weight: bold;">console</span>.<span style="color: #7a7a43;">log</span>(<span style="color: #458383;">world</span>.<span style="color: #7a7a43;">getIsWater</span>(<span style="color: blue;">1</span>,<span style="color: blue;">3</span>));
<span style="color: #660e7a; font-weight: bold;">console</span>.<span style="color: #7a7a43;">log</span>(<span style="color: #458383;">world</span>.<span style="color: #7a7a43;">getMovementCost</span>(<span style="color: blue;">1</span>,<span style="color: blue;">2</span>));
}
<span style="color: #660e7a; font-weight: bold;">window</span>.<span style="color: #7a7a43;">onload </span>= <span style="color: navy; font-weight: bold;">function</span>(){
<span style="font-style: italic;">Main</span>();
}
</<span style="color: navy; font-weight: bold;">script</span>>
</<span style="color: navy; font-weight: bold;">body</span>>
</<span style="color: navy; font-weight: bold;">html</span>></pre>
<pre style="background-color: white; font-family: "Courier New"; font-size: 9pt;"></pre>
<pre style="background-color: white; font-family: "Courier New"; font-size: 9pt;">[fly weight]</pre>
<pre style="background-color: white; font-family: "Courier New"; font-size: 9pt;"><pre style="font-family: "Courier New"; font-size: 9pt;"><!DOCTYPE html>
<<span style="color: navy; font-weight: bold;">html </span>lang=<span style="color: green; font-weight: bold;">"en"</span>>
<<span style="color: navy; font-weight: bold;">head</span>>
<<span style="color: navy; font-weight: bold;">meta </span>charset=<span style="color: green; font-weight: bold;">"UTF-8"</span>>
<<span style="color: navy; font-weight: bold;">title</span>>flyweight </<span style="color: navy; font-weight: bold;">title</span>>
</<span style="color: navy; font-weight: bold;">head</span>>
<<span style="color: navy; font-weight: bold;">body</span>>
경량패턴??<<span style="color: navy; font-weight: bold;">br</span>>
어떤 객체의 수가 너무 많아 좀 가볍게 만들고 싶을때 사용<<span style="color: navy; font-weight: bold;">br</span>>
고유상태와 외부상태로 나눔<<span style="color: navy; font-weight: bold;">br</span>>
<<span style="color: navy; font-weight: bold;">br</span>>
예제 : 지형 만들기<<span style="color: navy; font-weight: bold;">br</span>>
타일(고유상태)과 각 타일들이 갖고 있는 정보(외부상태)<<span style="color: navy; font-weight: bold;">br</span>>
<<span style="color: navy; font-weight: bold;">script</span>>
<span style="color: navy; font-weight: bold;">function </span><span style="font-style: italic;">Terrain</span>(movementCost, isWater, texture){
<span style="color: navy; font-weight: bold;">var </span><span style="color: #458383;">movementCost_</span>;
<span style="color: navy; font-weight: bold;">var </span><span style="color: #458383;">isWater_</span>;
<span style="color: navy; font-weight: bold;">var </span><span style="color: #458383;">texture_</span>;
<span style="color: navy; font-weight: bold;">function </span><span style="font-style: italic;">_Terrain</span>(){
<span style="color: navy; font-weight: bold;">this</span>.<span style="color: #660e7a; font-weight: bold;">movementCost_ </span>= movementCost;
<span style="color: navy; font-weight: bold;">this</span>.<span style="color: #660e7a; font-weight: bold;">isWater_ </span>= isWater;
<span style="color: navy; font-weight: bold;">this</span>.<span style="color: #660e7a; font-weight: bold;">texture_ </span>= texture;
}
<span style="font-style: italic;">_Terrain</span>.<span style="color: #660e7a; font-weight: bold;">prototype</span>.<span style="color: #7a7a43;">getMovementCost </span>= <span style="color: navy; font-weight: bold;">function</span>(){
<span style="color: navy; font-weight: bold;">return this</span>.<span style="color: #660e7a; font-weight: bold;">movementCost_</span>;
};
<span style="font-style: italic;">_Terrain</span>.<span style="color: #660e7a; font-weight: bold;">prototype</span>.<span style="color: #7a7a43;">isWater </span>= <span style="color: navy; font-weight: bold;">function</span>(){
<span style="color: navy; font-weight: bold;">return this</span>.<span style="color: #660e7a; font-weight: bold;">isWater_</span>;
};
<span style="font-style: italic;">_Terrain</span>.<span style="color: #660e7a; font-weight: bold;">prototype</span>.<span style="color: #7a7a43;">getTexture </span>= <span style="color: navy; font-weight: bold;">function</span>(){
<span style="color: navy; font-weight: bold;">return this</span>.<span style="color: #660e7a; font-weight: bold;">texture_</span>;
};
<span style="color: navy; font-weight: bold;">if</span>(!(<span style="color: navy; font-weight: bold;">this instanceof </span><span style="font-style: italic;">_Terrain </span>)){
<span style="color: navy; font-weight: bold;">return new </span><span style="font-style: italic;">_Terrain</span>();
}
}
<span style="color: navy; font-weight: bold;">var </span><span style="color: #660e7a; font-style: italic; font-weight: bold;">CONST_GLASS_TEXTURE </span>= <span style="color: green; font-weight: bold;">"GLASS_TEXTURE"</span>;
<span style="color: navy; font-weight: bold;">var </span><span style="color: #660e7a; font-style: italic; font-weight: bold;">CONST_HILL_TEXTURE </span>= <span style="color: green; font-weight: bold;">"HILL_TEXTURE"</span>;
<span style="color: navy; font-weight: bold;">var </span><span style="color: #660e7a; font-style: italic; font-weight: bold;">CONST_RIVER_TEXTURE </span>= <span style="color: green; font-weight: bold;">"RIVER_TEXTURE"</span>;
<span style="color: navy; font-weight: bold;">var </span><span style="color: #660e7a; font-style: italic; font-weight: bold;">CONST_WIDTH </span>= <span style="color: blue;">10</span>;
<span style="color: navy; font-weight: bold;">var </span><span style="color: #660e7a; font-style: italic; font-weight: bold;">CONST_HEIGHT </span>= <span style="color: blue;">12</span>;
<span style="color: navy; font-weight: bold;">function </span><span style="font-style: italic;">World</span>(){
<span style="color: navy; font-weight: bold;">var </span><span style="color: #458383;">tiles </span>= {};
<span style="color: navy; font-weight: bold;">function </span><span style="font-style: italic;">_World</span>(){
<span style="color: navy; font-weight: bold;">this</span>.<span style="color: #660e7a; font-weight: bold;">glassTerrain_ </span>= [<span style="color: blue;">1</span>,<span style="color: navy; font-weight: bold;">false</span>,<span style="color: #660e7a; font-style: italic; font-weight: bold;">CONST_GLASS_TEXTURE</span>];
<span style="color: navy; font-weight: bold;">this</span>.<span style="color: #660e7a; font-weight: bold;">hillTerrain_ </span>= [<span style="color: blue;">2</span>,<span style="color: navy; font-weight: bold;">false</span>,<span style="color: #660e7a; font-style: italic; font-weight: bold;">CONST_HILL_TEXTURE</span>];
<span style="color: navy; font-weight: bold;">this</span>.<span style="color: #660e7a; font-weight: bold;">riverTerrain_ </span>= [<span style="color: blue;">3</span>,<span style="color: navy; font-weight: bold;">true</span>,<span style="color: #660e7a; font-style: italic; font-weight: bold;">CONST_RIVER_TEXTURE</span>];
<span style="color: navy; font-weight: bold;">this</span>.<span style="color: #660e7a; font-weight: bold;">tiles </span>= <span style="color: #458383;">tiles</span>;
}
<span style="font-style: italic;">_World</span>.<span style="color: #660e7a; font-weight: bold;">prototype</span>.<span style="color: #7a7a43;">setTile </span>= <span style="color: navy; font-weight: bold;">function</span>(x,y, value){
<span style="color: navy; font-weight: bold;">this</span>.<span style="color: #660e7a; font-weight: bold;">tiles </span>= <span style="color: navy; font-weight: bold;">this</span>.<span style="color: #660e7a; font-weight: bold;">tiles</span>||{};
<span style="color: navy; font-weight: bold;">this</span>.<span style="color: #660e7a; font-weight: bold;">tiles</span>[x] = <span style="color: navy; font-weight: bold;">this</span>.<span style="color: #660e7a; font-weight: bold;">tiles</span>[x]||{};
<span style="color: navy; font-weight: bold;">this</span>.<span style="color: #660e7a; font-weight: bold;">tiles</span>[x][y] = <span style="color: navy; font-weight: bold;">this</span>.<span style="color: #660e7a; font-weight: bold;">tiles</span>[x][y]||<span style="color: green; font-weight: bold;">""</span>;
<span style="color: navy; font-weight: bold;">this</span>.<span style="color: #660e7a; font-weight: bold;">tiles</span>[x][y] = value;
};
<span style="font-style: italic;">_World</span>.<span style="color: #660e7a; font-weight: bold;">prototype</span>.<span style="color: #7a7a43;">getTile </span>= <span style="color: navy; font-weight: bold;">function</span>(x,y){
<span style="color: navy; font-weight: bold;">return </span><span style="font-style: italic;">Terrain</span>.<span style="color: #7a7a43;">apply</span>(<span style="color: navy; font-weight: bold;">this</span>, <span style="color: navy; font-weight: bold;">this</span>.<span style="color: #660e7a; font-weight: bold;">tiles</span>[x][y]);
};
<span style="font-style: italic;">_World</span>.<span style="color: #660e7a; font-weight: bold;">prototype</span>.<span style="color: #7a7a43;">generateTerrain </span>= <span style="color: navy; font-weight: bold;">function</span>(){
<span style="color: navy; font-weight: bold;">for</span>(<span style="color: navy; font-weight: bold;">var </span><span style="color: #458383;">x</span>=<span style="color: blue;">0</span>; <span style="color: #458383;">x </span>< <span style="color: #660e7a; font-style: italic; font-weight: bold;">CONST_WIDTH</span>; <span style="color: #458383;">x</span>++) {
<span style="color: navy; font-weight: bold;">for</span>(<span style="color: navy; font-weight: bold;">var </span><span style="color: #458383;">y</span>=<span style="color: blue;">0</span>; <span style="color: #458383;">y </span>< <span style="color: #660e7a; font-style: italic; font-weight: bold;">CONST_HEIGHT</span>; <span style="color: #458383;">y</span>++){
<span style="color: navy; font-weight: bold;">if</span>(<span style="color: #458383;">x </span>% <span style="color: blue;">2 </span>== <span style="color: blue;">0</span>){
<span style="color: navy; font-weight: bold;">this</span>.<span style="color: #7a7a43;">setTile</span>.<span style="color: #7a7a43;">apply</span>(<span style="color: navy; font-weight: bold;">this</span>, [<span style="color: #458383;">x</span>,<span style="color: #458383;">y</span>,<span style="color: navy; font-weight: bold;">this</span>.<span style="color: #660e7a; font-weight: bold;">glassTerrain_</span>]);
}<span style="color: navy; font-weight: bold;">else</span>{
<span style="color: navy; font-weight: bold;">this</span>.<span style="color: #7a7a43;">setTile</span>.<span style="color: #7a7a43;">apply</span>(<span style="color: navy; font-weight: bold;">this</span>, [<span style="color: #458383;">x</span>,<span style="color: #458383;">y</span>,<span style="color: navy; font-weight: bold;">this</span>.<span style="color: #660e7a; font-weight: bold;">hillTerrain_</span>]);
}
<span style="color: navy; font-weight: bold;">if</span>(<span style="color: #458383;">y </span>% <span style="color: blue;">3 </span>== <span style="color: blue;">1</span>){
<span style="color: navy; font-weight: bold;">this</span>.<span style="color: #7a7a43;">setTile</span>.<span style="color: #7a7a43;">apply</span>(<span style="color: navy; font-weight: bold;">this</span>, [<span style="color: #458383;">x</span>,<span style="color: #458383;">y</span>,<span style="color: navy; font-weight: bold;">this</span>.<span style="color: #660e7a; font-weight: bold;">riverTerrain_</span>]);
}
}
}
};
<span style="color: navy; font-weight: bold;">if</span>(!(<span style="color: navy; font-weight: bold;">this instanceof </span><span style="font-style: italic;">_World </span>)){
<span style="color: navy; font-weight: bold;">return new </span><span style="font-style: italic;">_World</span>();
}
}
<span style="color: navy; font-weight: bold;">function </span><span style="font-style: italic;">Main</span>(){
<span style="color: navy; font-weight: bold;">var </span><span style="color: #458383;">world </span>= <span style="font-style: italic;">World</span>();
<span style="color: #458383;">world</span>.<span style="color: #7a7a43;">generateTerrain</span>();
<span style="color: #660e7a; font-weight: bold;">console</span>.<span style="color: #7a7a43;">dir</span>(<span style="color: #458383;">world</span>.<span style="color: #7a7a43;">getTile</span>(<span style="color: blue;">1</span>,<span style="color: blue;">1</span>).<span style="color: #7a7a43;">getMovementCost</span>());
}
<span style="color: #660e7a; font-weight: bold;">window</span>.<span style="color: #7a7a43;">onload </span>= <span style="color: navy; font-weight: bold;">function</span>(){
<span style="font-style: italic;">Main</span>();
}
</<span style="color: navy; font-weight: bold;">script</span>>
</<span style="color: navy; font-weight: bold;">body</span>>
</<span style="color: navy; font-weight: bold;">html</span>></pre>
</pre>
stevePakshttp://www.blogger.com/profile/07452508245080471986noreply@blogger.com0tag:blogger.com,1999:blog-5943612685487581451.post-61310797218154363312016-06-19T19:47:00.003+09:002016-06-20T16:35:46.255+09:00게임프로그래밍 패턴 - 커맨드패턴을 이용한 이동키로 화면 움직이기 구현<pre style="background-color: white; font-family: "Courier New"; font-size: 9pt;">아래는 원본 함수</pre>
<pre style="background-color: white; font-family: "Courier New"; font-size: 9pt;"><pre style="font-family: "Courier New"; font-size: 9pt;"><span style="font-style: italic;">handleInput에 if문으로 각각의 함수를 호출 </span></pre>
</pre>
<pre style="background-color: white; font-family: "Courier New"; font-size: 9pt;"></pre>
<pre style="background-color: white; font-family: "Courier New"; font-size: 9pt;"><!DOCTYPE html>
<<span style="color: navy; font-weight: bold;">html </span>lang=<span style="color: green; font-weight: bold;">"en"</span>>
<<span style="color: navy; font-weight: bold;">head</span>>
<<span style="color: navy; font-weight: bold;">meta </span>charset=<span style="color: green; font-weight: bold;">"UTF-8"</span>>
<<span style="color: navy; font-weight: bold;">title</span>>command pattern</<span style="color: navy; font-weight: bold;">title</span>>
<<span style="color: navy; font-weight: bold;">style</span>>
<span style="color: navy; font-weight: bold;">#unit </span>{
position: <span style="color: green; font-weight: bold;">absolute</span>;
background-color: <span style="color: green; font-weight: bold;">olivedrab</span>;
top:<span style="color: blue;">100</span><span style="color: green; font-weight: bold;">px</span>;
left:<span style="color: blue;">100</span><span style="color: green; font-weight: bold;">px</span>;
display:<span style="color: green; font-weight: bold;">block</span><span style="color: green; font-weight: bold;"> </span>}
</<span style="color: navy; font-weight: bold;">style</span>>
</<span style="color: navy; font-weight: bold;">head</span>>
<<span style="color: navy; font-weight: bold;">body</span>>
원본소스
<<span style="color: navy; font-weight: bold;">div </span>id=<span style="color: green; font-weight: bold;">"unit"</span>>
unit
</<span style="color: navy; font-weight: bold;">div</span>>
<<span style="color: navy; font-weight: bold;">script</span>>
<span style="color: #660e7a; font-weight: bold;">document</span>.<span style="color: #7a7a43;">addEventListener</span>(<span style="color: green; font-weight: bold;">"keydown"</span>, <span style="font-style: italic;">handleInput</span>, <span style="color: navy; font-weight: bold;">false</span>);
<span style="color: navy; font-weight: bold;">function </span><span style="font-style: italic;">handleInput</span>(e){
<span style="color: navy; font-weight: bold;">var </span><span style="color: #458383;">keyCode </span>= e.<span style="color: #660e7a; font-weight: bold;">keyCode</span>;
<span style="color: navy; font-weight: bold;">if</span>(<span style="color: #458383;">keyCode </span>== <span style="color: blue;">38</span>){
<span style="font-style: italic;">up</span>();
}<span style="color: navy; font-weight: bold;">else if</span>(<span style="color: #458383;">keyCode </span>== <span style="color: blue;">40</span>){
<span style="font-style: italic;">down</span>();
}<span style="color: navy; font-weight: bold;">else if</span>(<span style="color: #458383;">keyCode </span>== <span style="color: blue;">37</span>){
<span style="font-style: italic;">left</span>();
}<span style="color: navy; font-weight: bold;">else if</span>(<span style="color: #458383;">keyCode </span>== <span style="color: blue;">39</span>){
<span style="font-style: italic;">right</span>();
}
};
<span style="color: navy; font-weight: bold;">function </span><span style="font-style: italic;">unit</span>(){
<span style="color: navy; font-weight: bold;">var </span><span style="color: #458383;">target </span>= <span style="color: #660e7a; font-weight: bold;">document</span>.<span style="color: #7a7a43;">getElementById</span>(<span style="color: green; font-weight: bold;">'unit'</span>);
<span style="color: navy; font-weight: bold;">return </span>{
<span style="color: green; font-weight: bold;">"x" </span>: <span style="color: #7a7a43;">parseInt</span>(<span style="font-style: italic;">getStyle</span>(<span style="color: #458383;">target</span>,<span style="color: green; font-weight: bold;">"left"</span>),<span style="color: blue;">10</span>),
<span style="color: green; font-weight: bold;">"y" </span>: <span style="color: #7a7a43;">parseInt</span>(<span style="font-style: italic;">getStyle</span>(<span style="color: #458383;">target</span>,<span style="color: green; font-weight: bold;">"top"</span>),<span style="color: blue;">10</span>),
<span style="color: green; font-weight: bold;">"body" </span>: <span style="color: #458383;">target</span>.<span style="color: #660e7a; font-weight: bold;">style</span><span style="color: #660e7a; font-weight: bold;"> </span>};
}
<span style="color: #660e7a; font-weight: bold;">window</span>.<span style="color: #7a7a43;">onload</span>= <span style="color: navy; font-weight: bold;">function</span>(){
<span style="color: #660e7a; font-weight: bold;">console</span>.<span style="color: #7a7a43;">log</span>(<span style="font-style: italic;">unit</span>().<span style="color: #660e7a; font-weight: bold;">x</span>);
};
</<span style="color: navy; font-weight: bold;">script</span>>
<<span style="color: navy; font-weight: bold;">script</span>>
<span style="color: navy; font-weight: bold;">function </span><span style="font-style: italic;">getStyle</span>(el, styleProp) {
<span style="color: navy; font-weight: bold;">var </span><span style="color: #458383;">value</span>, <span style="color: #458383;">defaultView </span>= (el.<span style="color: #660e7a; font-weight: bold;">ownerDocument </span>|| <span style="color: #660e7a; font-weight: bold;">document</span>).<span style="color: #660e7a; font-weight: bold;">defaultView</span>;
<span style="color: grey; font-style: italic;">// W3C standard way:</span><span style="color: grey; font-style: italic;"> </span><span style="color: navy; font-weight: bold;">if </span>(<span style="color: #458383;">defaultView </span>&& <span style="color: #458383;">defaultView</span>.<span style="color: #7a7a43;">getComputedStyle</span>) {
<span style="color: grey; font-style: italic;">// sanitize property name to css notation</span><span style="color: grey; font-style: italic;"> // (hypen separated words eg. font-Size)</span><span style="color: grey; font-style: italic;"> </span>styleProp = styleProp.<span style="color: #7a7a43;">replace</span>(<span style="color: blue;">/([A-Z])/g</span>, <span style="color: green; font-weight: bold;">"-$1"</span>).<span style="color: #7a7a43;">toLowerCase</span>();
<span style="color: navy; font-weight: bold;">return </span><span style="color: #458383;">defaultView</span>.<span style="color: #7a7a43;">getComputedStyle</span>(el, <span style="color: navy; font-weight: bold;">null</span>).<span style="color: #7a7a43;">getPropertyValue</span>(styleProp);
} <span style="color: navy; font-weight: bold;">else if </span>(el.<span style="color: #660e7a; font-weight: bold;">currentStyle</span>) { <span style="color: grey; font-style: italic;">// IE</span><span style="color: grey; font-style: italic;"> // sanitize property name to camelCase</span><span style="color: grey; font-style: italic;"> </span>styleProp = styleProp.<span style="color: #7a7a43;">replace</span>(<span style="color: blue;">/\-(\w)/g</span>, <span style="color: navy; font-weight: bold;">function</span>(str, letter) {
<span style="color: navy; font-weight: bold;">return </span>letter.<span style="color: #7a7a43;">toUpperCase</span>();
});
<span style="color: #458383;">value </span>= el.<span style="color: #660e7a; font-weight: bold;">currentStyle</span>[styleProp];
<span style="color: grey; font-style: italic;">// convert other units to pixels on IE</span><span style="color: grey; font-style: italic;"> </span><span style="color: navy; font-weight: bold;">if </span>(<span style="color: blue;">/^\d+(em|pt|%|ex)?$/i</span>.<span style="color: #7a7a43;">test</span>(<span style="color: #458383;">value</span>)) {
<span style="color: navy; font-weight: bold;">return </span>(<span style="color: navy; font-weight: bold;">function</span>(value) {
<span style="color: navy; font-weight: bold;">var </span><span style="color: #458383;">oldLeft </span>= el.<span style="color: #660e7a; font-weight: bold;">style</span>.<span style="color: #660e7a; font-weight: bold;">left</span>, <span style="color: #458383;">oldRsLeft </span>= el.<span style="color: #660e7a; font-weight: bold;">runtimeStyle</span>.<span style="color: #660e7a; font-weight: bold;">left</span>;
el.<span style="color: #660e7a; font-weight: bold;">runtimeStyle</span>.<span style="color: #660e7a; font-weight: bold;">left </span>= el.<span style="color: #660e7a; font-weight: bold;">currentStyle</span>.<span style="color: #660e7a; font-weight: bold;">left</span>;
el.<span style="color: #660e7a; font-weight: bold;">style</span>.<span style="color: #660e7a; font-weight: bold;">left </span>= value || <span style="color: blue;">0</span>;
value = el.<span style="color: #660e7a; font-weight: bold;">style</span>.pixelLeft + <span style="color: green; font-weight: bold;">"px"</span>;
el.<span style="color: #660e7a; font-weight: bold;">style</span>.<span style="color: #660e7a; font-weight: bold;">left </span>= <span style="color: #458383;">oldLeft</span>;
el.<span style="color: #660e7a; font-weight: bold;">runtimeStyle</span>.<span style="color: #660e7a; font-weight: bold;">left </span>= <span style="color: #458383;">oldRsLeft</span>;
<span style="color: navy; font-weight: bold;">return </span>value;
})(<span style="color: #458383;">value</span>);
}
<span style="color: navy; font-weight: bold;">return </span><span style="color: #458383;">value</span>;
}
}
<span style="color: navy; font-weight: bold;">function </span><span style="font-style: italic;">up</span>(){
<span style="color: navy; font-weight: bold;">var </span><span style="color: #458383;">target </span>= <span style="font-style: italic;">unit</span>().<span style="color: #660e7a; font-weight: bold;">y</span>;
<span style="color: navy; font-weight: bold;">return </span><span style="font-style: italic;">unit</span>().<span style="color: #660e7a; font-weight: bold;">body</span>.<span style="color: #660e7a; font-weight: bold;">top </span>= <span style="font-style: italic;">suffixValue</span>(<span style="color: #458383;">target</span>, -<span style="color: blue;">3</span>);
}
<span style="color: navy; font-weight: bold;">function </span><span style="font-style: italic;">down</span>(){
<span style="color: navy; font-weight: bold;">var </span><span style="color: #458383;">target </span>= <span style="font-style: italic;">unit</span>().<span style="color: #660e7a; font-weight: bold;">y</span>;
<span style="color: navy; font-weight: bold;">return </span><span style="font-style: italic;">unit</span>().<span style="color: #660e7a; font-weight: bold;">body</span>.<span style="color: #660e7a; font-weight: bold;">top </span>= <span style="font-style: italic;">suffixValue</span>(<span style="color: #458383;">target</span>, +<span style="color: blue;">3</span>);
}
<span style="color: navy; font-weight: bold;">function </span><span style="font-style: italic;">left</span>(){
<span style="color: navy; font-weight: bold;">var </span><span style="color: #458383;">target </span>= <span style="font-style: italic;">unit</span>().<span style="color: #660e7a; font-weight: bold;">x</span>;
<span style="color: navy; font-weight: bold;">return </span><span style="font-style: italic;">unit</span>().<span style="color: #660e7a; font-weight: bold;">body</span>.<span style="color: #660e7a; font-weight: bold;">left </span>= <span style="font-style: italic;">suffixValue</span>(<span style="color: #458383;">target</span>, -<span style="color: blue;">3</span>);
}
<span style="color: navy; font-weight: bold;">function </span><span style="font-style: italic;">right</span>(){
<span style="color: navy; font-weight: bold;">var </span><span style="color: #458383;">target </span>= <span style="font-style: italic;">unit</span>().<span style="color: #660e7a; font-weight: bold;">x</span>;
<span style="color: navy; font-weight: bold;">return </span><span style="font-style: italic;">unit</span>().<span style="color: #660e7a; font-weight: bold;">body</span>.<span style="color: #660e7a; font-weight: bold;">left </span>= <span style="font-style: italic;">suffixValue</span>(<span style="color: #458383;">target</span>, +<span style="color: blue;">3</span>);
}
<span style="color: navy; font-weight: bold;">function </span><span style="font-style: italic;">suffixValue</span>(target, value){
<span style="color: navy; font-weight: bold;">var </span><span style="color: #458383;">suffix </span>= <span style="color: green; font-weight: bold;">"px"</span>;
<span style="color: navy; font-weight: bold;">return </span>(target + value)+<span style="color: #458383;">suffix</span>;
}
</<span style="color: navy; font-weight: bold;">script</span>>
</<span style="color: navy; font-weight: bold;">body</span>>
</<span style="color: navy; font-weight: bold;">html</span>></pre>
<pre style="background-color: white; font-family: "Courier New"; font-size: 9pt;"></pre>
<pre style="background-color: white; font-family: "Courier New"; font-size: 9pt;"></pre>
<pre style="background-color: white; font-family: "Courier New"; font-size: 9pt;">커맨드 패턴을 이용하여 각각의 메서드 호출을 실체화 함, and undo, redo 구현</pre>
<pre style="background-color: white; font-family: "Courier New"; font-size: 9pt;"></pre>
<pre style="background-color: white; font-family: "Courier New"; font-size: 9pt;"><pre style="font-family: "Courier New"; font-size: 9pt;"><!DOCTYPE html>
<<span style="color: navy; font-weight: bold;">html </span>lang=<span style="color: green; font-weight: bold;">"en"</span>>
<<span style="color: navy; font-weight: bold;">head</span>>
<<span style="color: navy; font-weight: bold;">meta </span>charset=<span style="color: green; font-weight: bold;">"UTF-8"</span>>
<<span style="color: navy; font-weight: bold;">title</span>>command pattern</<span style="color: navy; font-weight: bold;">title</span>>
<<span style="color: navy; font-weight: bold;">style</span>>
<span style="color: navy; font-weight: bold;">#unit </span>{
position: <span style="color: green; font-weight: bold;">absolute</span>;
background-color: <span style="color: green; font-weight: bold;">olivedrab</span>;
top:<span style="color: blue;">100</span><span style="color: green; font-weight: bold;">px</span>;
left:<span style="color: blue;">100</span><span style="color: green; font-weight: bold;">px</span>;
display:<span style="color: green; font-weight: bold;">block</span><span style="color: green; font-weight: bold;"> </span>}
</<span style="color: navy; font-weight: bold;">style</span>>
</<span style="color: navy; font-weight: bold;">head</span>>
<<span style="color: navy; font-weight: bold;">body</span>>
메서드의 호출을 실체화 함
<<span style="color: navy; font-weight: bold;">div </span>id=<span style="color: green; font-weight: bold;">"unit"</span>>
unit
</<span style="color: navy; font-weight: bold;">div</span>>
<<span style="color: navy; font-weight: bold;">script</span>>
<span style="color: navy; font-weight: bold;">function </span><span style="font-style: italic;">getStyle</span>(el, styleProp) {
<span style="color: navy; font-weight: bold;">var </span><span style="color: #458383;">value</span>, <span style="color: #458383;">defaultView </span>= (el.<span style="color: #660e7a; font-weight: bold;">ownerDocument </span>|| <span style="color: #660e7a; font-weight: bold;">document</span>).<span style="color: #660e7a; font-weight: bold;">defaultView</span>;
<span style="color: grey; font-style: italic;">// W3C standard way:</span><span style="color: grey; font-style: italic;"> </span><span style="color: navy; font-weight: bold;">if </span>(<span style="color: #458383;">defaultView </span>&& <span style="color: #458383;">defaultView</span>.<span style="color: #7a7a43;">getComputedStyle</span>) {
<span style="color: grey; font-style: italic;">// sanitize property name to css notation</span><span style="color: grey; font-style: italic;"> // (hypen separated words eg. font-Size)</span><span style="color: grey; font-style: italic;"> </span>styleProp = styleProp.<span style="color: #7a7a43;">replace</span>(<span style="color: blue;">/([A-Z])/g</span>, <span style="color: green; font-weight: bold;">"-$1"</span>).<span style="color: #7a7a43;">toLowerCase</span>();
<span style="color: navy; font-weight: bold;">return </span><span style="color: #458383;">defaultView</span>.<span style="color: #7a7a43;">getComputedStyle</span>(el, <span style="color: navy; font-weight: bold;">null</span>).<span style="color: #7a7a43;">getPropertyValue</span>(styleProp);
} <span style="color: navy; font-weight: bold;">else if </span>(el.<span style="color: #660e7a; font-weight: bold;">currentStyle</span>) { <span style="color: grey; font-style: italic;">// IE</span><span style="color: grey; font-style: italic;"> // sanitize property name to camelCase</span><span style="color: grey; font-style: italic;"> </span>styleProp = styleProp.<span style="color: #7a7a43;">replace</span>(<span style="color: blue;">/\-(\w)/g</span>, <span style="color: navy; font-weight: bold;">function</span>(str, letter) {
<span style="color: navy; font-weight: bold;">return </span>letter.<span style="color: #7a7a43;">toUpperCase</span>();
});
<span style="color: #458383;">value </span>= el.<span style="color: #660e7a; font-weight: bold;">currentStyle</span>[styleProp];
<span style="color: grey; font-style: italic;">// convert other units to pixels on IE</span><span style="color: grey; font-style: italic;"> </span><span style="color: navy; font-weight: bold;">if </span>(<span style="color: blue;">/^\d+(em|pt|%|ex)?$/i</span>.<span style="color: #7a7a43;">test</span>(<span style="color: #458383;">value</span>)) {
<span style="color: navy; font-weight: bold;">return </span>(<span style="color: navy; font-weight: bold;">function</span>(value) {
<span style="color: navy; font-weight: bold;">var </span><span style="color: #458383;">oldLeft </span>= el.<span style="color: #660e7a; font-weight: bold;">style</span>.<span style="color: #660e7a; font-weight: bold;">left</span>, <span style="color: #458383;">oldRsLeft </span>= el.<span style="color: #660e7a; font-weight: bold;">runtimeStyle</span>.<span style="color: #660e7a; font-weight: bold;">left</span>;
el.<span style="color: #660e7a; font-weight: bold;">runtimeStyle</span>.<span style="color: #660e7a; font-weight: bold;">left </span>= el.<span style="color: #660e7a; font-weight: bold;">currentStyle</span>.<span style="color: #660e7a; font-weight: bold;">left</span>;
el.<span style="color: #660e7a; font-weight: bold;">style</span>.<span style="color: #660e7a; font-weight: bold;">left </span>= value || <span style="color: blue;">0</span>;
value = el.<span style="color: #660e7a; font-weight: bold;">style</span>.pixelLeft + <span style="color: green; font-weight: bold;">"px"</span>;
el.<span style="color: #660e7a; font-weight: bold;">style</span>.<span style="color: #660e7a; font-weight: bold;">left </span>= <span style="color: #458383;">oldLeft</span>;
el.<span style="color: #660e7a; font-weight: bold;">runtimeStyle</span>.<span style="color: #660e7a; font-weight: bold;">left </span>= <span style="color: #458383;">oldRsLeft</span>;
<span style="color: navy; font-weight: bold;">return </span>value;
})(<span style="color: #458383;">value</span>);
}
<span style="color: navy; font-weight: bold;">return </span><span style="color: #458383;">value</span>;
}
}
<span style="color: #660e7a; font-weight: bold;">document</span>.<span style="color: #7a7a43;">addEventListener</span>(<span style="color: green; font-weight: bold;">"keydown"</span>, <span style="font-style: italic;">handleInput</span>, <span style="color: navy; font-weight: bold;">false</span>);
<span style="color: navy; font-weight: bold;">function </span><span style="font-style: italic;">handleInput</span>(e){ //메인함수
<span style="color: navy; font-weight: bold;">var </span><span style="color: #458383;">keyCode </span>= e.<span style="color: #660e7a; font-weight: bold;">keyCode</span>;
<span style="color: navy; font-weight: bold;">var </span><span style="color: #458383;">pressDispatcher </span>= { <span style="color: grey; font-style: italic;">//command dispatcher</span><span style="color: grey; font-style: italic;"> </span><span style="color: blue;">37 </span>: <span style="color: navy; font-weight: bold;">new </span><span style="font-style: italic;">LeftCommand</span>,
<span style="color: blue;">38 </span>: <span style="color: navy; font-weight: bold;">new </span><span style="font-style: italic;">UpCommand</span>,
<span style="color: blue;">39 </span>: <span style="color: navy; font-weight: bold;">new </span><span style="font-style: italic;">RightCommand</span>,
<span style="color: blue;">40 </span>: <span style="color: navy; font-weight: bold;">new </span><span style="font-style: italic;">DownCommand</span>,
<span style="color: blue;">89 </span>: <span style="color: navy; font-weight: bold;">new </span><span style="font-style: italic;">RedoCommand</span>,
<span style="color: blue;">90 </span>: <span style="color: navy; font-weight: bold;">new </span><span style="font-style: italic;">UndoCommand</span><span style="font-style: italic;"> </span>};
<span style="color: navy; font-weight: bold;">var </span><span style="color: #458383;">button </span>= <span style="color: #458383;">pressDispatcher</span>[<span style="color: #458383;">keyCode</span>];
<span style="color: navy; font-weight: bold;">var </span><span style="color: #458383;">isPress </span>= (<span style="color: #458383;">keyCode </span><span style="color: navy; font-weight: bold;">in </span><span style="color: #458383;">pressDispatcher</span>);
<span style="color: navy; font-weight: bold;">if</span>(<span style="color: #458383;">isPress</span>) <span style="color: #458383;">button</span>.<span style="color: #7a7a43;">execute</span>();
};
<span style="color: navy; font-weight: bold;">var </span><span style="color: #660e7a; font-style: italic; font-weight: bold;">Command </span>= <span style="color: navy; font-weight: bold;">function</span>(){
<span style="color: navy; font-weight: bold;">var </span><span style="color: #458383;">x </span>= <span style="font-style: italic;">unit</span>().<span style="color: #660e7a; font-weight: bold;">x</span>, <span style="color: #458383;">y </span>= <span style="font-style: italic;">unit</span>().<span style="color: #660e7a; font-weight: bold;">y</span>;
<span style="color: navy; font-weight: bold;">return </span>{
<span style="color: green; font-weight: bold;">"execute" </span>: <span style="color: navy; font-weight: bold;">function</span>(){
<span style="color: #660e7a; font-weight: bold;">console</span>.<span style="color: #7a7a43;">log</span>(<span style="color: green; font-weight: bold;">"origin command execute"</span>);
},
<span style="color: green; font-weight: bold;">"undo" </span>: <span style="color: navy; font-weight: bold;">function</span>(){
<span style="color: navy; font-weight: bold;">if</span>(<span style="color: navy; font-weight: bold;">this</span>.<span style="color: #660e7a; font-weight: bold;">beforeLocation</span>.<span style="color: #660e7a; font-weight: bold;">length </span>> <span style="color: blue;">0</span>){
<span style="color: navy; font-weight: bold;">var </span><span style="color: #458383;">locationData </span>= <span style="color: navy; font-weight: bold;">this</span>.<span style="color: #660e7a; font-weight: bold;">beforeLocation</span>.<span style="color: #7a7a43;">pop</span>();
<span style="font-style: italic;">unit</span>().<span style="color: #7a7a43;">move</span>(<span style="color: #458383;">locationData</span>);
<span style="color: navy; font-weight: bold;">this</span>.<span style="color: #7a7a43;">redoHistoryWrite</span>(<span style="color: #458383;">locationData</span>);
}
},
<span style="color: green; font-weight: bold;">"redo" </span>: <span style="color: navy; font-weight: bold;">function</span>(){
<span style="color: navy; font-weight: bold;">if</span>(<span style="color: navy; font-weight: bold;">this</span>.<span style="color: #660e7a; font-weight: bold;">afterLocation</span>.<span style="color: #660e7a; font-weight: bold;">length </span>> <span style="color: blue;">0</span>){
<span style="color: navy; font-weight: bold;">var </span><span style="color: #458383;">locationData </span>= <span style="color: navy; font-weight: bold;">this</span>.<span style="color: #660e7a; font-weight: bold;">afterLocation</span>.<span style="color: #7a7a43;">pop</span>();
<span style="font-style: italic;">unit</span>().<span style="color: #7a7a43;">move</span>(<span style="color: #458383;">locationData</span>);
<span style="color: navy; font-weight: bold;">this</span>.<span style="color: #7a7a43;">undoHistoryWrite</span>(<span style="color: #458383;">locationData</span>);
}
},
<span style="color: green; font-weight: bold;">'beforeLocation' </span>: [],
<span style="color: green; font-weight: bold;">"undoHistoryWrite" </span>: <span style="color: navy; font-weight: bold;">function</span>(){
<span style="color: navy; font-weight: bold;">this</span>.<span style="color: #660e7a; font-weight: bold;">beforeLocation</span>.<span style="color: #7a7a43;">push</span>([<span style="font-style: italic;">unit</span>().<span style="color: #660e7a; font-weight: bold;">x</span>,<span style="font-style: italic;">unit</span>().<span style="color: #660e7a; font-weight: bold;">y</span>]);
},
<span style="color: green; font-weight: bold;">'afterLocation' </span>: [],
<span style="color: green; font-weight: bold;">"redoHistoryWrite" </span>: <span style="color: navy; font-weight: bold;">function</span>(){
<span style="color: navy; font-weight: bold;">this</span>.<span style="color: #660e7a; font-weight: bold;">afterLocation</span>.<span style="color: #7a7a43;">push</span>([<span style="font-style: italic;">unit</span>().<span style="color: #660e7a; font-weight: bold;">x</span>,<span style="font-style: italic;">unit</span>().<span style="color: #660e7a; font-weight: bold;">y</span>]);
}
};
}();
<span style="color: navy; font-weight: bold;">function </span><span style="font-style: italic;">RedoCommand</span>(){
<span style="color: navy; font-weight: bold;">function </span><span style="font-style: italic;">_RedoCommand</span>(){
<span style="color: navy; font-weight: bold;">this</span>.<span style="color: #7a7a43;">execute </span>= <span style="color: navy; font-weight: bold;">function</span>(){
<span style="color: navy; font-weight: bold;">this</span>.<span style="color: #7a7a43;">redo</span>();
};
}
<span style="color: grey; font-style: italic;">//@extends</span><span style="color: grey; font-style: italic;"> </span><span style="font-style: italic;">_RedoCommand</span>.<span style="color: #660e7a; font-weight: bold;">prototype </span>= <span style="color: #660e7a; font-style: italic; font-weight: bold;">Command</span>;
<span style="color: navy; font-weight: bold;">if</span>(!(<span style="color: navy; font-weight: bold;">this instanceof </span><span style="font-style: italic;">_RedoCommand </span>)){
<span style="color: navy; font-weight: bold;">return new </span><span style="font-style: italic;">_RedoCommand</span>();
}
}
<span style="color: navy; font-weight: bold;">function </span><span style="font-style: italic;">UndoCommand</span>(){
<span style="color: navy; font-weight: bold;">function </span><span style="font-style: italic;">_UndoCommand</span>(){
<span style="color: navy; font-weight: bold;">this</span>.<span style="color: #7a7a43;">execute </span>= <span style="color: navy; font-weight: bold;">function</span>(){
<span style="color: navy; font-weight: bold;">this</span>.<span style="color: #7a7a43;">undo</span>();
};
}
<span style="color: grey; font-style: italic;">//@extends</span><span style="color: grey; font-style: italic;"> </span><span style="font-style: italic;">_UndoCommand</span>.<span style="color: #660e7a; font-weight: bold;">prototype </span>= <span style="color: #660e7a; font-style: italic; font-weight: bold;">Command</span>;
<span style="color: navy; font-weight: bold;">if</span>(!(<span style="color: navy; font-weight: bold;">this instanceof </span><span style="font-style: italic;">_UndoCommand </span>)){
<span style="color: navy; font-weight: bold;">return new </span><span style="font-style: italic;">_UndoCommand</span>();
}
}
<span style="color: navy; font-weight: bold;">function </span><span style="font-style: italic;">UpCommand</span>(){
<span style="color: navy; font-weight: bold;">function </span><span style="font-style: italic;">_UpCommand</span>(){
<span style="color: navy; font-weight: bold;">this</span>.<span style="color: #7a7a43;">execute </span>= <span style="color: navy; font-weight: bold;">function</span>(){
<span style="color: navy; font-weight: bold;">this</span>.<span style="color: #7a7a43;">undoHistoryWrite</span>();
<span style="font-style: italic;">up</span>();
};
}
<span style="color: grey; font-style: italic;">//@extends</span><span style="color: grey; font-style: italic;"> </span><span style="font-style: italic;">_UpCommand</span>.<span style="color: #660e7a; font-weight: bold;">prototype </span>= <span style="color: #660e7a; font-style: italic; font-weight: bold;">Command</span>;
<span style="color: navy; font-weight: bold;">if</span>(!(<span style="color: navy; font-weight: bold;">this instanceof </span><span style="font-style: italic;">_UpCommand </span>)){
<span style="color: navy; font-weight: bold;">return new </span><span style="font-style: italic;">_UpCommand</span>();
}
}
<span style="color: navy; font-weight: bold;">function </span><span style="font-style: italic;">DownCommand</span>(){
<span style="color: navy; font-weight: bold;">function </span><span style="font-style: italic;">_DownCommand</span>(){
<span style="color: navy; font-weight: bold;">this</span>.<span style="color: #7a7a43;">execute </span>= <span style="color: navy; font-weight: bold;">function</span>(){
<span style="color: navy; font-weight: bold;">this</span>.<span style="color: #7a7a43;">undoHistoryWrite</span>();
<span style="font-style: italic;">down</span>();
}
}
<span style="color: grey; font-style: italic;">//@extends</span><span style="color: grey; font-style: italic;"> </span><span style="font-style: italic;">_DownCommand</span>.<span style="color: #660e7a; font-weight: bold;">prototype </span>= <span style="color: #660e7a; font-style: italic; font-weight: bold;">Command</span>;
<span style="color: navy; font-weight: bold;">if</span>(!(<span style="color: navy; font-weight: bold;">this instanceof </span><span style="font-style: italic;">_DownCommand </span>)){
<span style="color: navy; font-weight: bold;">return new </span><span style="font-style: italic;">_DownCommand</span>();
}
}
<span style="color: navy; font-weight: bold;">function </span><span style="font-style: italic;">LeftCommand</span>(){
<span style="color: navy; font-weight: bold;">function </span><span style="font-style: italic;">_LeftCommand</span>(){
<span style="color: navy; font-weight: bold;">this</span>.<span style="color: #7a7a43;">execute </span>= <span style="color: navy; font-weight: bold;">function</span>(){
<span style="color: navy; font-weight: bold;">this</span>.<span style="color: #7a7a43;">undoHistoryWrite</span>();
<span style="font-style: italic;">left</span>();
}
}
<span style="color: grey; font-style: italic;">//@extends</span><span style="color: grey; font-style: italic;"> </span><span style="font-style: italic;">_LeftCommand</span>.<span style="color: #660e7a; font-weight: bold;">prototype </span>= <span style="color: #660e7a; font-style: italic; font-weight: bold;">Command</span>;
<span style="color: navy; font-weight: bold;">if</span>(!(<span style="color: navy; font-weight: bold;">this instanceof </span><span style="font-style: italic;">_LeftCommand </span>)){
<span style="color: navy; font-weight: bold;">return new </span><span style="font-style: italic;">_LeftCommand</span>();
}
}
<span style="color: navy; font-weight: bold;">function </span><span style="font-style: italic;">RightCommand</span>(){
<span style="color: navy; font-weight: bold;">function </span><span style="font-style: italic;">_RightCommand</span>(){
<span style="color: navy; font-weight: bold;">this</span>.<span style="color: #7a7a43;">execute </span>= <span style="color: navy; font-weight: bold;">function</span>(){
<span style="color: navy; font-weight: bold;">this</span>.<span style="color: #7a7a43;">undoHistoryWrite</span>();
<span style="font-style: italic;">right</span>();
}
}
<span style="color: grey; font-style: italic;">//@extends</span><span style="color: grey; font-style: italic;"> </span><span style="font-style: italic;">_RightCommand</span>.<span style="color: #660e7a; font-weight: bold;">prototype </span>= <span style="color: #660e7a; font-style: italic; font-weight: bold;">Command</span>;
<span style="color: navy; font-weight: bold;">if</span>(!(<span style="color: navy; font-weight: bold;">this instanceof </span><span style="font-style: italic;">_RightCommand </span>)){
<span style="color: navy; font-weight: bold;">return new </span><span style="font-style: italic;">_RightCommand</span>();
}
}
<span style="color: navy; font-weight: bold;">function </span><span style="font-style: italic;">unit</span>(){
<span style="color: navy; font-weight: bold;">var </span><span style="color: #458383;">target </span>= <span style="color: #660e7a; font-weight: bold;">document</span>.<span style="color: #7a7a43;">getElementById</span>(<span style="color: green; font-weight: bold;">'unit'</span>);
<span style="color: navy; font-weight: bold;">return </span>{
<span style="color: green; font-weight: bold;">"x" </span>: <span style="color: #7a7a43;">parseInt</span>(<span style="font-style: italic;">getStyle</span>(<span style="color: #458383;">target</span>,<span style="color: green; font-weight: bold;">"left"</span>),<span style="color: blue;">10</span>),
<span style="color: green; font-weight: bold;">"y" </span>: <span style="color: #7a7a43;">parseInt</span>(<span style="font-style: italic;">getStyle</span>(<span style="color: #458383;">target</span>,<span style="color: green; font-weight: bold;">"top"</span>),<span style="color: blue;">10</span>),
<span style="color: green; font-weight: bold;">"body" </span>: <span style="color: #458383;">target</span>.<span style="color: #660e7a; font-weight: bold;">style</span>,
<span style="color: green; font-weight: bold;">"move" </span>: <span style="color: navy; font-weight: bold;">function</span>(arr){
<span style="color: #458383;">target</span>.<span style="color: #660e7a; font-weight: bold;">style</span>.<span style="color: #660e7a; font-weight: bold;">left </span>= arr[<span style="color: blue;">0</span>]+<span style="color: green; font-weight: bold;">"px"</span>;
<span style="color: #458383;">target</span>.<span style="color: #660e7a; font-weight: bold;">style</span>.<span style="color: #660e7a; font-weight: bold;">top </span>= arr[<span style="color: blue;">1</span>]+<span style="color: green; font-weight: bold;">"px"</span>;
}
};
}
<span style="color: #660e7a; font-weight: bold;">window</span>.<span style="color: #7a7a43;">onload</span>= <span style="color: navy; font-weight: bold;">function</span>(){
<span style="color: grey; font-style: italic;">/*console.log(unit().x);*/</span>};
</<span style="color: navy; font-weight: bold;">script</span>>
<<span style="color: navy; font-weight: bold;">script</span>>
<span style="color: navy; font-weight: bold;">function </span><span style="font-style: italic;">up</span>(){
<span style="color: navy; font-weight: bold;">var </span><span style="color: #458383;">target </span>= <span style="font-style: italic;">unit</span>().<span style="color: #660e7a; font-weight: bold;">y</span>;
<span style="color: navy; font-weight: bold;">return </span><span style="font-style: italic;">unit</span>().<span style="color: #660e7a; font-weight: bold;">body</span>.<span style="color: #660e7a; font-weight: bold;">top </span>= <span style="font-style: italic;">suffixValue</span>(<span style="color: #458383;">target</span>, -<span style="color: blue;">3</span>);
}
<span style="color: navy; font-weight: bold;">function </span><span style="font-style: italic;">down</span>(){
<span style="color: navy; font-weight: bold;">var </span><span style="color: #458383;">target </span>= <span style="font-style: italic;">unit</span>().<span style="color: #660e7a; font-weight: bold;">y</span>;
<span style="color: navy; font-weight: bold;">return </span><span style="font-style: italic;">unit</span>().<span style="color: #660e7a; font-weight: bold;">body</span>.<span style="color: #660e7a; font-weight: bold;">top </span>= <span style="font-style: italic;">suffixValue</span>(<span style="color: #458383;">target</span>, +<span style="color: blue;">3</span>);
}
<span style="color: navy; font-weight: bold;">function </span><span style="font-style: italic;">left</span>(){
<span style="color: navy; font-weight: bold;">var </span><span style="color: #458383;">target </span>= <span style="font-style: italic;">unit</span>().<span style="color: #660e7a; font-weight: bold;">x</span>;
<span style="color: navy; font-weight: bold;">return </span><span style="font-style: italic;">unit</span>().<span style="color: #660e7a; font-weight: bold;">body</span>.<span style="color: #660e7a; font-weight: bold;">left </span>= <span style="font-style: italic;">suffixValue</span>(<span style="color: #458383;">target</span>, -<span style="color: blue;">3</span>);
}
<span style="color: navy; font-weight: bold;">function </span><span style="font-style: italic;">right</span>(){
<span style="color: navy; font-weight: bold;">var </span><span style="color: #458383;">target </span>= <span style="font-style: italic;">unit</span>().<span style="color: #660e7a; font-weight: bold;">x</span>;
<span style="color: navy; font-weight: bold;">return </span><span style="font-style: italic;">unit</span>().<span style="color: #660e7a; font-weight: bold;">body</span>.<span style="color: #660e7a; font-weight: bold;">left </span>= <span style="font-style: italic;">suffixValue</span>(<span style="color: #458383;">target</span>, +<span style="color: blue;">3</span>);
}
<span style="color: navy; font-weight: bold;">function </span><span style="font-style: italic;">suffixValue</span>(target, value){
<span style="color: navy; font-weight: bold;">var </span><span style="color: #458383;">suffix </span>= <span style="color: green; font-weight: bold;">"px"</span>;
<span style="color: navy; font-weight: bold;">return </span>(target + value)+<span style="color: #458383;">suffix</span>;
}
</<span style="color: navy; font-weight: bold;">script</span>>
</<span style="color: navy; font-weight: bold;">body</span>>
</<span style="color: navy; font-weight: bold;">html</span>></pre>
</pre>
<pre style="background-color: white; font-family: "Courier New"; font-size: 9pt;"></pre>
stevePakshttp://www.blogger.com/profile/07452508245080471986noreply@blogger.com0