-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathatom.xml
500 lines (258 loc) · 162 KB
/
atom.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title>Hexo</title>
<link href="/atom.xml" rel="self"/>
<link href="https://juuuuuuuuuuuuuu.github.io/"/>
<updated>2020-03-30T05:22:41.120Z</updated>
<id>https://juuuuuuuuuuuuuu.github.io/</id>
<author>
<name>John Doe</name>
</author>
<generator uri="https://hexo.io/">Hexo</generator>
<entry>
<title>React.memo</title>
<link href="https://juuuuuuuuuuuuuu.github.io/2020/03/30/react-memo/"/>
<id>https://juuuuuuuuuuuuuu.github.io/2020/03/30/react-memo/</id>
<published>2020-03-30T03:50:12.000Z</published>
<updated>2020-03-30T05:22:41.120Z</updated>
<content type="html"><![CDATA[<p><code>React.memo</code>는 react에서 제공하는 hook이다.<br>성능을 향상하는데 도움이 되는 hook이다.<br><br></p><h3 id="React-memo"><a href="#React-memo" class="headerlink" title="React.memo()"></a>React.memo()</h3><p>React는 이전 렌더링 결과와 비교하여 DOM에 업데이트를 결정한다.<br>렌더링 결과가 이전과 다르다면 DOM을 업데이트 한다.</p><p><code>React.memo()</code>는 기존에 클래스 컴포넌트에서 <code>shouldComponentUpdate</code>가 내재되어 있다고 생각하면 된다. (PureComponent와 같음)<br><code>React.memo()</code>로 래핑을 하면 컴포넌트를 렌더링하고 결과를 메모이징(Memoizing)한다.<br>다음 렌더링이 일어날 때 props가 같다면 메모이징(Memoizing)된 내용을 재사용한다.</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="function"><span class="keyword">function</span> <span class="title">NameCard</span>(<span class="params">{ name, year }</span>) </span>{</span><br><span class="line"> <span class="keyword">return</span> (</span><br><span class="line"> <div></span><br><span class="line"> <div>name: {name}<<span class="regexp">/div></span></span><br><span class="line"><span class="regexp"> <div>year: {year}</</span>div></span><br><span class="line"> <<span class="regexp">/div></span></span><br><span class="line"><span class="regexp"> );</span></span><br><span class="line"><span class="regexp">}</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">export const MemoizedNameCard = React.memo(NameCard);</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">/</span><span class="regexp">/ 첫 렌더이다. React는 MemoizedNameCard 함수를 호출한다.</span></span><br><span class="line"><span class="regexp"><MemoizedNameCard</span></span><br><span class="line"><span class="regexp"> name="juyoung"</span></span><br><span class="line"><span class="regexp"> year="27"</span></span><br><span class="line"><span class="regexp">/</span>></span><br><span class="line"></span><br><span class="line"><span class="comment">// 다시 렌더링 할 때 React는 MemoizedNameCard 함수를 호출하지 않는다.</span></span><br><span class="line"><span class="comment">// 리렌더링을 막는다.</span></span><br><span class="line"><MemoizedNameCard</span><br><span class="line"> name=<span class="string">"juyoung"</span></span><br><span class="line"> year=<span class="string">"27"</span></span><br><span class="line">/></span><br></pre></td></tr></table></figure><p><code>props</code>로 name, year이 변경되지 않으면 다음 렌더링 때 메모이징 된 내용을 그대로 사용하게 된다.<br>메모이징을 재사용함으로써 리렌더링할 때 가상 DOM에서 달라진 부분을 확인하지 않아 성능상의 이점을 갖게 된다.<br><br></p><h3 id="사용해야할-때"><a href="#사용해야할-때" class="headerlink" title="사용해야할 때??"></a>사용해야할 때??</h3><p><code>같은 props</code>로 렌더링이 자주 일어나는 함수형 컴포넌트이다.<br>위에 예시에 있는 코드가 해당한다.</p><p><br></p><h3 id="사용하지-말아야-할-때"><a href="#사용하지-말아야-할-때" class="headerlink" title="사용하지 말아야 할 때??"></a>사용하지 말아야 할 때??</h3><p>props가 변경되는 경우에는 쓸모가 없다.</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">MyApp</span>(<span class="params">{ store, cookies }</span>) </span>{</span><br><span class="line"> <span class="keyword">return</span> (</span><br><span class="line"> <div className=<span class="string">"main"</span>></span><br><span class="line"> <header></span><br><span class="line"> <MemoizedLogout</span><br><span class="line"> username={store.username}</span><br><span class="line"> onLogout={() => cookies.clear()}</span><br><span class="line"> /></span><br><span class="line"> <<span class="regexp">/header></span></span><br><span class="line"><span class="regexp"> {store.content}</span></span><br><span class="line"><span class="regexp"> </</span>div></span><br><span class="line"> );</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Logout</span>(<span class="params">{ username, onLogout }</span>) </span>{</span><br><span class="line"> <span class="keyword">return</span> <span class="xml"><span class="tag"><<span class="name">div</span> <span class="attr">onClick</span>=<span class="string">{onLogout}</span>></span>Logout {username}<span class="tag"></<span class="name">div</span>></span></span>;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> MemoizedLogout = React.memo(Logout);</span><br></pre></td></tr></table></figure><p><code>() => cookies.clear()</code>는 MyApp 컴포넌트가 렌더링될 때마다 새롭게 props를 생성하고 있다.<br>그래서 <code>React.memo</code>를 사용하더라도 계속 재렌더링하게 된다.<br>이러한 경우에는 <code>useCallback()</code>을 이용해서 콜백 인스턴스를 보존시키는 방법이 있다.</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">MyApp</span>(<span class="params">{ store, cookies }</span>) </span>{</span><br><span class="line"> <span class="keyword">const</span> onLogout = useCallback(<span class="function"><span class="params">()</span> =></span> {</span><br><span class="line"> cookies.clear()</span><br><span class="line"> }, []);</span><br><span class="line"> <span class="keyword">return</span> (</span><br><span class="line"> <div className=<span class="string">"main"</span>></span><br><span class="line"> <header></span><br><span class="line"> <MemoizedLogout</span><br><span class="line"> username={store.username}</span><br><span class="line"> onLogout={onLogout}</span><br><span class="line"> /></span><br><span class="line"> <<span class="regexp">/header></span></span><br><span class="line"><span class="regexp"> {store.content}</span></span><br><span class="line"><span class="regexp"> </</span>div></span><br><span class="line"> );</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p><code>React.memo</code>를 사용할 때는 props로 사용하는 콜백함수가 이전과 동일한 콜백함수 인스턴스를<br>넘기는지 확인해야한다.</p>]]></content>
<summary type="html">
<p><code>React.memo</code>는 react에서 제공하는 hook이다.<br>성능을 향상하는데 도움이 되는 hook이다.<br><br></p>
<h3 id="React-memo"><a href="#React-memo" class="he
</summary>
<category term="react, javascript, hook" scheme="https://juuuuuuuuuuuuuu.github.io/tags/react-javascript-hook/"/>
</entry>
<entry>
<title>hiddenclass</title>
<link href="https://juuuuuuuuuuuuuu.github.io/2020/02/01/hiddenclass/"/>
<id>https://juuuuuuuuuuuuuu.github.io/2020/02/01/hiddenclass/</id>
<published>2020-02-01T12:30:49.000Z</published>
<updated>2020-02-04T07:48:09.139Z</updated>
<content type="html"><![CDATA[<p>자바스크립트는 <code>class</code>의 개념이 없고 <code>prototype</code>이라는 개념이 있어 객체간의 상속이 가능하다.<br><code>class</code> 기반의 언어는 클래스에 속한 객체들이 모두 같은 필드 구조를 가진다.<br>어떤 객체가 특정 프로퍼티에 접근할 때 어떤 변수에 접근하는지, 메모리의 어느 위치를 참조하면 되는지 컴파일 과정에서 미리 알 수 있다.<br>offset값을 통해 바로 멤버변수에 접근가능하다.<br><br><br>그러나 자바스크립트에는 클래스라는 개념이 존재하지 않으며 동적인 언어이기 때문에<br>언제 바뀌는지 알 수 없어 각 객체들마다 필드구조를 각각 가지고 있어야한다.<br>(중복되는 객체가 100개여도 100개의 필드구조)<br>그러므로 성능상의 문제가 생기게 된다.<br><img src="/images/class.png" alt><br><br></p><h3 id="V8-엔진"><a href="#V8-엔진" class="headerlink" title="V8 엔진"></a>V8 엔진</h3><p>자바스크립트의 성능상 이슈를 <code>V8</code> 엔진이 해결을 해준다.<br><code>V8</code>엔진은 자바스크립트 엔진으로 google에서 만들었고 chrome, safari 에서 사용한다.<br>인터프리터를 사용하지않고 머신 코드로 변환하여 속도가 빠르다는 장점이 있다.<br>대표적인 특징으로는 hidden class와 inline caching이 있다.<br>이러한 특징으로 인해 자바스크립트 성능을 최적화하는데 도움을 준다고 한다.</p><p><br></p><h3 id="hidden-class"><a href="#hidden-class" class="headerlink" title="hidden class"></a>hidden class</h3><p>자바스크립트에는 클래스의 개념은 없지만 엔진 안쪽에 숨겨진 hidden class라는 것이 존재한다.<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> obj = {};</span><br></pre></td></tr></table></figure></p><p>객체가 생성되면 히든클래스가 생성이 된다. 여기서는 C0라고 가정하겠다.<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> obj = {};</span><br><span class="line">obj.a = <span class="number">1</span>;</span><br></pre></td></tr></table></figure></p><p>그리고 a라는 프로퍼티를 추가하게되면 C1이라는 히든클래스가 생성되면서 obj의 히든클래스는 C1으로 바뀌게 된다.<br>C0 히든클래스에는 a라는 프로퍼티가 추가되면 C1라는 히든 클래스도 이동한다라는 정보가 담기게 된다.<br>바로 이게 <code>전환테이블(m_transitionTable)</code>이다.<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> obj = {};</span><br><span class="line">obj.a = <span class="number">1</span>;</span><br><span class="line">obj.b = <span class="number">2</span>;</span><br></pre></td></tr></table></figure></p><p>b 프로터티가 추가되면 마찬가리고 C2라는 히든 클래스가 생성되면 obj의 히든클래스가 C2로 변경된다.<br>그리고 C1에 전환 테이블에는 b라는 프로퍼티가 추가되면 C2라는 히든 클래스도 이동한다라는 정보가 담기게 된다.<br><img src="/images/hidden_1.png" alt></p><p><br></p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">foo</span>(<span class="params">a</span>) </span>{</span><br><span class="line"> <span class="keyword">this</span>.x = a;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> a = foo(<span class="number">1</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> b = foo(<span class="number">3</span>);</span><br></pre></td></tr></table></figure><p>이런경우에도 a에 대한 히든 클래스가 만들어지고 b도 동일 히든클래스를 공유하게 된다.<br>그러나 실제 필드에 접근해서 값을 가지고 오려면 <code>객체 -> hidden class -> 프로퍼티 테이블 -> 프로퍼티 비교 -> [오브젝트 + 오프셋]</code> 의 단계를<br>거쳐야 실제 필드에 접근할 수 있다.<br>필드에 접근하기 까지 많은 단계를 거쳐야하기 때문에 성능에 영향을 미칠 수 있다.<br>하지만 이러한 작업은 inline caching을 위한 준비이다.</p><p><br></p><h3 id="inline-caching"><a href="#inline-caching" class="headerlink" title="inline caching"></a>inline caching</h3><p>객체 필드에 접근할 때 hidden class를 사용한다면 결국 최종 목적은 필드의 오프셋값에 접근하는 것이다.<br>바로 여기서 <code>inline caching</code>은 이 오프셋 값을 캐싱하겠다는 의미이다.</p><p><br><br>자바스크립트는 동적언어이지만 실제로는 안바뀌는게 더 많고 성능을 빠르게 하려면 루프를 돌려야한다는 가정을 하자.</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i=<span class="number">0</span>; i<<span class="number">10</span>; i++) {</span><br><span class="line"> arr[i].x = i;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>이렇게 루프문을 돌리면 i=0일 때는 캐싱된 값이 없어 느리지만 i=1부터는 값이 오프셋 값이 캐싱되어 클래스 기반의 언어와 똑같은 성능을 보이게 된다.<br>단, arr[1]부터 arr[9]까지가 모든 같은 필드 구조를 가지고 있어야만 성립되는 내용이다.<br>추가로 첫번째 수행에서 바로 캐싱되지 않고 두번 수행된 코드부터 캐싱이 된다. 이는 한번 수행된 코드는 한번만 수행될 가능성 높지만 두번 수행된 코드는 이후에 또 수행될 확률이 높기 때문이라고 한다.<br><br><br>인라인 캐싱의 포인트는 동일한 유형의 객체가 동일한 히든 클래스를 공유한다는 것이다.<br>만약 다른 프로퍼티가 중간에 추가되거나 하면 inline caching을 더이상 사용할 수 없다.</p><h3 id="최적화-계획"><a href="#최적화-계획" class="headerlink" title="최적화 계획"></a>최적화 계획</h3><p>히든 클래스를 서로 공유할 수 있게끔 객체를 만들어야한다.<br>만약 객체가 생성된 후 중간에 프로퍼티를 추가하게 되면 히든 클래스가 변경된다.<br>아래의 코드와 같이 생성자에서 모든 프로퍼티를 할당할 수 있도록 하는 것이 좋다.<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Foo</span>(<span class="params">a,b</span>) </span>{</span><br><span class="line"> <span class="keyword">this</span>.x = a;</span><br><span class="line"> <span class="keyword">this</span>.y = b;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> a = <span class="keyword">new</span> Foo(<span class="number">1</span>, <span class="number">2</span>);</span><br><span class="line">a.z = <span class="number">1</span>; <span class="comment">// 최적화 X</span></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Bar</span>(<span class="params">a,b, c</span>) </span>{</span><br><span class="line"> <span class="keyword">this</span>.x = a;</span><br><span class="line"> <span class="keyword">this</span>.y = b;</span><br><span class="line"> <span class="keyword">this</span>.z = c;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> a = <span class="keyword">new</span> Bar(<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>); <span class="comment">// 최적화 O</span></span><br></pre></td></tr></table></figure></p>]]></content>
<summary type="html">
<p>자바스크립트는 <code>class</code>의 개념이 없고 <code>prototype</code>이라는 개념이 있어 객체간의 상속이 가능하다.<br><code>class</code> 기반의 언어는 클래스에 속한 객체들이 모두 같은 필드 구
</summary>
<category term="javascript, hidden class, incline caching" scheme="https://juuuuuuuuuuuuuu.github.io/tags/javascript-hidden-class-incline-caching/"/>
</entry>
<entry>
<title>slack commands 연동</title>
<link href="https://juuuuuuuuuuuuuu.github.io/2019/12/11/slack-commands-%EC%97%B0%EB%8F%99/"/>
<id>https://juuuuuuuuuuuuuu.github.io/2019/12/11/slack-commands-%EC%97%B0%EB%8F%99/</id>
<published>2019-12-11T02:24:36.000Z</published>
<updated>2019-12-11T02:34:18.195Z</updated>
<content type="html"><![CDATA[<p>slack 채팅창에 <code>/poll is this yours? yes no</code> 텍스트를 입력하면 투표기능을 제공하고 있다.<br><img src="/images/expo-login.png" alt> </p><p>외부 stash나 github에서 해당 텍스트를 코멘트로 입력을 하면 슬랙과 연동하여 투표기능을 사용하고 싶었다.<br>그러나 slack 공식문서에서는 현재 제공을하지 않고 비공식 문서에서만 제공을 한다고 한다.<br>참고: <a href="https://github.com/ErikKalkoken/slackApiDoc/blob/master/chat.command.md" target="_blank" rel="noopener">https://github.com/ErikKalkoken/slackApiDoc/blob/master/chat.command.md</a><br><br></p><p> 그러나 비공식 문서이기 때문에 권장하지도 않고 더구나 파라미터로 <code>legacy token</code>값을 넣어야한다.<br> legacy token값은 개인 고유의 토큰 값이며 해당 페이지에 들어가 (<a href="https://api.slack.com/custom-integrations/legacy-tokens" target="_blank" rel="noopener">https://api.slack.com/custom-integrations/legacy-tokens</a>)<br> 발급받아야한다. 또한 새로 발급 받을 수도 있으며 공유하지 말라고 써있고, 추후에 사라질 수 도 있다.<br> <br><br> 그래서 <code>slack app</code>을 생성하여 토큰 값을 생성하였지만 scope에서 문제가 생기게 되었다.<br> 오직 <code>chat.command</code>API는 scope가 post로 되어 있어 legacy token값만 파라미터로 사용할 수 있다.<br> 결국 팀원들의 legacy token값을 하드코딩으로 적용시켜 놓으려다가 github에서 새로 제공하고 있는 투표기능이 있다고 하여<br> 다시 서치하기로 하였다.</p>]]></content>
<summary type="html">
<p>slack 채팅창에 <code>/poll is this yours? yes no</code> 텍스트를 입력하면 투표기능을 제공하고 있다.<br><img src="/images/expo-login.png" alt> </p>
<p>외부 stash나
</summary>
<category term="slack-api, javascript" scheme="https://juuuuuuuuuuuuuu.github.io/tags/slack-api-javascript/"/>
</entry>
<entry>
<title>요즘 프론트엔드 개발은 어떻게 하지? 후기</title>
<link href="https://juuuuuuuuuuuuuu.github.io/2019/12/05/wanted/"/>
<id>https://juuuuuuuuuuuuuu.github.io/2019/12/05/wanted/</id>
<published>2019-12-05T00:24:09.000Z</published>
<updated>2019-12-05T00:58:20.899Z</updated>
<content type="html"><![CDATA[<p>2019년 12월 4일 원티드에서 주최한 <code>[요즘 프론트엔드 개발은 어떻게 하지?]</code>에 참석하게 되었다.<br>추첨을 통해서 받는다고 했는데 떨어져서 속상해하고 있었는데 갑자기 당일에 너무 가고 싶어 담당자에게<br>메일을 보내고 추가로 가게 되었다.<br>사실 요즘 무엇을 공부해야하고 다른 회사 개발자들은 어떻게 일을 하고 있는지 궁금해서 가고 싶었다.<br><br><br>일찍 도착해서 위워크 1층에서 구경하고 있었다. 너무 좋았다.<br><img src="/images/KakaoTalk_Photo_2019-12-05-09-20-53.jpeg" alt></p><p><br></p><p>주먹밥,홍루이젠,모자,칫솔 등 선물도 주었다. 맥주도 무한리필이어서 갔더 먹다가 중간중간에 화장실을 자주 갔다..ㅠ<br><img src="/images/KakaoTalk_Photo_2019-12-05-09-20-58.jpeg" alt><br><img src="/images/KakaoTalk_Photo_2019-12-05-09-21-05.jpeg" alt></p><p><br></p><h3 id="useABTest-원티드"><a href="#useABTest-원티드" class="headerlink" title="useABTest (원티드)"></a>useABTest (원티드)</h3><p>원티드 에서는 프론트엔드 개발팀에서 주도적으로 ABTest를 한다고 한다.<br><code>가설X => 테스트 => 검증</code> 이런 과정이라고 한다.(사실 이해 잘 못함..)<br><code>Google Optimize Javscript API</code>를 통해 콜백함수로 유저의 행동을 분석한다고 한다.<br><br><br>원티드에서 요구하는 것들은 1.개발실력, 2.ui/ux관심, 테스트, 주도적인 사람을 요구한다고 한다.<br>react,redux,next,typescript,webpack,styled component,sass를 사용한다.</p><p><br></p><h3 id="디자인-시스템-배달의-민족"><a href="#디자인-시스템-배달의-민족" class="headerlink" title="디자인 시스템 (배달의 민족)"></a>디자인 시스템 (배달의 민족)</h3><p>내가 이해한 디자인 시스템은 기존에는 <code>기획-디자인-ui개발-개발-qa테스트(디자인,기능 qa)-배포</code>이런<br>waterfull방식이다.<br>그러나 할일도 많고 프로젝트들이 너무 많아지다보면 각 페이지마다 노후한 페이지들이 생기게 된다.<br>예를 들면 배민의 프로필 페이지등…<br>그러다 보면 자주 업데이트 하는 페이지들과의 격차도 생기고 누군가 작업을 하기 부담스러워진다.<br>공통된 컴포넌트들을 사용하며 디자인 qa하는 시간을 줄이자는 취지(?)에서 디자인 시스템을 도입한 것 같다.</p><p><br><br>디자이너들에게 코드 교육을 시키면서 비트맵이 아닌 sketch app과 같은 코드 변환툴을 사용하여<br>도입했다고 한다.<br>해외 사례로는 airbnb, spotify design 등이 있다고 한다.<br>방식은 디자인 동시에 npm에 디자인을 업데이트하면 개발자들은 npm에 땡겨와서 바로 적용이 되는 시스템이다.<br>개발자들이 일일히 html 코드를 옮길 필요가 없다.<br>또한 바로 확인이 가능해서 업무 효율성 측면에서 좋다고 한다.<br>그러나 아직 디자인된 코드를 리액트로 바로 변환하는 툴 같은것들은 만들어지지 않았다고 한다.</p><p><img src="/images/KakaoTalk_Photo_2019-12-05-09-21-09.jpeg" alt></p><p><br></p><h3 id="모노레포-토스"><a href="#모노레포-토스" class="headerlink" title="모노레포 (토스)"></a>모노레포 (토스)</h3><p>토스는 프론트엔드 개발자가 총 10명이라고 한다.<br>모놀리식과 마이크로 서비스의 장단점 설명, 그리고 토스는 모노레포 방식을 도입했다고 한다.</p><p><img src="/images/mono.png" alt><br><br><br>모노레포는 위의 것들의 장단점을 보완한 방식이다.<br>하나의 git에 여러 패키지들을 연결하는 방식이다.<br>프로젝트 구조는 portal 프로젝트에 libaray 폴더에는 여러 라이브러리, 서비스 폴더에는 각 서비스들이 있는 구조이다.<br>카나리 배포?(전부다 배포하는것이 아니라 몇명한테만 배포하고 반응이 좋으면 점차적으로 여러사람들에게 배포)를 한다고 한다.</p><p><br><br>토스의 전체적인 구조라고 한다.<br><img src="/images/KakaoTalk_Photo_2019-12-05-09-21-16.jpeg" alt></p><p><br></p><h3 id="느낀점"><a href="#느낀점" class="headerlink" title="느낀점"></a>느낀점</h3><p>이런 곳에 와본게 처음이고 용기내서 질문도 해보고 나름 좋은 경험이었다고 생각한다.<br>대부분의 회사들이 react,redux,ts는 기본으로 사용하고 있다고 한다.<br>열심히 공부해야겠다. 그리고 문제 해결능력도 중요하고 기본기 탄탄하게!! 하라고 한다.</p>]]></content>
<summary type="html">
<p>2019년 12월 4일 원티드에서 주최한 <code>[요즘 프론트엔드 개발은 어떻게 하지?]</code>에 참석하게 되었다.<br>추첨을 통해서 받는다고 했는데 떨어져서 속상해하고 있었는데 갑자기 당일에 너무 가고 싶어 담당자에게<br>메일을 보
</summary>
<category term="conference" scheme="https://juuuuuuuuuuuuuu.github.io/tags/conference/"/>
</entry>
<entry>
<title>github과 프로젝트 연결</title>
<link href="https://juuuuuuuuuuuuuu.github.io/2019/12/04/github/"/>
<id>https://juuuuuuuuuuuuuu.github.io/2019/12/04/github/</id>
<published>2019-12-04T03:33:56.000Z</published>
<updated>2019-12-04T03:52:58.319Z</updated>
<content type="html"><![CDATA[<p>보통 github 개인 repository에 프로젝트를 연결해서 사용할 떄 소스트리를 사용하였다.<br>그러다보니 <code>react-create-app</code>과 같이 프로젝트 생성이 바로 되는 프로젝트들은 github에 repository를 생성하게 되면<br>폴더가 2개가 생기는 이슈가 있었다.<br>그럴 때마다 해당 폴더를 옮기거나 하는식으로 했었는데 이번에 명령어를 사용하여 작업을 해보았다.</p><h4 id="1-github-repository-생성"><a href="#1-github-repository-생성" class="headerlink" title="1. github repository 생성"></a>1. github repository 생성</h4><p>github 페이지로 가서 repository를 생성한다.<br><br></p><h4 id="2-로컬에서-프로젝트-경로로-들어간다-명령어"><a href="#2-로컬에서-프로젝트-경로로-들어간다-명령어" class="headerlink" title="2. 로컬에서 프로젝트 경로로 들어간다 (명령어)"></a>2. 로컬에서 프로젝트 경로로 들어간다 (명령어)</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">$ git init <span class="comment">// .git 디렉토리 생성</span></span><br><span class="line"></span><br><span class="line">$ git add .</span><br><span class="line"></span><br><span class="line">$ git commit -m <span class="string">"first commit"</span></span><br><span class="line"></span><br><span class="line">$ git remote add origin [github주소]</span><br></pre></td></tr></table></figure><p><br><br>이렇게 순차적으로 명령어를 치다보면 마지막에 github과 연결하는 부분에서 해당 에러가 발생한다.<br> <figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">fatal: remote origin already exists 에러</span><br></pre></td></tr></table></figure></p><p>해당 에러는 이미 <code>remote origin</code>이 존재하기 때문이라고 한다.<br>그렇기 때문에 이미 존재하는 remote origin을 삭제하고 다시 github과 연결을 한다.</p> <figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ git remote rm origin</span><br></pre></td></tr></table></figure><p><br><br>그리고 난뒤 파일을 작업되어 있는 파일을 푸시하려고 하면<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ git push -u origin master</span><br></pre></td></tr></table></figure></p><p><br><br>아래와 같이 에러가 발생한다.</p> <figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">! [rejected] master -> master (non-fast-forward)</span><br><span class="line">hint: Updates were rejected because the tip <span class="keyword">of</span> your current branch is behind</span><br><span class="line">hint: its remote counterpart. Integrate the remote changes (e.g.</span><br><span class="line">hint: <span class="string">'git pull ...'</span>) before pushing again.</span><br><span class="line">hint: See the <span class="string">'Note about fast-forwards'</span> <span class="keyword">in</span> <span class="string">'git push --help'</span> <span class="keyword">for</span> details.</span><br></pre></td></tr></table></figure><p><br><br> pull을 받을게 있다는 것이다.<br><code>git pull origin 브랜치명</code> 명령어로 pull을 받으려고 하면<br>아래와 같이 에러가 발생한다.</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">fatal: refusing to merge unrelated histories</span><br></pre></td></tr></table></figure><p>이 이슈는 이미 존재하는 두 프로젝트이 기록이 있어 merge를 하라는 뜻이다.<br><br></p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ git pull origin 브런치명 --allow-unrelated-histories</span><br></pre></td></tr></table></figure><p><code>--allow-unrelated-histories</code> 명령 옵션은 이미 존재하는 두 프로젝트의 기록(history)을 저장하는 드문 상황에 사용된다고 한다.<br>즉, git에서는 서로 관련 기록이 없는 이질적인 두 프로젝트를 병합할 때 기본적으로 거부하는데, 이것을 허용해 주는 것이다.</p><p>그러면 이제 git push가 가능하다.</p>]]></content>
<summary type="html">
<p>보통 github 개인 repository에 프로젝트를 연결해서 사용할 떄 소스트리를 사용하였다.<br>그러다보니 <code>react-create-app</code>과 같이 프로젝트 생성이 바로 되는 프로젝트들은 github에 repositor
</summary>
<category term="github" scheme="https://juuuuuuuuuuuuuu.github.io/tags/github/"/>
</entry>
<entry>
<title>expo error</title>
<link href="https://juuuuuuuuuuuuuu.github.io/2019/12/02/expo-error/"/>
<id>https://juuuuuuuuuuuuuu.github.io/2019/12/02/expo-error/</id>
<published>2019-12-02T06:19:18.000Z</published>
<updated>2019-12-02T06:27:14.808Z</updated>
<content type="html"><![CDATA[<p><code>expo</code>를 사용하여 react-native앱을 만드려고 하는데 <code>npm start</code>만 하면 아래와 같은 에러가 났다.<br>구글링 결과 서버가 이미 켜져 있는 경우에 비슷한 에러가 난다고 하는데 모든 서버를 죽이고 해도 되지 않았다.<br>사파리쪽 캐시관련해서 에러가 잡히는 것 같아 찾아보던 도중 simulator에 들어가 이것저것 구경하는 도중<br>expo앱에 로그인을 했더니 해결되었다…</p><p><br><br>에러<br><img src="/images/expo-error.png" alt><br><br><br>로그인<br><img src="/images/expo-login.png" alt><br><br><br>해결<br><img src="/images/expo-solve.png" alt> </p>]]></content>
<summary type="html">
<p><code>expo</code>를 사용하여 react-native앱을 만드려고 하는데 <code>npm start</code>만 하면 아래와 같은 에러가 났다.<br>구글링 결과 서버가 이미 켜져 있는 경우에 비슷한 에러가 난다고 하는데 모든 서
</summary>
<category term="react-native, expo" scheme="https://juuuuuuuuuuuuuu.github.io/tags/react-native-expo/"/>
</entry>
<entry>
<title>배열 함수</title>
<link href="https://juuuuuuuuuuuuuu.github.io/2019/11/19/hof/"/>
<id>https://juuuuuuuuuuuuuu.github.io/2019/11/19/hof/</id>
<published>2019-11-19T07:57:30.000Z</published>
<updated>2019-11-19T09:53:39.989Z</updated>
<content type="html"><![CDATA[<p>잘 아는 줄 알았는데 사용하다보면 까먹거나 헷갈리는 부분들이 있었다.<br>자바스크립트에서 배열을 다룰 때 주로 사용하는 함수들에 대해서 정리해보자.</p><h3 id="map"><a href="#map" class="headerlink" title="map"></a>map</h3><p><code>배열.map((요소, 인덱스, 배열) => { return 요소 });</code><br>여기서 주의할 점은 해당 배열의 length만큼 똑같이 리턴한다는 것이다. (가끔 이 부분을 깜빡했었음..ㅠ)</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">[<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>, <span class="number">-10</span>].map(<span class="function"><span class="params">v</span> =></span> {</span><br><span class="line"> <span class="keyword">if</span> (v > <span class="number">0</span>) {</span><br><span class="line"> <span class="keyword">return</span> v; <span class="comment">// [1,2,3,undefined]을 리턴한다. </span></span><br><span class="line"> }</span><br><span class="line">});</span><br></pre></td></tr></table></figure><p><br></p><h3 id="forEach"><a href="#forEach" class="headerlink" title="forEach"></a>forEach</h3><p><code>배열.map((요소, 인덱스, 배열) => { });</code><br>기존에 for문이라고 생각하면 된다. 루프를 돌면 따로 리턴하는 값은 없다.<br>기존에 for문과 차이점이라면 중간에 <code>break</code>를 사용하여 나올 수 없다.<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">[<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>].forEach(<span class="function"><span class="params">v</span> =></span> <span class="built_in">console</span>.log(v)); <span class="comment">// 1,2,3</span></span><br></pre></td></tr></table></figure></p><p><br></p><h3 id="some-every"><a href="#some-every" class="headerlink" title="some, every"></a>some, every</h3><p><code>some</code>은 return true가 되는 순간 루프문을 나오게 된다.<br>주로 해당 조건에서 어떠한 작업을 할 때 사용된다. 반환되는 값은 <code>true</code>이다.<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> a = [];</span><br><span class="line">[<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>].some(<span class="function"><span class="params">v</span> =></span> {</span><br><span class="line"> <span class="built_in">console</span>.log(v) <span class="comment">// 1, 2 까지만 찍힌다.</span></span><br><span class="line"> <span class="keyword">if</span> (v === <span class="number">2</span>) {</span><br><span class="line"> a.push(<span class="number">2</span>)</span><br><span class="line"> <span class="keyword">return</span> <span class="literal">true</span>;</span><br><span class="line"> }</span><br><span class="line">})</span><br></pre></td></tr></table></figure></p><p><br></p><p><code>every</code>는 모든 배열을 다 순회한다.<br>모든 요소가 true로 떨어지면 treu리턴, 하나라도 false로 떨어지면 false를 리턴한다.<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// false 리턴</span></span><br><span class="line">[<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>].every(<span class="function"><span class="params">v</span> =></span> {</span><br><span class="line"> <span class="keyword">return</span> v < <span class="number">2</span>;</span><br><span class="line">})</span><br><span class="line"></span><br><span class="line"><span class="comment">// true 리턴</span></span><br><span class="line">[<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>].every(<span class="function"><span class="params">v</span> =></span> {</span><br><span class="line"> <span class="keyword">return</span> v < <span class="number">4</span>;</span><br><span class="line">})</span><br></pre></td></tr></table></figure></p><p><br></p><h3 id="reduce"><a href="#reduce" class="headerlink" title="reduce"></a>reduce</h3><p><code>배열.reduce((누적값, 현잿값, 인덱스, 요소) => { return 결과 }, 초깃값);</code><br>초깃값을 적어주지 않으면 자동으로 0번째 인덱스의 값이 된다.<br>이 함수는 주로 코딩 테스트 문제를 준비하면서 접하게 되었다.<br>그 뒤로 자주 사용하고 있다. 매우 유용한 함수이다.<br>주로 덧셈을 할 때 자주 사용하고, 누적값을 활용해서 다양하게 이용 가능하다.<br>항상 return을 해줘야한다!!</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">[<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>].reduce(<span class="function">(<span class="params">acc, cur</span>) =></span> {</span><br><span class="line"> <span class="keyword">return</span> acc += cur; <span class="comment">// 최종 6을 리턴</span></span><br><span class="line">}, <span class="number">0</span>);</span><br><span class="line"></span><br><span class="line">[<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>].reduce(<span class="function">(<span class="params">acc, cur</span>) =></span> {</span><br><span class="line"> cur < <span class="number">3</span> && acc.push(cur);</span><br><span class="line"> <span class="keyword">return</span> acc; <span class="comment">// [1,2]</span></span><br><span class="line">}, []);</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// 위와 같은 똑같은 기능을 하는 부분인데 typescript를 사용하면서 논리연사자를 사용하려고 했는데 tslint설정으로</span></span><br><span class="line"><span class="comment">// 따로 해주지 않아 if문으로 사용한 경우다. </span></span><br><span class="line"><span class="comment">// 이 경우 if문에 해당하지 않는 경우 return 되는 값을 지정하지 않아 undefined로 리턴이 된다.</span></span><br><span class="line">[<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>].reduce(<span class="function">(<span class="params">acc, cur</span>) =></span> {</span><br><span class="line"> <span class="keyword">if</span> (cur < <span class="number">3</span>) {</span><br><span class="line"> acc.push(cur);</span><br><span class="line"> <span class="keyword">return</span> acc;</span><br><span class="line"> } <span class="comment">// undefined..</span></span><br><span class="line">}, []);</span><br></pre></td></tr></table></figure><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 각 gender별로 몇명이 있는지 확인하고 싶을 때</span></span><br><span class="line"><span class="keyword">let</span> object = [{<span class="attr">gender</span>: <span class="string">'female'</span>, <span class="attr">name</span>: <span class="string">'july'</span>}, {<span class="attr">gender</span>: <span class="string">'male'</span>, <span class="attr">name</span>: <span class="string">'kevin'</span>}, {<span class="attr">gender</span>: <span class="string">'female'</span>, <span class="attr">name</span>: <span class="string">'cindy'</span>}];</span><br><span class="line">object.reduce(<span class="function">(<span class="params">acc, cur</span>) =></span> {</span><br><span class="line"> <span class="keyword">if</span> (acc[cur.gender]) {</span><br><span class="line"> acc[cur.gender] +=<span class="number">1</span>;</span><br><span class="line"> } <span class="keyword">else</span> {</span><br><span class="line"> acc[cur.gender] = <span class="number">1</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="comment">// 자주 까먹는다.. 무조건 값을 return 해줘야한다!! 꼭!! ***</span></span><br><span class="line"> <span class="keyword">return</span> acc; <span class="comment">// {female: 2, male: 1}</span></span><br><span class="line">}, {});</span><br></pre></td></tr></table></figure><p><br></p><h3 id="filter"><a href="#filter" class="headerlink" title="filter"></a>filter</h3><p>조건이 true가 되는 요소를 리턴해 새로운 배열을 만든다.<br>즉 기존 배열에 있는 length와 일치하지 않을 수 있다. (이 부분이 중간중간 헷갈렸던 부분…)</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> data = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">5</span>];</span><br><span class="line">data.filter(<span class="function"><span class="params">v</span> =></span> v><span class="number">2</span>); <span class="comment">// [3,4,5]</span></span><br></pre></td></tr></table></figure><p><br></p><h3 id="find-findIndex"><a href="#find-findIndex" class="headerlink" title="find, findIndex"></a>find, findIndex</h3><p>배열의 특정 요소를 탐색하고 싶을 때는 <code>indexOf</code>를 주로 사용하나 배열의 요소가 객체로 되어 있는 경우에 <code>find, findIndex</code><br>를 사용한다.<br><code>find</code>는 조건에 맞는 객체 자체를 반환해주며<br><code>findIndex</code>는 조건에 맞는 index의 값을 반환해준다.</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> commentList = [</span><br><span class="line"> {<span class="attr">id</span> : <span class="number">1</span>, <span class="attr">child_count</span>: <span class="number">2</span>, <span class="attr">message</span>: <span class="string">'코딩이 재미있다.'</span>},</span><br><span class="line"> {<span class="attr">id</span> : <span class="number">2</span>, <span class="attr">child_count</span>: <span class="number">3</span>, <span class="attr">message</span>: <span class="string">'젊은 꼰대'</span>},</span><br><span class="line"> {<span class="attr">id</span> : <span class="number">3</span>, <span class="attr">child_count</span>: <span class="number">0</span>, <span class="attr">message</span>: <span class="string">'ㅎㅎㅎㅎ'</span>}</span><br><span class="line">];</span><br><span class="line"></span><br><span class="line">commentList.find(<span class="function"><span class="params">v</span> =></span> v.child_count === <span class="number">0</span>); <span class="comment">//{id: 3, child_count: 0, message: "ㅎㅎㅎㅎ"}</span></span><br><span class="line"></span><br><span class="line">commentList.findIndex(<span class="function"><span class="params">v</span> =></span> v.child_count === <span class="number">0</span>); <span class="comment">//2</span></span><br></pre></td></tr></table></figure>]]></content>
<summary type="html">
<p>잘 아는 줄 알았는데 사용하다보면 까먹거나 헷갈리는 부분들이 있었다.<br>자바스크립트에서 배열을 다룰 때 주로 사용하는 함수들에 대해서 정리해보자.</p>
<h3 id="map"><a href="#map" class="headerlink" ti
</summary>
<category term="javascript" scheme="https://juuuuuuuuuuuuuu.github.io/tags/javascript/"/>
</entry>
<entry>
<title>enum, type assertion</title>
<link href="https://juuuuuuuuuuuuuu.github.io/2019/11/18/enum-type-assertion/"/>
<id>https://juuuuuuuuuuuuuu.github.io/2019/11/18/enum-type-assertion/</id>
<published>2019-11-18T01:37:34.000Z</published>
<updated>2019-11-18T01:37:34.744Z</updated>
<summary type="html">
</summary>
</entry>
<entry>
<title>export/import</title>
<link href="https://juuuuuuuuuuuuuu.github.io/2019/11/15/export-import/"/>
<id>https://juuuuuuuuuuuuuu.github.io/2019/11/15/export-import/</id>
<published>2019-11-15T07:57:41.000Z</published>
<updated>2019-11-19T08:30:54.791Z</updated>
<content type="html"><![CDATA[<p>리액트를 import하는 코드를 보다보면 아래와 같이 나뉘어진다.</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> React <span class="keyword">from</span> <span class="string">'react'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> * <span class="keyword">as</span> React <span class="keyword">from</span> <span class="string">'react'</span></span><br></pre></td></tr></table></figure><p>두가지의 성능상 차이점은 있는지 궁금했었다.<br>첫번째 코드는 default로 React를 가져오는 거고 두 번째 코드는 모든 export된 요소들을 한번에 가져온다는 의미이다.</p><p>그 전에 모듈 시스템에 대해서 알아보도록 하자.</p><h3 id="과거-자바스크립트"><a href="#과거-자바스크립트" class="headerlink" title="과거 자바스크립트"></a>과거 자바스크립트</h3><p>자바스크립트는 패키지와 파일끼리 서로 의존하고 있는 경우가 있다.<br>예를 들어 A파일에서는 jquery를 사용하고 B파일에서는 kakaoAPI를 사용하고 있는 경우<br>원칙적으로 A파일에서는 kakaoAPI에 접근할 수 없어야하지만 웹에서 처음 시작할 때<br>모든 스크립트를 로딩하기 때문에 다른 파일도 모든 패키지에 접근할 수 있었다.</p><p>A파일<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ = <span class="literal">null</span>;</span><br></pre></td></tr></table></figure></p><p>B파일<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// error</span></span><br><span class="line">$(<span class="string">'a'</span>).on(<span class="string">'click'</span>, <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line"></span><br><span class="line">});</span><br></pre></td></tr></table></figure></p><p>이렇게 스크립트에 삽입하여 문제가 발생할 수 있다.</p><p>이러한 문제점을 해결하기 위해 나온것들이 <code>commonJS</code>, <code>requireJS</code> 이다.<br><code>의존성을 관리</code>하기 위해 파일 첫부분에 어떤 패키지를 필요로 한다고 선언하여 선언한 패키지만 사용한다.<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> React <span class="keyword">from</span> <span class="string">'react'</span>;</span><br></pre></td></tr></table></figure></p><p><br></p><h3 id="import-export-방식"><a href="#import-export-방식" class="headerlink" title="import, export 방식"></a>import, export 방식</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> a = <span class="number">1</span>;</span><br><span class="line"><span class="keyword">const</span> b = <span class="number">2</span>;</span><br><span class="line"><span class="keyword">export</span> { a };</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> c = <span class="number">3</span>;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> b;</span><br></pre></td></tr></table></figure><ul><li>a는 변수 선언 후 객체에 담아서 export</li><li>b는 변수 선언 후 default라는 키워드를 붙인채 export</li><li>c는 변수 선언과 동시에 export</li></ul><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> d, { a, c <span class="keyword">as</span> e} <span class="keyword">from</span> <span class="string">'A'</span>;</span><br></pre></td></tr></table></figure><p>default로 export한 b는 괄호를 사용하지 않아도 import가 가능하며 변수명을 마음대로 지을 수 있다.<br>여기서는 변수 d가 변수 b를 import한 것이다.<br>a와 c는 export할 때 이름 그대로 하며 괄호를 사용해서 불러와야한다.<br>하지만 괄호안에 변수 이름은 바꾸고 싶다면 <code>as</code>라는 키워드를 사용한다.</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> * <span class="keyword">as</span> React <span class="keyword">from</span> <span class="string">'react'</span>;</span><br></pre></td></tr></table></figure><p>위에 코드는 <code>*</code>을 사용하여 export한 모든 것들을 다 모아서 import해주는 것이다.<br>default도 객체의 멤버로 들어간다.</p><p><br></p><h3 id="typescript"><a href="#typescript" class="headerlink" title="typescript??"></a>typescript??</h3><p>Typescript를 사용할 때에 default로 export한 객체를 가져올 때는 tsconfig.json파일에<br><code>"allowSyntheticDefaultImports": true</code> 값을 설정해줘야한다.<br>react를 임포트를 할때에는 * as React를 쓰는것이 올바른 방법이다.</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> React, { PureComponent } <span class="keyword">from</span> <span class="string">'react'</span>;</span><br></pre></td></tr></table></figure><p>이 코드는 React가 export default로 되어 있을 때 가능한 방식이다.<br>버전에 따라서 수정될 수 도 있기 때문에 * as React를 사용하는 추세인 것 같다.</p>]]></content>
<summary type="html">
<p>리액트를 import하는 코드를 보다보면 아래와 같이 나뉘어진다.</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</sp
</summary>
<category term="javascript, react, nodeJS, CommonJs" scheme="https://juuuuuuuuuuuuuu.github.io/tags/javascript-react-nodejs-commonjs/"/>
</entry>
<entry>
<title>typescript 정리</title>
<link href="https://juuuuuuuuuuuuuu.github.io/2019/11/05/typescript/"/>
<id>https://juuuuuuuuuuuuuu.github.io/2019/11/05/typescript/</id>
<published>2019-11-05T05:21:31.000Z</published>
<updated>2019-11-15T08:19:41.986Z</updated>
<content type="html"><![CDATA[<p>전부터 타입스크립트에 대해서 조금씩 찾아보다가 최근에 chrome-extension 프로젝트에 적용하기로 했다.<br>타입스크립트에 대해서 이렇게 쓰는게 맞는지 잘 모르겠어서 내용들을 조금씩 정리해보려고 한다.</p><h3 id="개요"><a href="#개요" class="headerlink" title="개요"></a>개요</h3><ul><li>마이크로소프트에서 개발하고 관리하는 오픈소스 라이브러리</li><li>어떤 브라우저, 호스트, 운영 체제에서 작동</li><li>자바스크립트의 상위 집합으로 ECMAScript 지원</li><li>런타임 환경이 아닌 컴파일 환경에서 타입체크를 해서 오류를 줄여줌<br><br></li></ul><h3 id="실행과정"><a href="#실행과정" class="headerlink" title="실행과정"></a>실행과정</h3><p><img src="/images/ts_1.png" alt></p><ul><li>typescript 코드를 TSC(TypeScript Complier)를 통해서 JavaScript로 변환하며 이때 타입 검사를 한다.</li><li>JavaScript 코드를 node를 통해서 실행하여 process로 만든다.</li></ul><h3 id="타입-제어방법"><a href="#타입-제어방법" class="headerlink" title="타입 제어방법"></a>타입 제어방법</h3><ul><li>타입 어노테이션(type annotation)을 이용하여 변수에 타입을 선언<br><img src="/images/ts_2.png" alt></li></ul><h3 id="설치-및-환경-세팅"><a href="#설치-및-환경-세팅" class="headerlink" title="설치 및 환경 세팅"></a>설치 및 환경 세팅</h3><ul><li>먼저 typescript를 npm 에서 설치한다.</li><li>그 외에 프로젝트에 따라 ts-loader나 필요한 라이브러리를 부수적으로 설치한다.</li></ul><h4 id="tsconfig-json"><a href="#tsconfig-json" class="headerlink" title="tsconfig.json"></a>tsconfig.json</h4><ul><li>타입스크립트를 컴파일 할 때 필요한 설정을 관리</li></ul>]]></content>
<summary type="html">
<p>전부터 타입스크립트에 대해서 조금씩 찾아보다가 최근에 chrome-extension 프로젝트에 적용하기로 했다.<br>타입스크립트에 대해서 이렇게 쓰는게 맞는지 잘 모르겠어서 내용들을 조금씩 정리해보려고 한다.</p>
<h3 id="개요"><a
</summary>
<category term="typescript, javascript" scheme="https://juuuuuuuuuuuuuu.github.io/tags/typescript-javascript/"/>
</entry>
<entry>
<title>date 관련 정리</title>
<link href="https://juuuuuuuuuuuuuu.github.io/2019/10/24/date/"/>
<id>https://juuuuuuuuuuuuuu.github.io/2019/10/24/date/</id>
<published>2019-10-23T15:00:00.000Z</published>
<updated>2019-10-24T09:00:00.022Z</updated>
<content type="html"><![CDATA[<h3 id="UTC"><a href="#UTC" class="headerlink" title="UTC"></a>UTC</h3><p><code>UTC</code>는 Coordinated Universal Time의 줄임말로 국제 표준시간이다.</p><h3 id="GMT"><a href="#GMT" class="headerlink" title="GMT"></a>GMT</h3><p><code>GMT</code>는 Greenwich Mean Time의 줄임말로 런던을 기점으로하고 웰링턴에서 종점으로 설정 되는 협정 세계시간이다.</p><h3 id="UTC-vs-GMT"><a href="#UTC-vs-GMT" class="headerlink" title="UTC vs GMT"></a>UTC vs GMT</h3><p> UTC와 GMT는 일상에서는 공통으로 같은 시간이다.<br> UTC가 좀더 정확한 시간이라고 한다.</p><h3 id="ISO-8601"><a href="#ISO-8601" class="headerlink" title="ISO 8601"></a>ISO 8601</h3><p> UTC 그리고 Timezone과 함께 문자열의 형태로 시간을 표현하는 방법을 기술해놓은 표준이다.<br> <code>YYYY-MM-DDTHH:mm:ss.sssZ</code></p><h3 id="KST"><a href="#KST" class="headerlink" title="KST"></a>KST</h3><p> KST(Korea Standard Time)는 UTC에 9시간을 더한 시간이다.</p><p>얼마전 쿠키값 세팅되는 시간을 23:59:59으로 지정해놓았는데 분명 콘솔창에는 23:59:59로 찍히지만 저장된 만료<br>시간을 보면 14:59:59 로 저장이 되었다.<br>그래서 23:59:59로 바꾸기 위해 열심히 서치를 하다가 찾아낸 정보는<br><code>JavaScript Cookie expires time must be GMT/UTC</code> 였다.<br>쿠키 만료시간을 세팅할 때 자바스크립트가 로컬에서 지정한 시간(<code>KST</code>)을 <code>UTC</code>로 바꾼다는 이야기였다.<br>그래서 아예 UTC로 바꾼 시간을 넘기면 되겠다는 생각으로 아래와 같이 코드를 수정했다.</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 기존코드</span></span><br><span class="line"> <span class="keyword">const</span> date = <span class="keyword">new</span> <span class="built_in">Date</span>();</span><br><span class="line"> <span class="keyword">const</span> expires = <span class="keyword">new</span> <span class="built_in">Date</span>(date.getFullYear(), date.getMonth(), date.getDate(), <span class="number">23</span>, <span class="number">59</span>, <span class="number">59</span>);</span><br><span class="line"> $.cookie(cookieName, specialPricePopup.chgTimestamp, { expires });</span><br><span class="line"></span><br><span class="line"><span class="comment">// UTC로 변환한 코드</span></span><br><span class="line"> <span class="keyword">const</span> date = <span class="keyword">new</span> <span class="built_in">Date</span>();</span><br><span class="line"> <span class="keyword">const</span> expires = <span class="keyword">new</span> <span class="built_in">Date</span>(<span class="built_in">Date</span>.UTC(date.getFullYear(), date.getMonth(), date.getDate(), <span class="number">23</span>, <span class="number">59</span>, <span class="number">59</span>));</span><br><span class="line"> $.cookie(cookieName, specialPricePopup.chgTimestamp, { expires });</span><br><span class="line"><span class="string">`</span></span><br></pre></td></tr></table></figure><p>그러나, 위의 코드는 잘못되었다. UTC로 날짜를 생성하고 다시 로컬기준으로 시간으로 바꾸는 것이다.<br>그래서 쿠키 만료시간에 23:59:59가 세팅은 되지만.. 결국은 잘못된 코드다.<br>알고보니 쿠키값 세팅은 <code>UTC</code> 기준으로 되고 브라우저?자바스크립트?의 시간도 <code>UTC</code> 기준으로 돌아가기 때문에 기존 코드대로 해야 쿠키값이 해당 시간에<br>만료가 되는 것이었다.</p>]]></content>
<summary type="html">
<h3 id="UTC"><a href="#UTC" class="headerlink" title="UTC"></a>UTC</h3><p><code>UTC</code>는 Coordinated Universal Time의 줄임말로 국제 표준시간이다.</p>
</summary>
<category term="javscript" scheme="https://juuuuuuuuuuuuuu.github.io/tags/javscript/"/>
</entry>
<entry>
<title>javascript 엔진</title>
<link href="https://juuuuuuuuuuuuuu.github.io/2019/09/19/javascript/"/>
<id>https://juuuuuuuuuuuuuu.github.io/2019/09/19/javascript/</id>
<published>2019-09-19T03:18:41.000Z</published>
<updated>2019-09-19T07:57:08.524Z</updated>
<content type="html"><![CDATA[<p>자바스크립트 엔진의 대표적 예로는 <code>google V8</code> 엔진이 있다.<br><code>V8</code>엔진은 <code>chrome, nodeJS</code>에서 주로 사용한다.</p><h3 id="V8-엔진"><a href="#V8-엔진" class="headerlink" title="V8 엔진"></a>V8 엔진</h3><p><code>V8</code>엔진에는 주로 메모리힙과 콜스택으로 이루어져 있다.<br><code>memory heap</code>: 메모리 할당이 일어나는 곳<br><code>call stack</code>: 코드 실행에 따라 호출 스택이 쌓이는 곳<br><img src="/images/javascript_1.png" alt> </p><p><br></p><h3 id="런타임"><a href="#런타임" class="headerlink" title="런타임"></a>런타임</h3><p>프로그램이 실행되고 있는 때 존재하는 곳을 의미한다.<br>web browser에서 작동하는 자바스크립트 측면도 있고 node.js라는 환경에서 구동되는 측면이 존재한다.<br><code>browser</code>와 <code>node.js</code>를 런타임이라고 볼 수 있다.<br>자바스크립트 엔진 외에 dom,ajax,setTimeout과 깉이 브라우저에서 제공해주는 api를 <code>Web API</code>라고 한다.<br><img src="/images/javascript_2png" alt></p><p><br></p><h3 id="호출스택"><a href="#호출스택" class="headerlink" title="호출스택"></a>호출스택</h3><p>자바스크립트는 싱글 쓰레드 기반 언어이다.<br>호출스택은 프로그램 상에서 어디에 있는지 기록하는 자료구조이다.<br>호출스택에 쌓인 함수들이 차근차근 위에서부터 실행이 된다.<br><img src="/images/javascript_5png" alt><br><br><br>초반에 리액트 공부를 시작했을 때 setState가 계속 실행이 되었을 때 아래와 같은 스택 허용치 넘는 에러가 자주 났었다…</p><p><img src="/images/javascript_3png" alt><br><br></p><h3 id="동시성-amp-이벤트-루프"><a href="#동시성-amp-이벤트-루프" class="headerlink" title="동시성 & 이벤트 루프"></a>동시성 & 이벤트 루프</h3><p>호출 스택에서 시간이 엄청 오래걸리는 함수가 있으면 브라우저는 그 동안 아무런 작업을 못하고 대기상태가 된다.<br>결국 에러를 띄우면서 페이지 종료 팝업이 뜬다.<br>(과거 파일뷰어에서 200-300장이 넘는 이미지 파일들을 렌더링할 때 났던 에러였다…)<br>페이지 렌더링 동작을 방해하지 않고 브라우저의 응답도 끊지 않으면서 연산량이 많은 코드를 그러면 어떻게 실행해야할까??<br>답은 비동기 콜백이다!<br>과거에는 ajax를 사용하여 콜백함수로 처리했다.<br>그러다보니 콜백 지옥에 빠지기도 하고 가독성도 떨어지고 수정하기도 힘들었다.<br>그래서 나온 것들이 promise,async 등이 있다.</p>]]></content>
<summary type="html">
<p>자바스크립트 엔진의 대표적 예로는 <code>google V8</code> 엔진이 있다.<br><code>V8</code>엔진은 <code>chrome, nodeJS</code>에서 주로 사용한다.</p>
<h3 id="V8-엔진"><a href
</summary>
<category term="javascript" scheme="https://juuuuuuuuuuuuuu.github.io/tags/javascript/"/>
</entry>
<entry>
<title>babel</title>
<link href="https://juuuuuuuuuuuuuu.github.io/2019/09/17/babel/"/>
<id>https://juuuuuuuuuuuuuu.github.io/2019/09/17/babel/</id>
<published>2019-09-17T03:42:36.000Z</published>
<updated>2019-09-17T05:42:05.952Z</updated>
<content type="html"><![CDATA[<p><code>babel</code>은 특정 버전 ECMAScript를 하위 버전 ECMAScript로 변환해주는 트랜스파일러다.<br>즉, <code>es5 이상의 문법</code>을 <code>es5 지원 브라우저</code>에서 해석할 수 있도록 해주는 트랜스파일러다.<br>(<code>ES6+</code> 문법은 에버그린 브라우저만 지원하는 기능이기 때문에 구형 브라우저에서는 호환이 안되는 문제가 있는데<br>이를 <code>babel</code>이 해결해준다.)</p><p><br></p><h3 id="babel-cli"><a href="#babel-cli" class="headerlink" title="babel-cli"></a>babel-cli</h3><p>먼저 <code>@babel-cli</code>을 설치한다. (<code>babel7</code> 버전부터는 <code>@</code>를 붙인다.)<br><code>@babel-cli</code>는 트랜스파일을 진행하는 코어 기능만 있고 실제 코드 변환시에는 플러그인들이 필요하다.<br>예를 들어 화살표 함수를 사용하는데 화살표 함수를 트랜스파일할 수 있는 플러그인을 설치해야한다.<br>일일히 설치할 수 없으니 프리셋을 설치하여 해결할 수 있다.</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install @babel-cli</span><br></pre></td></tr></table></figure><p><br></p><h3 id="babel-preset-env"><a href="#babel-preset-env" class="headerlink" title="babel-preset-env"></a>babel-preset-env</h3><p>프리셋과 플러그인들을 모와 관리하고 있는 모듈이다.<br><code>env</code>로 설정하면 <code>@babel-preset-latest</code>로 현재 지원 가능한 가장 최식 버전의 프리셋을 사용 할 수 있다.<br><code>.babelrc</code>에서 env에 맞는 target브라우저를 설정할 수 도 있다.</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// .babelrc 파일</span></span><br><span class="line">{</span><br><span class="line"> <span class="string">"preset"</span>: [</span><br><span class="line"> [<span class="string">"env"</span>, {</span><br><span class="line"> <span class="string">"targets"</span>: {</span><br><span class="line"> <span class="string">"chrome"</span>: <span class="number">52</span>,</span><br><span class="line"> }</span><br><span class="line"> }]</span><br><span class="line"> ]</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">// .babelrc 파일</span></span><br><span class="line">{</span><br><span class="line"> <span class="string">"preset"</span>: [</span><br><span class="line"> [<span class="string">"env"</span>, {</span><br><span class="line"> <span class="string">"targets"</span>: {</span><br><span class="line"> <span class="string">"browsers"</span>: [<span class="string">"last 2 versions"</span>, <span class="string">"not ie <= 10"</span>]</span><br><span class="line"> }</span><br><span class="line"> }]</span><br><span class="line"> ]</span><br><span class="line">}</span><br><span class="line"><span class="string">`</span></span><br></pre></td></tr></table></figure><p>배열형태로 지원 브라우저를 정의할 수 있다.</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install @babel-preset-env</span><br></pre></td></tr></table></figure><p><br></p><h3 id="babelrc"><a href="#babelrc" class="headerlink" title="babelrc"></a>babelrc</h3><p><code>.babelrc</code>라는 파일명으로 프로젝트의 바벨 관련 설정을 등록할 수 있다.<br><code>package.json</code>에서 <code>babel</code>이란 키로 설정을 추가할 수도 있지만 <code>.babelrc</code>을 쓰는게 더 좋은 것 같다.</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">{</span><br><span class="line"> <span class="string">"presets"</span>: [</span><br><span class="line"> [<span class="string">"env"</span>, {</span><br><span class="line"> <span class="string">"targets"</span>: {</span><br><span class="line"> <span class="string">"browsers"</span>: [<span class="string">"last 2 versions"</span>, <span class="string">"not ie <= 9"</span>]</span><br><span class="line"> }</span><br><span class="line"> }]</span><br><span class="line"> ],</span><br><span class="line"> <span class="string">"plugins"</span>: [<span class="string">"transform-object-rest-spread"</span>]</span><br><span class="line"> }</span><br><span class="line"><span class="string">`</span></span><br></pre></td></tr></table></figure><p>타켓 브라우저를 설정할 수 있다.<br>또한 아직 정식버전에 포함되지 않는 스펙들은 <code>plugin</code>배열로 추가 가능하다.<br>(사용가능한 플러그인: <a href="https://babeljs.io/docs/en/plugins/" target="_blank" rel="noopener">https://babeljs.io/docs/en/plugins/</a>)</p><p><br></p><h3 id="babel-polyfill"><a href="#babel-polyfill" class="headerlink" title="babel-polyfill"></a>babel-polyfill</h3><p><code>babel</code>을 사용해서 es6 코드를 에버그린 브라우저에서 사용가능하다.<br>그러나 IE8과 같은 구형브라우저에는 promise,map,set 등등 객체나 메소드 들이 없기 때문에 사용할 수 없다.<br>그래서 <code>@babel/polyfill</code>을 설치해야한다.</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">npm install @babel/polyfill</span><br><span class="line"><span class="string">`</span></span><br></pre></td></tr></table></figure><p>그리고 코드 최상단에 한번만 추가를 해야한다.</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> <span class="string">'@babel/polyfill'</span>;</span><br></pre></td></tr></table></figure><p>웹팩을 사용한다면 임포트를 하지 않고 entry에 적어도 된다.<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// webpack.config.js</span></span><br><span class="line">{</span><br><span class="line"> entry: [<span class="string">'@babel/polyfill'</span>, <span class="string">'./app.js'</span>],</span><br><span class="line">}</span><br></pre></td></tr></table></figure></p><p><br></p><h3 id="babel-loader"><a href="#babel-loader" class="headerlink" title="babel-loader"></a>babel-loader</h3><p>웹팩과 바벨을 연동할 수 있게 한다.</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install @babel-loader</span><br></pre></td></tr></table></figure><p>babel-loader를는 node_module에 있는 내용은 제외하고 적용된다.<br>또한 entry에서 babel-polyfill 설정도 가능하다.</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">module</span>.exports = <span class="function">(<span class="params">env, options</span>) =></span> {</span><br><span class="line"> <span class="keyword">const</span> config = {</span><br><span class="line"> entry: {</span><br><span class="line"> app: [<span class="string">'babel-polyfill'</span>, <span class="string">'./src/index.js'</span>]</span><br><span class="line"> },</span><br><span class="line"> <span class="built_in">module</span>: {</span><br><span class="line"> rules: [</span><br><span class="line"> {</span><br><span class="line"> test: <span class="regexp">/\.js$/</span>,</span><br><span class="line"> exclude: <span class="regexp">/node_modules/</span>,</span><br><span class="line"> use: {</span><br><span class="line"> loader: <span class="string">'babel-loader'</span></span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> ]</span><br><span class="line"> },</span><br><span class="line"> <span class="comment">// .... 중략 ....</span></span><br><span class="line"> optimization: {</span><br><span class="line"> splitChunks: {</span><br><span class="line"> cacheGroups: {</span><br><span class="line"> commons: {</span><br><span class="line"> test: <span class="regexp">/[\\/]node_modules[\\/]/</span>,</span><br><span class="line"> name: <span class="string">'vendors'</span>,</span><br><span class="line"> chunks: <span class="string">'all'</span></span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> }</span><br></pre></td></tr></table></figure>]]></content>
<summary type="html">
<p><code>babel</code>은 특정 버전 ECMAScript를 하위 버전 ECMAScript로 변환해주는 트랜스파일러다.<br>즉, <code>es5 이상의 문법</code>을 <code>es5 지원 브라우저</code>에서 해석할 수 있도
</summary>
<category term="babel, javascript, webpack" scheme="https://juuuuuuuuuuuuuu.github.io/tags/babel-javascript-webpack/"/>
</entry>
<entry>
<title>자바스크립트 scope</title>
<link href="https://juuuuuuuuuuuuuu.github.io/2019/09/16/scope/"/>
<id>https://juuuuuuuuuuuuuu.github.io/2019/09/16/scope/</id>
<published>2019-09-16T00:30:00.000Z</published>
<updated>2019-09-16T09:17:25.949Z</updated>
<content type="html"><![CDATA[<p>es6문법 관련하여 정리를 하다가 어렴풋이 알고 있었던 <code>scope</code>에 대해 재정리를 해보았다.</p><p><code>scope</code>는 범위라는 뜻으로 프로그래밍 언어에서 변수나 메소드의 참조 범위를 의미한다.<br>자바스크립트에는 전역 스코프와 지역 스코프가 존재한다.<br>전역 스코프(global scope): script 내 어느 곳이든 참조 가능<br>지역 스코프(local scope): 정의된 함수 내에서만 참조 가능, 함수 외부에서는 접근 불가</p><p><br></p><p>javscript scope의 특징은 다음과 같다.</p><ul><br> <li>변수명 중복 허용</li><br> <li>var 키워드 생략</li><br> <li>function scope</li><br> <li>lexical 특징</li><br> <li>변수 호이스팅</li><br></ul><p><br></p><h3 id="변수명-중복-허용"><a href="#변수명-중복-허용" class="headerlink" title="변수명 중복 허용"></a>변수명 중복 허용</h3><p>변수명이 중복되어도 에러가 나지 않는다.</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">A</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">let</span> a = <span class="number">10</span>;</span><br><span class="line"> <span class="keyword">if</span> (<span class="literal">true</span>) {</span><br><span class="line"> <span class="keyword">let</span> a = <span class="number">3</span>;</span><br><span class="line"> <span class="built_in">console</span>.log(a); <span class="comment">// 3</span></span><br><span class="line"> }</span><br><span class="line"> <span class="built_in">console</span>.log(a); <span class="comment">// 10</span></span><br><span class="line">}</span><br></pre></td></tr></table></figure><p><br></p><h3 id="var-키워드-생략"><a href="#var-키워드-생략" class="headerlink" title="var 키워드 생략"></a>var 키워드 생략</h3><p>var 키워드 생략시 전역변수로 정의가 된다.<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> x = <span class="string">'global'</span>;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">ex</span>(<span class="params"></span>) </span>{</span><br><span class="line"> x = <span class="string">'change'</span>;</span><br><span class="line">}</span><br><span class="line">ex();</span><br><span class="line">alert(x); <span class="comment">// 'change'</span></span><br></pre></td></tr></table></figure></p><p><br></p><h3 id="function-scope"><a href="#function-scope" class="headerlink" title="function scope"></a>function scope</h3><p>자바스크립트는 블록 단위가 아닌 함수단위로 scope를 정의한다. (var 해당)<br>함수 스코프 레벨의 변수인 var는 메모리 누수, 디버깅이 어렵고 가독성이 떨어지는 문제점이 있다.<br>이러한 문제점울 피하고자 블록 스코프 변수인 let,const가 탄생했다.<br>블록 스코프는 {}로 경계를 구분하여 자신이 정의한 블록과 하위 블록에서만 접근이 가능하다.</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">A</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">var</span> a = <span class="number">0</span>;</span><br><span class="line"> <span class="keyword">if</span> (<span class="literal">true</span>) {</span><br><span class="line"> <span class="keyword">var</span> b = <span class="number">10</span>;</span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">var</span> c = <span class="number">0</span>; c < <span class="number">5</span>; c ++) {</span><br><span class="line"> <span class="built_in">console</span>.log(c); <span class="comment">// 0,1,2,3,4</span></span><br><span class="line"> }</span><br><span class="line"> <span class="built_in">console</span>.log(c); <span class="comment">// 5</span></span><br><span class="line"> }</span><br><span class="line"> <span class="built_in">console</span>.log(b); <span class="comment">// 10</span></span><br><span class="line">}</span><br></pre></td></tr></table></figure><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">A</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">let</span> a = <span class="number">0</span>;</span><br><span class="line"> <span class="keyword">if</span> (<span class="literal">true</span>) {</span><br><span class="line"> <span class="keyword">let</span> b = <span class="number">10</span>;</span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">let</span> c = <span class="number">0</span>; c < <span class="number">5</span>; c ++) {</span><br><span class="line"> <span class="built_in">console</span>.log(c); <span class="comment">// 0,1,2,3,4</span></span><br><span class="line"> }</span><br><span class="line"> <span class="built_in">console</span>.log(c); <span class="comment">// Uncaught Reference Error: c is not defined</span></span><br><span class="line"> }</span><br><span class="line"> <span class="built_in">console</span>.log(b); <span class="comment">// 10</span></span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> foo = <span class="string">"I'm foo"</span>;</span><br><span class="line"><span class="keyword">if</span>(<span class="literal">true</span>) {</span><br><span class="line"> <span class="keyword">let</span> bar = <span class="string">"I'm bar"</span>;</span><br><span class="line"> <span class="built_in">console</span>.log(foo); <span class="comment">//I'm foo</span></span><br><span class="line"> <span class="built_in">console</span>.log(bar); <span class="comment">//I'm bar</span></span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(foo); <span class="comment">//I'm foo</span></span><br><span class="line"><span class="built_in">console</span>.log(bar); <span class="comment">//Uncaught ReferenceError: bar is not defined.</span></span><br></pre></td></tr></table></figure><p><br></p><h3 id="lexical-특성"><a href="#lexical-특성" class="headerlink" title="lexical 특성"></a>lexical 특성</h3><p>스코프는 함수 실행 시점이 아닌 정의 시점에서 생성된다.<br>정적 스코프라고 한다.</p> <figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">A</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">var</span> a = <span class="number">10</span>;</span><br><span class="line"> B();</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">B</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">return</span> a; <span class="comment">// Uncaught Reference Error</span></span><br><span class="line">}</span><br></pre></td></tr></table></figure><p><br></p><h3 id="변수-호이스팅"><a href="#변수-호이스팅" class="headerlink" title="변수 호이스팅"></a>변수 호이스팅</h3><p>변수의 정의가 선언과 할당으로 분리되는 것을 의미한다.<br>변수가 함수내에 정의되면 선언이 함수 최상단으로 이동<br>변수가 전역에서 정의되면 선언이 컨텍스트 최상단으로 이동<br>호이스팅은 함수 선언 방식에서만 적용가능하다.<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">A</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="built_in">console</span>.log(name); <span class="comment">// undefined</span></span><br><span class="line"> <span class="keyword">let</span> name = <span class="string">'ji'</span>;</span><br><span class="line"> <span class="built_in">console</span>.log(name); <span class="comment">// ji</span></span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// 실제로 코드 실행시 </span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">A</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">let</span> name;</span><br><span class="line"> <span class="built_in">console</span>.log(name); <span class="comment">// undefined</span></span><br><span class="line"> name = <span class="string">'ji'</span>;</span><br><span class="line"> <span class="built_in">console</span>.log(name); <span class="comment">// ji</span></span><br><span class="line">}</span><br></pre></td></tr></table></figure></p><p>추가적으로 변수 외에도 함수 선언문만 호이스팅이 가능하다.<br>함수 표현식은 호이스팅이 되지 않는다. 그 이유는 마찬가지로 변수에 함수를 초기화 시키기 때문에<br>선언문이 호이스팅 되어 상단으로 올려진다 해도 함수가 아닌 변수로 인지되기 때문이다.<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 함수 선언문</span></span><br><span class="line">A();</span><br><span class="line">functio A() {</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'hi'</span>);</span><br><span class="line">}</span><br></pre></td></tr></table></figure></p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 함수 표현식</span></span><br><span class="line">hositing(); <span class="comment">// hositing of object is not a function</span></span><br><span class="line"><span class="keyword">let</span> hoisting = functio A() {</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'hi'</span>);</span><br><span class="line">}</span><br></pre></td></tr></table></figure>]]></content>
<summary type="html">
<p>es6문법 관련하여 정리를 하다가 어렴풋이 알고 있었던 <code>scope</code>에 대해 재정리를 해보았다.</p>
<p><code>scope</code>는 범위라는 뜻으로 프로그래밍 언어에서 변수나 메소드의 참조 범위를 의미한다.<br>
</summary>
<category term="javascript" scheme="https://juuuuuuuuuuuuuu.github.io/tags/javascript/"/>
</entry>
<entry>
<title>EventHandler (jquery)</title>
<link href="https://juuuuuuuuuuuuuu.github.io/2019/09/02/eventhandler/"/>
<id>https://juuuuuuuuuuuuuu.github.io/2019/09/02/eventhandler/</id>
<published>2019-09-02T14:07:03.000Z</published>
<updated>2019-09-03T09:19:56.088Z</updated>
<content type="html"><![CDATA[<h3 id="on-events-selector-data-handler"><a href="#on-events-selector-data-handler" class="headerlink" title=".on(events [,selector][,data],handler)"></a><code>.on(events [,selector][,data],handler)</code></h3><p>특정요소에 이벤트 바인딩 하기 위해 사용한다.<br>파라미터에 대해 알아보자.<br><br></p><h4 id="events"><a href="#events" class="headerlink" title="events"></a>events</h4><p><code>events</code>는 하나 이상의 공백으로 구분된 이벤트 유형 ‘click keydown’<br>.을 통해 커스텀한 이벤트 가능 ‘click.myPlugin’</p><p><br></p><h4 id="selector"><a href="#selector" class="headerlink" title="selector"></a>selector</h4><p>이벤트를 트리거하는 선택된 요소의 하위항목이다.</p><p>예를 들어 div안에 여러 버튼이 있는 경우 일일히 버튼마다 이벤트를 걸지않고<br>div에 이벤트를 걸고 버튼속성에 이벤트를 트리거한다.<br>이럴 때 참 유용한 것 같다.</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">'[data-container=div]'</span>).on(<span class="string">'click'</span>, <span class="string">'[data-button]'</span>, (e) => {</span><br><span class="line"> <span class="keyword">const</span> type = $(e.currentTarget).attr(<span class="string">'data-button'</span>); <span class="comment">// 각 버튼의 속성값이 들어온다.</span></span><br><span class="line">});</span><br></pre></td></tr></table></figure><p><br></p><h4 id="data"><a href="#data" class="headerlink" title="data"></a>data</h4><p>이벤트가 트리거 될 때 핸들러로 전달될 데이터이다.<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">'#div'</span>).on(<span class="string">'click'</span>, {<span class="attr">msg</span>: <span class="string">'message'</span>}, (e) => {</span><br><span class="line"> <span class="built_in">console</span>.log(e.data.msg); <span class="comment">// message</span></span><br><span class="line">});</span><br></pre></td></tr></table></figure></p><p><br></p><h4 id="handler"><a href="#handler" class="headerlink" title="handler"></a>handler</h4><p>이벤트가 트리거 될 때 실행될 함수이다.</p><p><br><br>이 외에도 on함수로 여러개 이벤트 등록할 수도 있다.<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">'#div'</span>).on({</span><br><span class="line"> mouseenter: <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> },</span><br><span class="line"> mouseleave: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line"> },</span><br><span class="line">})</span><br></pre></td></tr></table></figure></p><p>또한 보통 코드를 작성할 때 이미 이벤트가 있는 경우를 대비해서 한번 초기화(off)하고서 이벤트를 다시 건다(on).<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">'#div'</span>).off(<span class="string">'click'</span>).on(<span class="string">'click'</span>, () => {</span><br><span class="line"></span><br><span class="line">});</span><br></pre></td></tr></table></figure></p>]]></content>
<summary type="html">
<h3 id="on-events-selector-data-handler"><a href="#on-events-selector-data-handler" class="headerlink" title=".on(events [,selector][,data],
</summary>
<category term="javascript, jquery, eventHandler" scheme="https://juuuuuuuuuuuuuu.github.io/tags/javascript-jquery-eventhandler/"/>
</entry>
<entry>
<title>es6 문법 정리</title>
<link href="https://juuuuuuuuuuuuuu.github.io/2019/09/01/es6/"/>
<id>https://juuuuuuuuuuuuuu.github.io/2019/09/01/es6/</id>
<published>2019-09-01T08:21:57.000Z</published>
<updated>2019-09-01T09:13:34.784Z</updated>
<content type="html"><![CDATA[<p>ECMAScript 2015(ES6)는 매년마다 업데이트 되고 있으며 현재 ES7,ES8,ES9,ES10 까지 나온상태이다.<br>그 중에서도 ES6는 현재 모든 프론트엔드 개발자들이 사용하고 있으며 표준화되어 있다.<br>ES6를 사용하면서도 정확한 개념을 잘 모르고 사용한 것들을 정리해보았다.</p><h3 id="arrows"><a href="#arrows" class="headerlink" title="arrows"></a>arrows</h3><p>기존 function을 대신해서 화살표(=>)를 사용하여 함수를 선언할 수 있다.<br>그러나 완전히 function을 대신하지는 않는다.</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> abc = <span class="function"><span class="keyword">function</span>(<span class="params">a</span>) </span>{</span><br><span class="line"> <span class="keyword">return</span> a + <span class="number">1</span>;</span><br><span class="line">};</span><br><span class="line"></span><br><span class="line"><span class="comment">// arrow function</span></span><br><span class="line"><span class="keyword">const</span> abc = <span class="function"><span class="params">a</span> =></span> {</span><br><span class="line"> <span class="keyword">return</span> a + <span class="number">1</span>;</span><br><span class="line">};</span><br><span class="line"></span><br><span class="line"><span class="comment">// 매개변수 1개일 때는 소괄호 생략 가능 및 함수 한줄 표현가능시 중괄호 생략 및 자동 return</span></span><br><span class="line"><span class="keyword">const</span> abc = <span class="function"><span class="params">a</span> =></span> a + <span class="number">1</span>;</span><br></pre></td></tr></table></figure><p><br></p><h4 id="1-this-변경"><a href="#1-this-변경" class="headerlink" title="1) this 변경"></a>1) this 변경</h4><p>항상 이 부분이 헷갈렸다. function으로 선언했을 때 this와 화살표 함수로 선언했을 때 this의 차이점!!!<br>화살표 함수는 자신을 포함하는 외부 scope에서 this를 계승받는다.<br>즉, 자신만의 this를 생성하지 않는다. (lexical this)<br>화살표 함수에서는 내부함수여도 this가 화살표 함수가 선언된 곳에서 상위의 context를 가리치게 된다.</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//function 예제</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Text</span>(<span class="params">text</span>) </span>{</span><br><span class="line"> <span class="keyword">this</span>.text = text;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">setText.prototype.array = <span class="function"><span class="keyword">function</span>(<span class="params">arr</span>) </span>{</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="keyword">this</span>.text); <span class="comment">// hi</span></span><br><span class="line"> <span class="keyword">return</span> arr.map(<span class="function"><span class="keyword">function</span>(<span class="params">v</span>) </span>{</span><br><span class="line"> <span class="keyword">return</span> <span class="string">`<span class="subst">${<span class="keyword">this</span>.text}</span> <span class="subst">${v}</span>`</span>; <span class="comment">// undefined aa, undefined bb</span></span><br><span class="line"> });</span><br><span class="line">};</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> text = <span class="keyword">new</span> Text(<span class="string">'hi'</span>);</span><br><span class="line">Text.array([<span class="string">'aa'</span>, <span class="string">'bb'</span>]);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 화살표 함수 예제</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Text</span>(<span class="params">text</span>) </span>{</span><br><span class="line"> <span class="keyword">this</span>.text = text;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">Text.prototype.array = <span class="function"><span class="keyword">function</span>(<span class="params">arr</span>) </span>{</span><br><span class="line"> <span class="keyword">return</span> arr.map = <span class="function"><span class="params">v</span> =></span> <span class="keyword">return</span> <span class="string">`<span class="subst">${<span class="keyword">this</span>.text}</span> <span class="subst">${v}</span>`</span>;</span><br><span class="line">});</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> text = <span class="keyword">new</span> Text(<span class="string">'hi'</span>);</span><br><span class="line">Text.array([<span class="string">'aa'</span>, <span class="string">'bb'</span>]); <span class="comment">// hi aa, hi bb</span></span><br></pre></td></tr></table></figure><p><br></p><h4 id="2-화살표함수-사용하면-안되는-케이스"><a href="#2-화살표함수-사용하면-안되는-케이스" class="headerlink" title="2) 화살표함수 사용하면 안되는 케이스"></a>2) 화살표함수 사용하면 안되는 케이스</h4><p>객체의 this를 바인딩하지 않고 전역객체가 바인딩된다.<br>즉, 객체의 메소드를 정의할 때는 사용하면 안된다.</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> obj1 = {</span><br><span class="line"> name: <span class="string">'Lee'</span>,</span><br><span class="line"> sayName: <span class="function"><span class="params">()</span> =></span> {</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">`hi + <span class="subst">${<span class="keyword">this</span>.name}</span>`</span>);</span><br><span class="line"> }</span><br><span class="line">};</span><br><span class="line">obj1.sayName(); <span class="comment">// hi +</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> obj1 = {</span><br><span class="line"> name: <span class="string">'Lee'</span>,</span><br><span class="line"> sayName: <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">`hi + <span class="subst">${<span class="keyword">this</span>.name}</span>`</span>);</span><br><span class="line"> }</span><br><span class="line">};</span><br><span class="line">obj1.sayName(); <span class="comment">// h i+ Lee</span></span><br></pre></td></tr></table></figure><p>마찬가지로 생성자 함수로 사용할 수 없다.<br>또한 addEvent Listener함수에서 콜백함수에서 사용하면 this는 상위 컨텍스트를 가르킨다.</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> btn = <span class="built_in">document</span>.getElementById(<span class="string">'button'</span>);</span><br><span class="line">btn.addEventListner(<span class="string">'click'</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="keyword">this</span>); <span class="comment">// this === btn 객체</span></span><br><span class="line">});</span><br><span class="line"></span><br><span class="line">btn.addEventListner(<span class="string">'click'</span>, () => {</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="keyword">this</span>); <span class="comment">// this === window</span></span><br><span class="line">});</span><br></pre></td></tr></table></figure><p><br></p><h4 id="3-arguments-대신-args-사용"><a href="#3-arguments-대신-args-사용" class="headerlink" title="3) arguments 대신 args 사용"></a>3) arguments 대신 args 사용</h4><p>매개변수를 지정하지 않아도 arguments라는 프로퍼티가 함수에 자동으로 생성되어 사용가능했었다. es6에는 arguments는 사라지고 args가 생겼다.(매개변수지정필요)<br>매개변수 부분에 rest파라미터 (…)을 사용하여 가변인자 함수 내부에 배열로 전달 할 수 있다.</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> foo = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="built_in">arguments</span>);</span><br><span class="line">};</span><br><span class="line">foo(<span class="number">1</span>, <span class="number">2</span>); <span class="comment">// {'0': 1, '1': 2}</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> foo2 = <span class="function">(<span class="params">...args</span>) =></span> {</span><br><span class="line"> <span class="built_in">console</span>.log(args);</span><br><span class="line">};</span><br><span class="line">foo(<span class="number">1</span>, <span class="number">2</span>); <span class="comment">// [1,2]</span></span><br></pre></td></tr></table></figure><p><br></p><h3 id="Destructuring-구조분해할당"><a href="#Destructuring-구조분해할당" class="headerlink" title="Destructuring(구조분해할당)"></a>Destructuring(구조분해할당)</h3><p>배열과 객체에서 패턴 매칭을 통한 데이터 바인딩을 제공한다.<br>할당 실패시에는 undefined값이 자동으로 할당된다.<br><br></p><h4 id="1-array-Destructuring-배열-구조분해할당"><a href="#1-array-Destructuring-배열-구조분해할당" class="headerlink" title="1) array Destructuring (배열 구조분해할당)"></a>1) array Destructuring (배열 구조분해할당)</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> [a, b, ...c] = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">5</span>, <span class="number">6</span>]; <span class="comment">// a: 1, b: 2, c: [3,4,5,6]</span></span><br></pre></td></tr></table></figure><p>…을 사용하여 나머지 변수들에 배열 구조분해할당이 가능하다.<br><br></p><h4 id="2-object-Destructuring-객체-구조분해할당"><a href="#2-object-Destructuring-객체-구조분해할당" class="headerlink" title="2) object Destructuring (객체 구조분해할당)"></a>2) object Destructuring (객체 구조분해할당)</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> { a, b } = { <span class="attr">a</span>: <span class="number">1</span>, <span class="attr">b</span>: <span class="number">2</span> }; <span class="comment">//a: 1, b: 2</span></span><br><span class="line"><span class="keyword">const</span> { p, q } = { <span class="attr">e</span>: <span class="number">3</span>, <span class="attr">q</span>: <span class="number">2</span> }; <span class="comment">// p: undefined, q: 2,</span></span><br></pre></td></tr></table></figure><p>객체의 키값이 동일할 때 구조분해할당이 가능하다.</p>]]></content>
<summary type="html">
<p>ECMAScript 2015(ES6)는 매년마다 업데이트 되고 있으며 현재 ES7,ES8,ES9,ES10 까지 나온상태이다.<br>그 중에서도 ES6는 현재 모든 프론트엔드 개발자들이 사용하고 있으며 표준화되어 있다.<br>ES6를 사용하면서도
</summary>
<category term="javascript, ES6" scheme="https://juuuuuuuuuuuuuu.github.io/tags/javascript-es6/"/>
</entry>
<entry>
<title>헷갈리는 논리 연산자 (&&, ||)</title>
<link href="https://juuuuuuuuuuuuuu.github.io/2019/08/13/grammar/"/>
<id>https://juuuuuuuuuuuuuu.github.io/2019/08/13/grammar/</id>
<published>2019-08-13T03:31:46.000Z</published>
<updated>2019-08-13T05:16:30.154Z</updated>
<content type="html"><![CDATA[<p>코드를 작성시 간결하고 가독성이 좋게 하는 방법에는 여러가지들이 있다.<br>그 중에서도 논리 연산자는 코드를 간결하게 작성할 수 있다.<br>그러나 조금 헷갈릴 때가 있어 정리가 필요했다.</p><h3 id="amp-amp-연산자"><a href="#amp-amp-연산자" class="headerlink" title="&& 연산자"></a>&& 연산자</h3><p><code>A && B</code> A와 B 모두 true이면 결과는 true이다.<br>A가 false이면 B를 체크하지 않고 false를 반환한다.</p><h3 id="amp-amp-연산자-활용-예"><a href="#amp-amp-연산자-활용-예" class="headerlink" title="&& 연산자 활용 예"></a>&& 연산자 활용 예</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">check</span>(<span class="params">value</span>) </span>{</span><br><span class="line"> <span class="keyword">if</span> (value && value > <span class="number">10</span>) {</span><br><span class="line"> <span class="keyword">return</span> <span class="literal">true</span>;</span><br><span class="line"> } <span class="keyword">else</span> {</span><br><span class="line"> <span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>위의 코드는 아래와 같이 간략하게 수정할 수 있다.<br>value가 false이면 false를 반환한다. (value >10은 체크하지 않는다.)<br>value가 true이고 value > 10 이 false이면 false반환한다.<br>또한 위의 조건을 충족한 경우 true를 반환한다.</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">check</span>(<span class="params">value</span>) </span>{</span><br><span class="line"> <span class="keyword">return</span> value && value ><span class="number">10</span>;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> useName;</span><br><span class="line"><span class="keyword">if</span> (userId && userId.token) {</span><br><span class="line"> useName = userId.name;</span><br><span class="line">} <span class="keyword">else</span> {</span><br><span class="line"> useName = <span class="literal">null</span>;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>userId 가 참이고 userId.token이 참이면 userId.name값을 userName에 넣는다.<br>만약 거짓이면 null을 userName에 넣는다.<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> userName = userId && userId.token && userId.name;</span><br></pre></td></tr></table></figure></p><h3 id="연산자"><a href="#연산자" class="headerlink" title="|| 연산자"></a>|| 연산자</h3><p><code>A || B</code> A 또는 B중 하나라도 true이면 true 반환한다.</p><h3 id="연산자-활용-예"><a href="#연산자-활용-예" class="headerlink" title="|| 연산자 활용 예"></a>|| 연산자 활용 예</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">documentTitle</span>(<span class="params">theTitle</span>) </span>{ </span><br><span class="line"> <span class="keyword">if</span> (!theTitle) {</span><br><span class="line"> theTitle = <span class="string">"Untitled Document"</span>;</span><br><span class="line"> } <span class="keyword">else</span> {</span><br><span class="line"> theTitle = theTitle;</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>아래와 같이 나타낼 수 있다.</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">documentTitle</span>(<span class="params">theTitle</span>) </span>{ </span><br><span class="line"> theTitle = theTitle || <span class="string">"Untitled Document"</span>;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h3 id="amp-amp-와-활용-예"><a href="#amp-amp-와-활용-예" class="headerlink" title="&& 와 || 활용 예"></a>&& 와 || 활용 예</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">if</span> (userName) {</span><br><span class="line"> logIn(userName);</span><br><span class="line">} <span class="keyword">else</span> {</span><br><span class="line"> signUp();</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>userName이 true이면 logIn 함수를 실행하고 false인 경우 signUp함수를 실행한다.<br>삼항 연산자라 비슷하다고 보면 된다.</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 논리 연산자</span></span><br><span class="line">userName && logIn(userName) || signUp();</span><br><span class="line"></span><br><span class="line"><span class="comment">//삼항 연산자</span></span><br><span class="line">userName ? logIn(userName) : signUp();</span><br></pre></td></tr></table></figure>]]></content>
<summary type="html">
<p>코드를 작성시 간결하고 가독성이 좋게 하는 방법에는 여러가지들이 있다.<br>그 중에서도 논리 연산자는 코드를 간결하게 작성할 수 있다.<br>그러나 조금 헷갈릴 때가 있어 정리가 필요했다.</p>
<h3 id="amp-amp-연산자"><a hr
</summary>
<category term="javascript" scheme="https://juuuuuuuuuuuuuu.github.io/tags/javascript/"/>
</entry>
<entry>
<title>hoisting이란?</title>
<link href="https://juuuuuuuuuuuuuu.github.io/2019/07/02/hoisting/"/>
<id>https://juuuuuuuuuuuuuu.github.io/2019/07/02/hoisting/</id>
<published>2019-07-02T05:08:42.000Z</published>
<updated>2019-07-02T05:37:18.815Z</updated>
<content type="html"><![CDATA[<p><code>hoisting</code>이란 자바스크립트의 기본동작 중 하나이다.<br>사전적 정의로는 끌어올리다라는 뜻이다.</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(a); <span class="comment">// undefined</span></span><br><span class="line"><span class="keyword">let</span> a = <span class="number">10</span>;</span><br><span class="line"><span class="built_in">console</span>.log(a); <span class="comment">// 10</span></span><br></pre></td></tr></table></figure><p>첫번째 콘솔에서 a가 undefined가 나온 이유는 자바스크립트 엔진 구동시 선언문을 가장 최우선으로 헤석한다.<br>호이스팅 개념으로 작성하면 아래와 같다.<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> a;</span><br><span class="line"><span class="built_in">console</span>.log(a); <span class="comment">// undefined</span></span><br><span class="line">a = <span class="number">10</span>;</span><br><span class="line"><span class="built_in">console</span>.log(a); <span class="comment">// 10</span></span><br></pre></td></tr></table></figure></p><p>변수가 함수 내에서 정의되면 선언이 함수의 최상위<br>변수가 함수 밖에서 정의되면 선언이 전역 컨텍스트의 최상위</p><p>아래의 코드와 같다.<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> a = <span class="number">10</span>;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">A</span> (<span class="params"></span>) </span>{</span><br><span class="line"> <span class="built_in">console</span>.log(a); <span class="comment">// undefined</span></span><br><span class="line"> <span class="keyword">let</span> a = <span class="number">12</span>;</span><br><span class="line"> <span class="built_in">console</span>.log(a); <span class="comment">//12</span></span><br><span class="line">}</span><br></pre></td></tr></table></figure></p><p>함수 선언문은 호이스팅이 되지만 함수 표현식은 호이스팅이 되지 않는다.</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(<span class="keyword">typeof</span> funcA); <span class="comment">//function</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="keyword">typeof</span> funcB); <span class="comment">//undefined</span></span><br><span class="line"></span><br><span class="line">funcA(); <span class="comment">// a</span></span><br><span class="line">funcB(); <span class="comment">// 스크립트 에러 발생</span></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">funcA</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'a)</span></span><br><span class="line"><span class="string">}</span></span><br><span class="line"><span class="string">const funcB = function() {</span></span><br><span class="line"><span class="string"> console.log(b)</span></span><br><span class="line"><span class="string">}</span></span><br></pre></td></tr></table></figure><p>funcA는 함수선언문이기 때문에 호이스팅이 되어 위와 같이 출력된다.<br>그러나 funcB는 타입을 체크하는 콘솔에는 funcB의 변수르 선언한것이므로 undefined가 찍히고<br>함수를 실행을 하면 <code>funcB is not a function</code>이라는 에러가 발생한다.<br>호이스팅 개념으로 작성하면 아래와 같다.</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">funcA</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'a)</span></span><br><span class="line"><span class="string">}</span></span><br><span class="line"><span class="string">const funcB;</span></span><br><span class="line"><span class="string">console.log(typeof funcA); //function</span></span><br><span class="line"><span class="string">console.log(typeof funcB); //undefined</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">funcA(); // a</span></span><br><span class="line"><span class="string">funcB(); // 스크립트 에러 발생</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string"> funcB = function() {</span></span><br><span class="line"><span class="string"> console.log(b)</span></span><br><span class="line"><span class="string">}</span></span><br></pre></td></tr></table></figure>]]></content>
<summary type="html">
<p><code>hoisting</code>이란 자바스크립트의 기본동작 중 하나이다.<br>사전적 정의로는 끌어올리다라는 뜻이다.</p>
<figure class="highlight javascript"><table><tr><td class="gutt
</summary>
<category term="javascript" scheme="https://juuuuuuuuuuuuuu.github.io/tags/javascript/"/>
</entry>
<entry>
<title>Hooks</title>
<link href="https://juuuuuuuuuuuuuu.github.io/2019/06/04/hook/"/>
<id>https://juuuuuuuuuuuuuu.github.io/2019/06/04/hook/</id>
<published>2019-06-04T05:56:08.000Z</published>
<updated>2019-06-04T06:54:04.108Z</updated>
<content type="html"><![CDATA[<p>기존 함수형 컴포넌트는 상태관리를 할 수 없었다.<br>그러나 <code>react 16.8</code> 부터 <code>hooks</code>는 상태 관리가 가능한 <code>useState</code>, 렌더링 직후 작업 설정하는 useEffect 등 여러 기능들이<br>제공하고 있다.</p><h3 id="상태관리가-가능한-useState"><a href="#상태관리가-가능한-useState" class="headerlink" title="상태관리가 가능한 useState"></a>상태관리가 가능한 useState</h3><p><code>const [상태값, 상태를 설정하는 함수] = useState(기본값)</code><br>useState에 기본값을 설정하면 [상태값, 상태를 설정하는 함수]를 리턴한다.</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//16.8 버전부터 useState 사용가능</span></span><br><span class="line"><span class="keyword">import</span> React, { useState } <span class="keyword">from</span> <span class="string">"react"</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 함수형 컴포넌트</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> Counter = <span class="function"><span class="params">()</span> =></span> {</span><br><span class="line"> <span class="comment">//useState에 0을 넣는 것 ==> 기본값을 0 으로 설정</span></span><br><span class="line"> <span class="comment">//useState() 호출후 반환하는 배열 ==> [상태값, 상태를 설정하는 함수]</span></span><br><span class="line"> <span class="keyword">const</span> [value, setValue] = useState(<span class="number">0</span>);</span><br><span class="line"> <span class="keyword">return</span> (</span><br><span class="line"> <div></span><br><span class="line"> <p></span><br><span class="line"> 현재 카운터 값은 <b>{value}<<span class="regexp">/b> 입니다.</span></span><br><span class="line"><span class="regexp"> </</span>p></span><br><span class="line"> <button onClick={() => setValue(value + <span class="number">1</span>)}>+<span class="number">1</span><<span class="regexp">/button></span></span><br><span class="line"><span class="regexp"> <button onClick={() => setValue(value - 1)}>-1</</span>button></span><br><span class="line"> <<span class="regexp">/div></span></span><br><span class="line"><span class="regexp"> );</span></span><br><span class="line"><span class="regexp">};</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">export default Counter;</span></span><br></pre></td></tr></table></figure><h3 id="렌더링-될때마다-특정-작업을-수행하도록-설정할-수-있는-useEffect"><a href="#렌더링-될때마다-특정-작업을-수행하도록-설정할-수-있는-useEffect" class="headerlink" title="렌더링 될때마다 특정 작업을 수행하도록 설정할 수 있는 useEffect"></a>렌더링 될때마다 특정 작업을 수행하도록 설정할 수 있는 useEffect</h3><p>생명주기에 따라 특정 작업을 수행할 수 있다.<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//// *** componentDidMount</span></span><br><span class="line">useEffect(<span class="function"><span class="params">()</span> =></span> {}, [])</span><br><span class="line"><span class="comment">///// *** componentDidUpdate</span></span><br><span class="line">useEffect(<span class="function"><span class="params">()</span> =></span> {}, [배열안에 검사하고 싶은 값 (현재 상태관리되고 있는 값 / props로 전달받은 값)])</span><br><span class="line"><span class="comment">///// *** componentUnMount, componentWillUpdate</span></span><br><span class="line">useEffect(<span class="function"><span class="params">()</span> =></span> {}, <span class="keyword">return</span> <span class="function"><span class="params">()</span> =></span> {});</span><br></pre></td></tr></table></figure></p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> React, { useState, useEffect } <span class="keyword">from</span> <span class="string">'react'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> Info = <span class="function"><span class="params">()</span> =></span> {</span><br><span class="line"> <span class="keyword">const</span> [name, setName] = useState(<span class="string">''</span>);</span><br><span class="line"> <span class="keyword">const</span> [nickname, setNicname] = useState(<span class="string">''</span>);</span><br><span class="line"></span><br><span class="line"> useEffect(<span class="function"><span class="params">()</span> =></span> {</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">"렌더링이 완료되었습니다"</span>)</span><br><span class="line"> <span class="built_in">console</span>.log({name, nickname})</span><br><span class="line"> <span class="keyword">return</span> <span class="function"><span class="params">()</span> =></span> {</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">"cleanup"</span>);</span><br><span class="line"> <span class="built_in">console</span>.log(name);</span><br><span class="line"> }</span><br><span class="line"> }, [name])</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"> <span class="keyword">const</span> onChangeName = <span class="function"><span class="params">e</span> =></span> {</span><br><span class="line"> setName(e.target.value)</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="keyword">const</span> onChangeNickName = <span class="function"><span class="params">e</span> =></span> {</span><br><span class="line"> setNicname(e.target.value)</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="keyword">return</span>(</span><br><span class="line"> <div></span><br><span class="line"> <div></span><br><span class="line"> <input value={name} onChange={onChangeName} /></span><br><span class="line"> <input value={nickname} onChange={onChangeNickName}/></span><br><span class="line"> <<span class="regexp">/div></span></span><br><span class="line"><span class="regexp"> <div></span></span><br><span class="line"><span class="regexp"> <b>이름: </</span>b>{name}</span><br><span class="line"> <b>닉네임: <span class="xml"><span class="tag"></<span class="name">b</span>></span></span>{nickname}</span><br><span class="line"> <<span class="regexp">/div></span></span><br><span class="line"><span class="regexp"> </</span>div></span><br><span class="line"> )</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> Info;</span><br></pre></td></tr></table></figure><h3 id="컴포넌트-업데이트-로직을-외부로-분리가능한-useReducer"><a href="#컴포넌트-업데이트-로직을-외부로-분리가능한-useReducer" class="headerlink" title="컴포넌트 업데이트 로직을 외부로 분리가능한 useReducer"></a>컴포넌트 업데이트 로직을 외부로 분리가능한 useReducer</h3><p>바로 위에 Info예제를 보면 onchange이벤트를 각각 잡아서 함수를 생성하고 있다.<br>useReducer를 사용하면 기존에 redux에서 사용하던 action에 따라 상태값을 바꿀 수 있다.<br>const [state(현재 가르키고 있는 상태), dispatch(액션을 발생시키는 함수)] = useReducer(리듀서 함수, 기본값)<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="keyword">import</span> React, { useReducer } <span class="keyword">from</span> <span class="string">"react"</span>;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">reducer</span>(<span class="params">state, action</span>) </span>{</span><br><span class="line"> <span class="keyword">switch</span>(action.type) {</span><br><span class="line"> <span class="keyword">case</span> <span class="string">'INCREMENT'</span>:</span><br><span class="line"> <span class="keyword">return</span> { <span class="attr">value</span>: state.value + <span class="number">1</span> }</span><br><span class="line"> <span class="keyword">case</span> <span class="string">'DECREMENT'</span>:</span><br><span class="line"> <span class="keyword">return</span> { <span class="attr">value</span>: state.value - <span class="number">1</span> }</span><br><span class="line"> <span class="keyword">default</span>:</span><br><span class="line"> <span class="keyword">return</span> state;</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> Counter_reducer = <span class="function"><span class="params">()</span> =></span> {</span><br><span class="line"> <span class="keyword">const</span> [state, dispatch] = useReducer(reducer, { <span class="attr">value</span>: <span class="number">0</span> });</span><br><span class="line"> <span class="keyword">return</span> (</span><br><span class="line"> <div></span><br><span class="line"> <p></span><br><span class="line"> 현재 카운터 값은 <b>{state.value}<<span class="regexp">/b> 입니다.</span></span><br><span class="line"><span class="regexp"> </</span>p></span><br><span class="line"> <button onClick={() => dispatch({ <span class="attr">type</span>: <span class="string">'INCREMENT'</span> })}>+<span class="number">1</span><<span class="regexp">/button></span></span><br><span class="line"><span class="regexp"> <button onClick={() => dispatch({ type: 'DECREMENT' })}>-1</</span>button></span><br><span class="line"> <<span class="regexp">/div></span></span><br><span class="line"><span class="regexp"> );</span></span><br><span class="line"><span class="regexp">};</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">export default Counter_reducer;</span></span><br></pre></td></tr></table></figure></p><h3 id="렌더링-성능-최적화-useMemo"><a href="#렌더링-성능-최적화-useMemo" class="headerlink" title="렌더링 성능 최적화 useMemo"></a>렌더링 성능 최적화 useMemo</h3><p>렌더링하는 과정에서 특정값이 바뀌었을 때만 연산을 실행한다.<br>숫자, 문자열, 객체처럼 일반 값을 재사용할 때 <code>useMemo</code>를 사용한다.<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> React, { useState, useMemo, useCallback, useRef } <span class="keyword">from</span> <span class="string">'react'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> getAverage = <span class="function"><span class="params">numbers</span> =></span> {</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'평균값 계산중..'</span>);</span><br><span class="line"> <span class="keyword">if</span> (numbers.length === <span class="number">0</span>) <span class="keyword">return</span> <span class="number">0</span>;</span><br><span class="line"> <span class="keyword">const</span> sum = numbers.reduce(<span class="function">(<span class="params">a, b</span>) =></span> a + b);</span><br><span class="line"> <span class="keyword">return</span> sum / numbers.length;</span><br><span class="line">};</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> Average = <span class="function"><span class="params">()</span> =></span> {</span><br><span class="line"> <span class="keyword">const</span> [list, setList] = useState([]);</span><br><span class="line"> <span class="keyword">const</span> [number, setNumber] = useState(<span class="string">''</span>);</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"> <span class="keyword">const</span> onChange = <span class="function"><span class="params">e</span> =></span> {</span><br><span class="line"> setNumber(e.target.value);</span><br><span class="line"> }); <span class="comment">// 컴포넌트가 처음 렌더링 될 때만 함수 생성</span></span><br><span class="line"></span><br><span class="line"> <span class="keyword">const</span> onInsert = <span class="function"><span class="params">e</span> =></span> {</span><br><span class="line"> <span class="keyword">const</span> nextList = list.concat(<span class="built_in">parseInt</span>(number));</span><br><span class="line"> setList(nextList);</span><br><span class="line"> setNumber(<span class="string">''</span>);</span><br><span class="line"> }; <span class="comment">// number혹은 list가 바뀌었을 때만 함수 생성</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"> <span class="comment">//렌더링 성능 최적확: useMeomo</span></span><br><span class="line"> <span class="comment">//렌더링하는 과정에서 특정값이 바뀌었을 때만 연산 실행, (list배열의 내용이 바뀔때마다 getAverage함수 호출)</span></span><br><span class="line"> <span class="keyword">const</span> avg = useMemo(<span class="function"><span class="params">()</span> =></span> getAverage(list), [list]);</span><br><span class="line"> <span class="keyword">return</span> (</span><br><span class="line"> <div></span><br><span class="line"> <input value={number} onChange={onChange} ref={inputEl} /></span><br><span class="line"> <button onClick={onInsert}>등록<<span class="regexp">/button></span></span><br><span class="line"><span class="regexp"> <ul></span></span><br><span class="line"><span class="regexp"> {list.map((value, index) => (</span></span><br><span class="line"><span class="regexp"> <li key={index}>{value}</</span>li></span><br><span class="line"> ))}</span><br><span class="line"> <<span class="regexp">/ul></span></span><br><span class="line"><span class="regexp"> <div></span></span><br><span class="line"><span class="regexp"> <b>평균 값:</</span>b> {avg}</span><br><span class="line"> <<span class="regexp">/div></span></span><br><span class="line"><span class="regexp"> </</span>div></span><br><span class="line"> );</span><br><span class="line">};</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> Average;</span><br></pre></td></tr></table></figure></p><p>위와 같이 useMemo를 사용하지 않으면 렌더링 될때마다 getAverage라는 평균값을 계산하는 함수가 실행된다.<br>useMemo에 두번쩨 파라미터 <code>[]</code>에 <code>list</code>가 들어간것은 list값이 바꼈을 때에만 실행하라는 의미이다.<br>즉 onInsert함수를 통해서 숫자가 추가될 때 getAverage가 실행된다.</p><h3 id="렌더링-성능-최적화-useCallback"><a href="#렌더링-성능-최적화-useCallback" class="headerlink" title="렌더링 성능 최적화 useCallback"></a>렌더링 성능 최적화 useCallback</h3><p>기존에는 리렌더링 할 때마다 함수를 새로 생성하지만 <code>useCallback</code>는 이벤트 핸들러 함수를 필요할 때 생성한다.<br>useCallback(생성하고 싶은 함수, 배열: 어떤 값이 바뀌었을 때 함수를 새로 생성해주어야 하는지 명시)<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/// **** 컴포넌트 처음 렌더링 될 때</span></span><br><span class="line">useCallback(<span class="function"><span class="params">()</span> =></span> {}, [])</span><br><span class="line"><span class="comment">/// **** number나 list값이 바뀌었을 때</span></span><br><span class="line">useCallback(<span class="function"><span class="params">()</span> =></span> {}, [number, list])</span><br></pre></td></tr></table></figure></p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> React, { useState, useMemo, useCallback, useRef } <span class="keyword">from</span> <span class="string">'react'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> getAverage = <span class="function"><span class="params">numbers</span> =></span> {</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'평균값 계산중..'</span>);</span><br><span class="line"> <span class="keyword">if</span> (numbers.length === <span class="number">0</span>) <span class="keyword">return</span> <span class="number">0</span>;</span><br><span class="line"> <span class="keyword">const</span> sum = numbers.reduce(<span class="function">(<span class="params">a, b</span>) =></span> a + b);</span><br><span class="line"> <span class="keyword">return</span> sum / numbers.length;</span><br><span class="line">};</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> Average = <span class="function"><span class="params">()</span> =></span> {</span><br><span class="line"> <span class="keyword">const</span> [list, setList] = useState([]);</span><br><span class="line"> <span class="keyword">const</span> [number, setNumber] = useState(<span class="string">''</span>);</span><br><span class="line"> <span class="keyword">const</span> inputEl = useRef(<span class="literal">null</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// useCallback: 렌더링 성능 최적화, 이벤트 핸들러 함수 필요할 때만 생성</span></span><br><span class="line"><span class="comment">// 기존은 리렌더링 할때마다 함수 새로 생성...</span></span><br><span class="line"><span class="comment">// useCallback(생성하고 싶은 함수, 배열: 어떤 값이 바뀌었을 때 함수를 새로 생성해주어야하는지 명시)</span></span><br><span class="line"> <span class="keyword">const</span> onChange = useCallback(<span class="function"><span class="params">e</span> =></span> {</span><br><span class="line"> setNumber(e.target.value);</span><br><span class="line"> }, []); <span class="comment">// 컴포넌트가 처음 렌더링 될 때만 함수 생성</span></span><br><span class="line"></span><br><span class="line"> <span class="keyword">const</span> onInsert = useCallback(<span class="function"><span class="params">e</span> =></span> {</span><br><span class="line"> <span class="keyword">const</span> nextList = list.concat(<span class="built_in">parseInt</span>(number));</span><br><span class="line"> setList(nextList);</span><br><span class="line"> setNumber(<span class="string">''</span>);</span><br><span class="line"> <span class="comment">// useRef로 만든 객체 안의 current값이 실제 엘리먼트</span></span><br><span class="line"> inputEl.current.focus();</span><br><span class="line"> }, [number, list]); <span class="comment">// number혹은 list가 바뀌었을 때만 함수 생성 </span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"> <span class="comment">//렌더링 성능 최적확: useMeomo</span></span><br><span class="line"> <span class="comment">//렌더링하는 과정에서 특정값이 바뀌었을 때만 연산 실행, (list배열의 내용이 바뀔때마다 getAverage함수 호출)</span></span><br><span class="line"> <span class="keyword">const</span> avg = useMemo(<span class="function"><span class="params">()</span> =></span> getAverage(list), [list]);</span><br><span class="line"> <span class="keyword">return</span> (</span><br><span class="line"> <div></span><br><span class="line"> <input value={number} onChange={onChange} ref={inputEl} /></span><br><span class="line"> <button onClick={onInsert}>등록<<span class="regexp">/button></span></span><br><span class="line"><span class="regexp"> <ul></span></span><br><span class="line"><span class="regexp"> {list.map((value, index) => (</span></span><br><span class="line"><span class="regexp"> <li key={index}>{value}</</span>li></span><br><span class="line"> ))}</span><br><span class="line"> <<span class="regexp">/ul></span></span><br><span class="line"><span class="regexp"> <div></span></span><br><span class="line"><span class="regexp"> <b>평균 값:</</span>b> {avg}</span><br><span class="line"> <<span class="regexp">/div></span></span><br><span class="line"><span class="regexp"> </</span>div></span><br><span class="line"> );</span><br><span class="line">};</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> Average;</span><br></pre></td></tr></table></figure><p>위에 예제에 추가로 <code>useRef</code>를 사용했다.<br><code>useRef</code>는 함수형 컴포넌트에서 ref를 쉽게 사용할 수 있게 해준다.</p><p>참고: <a href="https://github.com/juuuuuuuuuuuuuu/react-test" target="_blank" rel="noopener">https://github.com/juuuuuuuuuuuuuu/react-test</a></p>]]></content>
<summary type="html">
<p>기존 함수형 컴포넌트는 상태관리를 할 수 없었다.<br>그러나 <code>react 16.8</code> 부터 <code>hooks</code>는 상태 관리가 가능한 <code>useState</code>, 렌더링 직후 작업 설정하는 useEff
</summary>
<category term="javascript, react, hook" scheme="https://juuuuuuuuuuuuuu.github.io/tags/javascript-react-hook/"/>
</entry>
<entry>
<title>테스트 코드</title>
<link href="https://juuuuuuuuuuuuuu.github.io/2019/05/28/testing/"/>
<id>https://juuuuuuuuuuuuuu.github.io/2019/05/28/testing/</id>
<published>2019-05-28T13:18:03.000Z</published>
<updated>2019-09-03T09:19:56.089Z</updated>
<content type="html"><![CDATA[<p>사실 얼마전까지만해도 단위 테스트를 왜 작성해야하는지 와닿지 않았다.<br>코드를 테스팅하는것도 알고리즘 문제를 풀면서 여러 사이트에서 제공해주는 거로 처음 접했었다.<br>실제로 알고리즘 문제를 사이트에서 풀 때 이렇게 하면 되겠지 했는데 여러 케이스별로 테스팅 코드를 작성해보니 문제들이 많았다.<br>테스팅의 중요성을 느끼게 되었다.</p><p>먼저 이 포스팅에는 리액트에서 테스팅 코드를 작성하는 방법에 대해서 정리할 것이다.<br>후에 직접 프로젝트를 하나 만들어서 직접 테스팅 코드를 구현할 것이다.</p><p>###Jest<br>페이스북에서 만든 테스팅 도구이다.<br>기본적으로 CRA로 설치하면 포함되어 있다.<br>jest메소드 확인 : <a href="https://jestjs.io/docs/en/expect.html" target="_blank" rel="noopener">https://jestjs.io/docs/en/expect.html</a></p><p>###react-test-renderer<br>스냅샷 테스팅을 하는 도구이다.<br>컴포넌트를 주어진 설정으로 렌더링하고 그 결과물을 파일로 저장한다.<br>그리고 다음번 테스팅할 때 이전의 결과물과 일치하는지를 확인한다.<br>컴포넌트 내부 메소드를 호출시키고 다시 렌더링시켜서 그 결과물도 스냅샷을 저장시켜 각 상황에 모두 이전에 렌더링했던<br>결과와 일치하는지를 비교할 수 있다.</p><p>###enzyme<br>airbnb에서 만든 리액트 컴포넌트 테스팅도구이다.<br>세밀하게 테스팅가능하며 dom 이벤트 시뮬레이트 및 모든 라이프사이클 확인이 가능하다.</p>]]></content>
<summary type="html">
<p>사실 얼마전까지만해도 단위 테스트를 왜 작성해야하는지 와닿지 않았다.<br>코드를 테스팅하는것도 알고리즘 문제를 풀면서 여러 사이트에서 제공해주는 거로 처음 접했었다.<br>실제로 알고리즘 문제를 사이트에서 풀 때 이렇게 하면 되겠지 했는데 여러
</summary>
<category term="javscript, jest, enzyme" scheme="https://juuuuuuuuuuuuuu.github.io/tags/javscript-jest-enzyme/"/>
</entry>
</feed>