-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
1361 lines (933 loc) · 53.3 KB
/
index.html
File metadata and controls
1361 lines (933 loc) · 53.3 KB
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
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="generator" content="Hexo 4.2.1" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<title>Blog</title>
<meta property="og:type" content="website">
<meta property="og:title" content="Blog">
<meta property="og:url" content="http://yoursite.com/index.html">
<meta property="og:site_name" content="Blog">
<meta property="og:locale" content="en_US">
<meta property="og:image" content="http://yoursite.com/images/og_image.png">
<meta property="article:author" content="Doyi Kim">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="http://yoursite.com/images/og_image.png">
<link rel="icon" href="/images/favicon.svg">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.7.2/css/bulma.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Ubuntu:400,600|Source+Code+Pro">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/atom-one-light.css">
<style>body>.footer,body>.navbar,body>.section{opacity:0}</style>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lightgallery@1.6.8/dist/css/lightgallery.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/justifiedGallery@3.7.0/dist/css/justifiedGallery.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/outdatedbrowser@1.1.5/outdatedbrowser/outdatedbrowser.min.css">
<link rel="stylesheet" href="/css/back-to-top.css">
<script
async
src="https://www.googletagmanager.com/gtag/js?id=G-F3FQKCPD82"
></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag("js", new Date());
gtag("config", 'G-F3FQKCPD82');
</script>
<link rel="stylesheet" href="/css/progressbar.css">
<script src="https://cdn.jsdelivr.net/npm/pace-js@1.0.2/pace.min.js"></script>
<link rel="stylesheet" href="/css/style.css">
</head>
<body class="is-2-column">
<nav class="navbar navbar-main">
<div class="container">
<div class="navbar-brand is-flex-center">
<a class="navbar-item navbar-logo" href="/">
<img src="/images/logo.svg" alt="Blog" height="28">
</a>
</div>
<div class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item is-active"
href="/">Home</a>
<a class="navbar-item"
href="/archives">Archives</a>
<a class="navbar-item"
href="/about">About</a>
</div>
<div class="navbar-end">
<a class="navbar-item" target="_blank" rel="noopener" title="Download on GitHub" href="https://github.com/letsdoyi">
<i class="fab fa-github"></i>
</a>
<a class="navbar-item search" title="Search" href="javascript:;">
<i class="fas fa-search"></i>
</a>
</div>
</div>
</div>
</nav>
<section class="section">
<div class="container">
<div class="columns">
<div class="column is-8-tablet is-8-desktop is-8-widescreen has-order-2 column-main">
<div class="card">
<div class="card-content article ">
<div class="level article-meta is-size-7 is-uppercase is-mobile is-overflow-x-auto">
<div class="level-left">
<time class="level-item has-text-grey" datetime="2021-02-15T12:24:18.545Z">2021-02-15</time>
<div class="level-item">
<a class="has-link-grey -link" href="/categories/Programming/">Programming</a> / <a class="has-link-grey -link" href="/categories/Programming/Javascript/">Javascript</a>
</div>
<span class="level-item has-text-grey">
5 minutes read (About 754 words)
</span>
</div>
</div>
<h1 class="title is-size-3 is-size-4-mobile has-text-weight-normal">
<a class="has-link-black-ter" href="/2021/02/15/class-Javascript-ES6/">기초 - class (Javascript ES6)</a>
</h1>
<div class="content">
<p>실무에서 사용하는 자바스크립트의 기초적인 문법들을 차근차근 정리해보려고 합니다.<br>// 실무에서 어떻게 사용하고 있나?</p>
<h2 id="클래스"><a href="#클래스" class="headerlink" title="클래스"></a>클래스</h2><h3 id="class"><a href="#class" class="headerlink" title="class ?!"></a>class ?!</h3><p>클래스는 templete (틀) 이고 메모리에 올라가지 않고… 등등의 이야기는 뒤쪽에 정리하도록 하겠습니다.</p>
<h3 id="먼저-class-는-언제-쓰는-가"><a href="#먼저-class-는-언제-쓰는-가" class="headerlink" title="먼저.. class 는 언제 쓰는 가?"></a>먼저.. class 는 언제 쓰는 가?</h3><p>중요한 건, 어떤 경우에 class를 쓰는 가 / 왜 쓰는 가 가 class 문법이 만들어진 중요한 포인트인 것 같습니다.</p>
<p>class 는 1. “연관” 있는 데이터 / 함수 들을 한 덩어리로 2. “묶어” (그 묶은 데이터를 <code>field</code> (속성 - 데이터) 이라고 하고, 함수를 <code>method</code> (행동)라고 합니다) 3. “틀” 을 만들어 데이터 마다 다른 결과물을 만들고 싶을 때 사용할 수 있습니다.</p>
<p>예를 들어, 삼각형의 가로, 삼각형의 세로, 삼각형의 넓이를 구하는 함수, 사각형의 가로, 사각형의 세로, 사각형의 넓이를 구하는 함수 등등의 데이터 / 함수들이 있다고 가정해 봅니다. 당연히 삼각형은 삼각형끼리 사각형은 사각형끼리 묶어서 관리하면 편리 할 것 입니다. 추가로 실제 값을 가지지 않은 삼각형 / 사각형의 틀을 가지고 있다면, 여러가지 값들을 가진 삼각형 / 사각형을 만들기 편할 것 입니다.</p>
<p>코드로 확인해 보겠습니다.</p>
<figure class="highlight plain"><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">class 사각형 {</span><br><span class="line"> // you can pass data to 삼각형 as creating 삼각형 object</span><br><span class="line"> constructor(width, height, color){</span><br><span class="line"> // fields</span><br><span class="line"> this.width = width;</span><br><span class="line"> this.height = height;</span><br><span class="line"> this.color = color;</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> // methods</span><br><span class="line"> printArea() {</span><br><span class="line"> console.log(this.width * this height);</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>이제 삼각형이라는 틀을 완성했습니다.<br>그럼 이 틀을 이용해 가로 10, 세로 10, 빨간색 이라는 데이터를 넣은 사각형을 만들어 보겠습니다.</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">const rectangle = new 사각형(10, 10, 'red');</span><br></pre></td></tr></table></figure>
<p>원하는 데이터를 이 틀(class)에 넣어서 다양한 결과물을 만들어 낼 수 있습니다.</p>
<ul>
<li>빨간(데이터) 사각형</li>
<li>파란(데이터) 사각형</li>
<li>가로, 세로 길이가 같은 (데이터) 사각형</li>
</ul>
<p>(클래스를 붕어빵틀, 그리고 그 결과물을 팥 붕어빵, 크림 붕어빵 이라는 유명한 예시들이 있습니다….)</p>
<p>그리고, 그 결과물을 조금더 전문 용어로 표현 하면, 이것을 <code>class 의 instance</code> 또는 <code>object</code> 라고 합니다.</p>
<h3 id="class-정의"><a href="#class-정의" class="headerlink" title="class 정의"></a>class 정의</h3><ul>
<li>연관된 데이터와 함수를 묶는 틀</li>
<li>묶인 데이터를 <code>field</code>(속성), 묶인 함수를 <code>method</code> (행동) 이라 함</li>
<li>그 틀에 의해 실제 데이터로 만들어진 결과물을 인스턴스 라고 함</li>
</ul>
<h3 id="class-특징"><a href="#class-특징" class="headerlink" title="class 특징"></a>class 특징</h3><ul>
<li><p>클래스는 한번만 선언 됨 - <a href="https://developer.cdn.mozilla.net/en-US/docs/Web/JavaScript/Reference/Classes#re-running_a_class_definition">https://developer.cdn.mozilla.net/en-US/docs/Web/JavaScript/Reference/Classes#re-running_a_class_definition</a></p>
</li>
<li><p>안에 실제 데이터가 들어있지 않은 단순한 틀이기 때문에 메모리에 올라가지 않음 <- 조금 더 확인해보아야</p>
</li>
</ul>
</div>
</div>
</div>
<div class="card">
<div class="card-content article ">
<div class="level article-meta is-size-7 is-uppercase is-mobile is-overflow-x-auto">
<div class="level-left">
<time class="level-item has-text-grey" datetime="2021-01-02T17:19:21.000Z">2021-01-03</time>
<div class="level-item">
<a class="has-link-grey -link" href="/categories/Playground/">Playground</a>
</div>
<span class="level-item has-text-grey">
2 minutes read (About 288 words)
</span>
</div>
</div>
<h1 class="title is-size-3 is-size-4-mobile has-text-weight-normal">
<a class="has-link-black-ter" href="/2021/01/03/manage-hexo-with-git/">Hexo 블로그 깃헙과 연결하고 관리하기</a>
</h1>
<div class="content">
<p>Hexo 블로그를 깃헙에 연결하고 관리하는 방법에 대해 정리하려고 합니다.<br>블로그를 연결하고 관리하기 위해서는 2가지 레포지토리가 필요합니다. deploy 하여 깃헙 페이지가 될 레포 하나 와 소스들의 버젼관리를 위한 레포하나가 필요합니다.</p>
<h2 id="1-deploy-하여-깃헙-페이지가-될-레포-설정"><a href="#1-deploy-하여-깃헙-페이지가-될-레포-설정" class="headerlink" title="1. deploy 하여 깃헙 페이지가 될 레포 설정"></a>1. deploy 하여 깃헙 페이지가 될 레포 설정</h2><ul>
<li>깃헙 페이지용 레포 만들기 (Page를 이용해야함으로 public)</li>
<li><code>_config.yml</code> 파일에서 아래 코드를 추가하기</li>
</ul>
<figure class="highlight plain"><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"># Extensions</span><br><span class="line">## Plugins: https://hexo.io/plugins/</span><br><span class="line">## Themes: https://hexo.io/themes/</span><br><span class="line">Plugins:</span><br><span class="line">- hexo-deployer-git</span><br><span class="line">theme: icarus</span><br><span class="line"></span><br><span class="line"># Deployment</span><br><span class="line">## Docs: https://hexo.io/docs/deployment.html</span><br><span class="line">deploy:</span><br><span class="line"> type: git</span><br><span class="line"> repo: {깃헙 페이지용 레포 이름}.git</span><br></pre></td></tr></table></figure>
<ul>
<li><code>hexo-deployer-git</code> 플러그인 설치하기<br>npm install ~</li>
<li><code>hexo generate</code> 업데이트한 파일들을 빌드하기 (public 폴더에 대입)</li>
<li><code>hexo deploy</code> 다음 명령어를 입력하면 블로그가 deploy!</li>
</ul>
<h2 id="2-깃헙으로-관리할-레포-설정"><a href="#2-깃헙으로-관리할-레포-설정" class="headerlink" title="2. 깃헙으로 관리할 레포 설정"></a>2. 깃헙으로 관리할 레포 설정</h2><ul>
<li>깃헙 관리용 레포 만들기</li>
<li>깃헙 레포를 설정 할때와 동일,<br><code>git remote set-url origin https://github.com/letsdoyi/{블로그 버젼관리용 레포}.git</code></li>
</ul>
</div>
</div>
</div>
<div class="card">
<div class="card-content article ">
<div class="level article-meta is-size-7 is-uppercase is-mobile is-overflow-x-auto">
<div class="level-left">
<time class="level-item has-text-grey" datetime="2020-09-13T10:30:48.112Z">2020-09-13</time>
<div class="level-item">
<a class="has-link-grey -link" href="/categories/Programming/">Programming</a> / <a class="has-link-grey -link" href="/categories/Programming/Paradigm/">Paradigm</a>
</div>
<span class="level-item has-text-grey">
9 minutes read (About 1400 words)
</span>
</div>
</div>
<h1 class="title is-size-3 is-size-4-mobile has-text-weight-normal">
<a class="has-link-black-ter" href="/2020/09/13/why-typescript/">Why Typescript?</a>
</h1>
<div class="content">
<p>타입스크립트에 대해 정리해 보도록 하겠습니다.<br>타입스크립트는 “어떤 문제를 해결하기 위해” 등장한 언어이며, 타입스크립트를 “사용하는 이유” 에 대해 여러 블로그를 읽고 정리한 글 입니다.<br><em>제 생각이 아닌 단순히 정리한 글이기 때문에 평어체를 쓰도록 하겠습니다.</em></p>
</div>
<div class="level is-mobile">
<div class="level-start">
<div class="level-item">
<a class="button is-size-7 is-light" href="/2020/09/13/why-typescript/#more">Read More</a>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-content article ">
<div class="level article-meta is-size-7 is-uppercase is-mobile is-overflow-x-auto">
<div class="level-left">
<time class="level-item has-text-grey" datetime="2020-09-13T09:37:25.963Z">2020-09-13</time>
<div class="level-item">
<a class="has-link-grey -link" href="/categories/Programming/">Programming</a> / <a class="has-link-grey -link" href="/categories/Programming/ETC/">ETC</a>
</div>
<span class="level-item has-text-grey">
3 minutes read (About 437 words)
</span>
</div>
</div>
<h1 class="title is-size-3 is-size-4-mobile has-text-weight-normal">
<a class="has-link-black-ter" href="/2020/09/13/npm/">Module Dependency</a>
</h1>
<div class="content">
<h3 id="모듈-A가-최신버전으로-설치되는-데-왜-이전-버전이-왜-추가로-설치되는-거지"><a href="#모듈-A가-최신버전으로-설치되는-데-왜-이전-버전이-왜-추가로-설치되는-거지" class="headerlink" title="모듈 A가 최신버전으로 설치되는 데, 왜 이전 버전이 왜 추가로 설치되는 거지?"></a>모듈 A가 최신버전으로 설치되는 데, 왜 이전 버전이 왜 추가로 설치되는 거지?</h3><p>개발을 하던 도중 어떤 모듈의 버전을 올리면서 각 모듈들의 의존성에 대해 이해해야 했고, 그것을 정리해여 글로 남기려고 합니다.</p>
<p>Node packaged Magager(npm)를 사용해 저희는 개발에 필요한 모듈 패키지들을 편리하게 설치하고 제거하여 개발하고 있습니다. 하지만 때로는 각각의 패키지들이 연결 되어있는 경우가 있습니다. 그것을 “모듈 의존성” 이라고 합니다. 예를 들어, 모듈 A를 사용하기 위해서는 모듈 B 1.0 버전을 설치해야 합니다. 이때 “모듈 A는 모듈 B에 의존한다” 라고 말합니다.</p>
</div>
<div class="level is-mobile">
<div class="level-start">
<div class="level-item">
<a class="button is-size-7 is-light" href="/2020/09/13/npm/#more">Read More</a>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-content article ">
<div class="level article-meta is-size-7 is-uppercase is-mobile is-overflow-x-auto">
<div class="level-left">
<time class="level-item has-text-grey" datetime="2020-08-30T14:17:43.782Z">2020-08-30</time>
<div class="level-item">
<a class="has-link-grey -link" href="/categories/Programming/">Programming</a> / <a class="has-link-grey -link" href="/categories/Programming/Software-Engineering/">Software Engineering</a>
</div>
<span class="level-item has-text-grey">
a minute read (About 219 words)
</span>
</div>
</div>
<h1 class="title is-size-3 is-size-4-mobile has-text-weight-normal">
<a class="has-link-black-ter" href="/2020/08/30/design-patterns-intro/">Software Design Patterns - Intro</a>
</h1>
<div class="content">
<p>소프트웨어 엔지니어링에서 디자인 패턴은,</p>
<ul>
<li>일반적이며(general) 재사용이 가능한</li>
<li>소프트웨어 설계의 상황에서 흔히 일어나는 문제에 대한</li>
</ul>
<p>솔루션이다.</p>
<p>이것은 설계에서 끝나지 않으며, scoure와 machine code로 전환가능 하다.<br>by wikipedia</p>
<hr>
<p>한마디로, 소프트웨어 설계에서 문제들을 해결하기 위해 고안되었고, 실용적이며, 재사용 가능한 설계 패턴입니다.</p>
<p>디자인 패턴을 익히면서 저의 코드 전체 구조에 대한 이해가 점점 높아지고, 패턴 간의 장단점을 익혀 적용해 볼 수 있기를 기대합니다.<br>많은 디자인 패턴 중에서, 구조 패턴에 대해 정리해 보려고 합니다.</p>
<h3 id="Structural-Patterns"><a href="#Structural-Patterns" class="headerlink" title="Structural Patterns"></a>Structural Patterns</h3><ol>
<li>Adapter</li>
<li>Bridge</li>
<li>Composite</li>
<li>Decorator</li>
<li>Facade</li>
<li>Flyweight</li>
<li>Proxy</li>
</ol>
</div>
</div>
</div>
<div class="card">
<div class="card-content article ">
<div class="level article-meta is-size-7 is-uppercase is-mobile is-overflow-x-auto">
<div class="level-left">
<time class="level-item has-text-grey" datetime="2020-08-30T01:56:49.782Z">2020-08-30</time>
<div class="level-item">
<a class="has-link-grey -link" href="/categories/Books/">Books</a>
</div>
<span class="level-item has-text-grey">
6 minutes read (About 931 words)
</span>
</div>
</div>
<h1 class="title is-size-3 is-size-4-mobile has-text-weight-normal">
<a class="has-link-black-ter" href="/2020/08/30/cooperative-learning/">함께 자라기, 애자일로 가는 길 - 김창준</a>
</h1>
<div class="content">
<p>“우리가 정말 매일매일 함께 자랄 수 있을까”</p>
<p><img src="/2020/08/30/cooperative-learning/book_front.png" alt="front"></p>
</div>
<div class="level is-mobile">
<div class="level-start">
<div class="level-item">
<a class="button is-size-7 is-light" href="/2020/08/30/cooperative-learning/#more">Read More</a>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-content article ">
<div class="level article-meta is-size-7 is-uppercase is-mobile is-overflow-x-auto">
<div class="level-left">
<time class="level-item has-text-grey" datetime="2020-08-29T11:31:14.885Z">2020-08-29</time>
<div class="level-item">
<a class="has-link-grey -link" href="/categories/Playground/">Playground</a>
</div>
<span class="level-item has-text-grey">
3 minutes read (About 473 words)
</span>
</div>
</div>
<h1 class="title is-size-3 is-size-4-mobile has-text-weight-normal">
<a class="has-link-black-ter" href="/2020/08/29/circular-progress-bar-implement-2/">SVG로 그림 그리는 효과 구현 - 2탄</a>
</h1>
<div class="content">
<p>1편에 이어서,<br>Circular Progres Bar 구현에 대해 설명해보겠습니다.</p>
<p><img src="/2020/08/29/circular-progress-bar-implement-2/circular.gif" alt="circular progress bar"></p>
</div>
<div class="level is-mobile">
<div class="level-start">
<div class="level-item">
<a class="button is-size-7 is-light" href="/2020/08/29/circular-progress-bar-implement-2/#more">Read More</a>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-content article ">
<div class="level article-meta is-size-7 is-uppercase is-mobile is-overflow-x-auto">
<div class="level-left">
<time class="level-item has-text-grey" datetime="2020-08-28T16:10:24.803Z">2020-08-29</time>
<div class="level-item">
<a class="has-link-grey -link" href="/categories/Playground/">Playground</a>
</div>
<span class="level-item has-text-grey">
7 minutes read (About 1086 words)
</span>
</div>
</div>
<h1 class="title is-size-3 is-size-4-mobile has-text-weight-normal">
<a class="has-link-black-ter" href="/2020/08/29/circular-progress-bar-implement/">SVG로 그림 그리는 효과 구현 - 1탄</a>
</h1>
<div class="content">
<p>Circular Progress Bar를 구현하는 방법에 대해 정리해보려고 합니다.<br>Apple Watch activat ring, Donot 그래프, iPhone Timer, 음악앱에서 많이 보이는 재생시간 progress bar 등의 많은 곳에서 사용되고 있습니다.</p>
<p><img src="/2020/08/29/circular-progress-bar-implement/watch_activity_rings.png" alt="https://www.apple.com/watch/close-your-rings/" title="apple watch ring"></p>
</div>
<div class="level is-mobile">
<div class="level-start">
<div class="level-item">
<a class="button is-size-7 is-light" href="/2020/08/29/circular-progress-bar-implement/#more">Read More</a>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-content article ">
<div class="level article-meta is-size-7 is-uppercase is-mobile is-overflow-x-auto">
<div class="level-left">
<time class="level-item has-text-grey" datetime="2020-08-28T15:27:42.314Z">2020-08-29</time>
<div class="level-item">
<a class="has-link-grey -link" href="/categories/Books/">Books</a>
</div>
<span class="level-item has-text-grey">
a few seconds read (About 55 words)
</span>
</div>
</div>
<h1 class="title is-size-3 is-size-4-mobile has-text-weight-normal">
<a class="has-link-black-ter" href="/2020/08/29/Books-intro/">Intro</a>
</h1>
<div class="content">
<p>책을 읽고 인상깊었던 부분, 느낀점들을 기록해놓으려고 합니다.<br>이 기록들이 저의 이상과 현실을 연결해주는 데 도움이 되었으면 합니다.</p>
</div>
</div>
</div>
<div class="card">
<div class="card-content article ">
<div class="level article-meta is-size-7 is-uppercase is-mobile is-overflow-x-auto">
<div class="level-left">
<time class="level-item has-text-grey" datetime="2020-03-24T14:00:54.000Z">2020-03-24</time>
<div class="level-item">
<a class="has-link-grey -link" href="/categories/Thoughts/">Thoughts</a>
</div>
<span class="level-item has-text-grey">
3 minutes read (About 488 words)
</span>
</div>
</div>
<h1 class="title is-size-3 is-size-4-mobile has-text-weight-normal">
<a class="has-link-black-ter" href="/2020/03/24/2020-Blog/">2020 BLOG 방향</a>
</h1>
<div class="content">
<p>회사가 결정된 후, 일을 하기 시작 전 남는 시간동안, 블로그를 정리하고 이전하고 있습니다.<br>이전 포스팅들을 하나씩 보다 보니 많은 생각들이 교차합니다.<br>프로그래밍을 공부하기 시작하며 배운 기술, 용어에 대해 단순히 정리한 포스팅도 있고, 그 개념들을 나름대로 해석하여 나만의 경험을 넣어 쓴 글도 있습니다.<br>사실은 블로그 이전 작업을 하며, 단순 내용 정리나 너무 기초적인 내용을 다룬 포스팅들은 걸러내려고 했습니다.<br>하지만, 그 부분들도 저의 히스토리를 볼 수 있다는 점에서 조금은 부끄럽지만 남겨두기로 하였습니다. (몇 개는 지워야 할 것 같습니다🤫)</p>
<ul>
<li>이제는 단순 내용정리 보다는 내 생각과 해석이 담긴 글의 비중을 높이려고 합니다.</li>
<li>단순히 어떻게 구현했는 지 보다는 구조를 파악하여 어떻게 작동하는 지에 대해 설명하는 글을 쓰려고 노력할 것입니다. (아직은 너무 부족하지만 구조파악을 연습하면 나아질 것이라고 생각합니다.)</li>
<li>문장도 조금 더 깔끔하게 쓰도록 노력할 것입니다.</li>
<li>아직은 포스팅 하나 쓰는 시간이 많이 걸리지만 조금씩 줄일 수 있을 거라고 기대합니다.</li>
<li>구직 동안, 면접과 과제, 코딩 테스트를 통해 여러 개발자 분들의 피드백을 받으며, 그동안 배운 개념들이 명료해졌습니다. 그 개념들을 블로그에 정리해 나가려고 합니다.</li>
</ul>
<p>2020년 3월, 코로나 바이러스로 인해 마스크를 쓰고 다니는 요즘, 건강에 감사하며.</p>
</div>
</div>
</div>
<div class="card card-transparent">
<nav class="pagination is-centered" role="navigation" aria-label="pagination">
<div class="pagination-previous is-invisible is-hidden-mobile">
<a class="is-flex-grow has-text-black-ter" href="/page/0/">Previous</a>
</div>
<div class="pagination-next">
<a class="is-flex-grow has-text-black-ter" href="/page/2/">Next</a>
</div>
<ul class="pagination-list is-hidden-mobile">
<li><a class="pagination-link is-current" href="/">1</a></li>
<li><a class="pagination-link has-text-black-ter" href="/page/2/">2</a></li>
<li><a class="pagination-link has-text-black-ter" href="/page/3/">3</a></li>
</ul>
</nav>
</div>
</div>
<div class="column is-4-tablet is-4-desktop is-4-widescreen has-order-3 column-right is-sticky">
<div class="card widget">
<div class="card-content">
<h3 class="menu-label">
Recent
</h3>
<article class="media">
<div class="media-content">
<div class="content">
<div><time class="has-text-grey is-size-7 is-uppercase" datetime="2021-02-15T12:24:18.545Z">2021-02-15</time></div>
<a href="/2021/02/15/class-Javascript-ES6/" class="title has-link-black-ter is-size-6 has-text-weight-normal">기초 - class (Javascript ES6)</a>
<p class="is-size-7 is-uppercase">
<a class="has-link-grey -link" href="/categories/Programming/">Programming</a> / <a class="has-link-grey -link" href="/categories/Programming/Javascript/">Javascript</a>
</p>
</div>
</div>
</article>
<article class="media">
<div class="media-content">
<div class="content">
<div><time class="has-text-grey is-size-7 is-uppercase" datetime="2021-01-02T17:19:21.000Z">2021-01-03</time></div>
<a href="/2021/01/03/manage-hexo-with-git/" class="title has-link-black-ter is-size-6 has-text-weight-normal">Hexo 블로그 깃헙과 연결하고 관리하기</a>
<p class="is-size-7 is-uppercase">
<a class="has-link-grey -link" href="/categories/Playground/">Playground</a>
</p>
</div>
</div>
</article>
<article class="media">
<div class="media-content">
<div class="content">
<div><time class="has-text-grey is-size-7 is-uppercase" datetime="2020-09-13T10:30:48.112Z">2020-09-13</time></div>
<a href="/2020/09/13/why-typescript/" class="title has-link-black-ter is-size-6 has-text-weight-normal">Why Typescript?</a>
<p class="is-size-7 is-uppercase">
<a class="has-link-grey -link" href="/categories/Programming/">Programming</a> / <a class="has-link-grey -link" href="/categories/Programming/Paradigm/">Paradigm</a>
</p>
</div>
</div>
</article>
<article class="media">
<div class="media-content">
<div class="content">
<div><time class="has-text-grey is-size-7 is-uppercase" datetime="2020-09-13T09:37:25.963Z">2020-09-13</time></div>
<a href="/2020/09/13/npm/" class="title has-link-black-ter is-size-6 has-text-weight-normal">Module Dependency</a>
<p class="is-size-7 is-uppercase">
<a class="has-link-grey -link" href="/categories/Programming/">Programming</a> / <a class="has-link-grey -link" href="/categories/Programming/ETC/">ETC</a>
</p>
</div>
</div>
</article>
<article class="media">
<div class="media-content">
<div class="content">
<div><time class="has-text-grey is-size-7 is-uppercase" datetime="2020-08-30T14:17:43.782Z">2020-08-30</time></div>
<a href="/2020/08/30/design-patterns-intro/" class="title has-link-black-ter is-size-6 has-text-weight-normal">Software Design Patterns - Intro</a>
<p class="is-size-7 is-uppercase">
<a class="has-link-grey -link" href="/categories/Programming/">Programming</a> / <a class="has-link-grey -link" href="/categories/Programming/Software-Engineering/">Software Engineering</a>
</p>
</div>
</div>
</article>
</div>
</div>
<div class="card widget">
<div class="card-content">
<div class="menu">
<h3 class="menu-label">
Categories
</h3>
<ul class="menu-list">
<li>
<a class="level is-marginless" href="/categories/Algorithm/">
<span class="level-start">
<span class="level-item">Algorithm</span>
</span>
<span class="level-end">
<span class="level-item tag">4</span>
</span>
</a></li><li>
<a class="level is-marginless" href="/categories/Books/">
<span class="level-start">
<span class="level-item">Books</span>
</span>
<span class="level-end">
<span class="level-item tag">2</span>
</span>
</a></li><li>
<a class="level is-marginless" href="/categories/Playground/">
<span class="level-start">
<span class="level-item">Playground</span>
</span>
<span class="level-end">
<span class="level-item tag">4</span>
</span>
</a></li><li>
<a class="level is-marginless" href="/categories/Programming/">
<span class="level-start">
<span class="level-item">Programming</span>
</span>
<span class="level-end">
<span class="level-item tag">13</span>
</span>
</a><ul><li>
<a class="level is-marginless" href="/categories/Programming/DOM/">
<span class="level-start">
<span class="level-item">DOM</span>
</span>
<span class="level-end">
<span class="level-item tag">1</span>
</span>
</a></li><li>
<a class="level is-marginless" href="/categories/Programming/ETC/">
<span class="level-start">
<span class="level-item">ETC</span>
</span>
<span class="level-end">
<span class="level-item tag">1</span>
</span>
</a></li><li>
<a class="level is-marginless" href="/categories/Programming/Javascript/">
<span class="level-start">
<span class="level-item">Javascript</span>
</span>
<span class="level-end">
<span class="level-item tag">9</span>
</span>
</a></li><li>
<a class="level is-marginless" href="/categories/Programming/Paradigm/">
<span class="level-start">
<span class="level-item">Paradigm</span>
</span>
<span class="level-end">
<span class="level-item tag">1</span>
</span>
</a></li><li>
<a class="level is-marginless" href="/categories/Programming/Software-Engineering/">
<span class="level-start">
<span class="level-item">Software Engineering</span>
</span>
<span class="level-end">
<span class="level-item tag">1</span>
</span>
</a></li></ul></li><li>
<a class="level is-marginless" href="/categories/Thoughts/">
<span class="level-start">
<span class="level-item">Thoughts</span>
</span>
<span class="level-end">
<span class="level-item tag">2</span>
</span>
</a></li><li>
<a class="level is-marginless" href="/categories/Tool/">
<span class="level-start">
<span class="level-item">Tool</span>
</span>
<span class="level-end">
<span class="level-item tag">1</span>
</span>
</a><ul><li>
<a class="level is-marginless" href="/categories/Tool/Git/">
<span class="level-start">
<span class="level-item">Git</span>
</span>
<span class="level-end">
<span class="level-item tag">1</span>
</span>
</a></li></ul></li>
</ul>
</div>
</div>
</div>
<div class="card widget">
<div class="card-content">
<div class="menu">
<h3 class="menu-label">
Tags
</h3>
<div class="field is-grouped is-grouped-multiline">
<div class="control">
<a class="tags has-addons" href="/tags/Algorithm/">
<span class="tag">Algorithm</span>
<span class="tag is-grey">1</span>
</a>
</div>
<div class="control">
<a class="tags has-addons" href="/tags/Array/">
<span class="tag">Array</span>
<span class="tag is-grey">2</span>
</a>
</div>
<div class="control">
<a class="tags has-addons" href="/tags/CleverSolution/">
<span class="tag">CleverSolution</span>
<span class="tag is-grey">1</span>
</a>
</div>
<div class="control">
<a class="tags has-addons" href="/tags/DOM/">
<span class="tag">DOM</span>
<span class="tag is-grey">1</span>
</a>
</div>
<div class="control">
<a class="tags has-addons" href="/tags/Delete/">
<span class="tag">Delete</span>
<span class="tag is-grey">1</span>
</a>
</div>
<div class="control">
<a class="tags has-addons" href="/tags/Git/">
<span class="tag">Git</span>
<span class="tag is-grey">1</span>
</a>
</div>
<div class="control">
<a class="tags has-addons" href="/tags/Javascript/">
<span class="tag">Javascript</span>
<span class="tag is-grey">1</span>
</a>
</div>
<div class="control">
<a class="tags has-addons" href="/tags/apply/">
<span class="tag">apply</span>
<span class="tag is-grey">2</span>
</a>
</div>
<div class="control">
<a class="tags has-addons" href="/tags/arguments/">
<span class="tag">arguments</span>
<span class="tag is-grey">1</span>
</a>
</div>
<div class="control">
<a class="tags has-addons" href="/tags/behavior-delegation/">
<span class="tag">behavior delegation</span>
<span class="tag is-grey">1</span>
</a>
</div>
<div class="control">
<a class="tags has-addons" href="/tags/bind/">