-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsearch.xml
1186 lines (573 loc) · 290 KB
/
search.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
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
<?xml version="1.0" encoding="utf-8"?>
<search>
<entry>
<title>Password Validation Regular Expression</title>
<link href="/2020/08/14/password-validation/"/>
<url>/2020/08/14/password-validation/</url>
<content type="html"><![CDATA[<h1 id="조건"><a href="#조건" class="headerlink" title="조건"></a>조건</h1><p>10~20 자리 이내 영문, 숫자, 특수문자(!, @, <em>) 중 2종류 이상 또는 8~20자리 이내 영문, 숫자, 특수문자(!, @, </em>) 중 3종류 이상을 조합</p><h1 id="조건-정리"><a href="#조건-정리" class="headerlink" title="조건 정리"></a>조건 정리</h1><ol><li>10~20 자리 이내 영문, 숫자, 특수문자(!, @, *) 중 2종류 이상 조합</li><li>8~20자리 이내 영문, 숫자, 특수문자(!, @, *) 중 3종류 이상 조합</li></ol><h1 id="상세-조건-및-정규식"><a href="#상세-조건-및-정규식" class="headerlink" title="상세 조건 및 정규식"></a>상세 조건 및 정규식</h1><ol><li><ol><li>password must contain 1 number (0-9)</li><li>password must contain 1 uppercase letters or 1 lowercase letters</li><li>password must contain 1 special characters, of the group !@*</li><li>password must contain 2 or more of the above</li><li>password is 10-20 characters with no space</li></ol></li><li><ol><li>password must contain 1 number (0-9)</li><li>password must contain 1 uppercase letters or 1 lowercase letters</li><li>password must contain 1 special characters, of the group !@*</li><li>password is 10-20 characters with no space</li></ol></li></ol><h2 id="정규식"><a href="#정규식" class="headerlink" title="정규식"></a>정규식</h2><ol><li>password must contain 1 number (0-9)<ul><li>(?=.*\d)</li></ul></li><li>password must contain 1 uppercase letters or 1 lowercase letters<ul><li>(?=.*[a-zA-Z])</li></ul></li><li>password must contain 1 special characters, of the group !@*<ul><li>(?=.<em>[!@</em>])</li></ul></li><li>password is 10-20 or 8-20 characters with no space<ul><li>([^\s]){10,20} or ([^\s]){8,20}</li></ul></li></ol><h1 id="정규식-1"><a href="#정규식-1" class="headerlink" title="정규식"></a>정규식</h1><ol><li>^(?=.<em>\d)(?=.</em>[!@<em>])([^\s]){10,20}$|^(?=.</em>\d)(?=.<em>[a-zA-Z])([^\s]){10,20}$|^(?=.</em>[a-zA-Z])(?=.<em>[!@</em>])([^\s]){10,20}$</li><li>^(?=.<em>\d)(?=.</em>[a-zA-Z])(?=.<em>[!@</em>])([^\s]){8,20}$</li></ol><p>^(?=.<em>\d)(?=.</em>[!@<em>])([^\s]){10,20}$|^(?=.</em>\d)(?=.<em>[a-zA-Z])([^\s]){10,20}$|^(?=.</em>[a-zA-Z])(?=.<em>[!@</em>])([^\s]){10,20}$|^(?=.<em>\d)(?=.</em>[a-zA-Z])(?=.<em>[!@</em>])([^\s]){8,20}$</p><h1 id="최종"><a href="#최종" class="headerlink" title="최종"></a>최종</h1><p><a href="https://regex101.com/r/hqMtyd/1" target="_blank" rel="external nofollow noopener noreferrer">https://regex101.com/r/hqMtyd/3</a></p><blockquote><p>(?=.\d)(?=.[!@])([\s]){10,20}$|(?=.\d)(?=.[a-zA-Z])([^\s]){10,20}|(?=.[a-zA-Z])(?=.[!@])([\s]){10,20}|(?=.\d)(?=.[a-zA-Z])(?=.[!@])([^\s]){8,20}</p></blockquote>]]></content>
<tags>
<tag> password </tag>
<tag> validation </tag>
<tag> regex </tag>
</tags>
</entry>
<entry>
<title>.htaccess http를 https로 redirect</title>
<link href="/2019/11/07/2019-11-07/"/>
<url>/2019/11/07/2019-11-07/</url>
<content type="html"><![CDATA[<h1 id="htaccess"><a href="#htaccess" class="headerlink" title=".htaccess"></a>.htaccess</h1><p>.htaccess = hypertext access</p><p>웹 서버가 지원하는 디렉터리 수준의 설정파일</p><p>Apache에서 주로 사용</p><p>www폴더에 존재</p><h1 id="redirect"><a href="#redirect" class="headerlink" title="redirect"></a>redirect</h1><p>http로 접속시 자동으로 https 프로토콜로 전환</p><p>해당 URL로 이동시켜주는 역활</p><h1 id="방법"><a href="#방법" class="headerlink" title="방법"></a>방법</h1><p>.htaccess 파일 수정<br><figure class="highlight plain hljs"><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></pre></td><td class="code"><pre><span class="line"><IfModule mod_rewrite.c></span><br><span class="line"></span><br><span class="line">RewriteEngine On</span><br><span class="line">RewriteBase /</span><br><span class="line"></span><br><span class="line">RewriteCond %{ENV:HTTPS} !=on</span><br><span class="line">RewriteRule ^.*$ https://%{SERVER_NAME}%{REQUEST_URI} [R,L]</span><br><span class="line"></span><br><span class="line">RewriteRule ^index\.html$ - [L]</span><br><span class="line">RewriteCond %{REQUEST_FILENAME} !-f</span><br><span class="line">RewriteCond %{REQUEST_FILENAME} !-d</span><br><span class="line">RewriteRule . /index.html [L]</span><br><span class="line"></IfModule></span><br></pre></td></tr></table></figure></p><h1 id="에러"><a href="#에러" class="headerlink" title="에러"></a>에러</h1><p>쿠키 어쩌고 하면서 안되는 경우</p><p>firefox기준</p><blockquote><p>이 문제는 드물게 해당 사이트에서 요구하는 쿠키를 차단하여 발생할 수 있습니다.</p></blockquote><p>index 이름을 갖고 있는 파일이 여러개인 경우 정확한 파일을 찾지 못하여 문제가 발생 할 수 있음</p><p>사용하는 index.html 하나만 위치시키면 해결</p>]]></content>
<categories>
<category> 환경 </category>
</categories>
<tags>
<tag> 환경 </tag>
<tag> redirect </tag>
<tag> http </tag>
<tag> https </tag>
</tags>
</entry>
<entry>
<title>나도 zsh를 써보고 싶었다.</title>
<link href="/2019/10/25/2019-10-25/"/>
<url>/2019/10/25/2019-10-25/</url>
<content type="html"><![CDATA[<h1 id="나도-zsh이-쓰고-싶다"><a href="#나도-zsh이-쓰고-싶다" class="headerlink" title="나도 zsh이 쓰고 싶다"></a>나도 zsh이 쓰고 싶다</h1><p>zsh가 사용하고 싶었음.</p><p>윈도우 사용자라 못생긴 검정 cmd말고 알록달록 예쁜 zsh이 부러움.</p><p>zsh는 사용 못 하지만 cmd이 아닌 PowerShell을 이용하면 <a href="https://github.com/JanDeDobbeleer/oh-my-posh" target="_blank" rel="external nofollow noopener noreferrer">oh-my-posh</a>라는 것을 사용 할 수 있음.</p><p>PowerShell에 ConEmu라는 것을 이요하여 oh-my-posh를 설치하고 FluentTerminal을 이용하여 PowerShell을 사용하면 됨.<br><a id="more"></a></p><h2 id="필요"><a href="#필요" class="headerlink" title="필요"></a>필요</h2><ul><li>FluentTerminal</li><li>oh-my-posh</li><li>ConEmu</li></ul><h2 id="방법"><a href="#방법" class="headerlink" title="방법"></a>방법</h2><ul><li>chocolatey 설치 (이미 설치된 경우 바로 FluentTerminal 설치)<blockquote><p><a href="https://chocolatey.org/" target="_blank" rel="external nofollow noopener noreferrer">https://chocolatey.org/</a></p></blockquote></li><li>chocolatey을 이용하여 FluentTerminal 설치<blockquote><p><a href="https://github.com/felixse/FluentTerminal" target="_blank" rel="external nofollow noopener noreferrer">https://github.com/felixse/FluentTerminal</a></p></blockquote></li><li>chocolatey를 이용하여 ConEmu설치</li><li>oh-my-posh 설치</li></ul><h2 id="설치"><a href="#설치" class="headerlink" title="설치"></a>설치</h2><p><a href="https://chocolatey.org/" target="_blank" rel="external nofollow noopener noreferrer">Chocolatey</a>을 이용한 설치와 FluentTerminal만 설치하는 방법이 있음</p><p><code>Chocolatey</code>을 이용한 방법은 먼저 <code>Chocolatey</code>을 설치 해야하기 때문에 귀찮을 것 같지만 그냥 <code>FluentTerminal</code>를 설치하는 것 보다 개인적으로 편함</p><p>그냥 설치하려면 개발자 모드로 바꾸고 인증서 등록?하고 해야 해서 더 귀찮은 듯</p><p>다른 방법은 <a href="https://github.com/felixse/FluentTerminal" target="_blank" rel="external nofollow noopener noreferrer">FluentTerminal Git</a> 참고</p><h3 id="chocolatey"><a href="#chocolatey" class="headerlink" title="chocolatey"></a>chocolatey</h3><ol><li>PowerShell 실행</li><li><a href="https://chocolatey.org/install" target="_blank" rel="external nofollow noopener noreferrer">Chocolatey</a>에서 하라는데로 진행<ul><li>들어가면 <code>Now run the following command:</code>이라는 부분에 코드가 있음</li><li>PowerShell에 복붙 엔터</li><li>만약 빨간색으로 뭐라뭐라하면서 설치 안되면 PowerShell을 <code>관리자 권한으로 실행</code></li></ul></li><li>설치 확인<ul><li>정상적으로 설치가 되었다면 설치가 끝난 후 PowerShell에서 <code>choco</code>엔터를 치면 버전 확인이 됨</li></ul></li></ol><h3 id="FluentTerminal"><a href="#FluentTerminal" class="headerlink" title="FluentTerminal"></a>FluentTerminal</h3><ol><li>PowerShell 실행</li><li>choco로 FluentTerminal 설치 <figure class="highlight bash hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">> choco install fluent-terminal</span><br></pre></td></tr></table></figure><h3 id="oh-my-posh"><a href="#oh-my-posh" class="headerlink" title="oh-my-posh"></a>oh-my-posh</h3></li><li>choco로 ConEmu설치 <figure class="highlight bash hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">> choco install ConEmu</span><br></pre></td></tr></table></figure></li><li>설치 <figure class="highlight bash hljs"><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">> Install-Module posh-git</span><br><span class="line">> Install-Module oh-my-posh</span><br><span class="line">> Install-Module -Name PSReadLine</span><br><span class="line">> <span class="hljs-keyword">if</span> (!(Test-Path -Path <span class="hljs-variable">$PROFILE</span> )) { New-Item -Type File -Path <span class="hljs-variable">$PROFILE</span> -Force }</span><br></pre></td></tr></table></figure> 관리자 권한으로 해야 함</li><li>설정 <figure class="highlight bash hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">> notepad <span class="hljs-variable">$PROFILE</span></span><br></pre></td></tr></table></figure></li></ol><h2 id="끝"><a href="#끝" class="headerlink" title="끝"></a>끝</h2><p><img src="https://user-images.githubusercontent.com/48123604/67550404-5e631f00-f741-11e9-8d98-394a4c8bcfe9.png" alt="fluentTerminal"></p><p>FluentTerminal에서 font만 변경</p><p>라인 끝 <code>></code> 처리는 기본 폰트로 안됨</p><p>윈도우에서 WSL을 설치하고 WSL에서 zsh를 세팅한 후 FluentTerminal에서 WSL를 이용하면 zsh도 이용도 가능.</p><h1 id="참고"><a href="#참고" class="headerlink" title="참고"></a>참고</h1><p>| <a href="https://github.com/JanDeDobbeleer/oh-my-posh" target="_blank" rel="external nofollow noopener noreferrer">https://github.com/JanDeDobbeleer/oh-my-posh</a></p><p>| <a href="https://github.com/felixse/FluentTerminal" target="_blank" rel="external nofollow noopener noreferrer">https://github.com/felixse/FluentTerminal</a></p>]]></content>
<categories>
<category> 환경 </category>
</categories>
<tags>
<tag> shell </tag>
<tag> windows </tag>
<tag> zsh </tag>
<tag> oh-my-posh </tag>
</tags>
</entry>
<entry>
<title>gh-pages를 이용한 github.io에 게시하기</title>
<link href="/2019/08/31/gh-pages/"/>
<url>/2019/08/31/gh-pages/</url>
<content type="html"><![CDATA[<h1 id="ng-pages"><a href="#ng-pages" class="headerlink" title="ng-pages"></a>ng-pages</h1><h2 id="설치"><a href="#설치" class="headerlink" title="설치"></a>설치</h2><figure class="highlight bash hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ npm i gh-pages</span><br></pre></td></tr></table></figure><h2 id="package-json-설정"><a href="#package-json-설정" class="headerlink" title="package.json 설정"></a>package.json 설정</h2><p>“homepage”추가</p><p>http://<code><github ID></code>.github.io/<code><Repository Name></code></p><figure class="highlight hljs"><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">"name": "coin_explorer",</span><br><span class="line">"version": "0.1.0",</span><br><span class="line">...</span><br><span class="line">"homepage": "https://hicucu.github.io/ReactjsStudy-CoinExplorer/"</span><br></pre></td></tr></table></figure><p>script에 deploy, predeploy 추가</p><figure class="highlight hljs"><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">"scripts": {</span><br><span class="line"> "start": "react-scripts start",</span><br><span class="line"> "build": "react-scripts build",</span><br><span class="line"> ...</span><br><span class="line"> "deploy" : "gh-pages -d build",</span><br><span class="line"> "predeploy" : "npm run build"</span><br><span class="line"> },</span><br></pre></td></tr></table></figure><a id="more"></a><h2 id="실행"><a href="#실행" class="headerlink" title="실행"></a>실행</h2><figure class="highlight bash hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ npm run deploy</span><br></pre></td></tr></table></figure><p>deploy를 실행하면 predeploy가 먼저 동작하면서 build가 이루어지고 deploy가 됨</p><h2 id="기타"><a href="#기타" class="headerlink" title="기타"></a>기타</h2><p>| <a href="https://hicucu.github.io/ReactjsStudy-CoinExplorer">https://hicucu.github.io/ReactjsStudy-CoinExplorer</a></p><p>react-router-dom을 이용하여 routing을 구현하였지만 github 페이지에서는 라우팅설정이 안되서 정상적으로 동작하지는 않음</p><p>주소로 들어가서 메뉴 클릭으로 페이지 이동은 가능하지만 새로고침을 누르거나 </p><p><a href="https://hicucu.github.io/ReactjsStudy-CoinExplorer/coins">https://hicucu.github.io/ReactjsStudy-CoinExplorer/coins</a> 와 같은 주소를 직접 입력하면 404발생</p><p>그냥 가벼운 데모 정도로 사용하는 것 이상은 어렵지만 그거라도 감지덕지</p>]]></content>
<categories>
<category> github </category>
</categories>
<tags>
<tag> github </tag>
</tags>
</entry>
<entry>
<title>keyword</title>
<link href="/2019/08/27/keyword/"/>
<url>/2019/08/27/keyword/</url>
<content type="html"><![CDATA[<ul><li><p>prop-types</p><blockquote><p><a href="https://www.npmjs.com/package/prop-types" target="_blank" rel="external nofollow noopener noreferrer">https://www.npmjs.com/package/prop-types</a></p></blockquote></li><li><p>gh-pages</p><blockquote><p><a href="https://www.npmjs.com/package/gh-pages" target="_blank" rel="external nofollow noopener noreferrer">https://www.npmjs.com/package/gh-pages</a></p></blockquote></li><li><p>styled-components</p><blockquote><p><a href="https://github.com/styled-components/styled-components" target="_blank" rel="external nofollow noopener noreferrer">https://github.com/styled-components/styled-components</a></p></blockquote></li><li><p>styled-reset</p><blockquote><p><a href="https://github.com/zacanger/styled-reset" target="_blank" rel="external nofollow noopener noreferrer">https://github.com/zacanger/styled-reset</a></p></blockquote></li><li><p>react-router</p><blockquote><p><a href="https://reacttraining.com/react-router/web/guides/quick-start" target="_blank" rel="external nofollow noopener noreferrer">https://reacttraining.com/react-router/web/guides/quick-start</a></p></blockquote></li></ul>]]></content>
<categories>
<category> javascript </category>
<category> react </category>
</categories>
<tags>
<tag> javascript </tag>
<tag> react </tag>
</tags>
</entry>
<entry>
<title>내가 기억하려고 적어두는 javascript, html, css</title>
<link href="/2019/08/15/javascript-tip/"/>
<url>/2019/08/15/javascript-tip/</url>
<content type="html"><![CDATA[<h1 id="html-CSS"><a href="#html-CSS" class="headerlink" title="html / CSS"></a>html / CSS</h1><h2 id="node-vs-element"><a href="#node-vs-element" class="headerlink" title="node vs element"></a>node vs element</h2><p>node : 태그 노드와 텍스트 노드 전체<br>element : 텍스트 노드 제외</p><p>children : 텍스트 노드 제외<br>childNodes: 텍스트 노드 포함</p><hr><h2 id="선택자"><a href="#선택자" class="headerlink" title="선택자"></a>선택자</h2><p>id : 고유값, 중복 불가, #id명로 선택<br>class : 중복 가능, .class명으로 선택<br>[특정속성] : 특정 속성을 갖는 모든 요소<br>[특정속성=’’] : 특정 속성의 값이 ‘’인 요소</p><hr><h2 id="선택자-우선순위"><a href="#선택자-우선순위" class="headerlink" title="선택자 우선순위"></a>선택자 우선순위</h2><p>!important를 포함한 규칙 > 인라인 스타일 속성 > id선택자 > 클래스, 속성, 가상 선택자 > 요소 선택자 > 전체 선택자</p><p>높은 우선순위의 선택자를 더 많이 사용한 규칙이 우선<br>| #id .wrap .content div span > #id .content div span</p><p>head 안 style > style안 @import > link로 연결한 css > link로 연결한 css 안에 @import > 브라우저 기본</p><hr><h2 id="border-box-vs-content-box"><a href="#border-box-vs-content-box" class="headerlink" title="border-box vs content-box"></a>border-box vs content-box</h2><p>content-box : padding, border 영역을 제외한 크기를 width, heigh로 가짐</p><p>border-box : padding, border 영역을 포함한 width, height를 가짐</p><a id="more"></a><hr><h2 id="position"><a href="#position" class="headerlink" title="position"></a>position</h2><h3 id="static"><a href="#static" class="headerlink" title="static"></a>static</h3><p>기본, 좌에서 우, 위에서 아래 방향으로 쌓임</p><h3 id="relative"><a href="#relative" class="headerlink" title="relative"></a>relative</h3><p>top, right, bottom, left 속성을 사용한 위치 조절 가능</p><h3 id="absolute"><a href="#absolute" class="headerlink" title="absolute"></a>absolute</h3><p>가장 가까운 중 static이 아닌 요소를 기준으로 top, right, bottom, left 속성을 사용한 위치 조절 가능<br>!width:100%</p><h3 id="fixed"><a href="#fixed" class="headerlink" title="fixed"></a>fixed</h3><p>화면을 기준으로 top, right, bottom, left 속성을 사용한 위치<br>!width:100%</p><hr><h2 id="css-애니메이션-vs-js-애니메이션"><a href="#css-애니메이션-vs-js-애니메이션" class="headerlink" title="css 애니메이션 vs js 애니메이션"></a>css 애니메이션 vs js 애니메이션</h2><hr><h2 id="doctype"><a href="#doctype" class="headerlink" title="doctype"></a>doctype</h2><p>HTML은 버전 별로 지원하는 태그가 차이가 있어 어떤 버전의 HTML로 작성이 되었는지 미리 선언<br>웹 브라우저가 이를 통해 내용을 표시할 수 있도록 지원</p><hr><h2 id="i18n"><a href="#i18n" class="headerlink" title="i18n"></a>i18n</h2><hr><h2 id="전처리도구"><a href="#전처리도구" class="headerlink" title="전처리도구"></a>전처리도구</h2><p>sass, scss<br>css의 한계와 단점을 보완, 가독성과 재사용에 유리한 css생성을 위한 확장도구<br>css보다 심플한 표기법으로 css를 구조화<br>css에는 존재하지 않는 기능을 활용하여 유지보수 편의성 향상</p><hr><h1 id="javascript"><a href="#javascript" class="headerlink" title="javascript"></a>javascript</h1><h2 id="함수와-함수호이스팅"><a href="#함수와-함수호이스팅" class="headerlink" title="함수와 함수호이스팅"></a>함수와 함수호이스팅</h2><p>함수 선언문으로 정의한 함수와 함수 표현식으로 정의한 함수의 생성 시점은 다름<br>함수 선언문도 선언문으로 코드가 순차적으로 실행되기 이전에 자바스크립트 엔진에 의해 먼저 실행 => 호이스팅</p><p>함수 선언문으로 함수를 정의하면 자바스크립트 엔진에 의해 다른 코드가 실행되기 이전에 함수명과 동일한 이름의 변수를 암묵적 선언하고 객체를 생성하여 할당<br>-> 코드가 실행되기 이전에 이미 객체가 생성되고 함수명과 동일한 변수에 할당 -> 함수 선언문 이전에 함수를 참조, 호출가능</p><hr><h2 id="동기-vs-비동기"><a href="#동기-vs-비동기" class="headerlink" title="동기 vs 비동기"></a>동기 vs 비동기</h2><p>동기식 : 직렬적 작업 수행 -> 순차적으로 실행되며 어떤 작업이 수행 중이면 다음 작업은 대기<br>비동기식 : 병렬적 작업 수행 -> 작업이 종료되지 않은 상태에서도 대기하지 않고 다음 작업을 실행</p><p>서버에서 데이터를 가져오는 경우 동기식은 서버에서 데이터가 응답 될 때까지 이후 작업이 블록킹상태가 되며, 비동기식은 서버에 데이터를 요청한 후 서버의 응답을 기다리지 않고 다음 작업을 수행, 이후 서버로부터 데이터가 응답되면 이벤트가 발생하여 해당 데이터를 사용할 작업 수행</p><hr><h2 id="ajax"><a href="#ajax" class="headerlink" title="ajax"></a>ajax</h2><p>Asynchronous JavaScript and XML<br>자바스크립트를 이용한 비동기적 통신방법<br>서버로부터 페이지가 반환되면 화면 전체를 갱신하는데 이를 일부 페이지만 갱신하여 동일한 효과를 볼 수 있도록 함<br>페이지 전체를 로드하여 렌더링하지 않고 갱신이 필요한 일부만 로드하기 때문에 빠른 퍼포먼스와 부드러운 화면 표시 효과 가능</p><hr><h2 id="콜백-헬"><a href="#콜백-헬" class="headerlink" title="콜백 헬"></a>콜백 헬</h2><p>비동기식 처리를 위해 콜백 패턴을 사용하면 처리 순서를 보장하기 위해 여러 개의 콜백 함수가 중첩되어 복잡도가 높아지는 현생이 발생<br>가독성이 나빠지며 실수를 유발</p><p>콜백 방식의 비동기 처리를 하면 에러처리가 곤란</p><hr><h2 id="promise"><a href="#promise" class="headerlink" title="promise"></a>promise</h2><p>Promise 생성자 함수를 통해 인스턴스화<br>비동기 작업을 수행할 콜백 함수를 인자로 전달받는데 이 콜백 함수는 resolve와 reject 함수를 인자로 전달받음</p><p>Promise 생성자 함수가 인자로 전달받은 콜백 함수 내부에서 비동기 처리 작업을 수행<br>처리가 성공하면 resolve함수를 호출<br>실패하면 reject함수를 호출</p><p>Promise로 구현된 비동기 함수는 반환값으로 Promise객체를 반환</p><p>Promise객체를 반환한 비동기 함수는 프로미스 후속 처리 메소드인 then이나 catch 메소드를 사용 가능<br>-> then 메소드가 Promise를 반환하면 여러개의 프로미스를 연결하여 사용가능 -> 콜백 헬을 후속처리 메소드의 체이닝을 통해 해결</p><hr><h2 id="fetch-async-await"><a href="#fetch-async-await" class="headerlink" title="fetch, async/await"></a>fetch, async/await</h2><hr><h1 id="SPA"><a href="#SPA" class="headerlink" title="SPA"></a>SPA</h1><h2 id="Component"><a href="#Component" class="headerlink" title="Component"></a>Component</h2><hr><h2 id="ssr-vs-csr"><a href="#ssr-vs-csr" class="headerlink" title="ssr vs csr"></a>ssr vs csr</h2><p>렌더링 : 어떤 웹 페이지 접속시, 그 페이지를 화면에 그려주는 것</p><p>ssr : 요청마다 새로고침이 일어나며 서버에 새로운 페이지에 대한 요청을 하는 방식 -> 서버측에서 HTML&view를 생성하여 응답하는 방식<br>csr : 서버에서는 빈 체이지를 제공하고 view에 대해서는 client에서 자바스크립트를 통해 렌더링하는 방식 -> 클라이언트에서 view를 생성</p><p>ssr은 view를 서버에서 렌더링하여 가져오기 때문에 첫 로딩이 짧지만 csr은 서버에서 view를 렌더하지 않고 html과 js등의 파일을 다운받은 후 브라우져에서 렌더링하여 보여주기 때문에 초기 로딩시간이 상대적으로 길어짐</p><p>ssr은 view를 생성하기 위해 자바스크립트가 필요하고 그 전까진 HTML의 내용이 이어있어 제대로 데이터 수집이 어려움 -> seo 어려움</p><hr>]]></content>
<categories>
<category> Javascript </category>
<category> html </category>
<category> css </category>
</categories>
<tags>
<tag> Javascript </tag>
<tag> html </tag>
<tag> css </tag>
</tags>
</entry>
<entry>
<title>aws-angular-todolist-2</title>
<link href="/2019/06/30/aws-angular-todolist-2/"/>
<url>/2019/06/30/aws-angular-todolist-2/</url>
<content type="html"><![CDATA[<h1 id="AWS-STUDY"><a href="#AWS-STUDY" class="headerlink" title="AWS STUDY"></a>AWS STUDY</h1><ol><li><p><a href="https://hicucu.github.io/2019/06/07/aws-putty-ec2/">PuTTY로 aws ec2로 만든 리눅스 환경 접속하기</a></p></li><li><p><a href="https://hicucu.github.io/2019/06/07/aws-ec2npm/">ec2에-npm-설치</a></p></li><li><p><a href="https://hicucu.github.io/2019/06/08/aws-express-helloworld-port/">express설치하고 helloworld 출력하기 feat 포트 열기</a></p></li><li><p><a href="https://hicucu.github.io/2019/06/30/aws-angular-todolist-1/">AWS, Angular를 이용한 todo-list 만들기(1)</a></p></li><li><p><a href="https://hicucu.github.io/2019/06/30/aws-angular-todolist-2/">AWS, Angular를 이용한 todo-list 만들기(2)</a></p></li></ol><hr><h1 id="AWS-Angular를-이용한-todo-list-만들기-2"><a href="#AWS-Angular를-이용한-todo-list-만들기-2" class="headerlink" title="AWS, Angular를 이용한 todo-list 만들기(2)"></a>AWS, Angular를 이용한 todo-list 만들기(2)</h1><h2 id="메서드-추가-생성"><a href="#메서드-추가-생성" class="headerlink" title="메서드 추가 생성"></a>메서드 추가 생성</h2><p>API Gateway에서 <code>/</code>선택 후 <code>작업</code>-<code>메서드 생성</code></p><p><code>GET</code>선택 후 <code>myTodos</code> 함수 선택</p><p><code>PATCH</code>와 <code>POST</code> 만들고 <code>myTodos</code> 선택</p><p><img src="https://user-images.githubusercontent.com/48123604/60394461-b60cc780-9b5f-11e9-9415-76814f52eb1a.png" alt="image"></p><h3 id="매칭-템플릿-생성"><a href="#매칭-템플릿-생성" class="headerlink" title="매칭 템플릿 생성"></a>매칭 템플릿 생성</h3><p><code>application/json</code>, <code>메소드 요청 패스스루</code>로 <code>GET</code>, <code>PATCH</code>, <code>POST</code>에 각각 추가</p><h2 id="요청에-따라-다른-응답-만들기"><a href="#요청에-따라-다른-응답-만들기" class="headerlink" title="요청에 따라 다른 응답 만들기"></a>요청에 따라 다른 응답 만들기</h2><h3 id="요청-구분"><a href="#요청-구분" class="headerlink" title="요청 구분"></a>요청 구분</h3><p>path”: {<br> “id”: “2”<br> } 처럼 path에 id가 있으면 해당 id에 대한 요청</p><p>path가 비어 있으면 todos에 대한 요청</p><a id="more"></a><h3 id="Lambda-코드-수정"><a href="#Lambda-코드-수정" class="headerlink" title="Lambda 코드 수정"></a>Lambda 코드 수정</h3><figure class="highlight javascript hljs"><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="hljs-keyword">const</span> routeMap = {</span><br><span class="line"> <span class="hljs-string">"/"</span>: {</span><br><span class="line"> GET: <span class="hljs-function"><span class="hljs-params">()</span> =></span> {</span><br><span class="line"> <span class="hljs-keyword">const</span> result = <span class="hljs-string">"전체 todos"</span>;</span><br><span class="line"> <span class="hljs-keyword">return</span> result;</span><br><span class="line"> },</span><br><span class="line"> PATCH: <span class="hljs-function"><span class="hljs-params">event</span> =></span> {</span><br><span class="line"> <span class="hljs-keyword">const</span> modifyALL = event[<span class="hljs-string">"body-json"</span>];</span><br><span class="line"> <span class="hljs-keyword">const</span> result = { modifyALL };</span><br><span class="line"> <span class="hljs-keyword">return</span> result;</span><br><span class="line"> },</span><br><span class="line"> POST: <span class="hljs-function"><span class="hljs-params">event</span> =></span> {</span><br><span class="line"> <span class="hljs-keyword">const</span> add = event[<span class="hljs-string">"body-json"</span>];</span><br><span class="line"> <span class="hljs-keyword">const</span> result = { add };</span><br><span class="line"> <span class="hljs-keyword">return</span> result;</span><br><span class="line"> }</span><br><span class="line"> },</span><br><span class="line"> <span class="hljs-string">"/{id}"</span>: {</span><br><span class="line"> PATCH: <span class="hljs-function"><span class="hljs-params">event</span> =></span> {</span><br><span class="line"> <span class="hljs-keyword">const</span> modify = event[<span class="hljs-string">"body-json"</span>];</span><br><span class="line"> <span class="hljs-keyword">const</span> target = event.params.path.id;</span><br><span class="line"> <span class="hljs-keyword">const</span> result = { target, modify };</span><br><span class="line"> <span class="hljs-keyword">return</span> result;</span><br><span class="line"> },</span><br><span class="line"> DELETE: <span class="hljs-function"><span class="hljs-params">event</span> =></span> {</span><br><span class="line"> <span class="hljs-keyword">const</span> target = event.params.path.id;</span><br><span class="line"> <span class="hljs-keyword">const</span> result = { target };</span><br><span class="line"> <span class="hljs-keyword">return</span> result;</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="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">router</span>(<span class="hljs-params">event</span>) </span>{</span><br><span class="line"> <span class="hljs-keyword">const</span> method =</span><br><span class="line"> routeMap[event.context[<span class="hljs-string">"resource-path"</span>]][event.context[<span class="hljs-string">"http-method"</span>]];</span><br><span class="line"> <span class="hljs-keyword">if</span> (method) <span class="hljs-keyword">return</span> method(event);</span><br><span class="line"> <span class="hljs-keyword">else</span> <span class="hljs-keyword">return</span> { <span class="hljs-attr">body</span>: { <span class="hljs-attr">Error</span>: <span class="hljs-string">"Invalid Path"</span> } };</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">exports.handler = <span class="hljs-keyword">async</span> event => {</span><br><span class="line"> <span class="hljs-comment">// TODO implement</span></span><br><span class="line"> <span class="hljs-comment">// const response = {</span></span><br><span class="line"> <span class="hljs-comment">// httpMethod : event.context["http-method"],</span></span><br><span class="line"> <span class="hljs-comment">// resourcePath : event.context["resource-path"],</span></span><br><span class="line"> <span class="hljs-comment">// path : event.params.path,</span></span><br><span class="line"> <span class="hljs-comment">// body : event["body-json"]</span></span><br><span class="line"> <span class="hljs-comment">// };</span></span><br><span class="line"> <span class="hljs-keyword">const</span> response = router(event);</span><br><span class="line"> <span class="hljs-keyword">return</span> response;</span><br><span class="line">};</span><br></pre></td></tr></table></figure><p>각 메서드에 따른 실제 DB구현은 다음에</p>]]></content>
<categories>
<category> aws </category>
</categories>
<tags>
<tag> aws </tag>
<tag> ec2 </tag>
<tag> lambda </tag>
<tag> angular </tag>
</tags>
</entry>
<entry>
<title>aws-angular-todolist-1</title>
<link href="/2019/06/30/aws-angular-todolist-1/"/>
<url>/2019/06/30/aws-angular-todolist-1/</url>
<content type="html"><![CDATA[<h1 id="AWS-STUDY"><a href="#AWS-STUDY" class="headerlink" title="AWS STUDY"></a>AWS STUDY</h1><ol><li><p><a href="https://hicucu.github.io/2019/06/07/aws-putty-ec2/">PuTTY로 aws ec2로 만든 리눅스 환경 접속하기</a></p></li><li><p><a href="https://hicucu.github.io/2019/06/07/aws-ec2npm/">ec2에-npm-설치</a></p></li><li><p><a href="https://hicucu.github.io/2019/06/08/aws-express-helloworld-port/">express설치하고 helloworld 출력하기 feat 포트 열기</a></p></li><li><p><a href="https://hicucu.github.io/2019/06/30/aws-angular-todolist-1/">AWS, Angular를 이용한 todo-list 만들기(1)</a></p></li><li><p><a href="https://hicucu.github.io/2019/06/30/aws-angular-todolist-2/">AWS, Angular를 이용한 todo-list 만들기(2)</a></p></li></ol><hr><h1 id="AWS-Angular를-이용한-todo-list-만들기-1"><a href="#AWS-Angular를-이용한-todo-list-만들기-1" class="headerlink" title="AWS, Angular를 이용한 todo-list 만들기(1)"></a>AWS, Angular를 이용한 todo-list 만들기(1)</h1><h2 id="AWS"><a href="#AWS" class="headerlink" title="AWS"></a>AWS</h2><p>API Gateway, Lambda, DynamoDB를 이용한 Server less 구축</p><h2 id="API-Gateway-만들기"><a href="#API-Gateway-만들기" class="headerlink" title="API Gateway 만들기"></a>API Gateway 만들기</h2><h3 id="구성"><a href="#구성" class="headerlink" title="구성"></a>구성</h3><p>AWS의 API Gateway와 AWS의 Lambda를 이용하여 Client의 요청을 받음</p><p><code>GET</code> ~/todos => todo list 전체 전달</p><p><code>PATCH</code> ~/todos => todo list 전체의 completed 일괄 변경</p><p><code>POST</code> ~/todos => todo list의 새로운 todo 등록</p><p><code>PATCH</code> ~/todos/{id} => 해당 id의 todo 변경</p><p><code>DELETE</code> ~/todos/{id} => 해당 id의 todo 삭제</p><a id="more"></a><h3 id="API-생성"><a href="#API-생성" class="headerlink" title="API 생성"></a>API 생성</h3><p><img src="https://user-images.githubusercontent.com/48123604/60394027-b6ee2b00-9b58-11e9-9366-015ded2c2959.png" alt="image"></p><p>todos API 생성</p><h3 id="API-설정"><a href="#API-설정" class="headerlink" title="API 설정"></a>API 설정</h3><p><img src="https://user-images.githubusercontent.com/48123604/60394048-05032e80-9b59-11e9-9e4a-3c46c9e94d47.png" alt="image"></p><p><code>작업</code> - <code>리소스 생성</code> 클릭</p><p>리소스 이름을 id로 리소스 경로를 <code>{id}</code> 설정</p><p><code>{}</code>를 이용하면 경로 파라미터가 됨</p><h2 id="Lambda-만들기"><a href="#Lambda-만들기" class="headerlink" title="Lambda 만들기"></a>Lambda 만들기</h2><p><img src="https://user-images.githubusercontent.com/48123604/60394070-61664e00-9b59-11e9-8cac-c30400c05134.png" alt="image"></p><p>myTodos 함수 생성</p><h3 id="경로와-요청-확인을-위한-TEST-코드-작성"><a href="#경로와-요청-확인을-위한-TEST-코드-작성" class="headerlink" title="경로와 요청 확인을 위한 TEST 코드 작성"></a>경로와 요청 확인을 위한 TEST 코드 작성</h3><figure class="highlight javascript hljs"><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">exports.handler = <span class="hljs-keyword">async</span> (event, context) => {</span><br><span class="line"> <span class="hljs-comment">// TODO implement</span></span><br><span class="line"> <span class="hljs-keyword">const</span> response = { </span><br><span class="line"> httpMethod : event.context[<span class="hljs-string">"http-method"</span>],</span><br><span class="line"> resourcePath : event.context[<span class="hljs-string">"resource-path"</span>],</span><br><span class="line"> path : event.params.path,</span><br><span class="line"> body : event[<span class="hljs-string">"body-json"</span>]</span><br><span class="line"> };</span><br><span class="line"> <span class="hljs-keyword">return</span> response;</span><br><span class="line">};</span><br></pre></td></tr></table></figure><h2 id="API-Gateway와-Lambda-연결"><a href="#API-Gateway와-Lambda-연결" class="headerlink" title="API Gateway와 Lambda 연결"></a>API Gateway와 Lambda 연결</h2><p>API Gateway에서 <code>{id}</code>선택 후 <code>작업</code> - <code>메서드 생성</code> - <code>any</code>선택</p><p>{id}-ANY-설정에서 위에서 만든 Lambda함수 선택</p><p><img src="https://user-images.githubusercontent.com/48123604/60394184-53b1c800-9b5b-11e9-93f1-15597d5687d2.png" alt="image"></p><h3 id="통합요청-설정"><a href="#통합요청-설정" class="headerlink" title="통합요청 설정"></a>통합요청 설정</h3><p><code>통합요청</code> 선택</p><p>하단의 <code>매핑 템플릿</code> 선택</p><p><code>매핑 템플릿 추가</code> 클릭 후 application/json추가</p><p>하단 템플릿 생성에서 <code>메서드 요청 패스스루</code> 선택 후 저장</p><h3 id="테스트"><a href="#테스트" class="headerlink" title="테스트"></a>테스트</h3><h2 id><a href="#" class="headerlink" title></a><img src="https://user-images.githubusercontent.com/48123604/60394216-c4f17b00-9b5b-11e9-98f7-e71c10fa7a87.png" alt="image"></h2><p><code>메서드</code>에서 <code>DELETE</code>선택, <code>경로</code>의 <code>{id}</code>에 <code>2</code>입력</p><p><img src="https://user-images.githubusercontent.com/48123604/60394295-e4d56e80-9b5c-11e9-9c99-53d27c0362db.png" alt="image"></p><hr><p><code>메서드</code>에서 <code>PATCH</code>선택, <code>경로</code>의 <code>{id}</code>에 <code>2</code>입력, <code>요청 본문</code>에<br><figure class="highlight json hljs"><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><br><span class="line"> <span class="hljs-attr">"content"</span>:<span class="hljs-string">"AWS"</span>,</span><br><span class="line"> <span class="hljs-attr">"completed"</span>:<span class="hljs-literal">true</span></span><br><span class="line">}</span><br></pre></td></tr></table></figure></p><p>입력</p><p><img src="https://user-images.githubusercontent.com/48123604/60394323-501f4080-9b5d-11e9-8e70-0427c61c451d.png" alt="image"></p>]]></content>
<categories>
<category> aws </category>
</categories>
<tags>
<tag> aws </tag>
<tag> ec2 </tag>
<tag> lambda </tag>
<tag> angular </tag>
</tags>
</entry>
<entry>
<title>eslint, Babel, Webpack을 이용한 개발환경 구축</title>
<link href="/2019/06/16/Env-Con-babel-webpack/"/>
<url>/2019/06/16/Env-Con-babel-webpack/</url>
<content type="html"><![CDATA[<h1 id="개발-환경-구축"><a href="#개발-환경-구축" class="headerlink" title="개발 환경 구축"></a>개발 환경 구축</h1><p>vscode에서 eslint, bable, webpack을 설치하고 개발환경을 구출</p><h2 id="폴더-생성-및-프로젝트-init"><a href="#폴더-생성-및-프로젝트-init" class="headerlink" title="폴더 생성 및 프로젝트 init"></a>폴더 생성 및 프로젝트 init</h2><figure class="highlight bash hljs"><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">$ mkdir <project-name> && <span class="hljs-built_in">cd</span> <project-name></span><br><span class="line">$ npm init -y</span><br></pre></td></tr></table></figure><p><code>-y</code>를 입력하면 package name, version등의 질문없이 <code>package.json</code>파일을 생성</p><a id="more"></a><h2 id="eslint"><a href="#eslint" class="headerlink" title="eslint"></a>eslint</h2><h3 id="eslint-설치"><a href="#eslint-설치" class="headerlink" title="eslint 설치"></a>eslint 설치</h3><figure class="highlight bash hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ npm install --save-dev eslint eslint-config-airbnb-base eslint-plugin-import eslint-plugin-html</span><br></pre></td></tr></table></figure><p><code>--save-dev</code>를 사용하면 배포시에는 포함되지 않음</p><h3 id="vscode-eslint-extension-설치"><a href="#vscode-eslint-extension-설치" class="headerlink" title="vscode eslint extension 설치"></a>vscode eslint extension 설치</h3><p><a href="https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint" target="_blank" rel="external nofollow noopener noreferrer">VS Code ESLint extension</a> 설치</p><p><code>VSCode</code>의 <code>settings</code>에서</p><p><code>eslint: validate</code>검색 - <code>edit in settings.json</code> 선택<br>or<br><code>open settings (json)</code> 선택 후</p><p><code>"eslint.validate": ["javascript", "html"]</code>추가</p><h3 id="eslintrc-js"><a href="#eslintrc-js" class="headerlink" title=".eslintrc.js"></a>.eslintrc.js</h3><p><code>.eslintrc.js</code> 생성 및 룰셋</p><figure class="highlight javascript hljs"><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="hljs-built_in">module</span>.exports = {</span><br><span class="line"> env: {</span><br><span class="line"> browser: <span class="hljs-literal">true</span>,</span><br><span class="line"> commonjs: <span class="hljs-literal">true</span>,</span><br><span class="line"> es6: <span class="hljs-literal">true</span>,</span><br><span class="line"> node: <span class="hljs-literal">true</span>,</span><br><span class="line"> jquery: <span class="hljs-literal">true</span></span><br><span class="line"> },</span><br><span class="line"> extends: <span class="hljs-string">"airbnb-base"</span>,</span><br><span class="line"> plugins: [<span class="hljs-string">"import"</span>, <span class="hljs-string">"html"</span>],</span><br><span class="line"> rules: {</span><br><span class="line"> <span class="hljs-comment">// 0 "off", 1 "warn" 2 "error"</span></span><br><span class="line"> <span class="hljs-string">"no-var"</span>: <span class="hljs-number">2</span>,</span><br><span class="line"> <span class="hljs-string">"no-console"</span>: <span class="hljs-string">"warn"</span>,</span><br><span class="line"> <span class="hljs-string">"quotes"</span>: [<span class="hljs-string">"error"</span>, <span class="hljs-string">"single"</span>],</span><br><span class="line"> <span class="hljs-string">"no-underscore-dangle"</span>: <span class="hljs-string">"warn"</span>,</span><br><span class="line"> <span class="hljs-string">"no-plusplus"</span>: [<span class="hljs-string">"error"</span>, { <span class="hljs-string">"allowForLoopAfterthoughts"</span>: <span class="hljs-literal">true</span> }],</span><br><span class="line"> <span class="hljs-string">"comma-dangle"</span>: [<span class="hljs-string">"error"</span>, <span class="hljs-string">"never"</span>],</span><br><span class="line"> <span class="hljs-string">"no-nested-ternary"</span>: <span class="hljs-number">0</span>,</span><br><span class="line"> <span class="hljs-string">"func-names"</span>: <span class="hljs-number">0</span>,</span><br><span class="line"> <span class="hljs-string">"prefer-template"</span>: <span class="hljs-number">0</span>,</span><br><span class="line"> <span class="hljs-string">"no-underscore-dangle"</span>: <span class="hljs-number">0</span>,</span><br><span class="line"> <span class="hljs-string">"no-useless-return"</span>: <span class="hljs-number">0</span>,</span><br><span class="line"> <span class="hljs-string">"class-methods-use-this"</span>: <span class="hljs-number">1</span> </span><br><span class="line"> }</span><br><span class="line">};</span><br></pre></td></tr></table></figure><p><code>rules</code>는 개인에 맞게</p><h2 id="Babel"><a href="#Babel" class="headerlink" title="Babel"></a>Babel</h2><p>Babel: ES6+ 코드를 ES5 이하 버전으로 트랜스파일링</p><h3 id="설치"><a href="#설치" class="headerlink" title="설치"></a>설치</h3><figure class="highlight bash hljs"><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">$ npm install --save-dev @babel/cli @babel/core @babel/plugin-proposal-class-properties @babel/preset-env</span><br><span class="line"></span><br><span class="line">$ npm install @babel/polyfill</span><br></pre></td></tr></table></figure><h2 id="Webpack"><a href="#Webpack" class="headerlink" title="Webpack"></a>Webpack</h2><p>Webpack: 의존 관계에 있는 모듈들을 하나의 자바스크립트 파일로 번들링하는 모듈 번들러</p><p>Babel과 Sass의 컴파일로 Webpack으로 관리</p><h3 id="설치-1"><a href="#설치-1" class="headerlink" title="설치"></a>설치</h3><figure class="highlight bash hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ npm install --save-dev babel-loader css-loader mini-css-extract-plugin node-sass sass-loader style-loader webpack webpack-cli</span><br></pre></td></tr></table></figure><h3 id="webpack-config-js"><a href="#webpack-config-js" class="headerlink" title="webpack.config.js"></a>webpack.config.js</h3><figure class="highlight javascript hljs"><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></pre></td><td class="code"><pre><span class="line"><span class="hljs-keyword">const</span> path = <span class="hljs-built_in">require</span>(<span class="hljs-string">'path'</span>);</span><br><span class="line"><span class="hljs-keyword">const</span> MiniCssExtractPlugin = <span class="hljs-built_in">require</span>(<span class="hljs-string">'mini-css-extract-plugin'</span>);</span><br><span class="line"></span><br><span class="line"><span class="hljs-built_in">module</span>.exports = {</span><br><span class="line"> <span class="hljs-comment">// entry files</span></span><br><span class="line"> entry: [<span class="hljs-string">'@babel/polyfill'</span>, <span class="hljs-string">'./src/js/app.js'</span>, <span class="hljs-string">'./src/sass/style.scss'</span>],</span><br><span class="line"> <span class="hljs-comment">// 컴파일 + 번들링된 js 파일이 저장될 경로와 이름 지정</span></span><br><span class="line"> output: {</span><br><span class="line"> <span class="hljs-comment">// 트랜스파일링된 소스 코드는 public에 저장된다.</span></span><br><span class="line"> path: path.resolve(__dirname, <span class="hljs-string">'public'</span>),</span><br><span class="line"> filename: <span class="hljs-string">'js/bundle.js'</span></span><br><span class="line"> },</span><br><span class="line"> plugins: [</span><br><span class="line"> <span class="hljs-comment">// 트랜스파일링 + 번들링 CSS 파일이 저장될 경로와 이름 지정</span></span><br><span class="line"> <span class="hljs-keyword">new</span> MiniCssExtractPlugin({ <span class="hljs-attr">filename</span>: <span class="hljs-string">'css/style.css'</span> })</span><br><span class="line"> ],</span><br><span class="line"> <span class="hljs-built_in">module</span>: {</span><br><span class="line"> rules: [</span><br><span class="line"> {</span><br><span class="line"> test: <span class="hljs-regexp">/\.js$/</span>,</span><br><span class="line"> include: [</span><br><span class="line"> path.resolve(__dirname, <span class="hljs-string">'src/js'</span>)</span><br><span class="line"> ],</span><br><span class="line"> use: {</span><br><span class="line"> loader: <span class="hljs-string">'babel-loader'</span>,</span><br><span class="line"> options: {</span><br><span class="line"> presets: [<span class="hljs-string">'@babel/preset-env'</span>],</span><br><span class="line"> plugins: [<span class="hljs-string">'@babel/plugin-proposal-class-properties'</span>]</span><br><span class="line"> }</span><br><span class="line"> },</span><br><span class="line"> exclude: <span class="hljs-regexp">/node_modules/</span></span><br><span class="line"> },</span><br><span class="line"> {</span><br><span class="line"> test: <span class="hljs-regexp">/\.scss$/</span>,</span><br><span class="line"> use: [</span><br><span class="line"> MiniCssExtractPlugin.loader,</span><br><span class="line"> <span class="hljs-string">'css-loader'</span>,</span><br><span class="line"> <span class="hljs-string">'sass-loader?outputStyle=expanded'</span></span><br><span class="line"> <span class="hljs-comment">// 'sass-loader?outputStyle=compressed'</span></span><br><span class="line"> ],</span><br><span class="line"> exclude: <span class="hljs-regexp">/node_modules/</span></span><br><span class="line"> }</span><br><span class="line"> ]</span><br><span class="line"> },</span><br><span class="line"> devtool: <span class="hljs-string">'source-map'</span>,</span><br><span class="line"> <span class="hljs-comment">// https://webpack.js.org/concepts/mode/#mode-development</span></span><br><span class="line"> mode: <span class="hljs-string">'development'</span></span><br><span class="line">};</span><br></pre></td></tr></table></figure><blockquote><p>poiemaweb.com</p></blockquote><h2 id="package-json-수정"><a href="#package-json-수정" class="headerlink" title="package.json 수정"></a>package.json 수정</h2><figure class="highlight hljs"><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">"scripts": {</span><br><span class="line"> "test": "echo \"Error: no test specified\" && exit 1"</span><br><span class="line"> },</span><br></pre></td></tr></table></figure><p><code>"scripts"</code> 를 수정</p><figure class="highlight hljs"><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">"scripts": {</span><br><span class="line"> "build": "webpack -w"</span><br><span class="line"> },</span><br></pre></td></tr></table></figure><p><code>npm build</code>를 통해 webpack을 실행하면 감시와 함께 <code>webpack</code>이 <code>bable</code>과 <code>sass</code>를 로드하여 트랜스파일링한 후 해당 소스를 이용하여 파일을 생성</p><h2 id="디렉토리"><a href="#디렉토리" class="headerlink" title="디렉토리"></a>디렉토리</h2><h3 id="구조"><a href="#구조" class="headerlink" title="구조"></a>구조</h3><pre>Project/├─ public/ # root├─ src/ # source│ ├─ js/│ └─ sass/│ └─ partials/</pre><h1 id="테스트"><a href="#테스트" class="headerlink" title="테스트"></a>테스트</h1><p><img src="https://user-images.githubusercontent.com/48123604/59560812-b92d9100-9052-11e9-9612-0d18c81c7952.png" alt="image"></p><p>파일들 준비</p><p><img src="https://user-images.githubusercontent.com/48123604/59560828-e712d580-9052-11e9-8114-d5360aa9a144.png" alt="image"></p><figure class="highlight bash hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ npm run build</span><br></pre></td></tr></table></figure><p><img src="https://user-images.githubusercontent.com/48123604/59560838-090c5800-9053-11e9-9fe3-18d5cd5750a2.png" alt="image"></p><p>완료</p>]]></content>
<categories>
<category> 환경 </category>
</categories>
<tags>
<tag> 환경 </tag>
<tag> eslint </tag>
<tag> Babel </tag>
<tag> Webpack </tag>
<tag> VSCode </tag>
</tags>
</entry>
<entry>
<title>ec2 아마존 리눅스에 MonogoDB install</title>
<link href="/2019/06/09/aws-mongodb-install/"/>
<url>/2019/06/09/aws-mongodb-install/</url>
<content type="html"><![CDATA[<h1 id="AWS-STUDY"><a href="#AWS-STUDY" class="headerlink" title="AWS STUDY"></a>AWS STUDY</h1><ol><li><p><a href="https://hicucu.github.io/2019/06/07/aws-putty-ec2/">PuTTY로 aws ec2로 만든 리눅스 환경 접속하기</a></p></li><li><p><a href="https://hicucu.github.io/2019/06/07/aws-ec2npm/">ec2에-npm-설치</a></p></li><li><p><a href="https://hicucu.github.io/2019/06/08/aws-express-helloworld-port/">express설치하고 helloworld 출력하기 feat 포트 열기</a></p></li><li><p><a href="https://hicucu.github.io/2019/06/30/aws-angular-todolist-1/">AWS, Angular를 이용한 todo-list 만들기(1)</a></p></li><li><p><a href="https://hicucu.github.io/2019/06/30/aws-angular-todolist-2/">AWS, Angular를 이용한 todo-list 만들기(2)</a></p></li></ol><hr><h1 id="MonogoDB-install"><a href="#MonogoDB-install" class="headerlink" title="MonogoDB install"></a>MonogoDB install</h1><p><a href="https://docs.mongodb.com/manual/tutorial/install-mongodb-on-amazon/" target="_blank" rel="external nofollow noopener noreferrer">Install MongoDB Community Edition on Amazon Linux</a>을 참고하여 설치합시다.</p><h2 id="설치"><a href="#설치" class="headerlink" title="설치"></a>설치</h2><h3 id="1-Configure-the-package-management-system-yum"><a href="#1-Configure-the-package-management-system-yum" class="headerlink" title="1. Configure the package management system (yum)."></a>1. Configure the package management system (yum).</h3><p> vi로 <code>/etc/yum.repos.d/mongodb-org-4.0.repo</code>을 열어서 </p> <figure class="highlight bash hljs"><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">[mongodb-org-4.0]</span><br><span class="line">name=MongoDB Repository</span><br><span class="line">baseurl=https://repo.mongodb.org/yum/amazon/2013.03/mongodb-org/4.0/x86_64/</span><br><span class="line">gpgcheck=1</span><br><span class="line">enabled=1</span><br><span class="line">gpgkey=https://www.mongodb.org/static/pgp/server-4.0.asc</span><br></pre></td></tr></table></figure><p> 을 넣어줍니다.</p><p> 저장이 안된다면 <code>vi</code>를 열 때 <code>sudo</code>를 이용하면 됩니다.<br> 저는…<br><a id="more"></a></p><h3 id="2-Install-the-MongoDB-packages"><a href="#2-Install-the-MongoDB-packages" class="headerlink" title="2. Install the MongoDB packages"></a>2. Install the MongoDB packages</h3> <figure class="highlight bash hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ udo yum install -y mongodb-org</span><br></pre></td></tr></table></figure><h3 id="3-실행확인"><a href="#3-실행확인" class="headerlink" title="3. 실행확인"></a>3. 실행확인</h3><p> <code>2. Install the MongoDB packages</code>에서 <code>Complete!</code>가 나왔다면 성공입니다.</p> <figure class="highlight bash hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ sudo service mongod start</span><br></pre></td></tr></table></figure><p> <code>ok</code>를 확인 할 수 있습니다.</p> <figure class="highlight bash hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ sudo mongo</span><br></pre></td></tr></table></figure><p> mongodb의 shell을 실행할 수 있습니다.</p> <figure class="highlight bash hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ sudo service mongod stop</span><br></pre></td></tr></table></figure><p> bye~</p><h2 id="로컬에서-접속해보기"><a href="#로컬에서-접속해보기" class="headerlink" title="로컬에서 접속해보기"></a>로컬에서 접속해보기</h2><h3 id="1-aws에-포트-열기"><a href="#1-aws에-포트-열기" class="headerlink" title="1. aws에 포트 열기"></a>1. aws에 포트 열기</h3><p><a href="https://hicucu.github.io/2019/06/08/aws-express-helloworld-port/">express설치하고 helloworld 출력하기 feat 포트 열기</a>에서 진행했던 포트 열기를 또 합니다.</p><p>이번에는 <code>27017</code>를 추가합니다.</p><p><img src="https://user-images.githubusercontent.com/48123604/59157156-bf66bf00-8ae0-11e9-89f1-2428612006e3.png" alt="image"></p><h3 id="2-MongoDB-conf-수정"><a href="#2-MongoDB-conf-수정" class="headerlink" title="2. MongoDB conf 수정"></a>2. MongoDB conf 수정</h3><p>db가 stop된 상태에서 진행합니다.</p><figure class="highlight bash hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">sudo vi /etc/mongod.conf</span><br></pre></td></tr></table></figure><p>를 이용하여 conf파일을 열어줍니다.</p><p><img src="https://user-images.githubusercontent.com/48123604/59157364-7ca6e600-8ae4-11e9-9cc1-884e14232796.png" alt="image"></p><p>127.0.0.1을 0.0.0.0으로 변경해줍니다.</p><h3 id="local의-MongoDB-compass-community에서-확인"><a href="#local의-MongoDB-compass-community에서-확인" class="headerlink" title="local의 MongoDB compass community에서 확인"></a>local의 MongoDB compass community에서 확인</h3><p><img src="https://user-images.githubusercontent.com/48123604/59157420-0ce52b00-8ae5-11e9-9271-83f788654530.png" alt="image"></p><p>IP를 채워넣고 <code>CONNECT</code>를 눌러줍니다.</p><p><img src="https://user-images.githubusercontent.com/48123604/59157438-5c2b5b80-8ae5-11e9-8876-35483b68603d.png" alt="image"></p><p>접속~</p><h1 id="테스트"><a href="#테스트" class="headerlink" title="테스트"></a>테스트</h1><p><img src="https://user-images.githubusercontent.com/48123604/59157463-04d9bb00-8ae6-11e9-91a2-5f2df940cea6.png" alt="image"></p><p>local에서 실행한 server에 ec2에 설치한 MongoDB를 연결하여 정상 동작</p><h1 id="var-run-mongodb-mongod-pid-exists-에러가-발생하는-경우"><a href="#var-run-mongodb-mongod-pid-exists-에러가-발생하는-경우" class="headerlink" title="/var/run/mongodb/mongod.pid exists 에러가 발생하는 경우"></a>/var/run/mongodb/mongod.pid exists 에러가 발생하는 경우</h1><figure class="highlight bash hljs"><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">sudo rm /var/run/mongodb/mongod.pid</span><br><span class="line">sudo chown mongod:mongod /tmp/mongodb-27017.sock</span><br><span class="line"></span><br><span class="line">service mongod status</span><br></pre></td></tr></table></figure><p>실행</p>]]></content>
<categories>
<category> aws </category>
</categories>
<tags>
<tag> aws </tag>
<tag> ec2 </tag>
<tag> putty </tag>
<tag> mongodb </tag>
</tags>
</entry>
<entry>
<title>express설치하고 helloworld 출력하기 feat 포트 열기</title>
<link href="/2019/06/08/aws-express-helloworld-port/"/>
<url>/2019/06/08/aws-express-helloworld-port/</url>
<content type="html"><![CDATA[<h1 id="AWS-STUDY"><a href="#AWS-STUDY" class="headerlink" title="AWS STUDY"></a>AWS STUDY</h1><ol><li><p><a href="https://hicucu.github.io/2019/06/07/aws-putty-ec2/">PuTTY로 aws ec2로 만든 리눅스 환경 접속하기</a></p></li><li><p><a href="https://hicucu.github.io/2019/06/07/aws-ec2npm/">ec2에-npm-설치</a></p></li><li><p><a href="https://hicucu.github.io/2019/06/08/aws-express-helloworld-port/">express설치하고 helloworld 출력하기 feat 포트 열기</a></p></li><li><p><a href="https://hicucu.github.io/2019/06/30/aws-angular-todolist-1/">AWS, Angular를 이용한 todo-list 만들기(1)</a></p></li><li><p><a href="https://hicucu.github.io/2019/06/30/aws-angular-todolist-2/">AWS, Angular를 이용한 todo-list 만들기(2)</a></p></li></ol><hr><h1 id="express설치"><a href="#express설치" class="headerlink" title="express설치"></a>express설치</h1><p><a href="https://expressjs.com/ko/starter/installing.html" target="_blank" rel="external nofollow noopener noreferrer">메뉴얼</a>을 보고 express를 설치합시다.</p><h2 id="1-폴더를-만들고-들어갑시다"><a href="#1-폴더를-만들고-들어갑시다" class="headerlink" title="1. 폴더를 만들고 들어갑시다."></a>1. 폴더를 만들고 들어갑시다.</h2><figure class="highlight bash hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ mkdir myApp && <span class="hljs-built_in">cd</span> myApp</span><br></pre></td></tr></table></figure><a id="more"></a><h2 id="2-npm-init"><a href="#2-npm-init" class="headerlink" title="2. npm init"></a>2. npm init</h2><figure class="highlight bash hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ npm init -y</span><br></pre></td></tr></table></figure><p>-y를 붙여주면 지가 좀 알아서 해줍니다.</p><p><img src="https://user-images.githubusercontent.com/48123604/59118831-29ba1b00-898c-11e9-9e85-f36f63844998.png" alt="image"></p><h2 id="3-script를-수정"><a href="#3-script를-수정" class="headerlink" title="3. script를 수정"></a>3. script를 수정</h2><figure class="highlight bash hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ vi package.json</span><br></pre></td></tr></table></figure><p><img src="https://user-images.githubusercontent.com/48123604/59119053-bf55aa80-898c-11e9-8cfb-cbb1aca8595f.png" alt="image"></p><p>package.json을 열어서 <code>script</code>에 <code>test</code>를 지우고 <code>start</code>를 만들어 줍니다.</p><h2 id="4-myApp-js"><a href="#4-myApp-js" class="headerlink" title="4. myApp.js"></a>4. myApp.js</h2><figure class="highlight javascript hljs"><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="hljs-keyword">var</span> express = <span class="hljs-built_in">require</span>(<span class="hljs-string">'express'</span>);</span><br><span class="line"><span class="hljs-keyword">var</span> app = express();</span><br><span class="line"></span><br><span class="line">app.get(<span class="hljs-string">'/'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">req, res</span>) </span>{</span><br><span class="line"> res.send(<span class="hljs-string">'Hello World!'</span>);</span><br><span class="line">});</span><br><span class="line"></span><br><span class="line">app.listen(<span class="hljs-number">3000</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{</span><br><span class="line"> <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Example app listening on port 3000!'</span>);</span><br><span class="line">});</span><br></pre></td></tr></table></figure><p>myApp.js 파일을 만든 후 위 소스를 넣어줍니다.</p><h2 id="5-실행"><a href="#5-실행" class="headerlink" title="5. 실행"></a>5. 실행</h2><figure class="highlight bash hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ npm start</span><br></pre></td></tr></table></figure><p><img src="https://user-images.githubusercontent.com/48123604/59119307-718d7200-898d-11e9-82a1-890af56e124e.png" alt="image"></p><p>서버가 돌아갑니다.</p><p>인스턴스를 만들 때 확인했던 <code>IPv4 퍼블릭 IP</code> 주소를 이용하여 접속해봅니다.<br>브라우저에서 <code>IPv4 퍼블릭 IP:3000</code>을 입력합니다.</p><h2 id="6-안되네"><a href="#6-안되네" class="headerlink" title="6. 안되네?"></a>6. 안되네?</h2><p>페이지를 표시할 수 없습니다.</p><p>난 안될 줄 알았어. 그냥 켠김에 해본거야. 진짜</p><h2 id="7-port를-열자"><a href="#7-port를-열자" class="headerlink" title="7. port를 열자"></a>7. port를 열자</h2><p>인스턴스의 정보를 확인했던 화면으로 갑니다.<br><img src="https://user-images.githubusercontent.com/48123604/59119832-c8e01200-898e-11e9-92bc-32eb67fc359e.png" alt="image"></p><p>아래 <code>보안 그룹</code>에서 <code>인바운드 규칙 보기</code>를 클릭하면 하나 밖에 없습니다.</p><p>그 좌측을 클릭합니다.(이름은 다를 수 있음. 확인 안해 봄)</p><p><code>인바운드</code> - <code>편집</code> 클릭</p><p><img src="https://user-images.githubusercontent.com/48123604/59119959-24120480-898f-11e9-8487-ac57695bed27.png" alt="image"></p><p><code>규칙 추가</code>를 클릭하고 <code>사용자 지정 TCP</code>를 선택하야 <code>myApp</code>에서 사용하는 포트 <code>3000</code>을 추가하고 저장합니다.</p><h2 id="8-끝"><a href="#8-끝" class="headerlink" title="8. 끝"></a>8. 끝</h2><p>브라우저에서 새로고침해보면 Hello World!가 뽝</p>]]></content>
<categories>
<category> aws </category>
</categories>
<tags>
<tag> aws </tag>
<tag> ec2 </tag>
<tag> putty </tag>
<tag> express </tag>
</tags>
</entry>
<entry>
<title>ec2에 npm 설치</title>
<link href="/2019/06/07/aws-ec2npm/"/>
<url>/2019/06/07/aws-ec2npm/</url>
<content type="html"><![CDATA[<h1 id="AWS-STUDY"><a href="#AWS-STUDY" class="headerlink" title="AWS STUDY"></a>AWS STUDY</h1><ol><li><p><a href="https://hicucu.github.io/2019/06/07/aws-putty-ec2/">PuTTY로 aws ec2로 만든 리눅스 환경 접속하기</a></p></li><li><p><a href="https://hicucu.github.io/2019/06/07/aws-ec2npm/">ec2에-npm-설치</a></p></li><li><p><a href="https://hicucu.github.io/2019/06/08/aws-express-helloworld-port/">express설치하고 helloworld 출력하기 feat 포트 열기</a></p></li><li><p><a href="https://hicucu.github.io/2019/06/30/aws-angular-todolist-1/">AWS, Angular를 이용한 todo-list 만들기(1)</a></p></li><li><p><a href="https://hicucu.github.io/2019/06/30/aws-angular-todolist-2/">AWS, Angular를 이용한 todo-list 만들기(2)</a></p></li></ol><hr><h1 id="yum-update"><a href="#yum-update" class="headerlink" title="yum update"></a>yum update</h1><p>일단 yum을 update<br><figure class="highlight bash hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">sudo yum update</span><br></pre></td></tr></table></figure><br><a id="more"></a></p><h1 id="nvm-설치"><a href="#nvm-설치" class="headerlink" title="nvm 설치"></a>nvm 설치</h1><blockquote><p><a href="https://docs.aws.amazon.com/ko_kr/sdk-for-javascript/v2/developer-guide/setting-up-node-on-ec2-instance.html" target="_blank" rel="external nofollow noopener noreferrer">https://docs.aws.amazon.com/ko_kr/sdk-for-javascript/v2/developer-guide/setting-up-node-on-ec2-instance.html</a></p></blockquote><p>aws문서를 참고하여 설치</p><p><img src="https://user-images.githubusercontent.com/48123604/59095062-8b5d9380-8952-11e9-8db0-f649855b500f.png" alt="image"></p><ol><li>명령줄에 다음을 입력하여 nvm(노드 버전 관리자)을 설치합니다.<figure class="highlight bash hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.32.0/install.sh | bash</span><br></pre></td></tr></table></figure></li><li>명령줄에 다음을 입력하여 nvm을 활성화합니다.<figure class="highlight bash hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">. ~/.nvm/nvm.sh</span><br></pre></td></tr></table></figure></li><li>명령줄에 다음을 입력하여 nvm에서 사용하려는 Node.js 버전을 설치합니다.<figure class="highlight bash hljs"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">nvm install 4.4.5</span><br></pre></td></tr></table></figure><h1 id="node-새-버전-설치"><a href="#node-새-버전-설치" class="headerlink" title="node 새 버전 설치"></a>node 새 버전 설치</h1>nvm install v10.15.3 설치</li></ol><blockquote><p>저 버전은 그냥 내가 PC에서 사용하는 버전이라 설치한거고 더 상위버전이나 다른 버전 설치해도 무방</p></blockquote><p>끝~!</p>]]></content>
<categories>
<category> aws </category>
</categories>
<tags>
<tag> aws </tag>
<tag> ec2 </tag>
<tag> putty </tag>
</tags>
</entry>
<entry>
<title>PuTTY로 aws ec2로 만든 리눅스 환경 접속하기</title>
<link href="/2019/06/07/aws-putty-ec2/"/>
<url>/2019/06/07/aws-putty-ec2/</url>
<content type="html"><![CDATA[<h1 id="AWS-STUDY"><a href="#AWS-STUDY" class="headerlink" title="AWS STUDY"></a>AWS STUDY</h1><ol><li><p><a href="https://hicucu.github.io/2019/06/07/aws-putty-ec2/">PuTTY로 aws ec2로 만든 리눅스 환경 접속하기</a></p></li><li><p><a href="https://hicucu.github.io/2019/06/07/aws-ec2npm/">ec2에-npm-설치</a></p></li><li><p><a href="https://hicucu.github.io/2019/06/08/aws-express-helloworld-port/">express설치하고 helloworld 출력하기 feat 포트 열기</a></p></li></ol><hr><h1 id="ec2-만들기"><a href="#ec2-만들기" class="headerlink" title="ec2 만들기"></a>ec2 만들기</h1><p>aws의 ec2와 putty를 이용하여 리눅스에 개발공간을 만들고 연결하기<br><a href="https://aws.amazon.com/ko/" target="_blank" rel="external nofollow noopener noreferrer">aws</a>가입 필요.</p><h2 id="인스턴스-생성"><a href="#인스턴스-생성" class="headerlink" title="인스턴스 생성"></a>인스턴스 생성</h2><p>가난한 저는 프리티어의 ec2를 생성하여 사용합니다.</p><p>리눅스 초짜 리알못은 일단 아마존 리눅스를 사용하겠습니다.</p><h3 id="1-우측-상단-내-계정-AWS-Management-Console을-클릭"><a href="#1-우측-상단-내-계정-AWS-Management-Console을-클릭" class="headerlink" title="1. 우측 상단 내 계정 - AWS Management Console을 클릭"></a>1. 우측 상단 <code>내 계정</code> - <code>AWS Management Console</code>을 클릭</h3><p> <img src="https://user-images.githubusercontent.com/48123604/59082367-b8e41600-892d-11e9-990a-5d842464ef0f.png" alt="image"></p><a id="more"></a><h3 id="2-솔루션-구축-EC2를-사용하여-클릭"><a href="#2-솔루션-구축-EC2를-사용하여-클릭" class="headerlink" title="2. 솔루션 구축 - EC2를 사용하여 클릭"></a>2. <code>솔루션 구축</code> - <code>EC2를 사용하여</code> 클릭</h3><p> <img src="https://user-images.githubusercontent.com/48123604/59082820-c69a9b00-892f-11e9-8454-b631df90f9d3.png" alt="image"></p><h3 id="3-단계-1-Amazon-Machine-Image-AMI-선택-Amazon-Linux-AMI-2018-03-0-HVM-SSD-Volume-Type-클릭"><a href="#3-단계-1-Amazon-Machine-Image-AMI-선택-Amazon-Linux-AMI-2018-03-0-HVM-SSD-Volume-Type-클릭" class="headerlink" title="3. 단계 1: Amazon Machine Image(AMI) 선택 - Amazon Linux AMI 2018.03.0 (HVM), SSD Volume Type 클릭"></a>3. <code>단계 1: Amazon Machine Image(AMI) 선택</code> - <code>Amazon Linux AMI 2018.03.0 (HVM), SSD Volume Type</code> 클릭</h3><p> <img src="https://user-images.githubusercontent.com/48123604/59083446-622d0b00-8932-11e9-97ef-7aab7427f9b9.png" alt="image"></p><h3 id="4-단계-2-인스턴스-유형-선택-기본-선택-상태에서-검토-및-시작-클릭"><a href="#4-단계-2-인스턴스-유형-선택-기본-선택-상태에서-검토-및-시작-클릭" class="headerlink" title="4. 단계 2: 인스턴스 유형 선택 - 기본 선택 상태에서 검토 및 시작 클릭"></a>4. <code>단계 2: 인스턴스 유형 선택</code> - 기본 선택 상태에서 <code>검토 및 시작</code> 클릭</h3><p> <img src="https://user-images.githubusercontent.com/48123604/59084271-7cb4b380-8935-11e9-97f9-7d859f74e24b.png" alt="image"></p><h3 id="5-단계-7-인스턴스-시작-검토-시작하기-클릭"><a href="#5-단계-7-인스턴스-시작-검토-시작하기-클릭" class="headerlink" title="5. 단계 7: 인스턴스 시작 검토 - 시작하기 클릭"></a>5. <code>단계 7: 인스턴스 시작 검토</code> - <code>시작하기</code> 클릭</h3><h3 id="6-키-페어-생성"><a href="#6-키-페어-생성" class="headerlink" title="6. 키 페어 생성"></a>6. 키 페어 생성</h3><p>새 키 페어 생성을 선택하고<br>키 페어 이름에서 키의 이름을 주고 <code>키 페어 다운로드</code>를 클릭하여 키 페어 다운</p><p><img src="https://user-images.githubusercontent.com/48123604/59084677-10d34a80-8937-11e9-9222-e5244bbb86bc.png" alt="image"></p><h2 id="인스턴스-정보-확인"><a href="#인스턴스-정보-확인" class="headerlink" title="인스턴스 정보 확인"></a>인스턴스 정보 확인</h2><p><code>인스턴스 상태</code>가 running이면 우리의 컴퓨터가 정상적으로 동작하고 있는 중 입니다.<br>우리는 <code>퍼블릭 DNS</code>를 이용하여 putty에서 접속을 할 겁니다.<br><code>IPv4 퍼블릭 IP</code>는 추후 서버를 구동해서 외부에서 접속을 할 떄 사용할 겁니다.<br>아마도…<br><img src="https://user-images.githubusercontent.com/48123604/59086866-010b3480-893e-11e9-9b25-6b297347a744.png" alt="image"></p><h1 id="PuTTY로-접속하기"><a href="#PuTTY로-접속하기" class="headerlink" title="PuTTY로 접속하기"></a>PuTTY로 접속하기</h1><p><a href="https://www.chiark.greenend.org.uk/~sgtatham/putty/latest.html" target="_blank" rel="external nofollow noopener noreferrer">PuTTy</a> 설치하기.</p><h2 id="PuTTYgen"><a href="#PuTTYgen" class="headerlink" title="PuTTYgen"></a>PuTTYgen</h2><p><code>키 페어 다운로드</code>를 통해서 받은 파일을 ppk로 변경해야 함.</p><ol><li><p>PuTTygen을 실행하여 Load를 클릭<br><img src="https://user-images.githubusercontent.com/48123604/59087731-81cb3000-8940-11e9-976f-00de294be5ec.png" alt="image"></p></li><li><p>우측 파일 타입을 <code>All Files</code>를 선택하고 <code>키 페어 다운로드</code>에서 받은 파일 선택</p></li></ol><p><img src="https://user-images.githubusercontent.com/48123604/59087751-8ee81f00-8940-11e9-902e-829726bfde4b.png" alt="image"></p><ol start="3"><li>확인 창이 뜨면 누르고 <code>Save private key</code>를 클릭하여 <code>.ppk</code>파일 저장</li></ol><h2 id="연결"><a href="#연결" class="headerlink" title="연결"></a>연결</h2><p>PuTTY를 실행<br>ec2의 User Name은 ec2-user입니다.<br><code>Host Name</code>에 <code>user name@퍼블릭 DNS</code>을 입력합니다. </p><p><img src="https://user-images.githubusercontent.com/48123604/59092182-e6d85300-894b-11e9-90e1-882f1e1007f3.png" alt="image"></p><p>좌측 <code>Category</code> - <code>Connection</code> - <code>Auth</code> - <code>Private key file for authertication</code>에 위에서 만든 <code>.ppk</code>파일을 불러오고<br>Open!</p><p><img src="https://user-images.githubusercontent.com/48123604/59091629-b17f3580-894a-11e9-8fe5-1cbdffd0e2e9.png" alt="image"></p><p>끝~!</p>]]></content>
<categories>
<category> aws </category>
</categories>
<tags>
<tag> aws </tag>
<tag> ec2 </tag>
<tag> putty </tag>
</tags>
</entry>
<entry>
<title>Javascript</title>
<link href="/2019/06/03/javascript-keyword/"/>
<url>/2019/06/03/javascript-keyword/</url>
<content type="html"><![CDATA[<p><a href="../../../../Javascript/Javascript-Datatype.html">Data type</a></p><p><a href="../../../../Javascript/javascript-Literal.html">Literal과 Expression</a></p><p><a href="../../../../Javascript/Primitive-type-vs-Object-type.html">Primitive type vs. Object type</a></p><p><a href="../../../../Javascript/Function-Definition.html">Function Definition</a></p><p><a href="../../../../Javascript/Scope-Lexical-Scope.html">Scope, Lexical Scope</a></p><p><a href="../../../../Javascript/전역-변수의-문제점과-var-변수의-문제점.html">전역 변수의 문제점과 var 키워드로 선언한 변수의 문제점</a></p><p><a href="../../../../Javascript/Constructor-Function.html">Constructor Function</a></p><p><a href="../../../../Javascript/this.html">this</a></p><p><a href="../../../../Javascript/DOM.html">DOM</a><br><a id="more"></a><br><a href="../../../../Javascript/environment.html">브라우저 동작</a><br>[Event Delegation]<br>[Event Capturing vs. Event Bubbling]<br>[Class]<br>[super]<br>[Prototype]<br>[Promise]<br>[동기식 처리 모델 vs. 비동기식 처리 모델]</p>]]></content>
<categories>
<category> fast campus </category>
<category> Javascript </category>
</categories>
<tags>
<tag> Javascript </tag>
<tag> Data type </tag>
<tag> Literal </tag>
<tag> Expression </tag>
<tag> Primitive </tag>
<tag> Object </tag>
<tag> Function </tag>
<tag> Definition </tag>
<tag> Scope </tag>
<tag> Lexocal Scope </tag>
<tag> Global </tag>
<tag> var </tag>
<tag> Constructor </tag>
<tag> this </tag>
<tag> DOM </tag>
</tags>
</entry>
<entry>
<title>javascript-sort</title>
<link href="/2019/05/20/javascript-sort/"/>
<url>/2019/05/20/javascript-sort/</url>
<content type="html"><![CDATA[<h1 id="Javascript-Array-sort"><a href="#Javascript-Array-sort" class="headerlink" title="Javascript Array sort"></a>Javascript Array sort</h1><h2 id="기본"><a href="#기본" class="headerlink" title="기본"></a>기본</h2><h3 id="오름차순"><a href="#오름차순" class="headerlink" title="오름차순"></a>오름차순</h3><figure class="highlight javascript hljs"><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="hljs-keyword">const</span> array = [<span class="hljs-string">'z'</span>, <span class="hljs-string">'c'</span>, <span class="hljs-string">'a'</span>];</span><br><span class="line">array.sort();</span><br><span class="line"><span class="hljs-built_in">console</span>.log(array);</span><br></pre></td></tr></table></figure><p><img src="https://user-images.githubusercontent.com/48123604/58612430-8a42bb80-82ed-11e9-9083-5ab8cce78aeb.png" alt="image"></p><a id="more"></a><h3 id="내림차순"><a href="#내림차순" class="headerlink" title="내림차순"></a>내림차순</h3><figure class="highlight javascript hljs"><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="hljs-keyword">const</span> array = [<span class="hljs-string">'z'</span>, <span class="hljs-string">'c'</span>, <span class="hljs-string">'a'</span>];</span><br><span class="line">array.sort().reverse();</span><br><span class="line"><span class="hljs-built_in">console</span>.log(array);</span><br></pre></td></tr></table></figure><p><img src="https://user-images.githubusercontent.com/48123604/58612491-b9f1c380-82ed-11e9-8271-4a9e81361451.png" alt="image"></p><h2 id="Number-type"><a href="#Number-type" class="headerlink" title="Number type"></a>Number type</h2><h3 id="문제"><a href="#문제" class="headerlink" title="문제"></a>문제</h3><figure class="highlight javascript hljs"><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="hljs-keyword">const</span> points = [<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">10</span>, <span class="hljs-number">20</span>, <span class="hljs-number">100</span>, <span class="hljs-number">30</span>];</span><br><span class="line"></span><br><span class="line">points.sort();</span><br><span class="line"><span class="hljs-built_in">console</span>.log(points);</span><br></pre></td></tr></table></figure><p><img src="https://user-images.githubusercontent.com/48123604/58612567-f8877e00-82ed-11e9-96c6-6a2c341f4856.png" alt="image"></p><p><code>.sort()</code> 메소드는 배열요소를 문자로 인식<br>문자로 ‘10’이 ‘2’보다 작기 때문에 오름차순으로 10이 2보다 앞에 위치하게 됨</p><h3 id="숫자배열의-sort"><a href="#숫자배열의-sort" class="headerlink" title="숫자배열의 sort"></a>숫자배열의 sort</h3><figure class="highlight javascript hljs"><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">points.sort(<span class="hljs-function">(<span class="hljs-params">a, b</span>) =></span> { <span class="hljs-keyword">return</span> a - b; });</span><br><span class="line"><span class="hljs-built_in">console</span>.log(points);</span><br></pre></td></tr></table></figure><p><code>(a, b) => { return a-b }</code> 함수를 <code>.sort()</code> 메소드 매개변수로 전달하여 숫자 타입의 배열을 오름차순으로 정렬 할 수 있음</p><p><img src="https://user-images.githubusercontent.com/48123604/58612684-63d15000-82ee-11e9-866e-71ae34a11b96.png" alt="image"></p><p><code>(a, b) => { return a-b }</code>를 <code>(a, b) => { return b-a }</code>로 변경하여 내림차순 구현 가능</p><h3 id="Object-배열-sort"><a href="#Object-배열-sort" class="headerlink" title="Object 배열 sort"></a>Object 배열 sort</h3><figure class="highlight javascript hljs"><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 class="hljs-keyword">const</span> javascript = [</span><br><span class="line"> { <span class="hljs-attr">id</span>: <span class="hljs-number">3</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">'Vue.js'</span> },</span><br><span class="line"> { <span class="hljs-attr">id</span>: <span class="hljs-number">1</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">'vanilla'</span> },</span><br><span class="line"> { <span class="hljs-attr">id</span>: <span class="hljs-number">2</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">'Nodejs'</span> }</span><br><span class="line">];</span><br><span class="line"></span><br><span class="line"><span class="hljs-comment">// 비교 함수</span></span><br><span class="line"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">compare</span>(<span class="hljs-params">key</span>) </span>{</span><br><span class="line"> <span class="hljs-keyword">return</span> <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">a, b</span>) </span>{ </span><br><span class="line"> <span class="hljs-keyword">return</span> a[key] > b[key] ? <span class="hljs-number">1</span> : (a[key] < b[key] ? <span class="hljs-number">-1</span> : <span class="hljs-number">0</span>);</span><br><span class="line"> };</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="hljs-comment">// id를 기준으로 정렬</span></span><br><span class="line">javascript.sort(compare(<span class="hljs-string">'id'</span>));</span><br><span class="line"><span class="hljs-built_in">console</span>.log(javascript);</span><br><span class="line"></span><br><span class="line"><span class="hljs-comment">// value 기준으로 정렬</span></span><br><span class="line">javascript.sort(compare(<span class="hljs-string">'value'</span>));</span><br><span class="line"><span class="hljs-built_in">console</span>.log(javascript);</span><br></pre></td></tr></table></figure><p>프로퍼티 값이 문자열인 경우, - 산술 연산으로 비교하면 <code>NaN</code>이 발생</p><p>비교 연산을 이용</p><p><img src="https://user-images.githubusercontent.com/48123604/58613499-de02d400-82f0-11e9-80f9-854810a6aed2.png" alt="image"></p>]]></content>
<categories>
<category> fast campus </category>
<category> Javascript </category>
</categories>
<tags>
<tag> Javascript </tag>
<tag> sort </tag>
</tags>
</entry>
<entry>
<title>javascript-3</title>
<link href="/2019/05/09/javascript-3/"/>
<url>/2019/05/09/javascript-3/</url>
<content type="html"><![CDATA[<h1 id="원시-값과-객체의-비교"><a href="#원시-값과-객체의-비교" class="headerlink" title="원시 값과 객체의 비교"></a>원시 값과 객체의 비교</h1><h2 id="원시-타입-vs-객체-타입"><a href="#원시-타입-vs-객체-타입" class="headerlink" title="원시 타입 vs 객체 타입"></a>원시 타입 vs 객체 타입</h2><p>원시타입 : immutable value<br>객체타입 : mutable value<br>원시 값을 변수에 할당하면 변수에는 실제 값이 저장<br>객체를 변수에 할당하면 변수에 참조 값이 저장<br>Pass by value : 원시 값을 갖는 변수를 다른 변수에 할당하면 원본의 원시 값이 복사<br>Pass by referencce : 객체를 가리키는 변수를 다른 변수에 할당하면 원본의 참조 값이 복사</p><a id="more"></a><h2 id="원시값"><a href="#원시값" class="headerlink" title="원시값"></a>원시값</h2><h3 id="변경-불가능한-값"><a href="#변경-불가능한-값" class="headerlink" title="변경 불가능한 값"></a>변경 불가능한 값</h3><p>immutable value : 변경 불가능한 값, read only<br>재할당과는 다른 의미<br>원시 값을 갖는 변수에 다른 값을 넣으면 기존 메모리에 값이 변경되는 것이 아니라 새로운 메모리 공간을 확보하고 재할당한 원시 값을 저장<br>변수가 참조하던 메모리 공간의 주소가 바뀜</p><h3 id="문자열과-불변성"><a href="#문자열과-불변성" class="headerlink" title="문자열과 불변성"></a>문자열과 불변성</h3><p>문자열은 0개 이상인 문자(character)들의 집합<br>한개의 문자는 2byte의 메모리 공간에 저장<br>문자열 타입의 값은 몇개의 문자로 이루어졌는지에 따라 필요한 메모리 공간의 크기가 결정<br>자바스크립트의 문자열은 원시타입으로 변경 불가능</p><blockquote><p>유사배열<br>배열은 아니지만 마치 배열처럼 처리가능, 문자열은 배열처럼 인덱스를 통해 각 문자에 접근할 수 있으며 for문으로 순회 가능, length 프로퍼티를 갖는 객체일 수 있음</p></blockquote><h3 id="값에-의한-전달"><a href="#값에-의한-전달" class="headerlink" title="값에 의한 전달"></a>값에 의한 전달</h3><p>할당한 변수가 원시 타입이라면 할당한 변수값이 복사되어 전달 -> Pass by value<br>변수를 다른 변수에 할당하면 두 변수의 값은 동일하지만 메모리 공간의 주소는 다름<br>변수의 값을 변경해도 다른 변수의 값은 불변</p><h2 id="객체"><a href="#객체" class="headerlink" title="객체"></a>객체</h2><p>프로퍼티의 개수가 정해져 있지 않으며 동적으로 추가, 삭제 가능<br>프로퍼티의 값에도 제약이 없음<br>원시 값과 같이 확보해야 할 메모리 공간의 크기를 사전에 정해 둘 수 없음</p><p>자바스크립트는 클래스 없이 객체를 생성할 수 있으며 생성 후 동적으로 프로퍼티와 메소드를 추가 할 수 있음</p><h3 id="변경-가능한-값"><a href="#변경-가능한-값" class="headerlink" title="변경 가능한 값"></a>변경 가능한 값</h3><p>객체를 할당한 변수는 참조 값을 갖음</p><p>객체를 변경할 때 마다 원시 값처럼 이전 값을 복사하여 새롭게 생성한다면 명확하고 깔끔하지만 객체는 크기가 매우 클 수도 있고 프로퍼티 값이 객체일 수도 있어 복사하고 생성하는데 많은 비용 필요</p><blockquote><p>원시 값처럼 객체 자체를 복사하여 다시 생성하는 것을 깊은 복사, 참조 값을 복하는 것을 얕은 복사라 함</p></blockquote><p>객체는 여러 개의 식별자가 하나의 객체를 공유할 수 있음</p><h3 id="참조에-의한-전달"><a href="#참조에-의한-전달" class="headerlink" title="참조에 의한 전달"></a>참조에 의한 전달</h3><p>두 식별자가 하나의 객체를 공유<br>원본 또는 사본 어떤 곳에서 객체를 변경하면 서로 영향을 받음</p><h1 id="함수"><a href="#함수" class="headerlink" title="함수"></a>함수</h1><h2 id="함수-1"><a href="#함수-1" class="headerlink" title="함수"></a>함수</h2><p>일련의 과정을 문(statement)들로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것<br>프로그래밍 언어의 함수도 입력을 받아서 출력<br>매개변수(parameter) : 입력을 전달받는 변수<br>인수(argument) : 입력<br>반환값(return value) : 출력</p><p>함수가 여러개 존재 할 수 있으므로 특정 함수를 구별하기 위해 식별자인 함수명을 사용</p><p>함수는 함수 정의를 통해 생성<br>함수 정의만으로 함수는 실행되지 않음<br>미리 정의된 일련의 과정을 실행하기 위해 필요한 입력, 즉 인수를 매개변수를 통해 함수에게 전달하면서 함수의 실행을 지시해야 함 -> 함수 호출</p><p>함수 호출을 하면 코드 블록에 담긴 문들이 일괄적으로 실행되고 결과를 반환</p><h2 id="함수의-사용-이유"><a href="#함수의-사용-이유" class="headerlink" title="함수의 사용 이유"></a>함수의 사용 이유</h2><p>필요할 때 여러 번 호출 가능<br>동일 작업을 반복 수행할 때 같은 코드의 중복을 제거 -> 코드의 재사용</p><p>유지보수의 편의성을 높이고 실수를 줄여 코드의 신뢰성을 높이는 효과</p><h2 id="함수-리터럴"><a href="#함수-리터럴" class="headerlink" title="함수 리터럴"></a>함수 리터럴</h2><p>객체는 객체 리터럴 표기법으로 생성<br>함수도 함수 리터럴로 생성<br>일반 객체는 호출 불가, 함수는 호출 가능</p><p>함수 리터럴은 function 키워드, 함수명, 매개변수 목록 그리고 함수 몸체로 구성</p><p>함수명</p><ul><li>함수명은 식별자 -> 네이밍 규칙 준수</li><li>몸체 내에서만 참조 가능</li><li>생략가능 -> 익명함수</li></ul><p>매개변수 목록</p><ul><li>0개 이상 매개변수를 괄호로 감싸고 쉼표로 구분</li><li>매개변수에는 인수가 할당</li><li>함수 몸체 내에서 변수와 동일 취급</li></ul><p>함수 몸체</p><ul><li>함수가 호출되었을 때 일괄적으로 실행될 문들을 하나의 실행 단위로 정의한 코드 불록</li><li>함수 호출에 의해 실행</li></ul><p>함수 vs 일반 객체<br>함수는 객체<br>일반 객체는 호출 불가<br>함수는 고유한 프로퍼티 보유</p><h2 id="함수-정의"><a href="#함수-정의" class="headerlink" title="함수 정의"></a>함수 정의</h2><p>정의 방법</p><ul><li>함수 선언문</li><li>함수 표현식</li><li>function 생성자 함수</li><li>화살표 함수 : ES6</li></ul><h3 id="함수-선언문"><a href="#함수-선언문" class="headerlink" title="함수 선언문"></a>함수 선언문</h3><p>함수 리터럴 표기법과 동일 형태<br>함수명 생략 가능</p><p>함수명을 호출하는 것이 아니라 함수 객체를 가리키는 변수를 호출<br>함수 선언문 방식으로 생성된 함수를 호출한 것은 함수명이 아니라 자바스크립트 엔진이 암묵적으로 생성한 변수<br>함수명과 변수명이 일치하여 함수명으로 호출되는 듯 보이나 변수명으로 호출된 것</p><p>자바스크립트 엔진은 함수 선언문을 함수 표현식으로 변환하여 함수 객체를 생성한다 생각 할 수 있음</p><h3 id="함수-표현식"><a href="#함수-표현식" class="headerlink" title="함수 표현식"></a>함수 표현식</h3><p>함수는 일급 객체이므로 함수 리터럴로 생성한 함수 객체를 변수에 할당가능 -> 함수 표현식<br>함수 표현식의 함수 리터럴은 함수명을 생략하는 것이 일반적</p><p>함수 선언문은 표현식이 아닌 문이고 함수 표현식은 표현식인 문</p><h3 id="함수-선언문-vs-함수-표현식"><a href="#함수-선언문-vs-함수-표현식" class="headerlink" title="함수 선언문 vs 함수 표현식"></a>함수 선언문 vs 함수 표현식</h3><p>// 함수 선언문<br>var add = function add(x, y) {<br>return x + y;<br>};</p><p>// 함수 표현식<br>var add = function (x, y) {<br>return x + y;<br>};</p><h3 id="함수-생성-시점과-함수-호이스팅"><a href="#함수-생성-시점과-함수-호이스팅" class="headerlink" title="함수 생성 시점과 함수 호이스팅"></a>함수 생성 시점과 함수 호이스팅</h3><p>함수 선언문으로 정의한 함수와 함수 표현식으로 정의한 함수의 생성시점은 다름<br>함수 선언문은 코드의 선두로 끌어 올려진 것처럼 동작 -> 함수 호이스팅</p><h4 id="함수-호이스팅-vs-변수-호이스팅"><a href="#함수-호이스팅-vs-변수-호이스팅" class="headerlink" title="함수 호이스팅 vs 변수 호이스팅"></a>함수 호이스팅 vs 변수 호이스팅</h4><p>변수 호이스팅은 선언 단계와 초기화 단계가 동시에 진행되며 다른 코드가 실행되기 이전에 수행<br>함수 호이스팅은 선언 단계와 초기화 단계, 할당당계가 동시 진행</p><h3 id="Function-생성자-함수"><a href="#Function-생성자-함수" class="headerlink" title="Function 생성자 함수"></a>Function 생성자 함수</h3><p>생성자 함수 : 객체를 생성하는 함수, 객체를 생성하는 방식은 객체 리터럴 이외 다양한 방범이 존재</p><p>var add = new Function(‘x’, ‘y’, ‘return x + y’);</p><p>Function 생성자 함수 방식으로 생성한 함수는 렉시컬 스코프를 만들지 않고 전역 함수인 것처럼 스코프를 생성<br>클로저도 생성하지 않음</p><h3 id="화살표-함수"><a href="#화살표-함수" class="headerlink" title="화살표 함수"></a>화살표 함수</h3><p>ES6에서 도입<br>항상 익명 함수로 정의<br>기존 함수와 this 바인딩 방식이 다르고 prototype 프로퍼티가 없고 arguments 객체를 생성하지 않음</p><h2 id="함수-호출"><a href="#함수-호출" class="headerlink" title="함수 호출"></a>함수 호출</h2><p>함수를 참조하는 변수와 한 쌍의 소괄호인 함수 호출 연산자로 호출<br>0개 이상의 인수를 쉼표로 구분하여 나열<br>인수는 매개변수에 할당할 수 있는 값</p><p>함수를 호출하면 현재 실행 흐름을 중단, 호출된 함수로 컨트롤 이관<br>매개변수에 인수가 할당되고 함수 몸체의 문들이 실행</p><h2 id="매개변수와-인수"><a href="#매개변수와-인수" class="headerlink" title="매개변수와 인수"></a>매개변수와 인수</h2><p>함수의 실행을 위해 함수 외부에서 함수 내부로 값을 전달할 필요가 있는 경우, 매개변수를 통해 인수를 전달<br>함수를 호출할 때 지정하며 개수와 타입에 제한이 없음</p><p>함수를 호출할 때 매개변수의 개수만큼 인수를 전달하는 것이 일반적<br>그렇지 않아도 에러가 발생하지는 않음<br>함수는 매개변수의 개수와 인수의 개수를 체크하지 않음<br>인수가 부족한 경우 매개변수의 값은 undefined</p><p>인수가 매개변수보다 만은 경우, 초과되는 인수는 무시<br>-> 암묵적으로 모든 인수는 arguments 객체의 프로퍼티로 보관</p><h2 id="인수-확인"><a href="#인수-확인" class="headerlink" title="인수 확인"></a>인수 확인</h2><p>자바스크립트 함수는 매개변수와 인수의 개수가 일치하는지 확인하지 않음<br>동적타입 언어로 매개변수의 타입을 사전에 지정하지 않음<br>-> 적절한 인수가 전달되었는지 확인 필요</p><h2 id="매개변수의-개수"><a href="#매개변수의-개수" class="headerlink" title="매개변수의 개수"></a>매개변수의 개수</h2><p>매개변수의 최대 개수 제한은 ECMAScript 스펙에 정해져 있지 않음<br>-> 브라우저마다 제각각</p><p>일반적으로 3개 이하 0개가 가장 이상적</p><h2 id="외부-상태의-변경과-함수형-프로그래밍"><a href="#외부-상태의-변경과-함수형-프로그래밍" class="headerlink" title="외부 상태의 변경과 함수형 프로그래밍"></a>외부 상태의 변경과 함수형 프로그래밍</h2><p>원시값 : 값에 의한 전달<br>객체 : 참조에 의한 전달<br>매개변수도 함수 몸체 내부에서 동일 취급</p><p>값에 의한 전달은 값이 복사되는 것으로 원본 보장<br>참조에 의한 전달은 원본 훼손 발생</p><h2 id="반환문"><a href="#반환문" class="headerlink" title="반환문"></a>반환문</h2><p>함수는 return 키워드와 반환값으로 이루어진 반환문을 사용하여 실행 결과를 반환</p><p>반환문은 함수의 실행을 중단, 함수 몸체를 빠져나가는 역활과 return 키워드 뒤에 지정한 값을 반환</p><p>return 키워드 뒤에 반환값을 명시적으로 지정하지 않으면 undefined가 반환<br>반환문을 생략하면 암묵적 undefined 반환</p><h2 id="다양한-함수의-형태"><a href="#다양한-함수의-형태" class="headerlink" title="다양한 함수의 형태"></a>다양한 함수의 형태</h2><h3 id="즉시실행함수"><a href="#즉시실행함수" class="headerlink" title="즉시실행함수"></a>즉시실행함수</h3><p>함수의 정의와 동시에 즉시 호출 -> IIFE<br>한번만 호출되며 다시 호출 불가<br>함수 선언문이나 함수 표현식을 그룹 연산자로 감싸면 함수가 평가되어 함수 객체가 됨</p><figure class="highlight javascript hljs"><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="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{</span><br><span class="line"> <span class="hljs-comment">// ...</span></span><br><span class="line">})();</span><br><span class="line"></span><br><span class="line">(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{</span><br><span class="line"> <span class="hljs-comment">// ...</span></span><br><span class="line">})();</span><br><span class="line"></span><br><span class="line">!(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{</span><br><span class="line"> <span class="hljs-comment">// ...</span></span><br><span class="line">})();</span><br><span class="line"></span><br><span class="line">+(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{</span><br><span class="line"> <span class="hljs-comment">// ...</span></span><br><span class="line">})();</span><br></pre></td></tr></table></figure><p>모두 가능하지만 일반적으로 처음 방법을 사용</p><p>즉시 실행 함수 내에 코드를 모아두면 혹시 있을 수 있는 변수명 또는 함수명의 충돌을 방지</p><h3 id="재귀-함수"><a href="#재귀-함수" class="headerlink" title="재귀 함수"></a>재귀 함수</h3><p>함수가 자기 자신을 호출하는 것<br>반드시 탈출 조건이 필요 -> 없을 경우 무한히 연쇄 호출</p><p>대부분 for문이나 while문으로 구현 가능<br>-> 재귀함수를 사용하는 것이 반복문을 사용하는 것보다 직관적으로 이해하기 쉬울 때에만 한정적 사용이 바람직</p><h3 id="중첩-함수"><a href="#중첩-함수" class="headerlink" title="중첩 함수"></a>중첩 함수</h3><p>함수 내부에 정의된 함수<br>일반적으로 자신을 포함한 외부함수를 돕는 헬퍼함수의 역활</p><h3 id="콜백함수"><a href="#콜백함수" class="headerlink" title="콜백함수"></a>콜백함수</h3><p>자바스크립트의 함수는 일급 객체로 함수의 인수로 함수 전달 가능<br>콜백함수는 콜백 함수를 인수로 전달 받은 함수가 호출 시점을 결정하여 호출</p><p>콜백 함수가 콜백 함수를 전달받는 함수 내부에만 호출된다면 익명 함수 리터럴로 정의하면서 곧바로 전달하는 것이 일반적<br>이때 콜백함수로서 전달된 함수 리터럴은 콜백 함수를 전달받은 함수가 호출될 때 평가되어 생성<br>단, 콜백 함수를 다른 곳에서도 호출할 필요가 있거나, 콜백 함수를 전달 받는 함수가 자주 호출된다면 함수 외부에서 정의 후 변수를 전달하는 것이 효율적</p><p>중첩 함수가 외부 함수를 돕는 헬퍼 함수의 열활을 하는 것 처럼 콜백 함수는 함수에 전달되어 헬퍼 함수의 역활 수행<br>중첩 함수는 고정되어 교체 불가, 콜백하뭇는 외부에서 인수로 주입하기 때문에 자유롭게 교체 가능</p><h1 id="스코프"><a href="#스코프" class="headerlink" title="스코프"></a>스코프</h1><p>유효범위<br>식별자를 검색하는 규칙</p><h2 id="스코프란"><a href="#스코프란" class="headerlink" title="스코프란?"></a>스코프란?</h2><p>변수는 자신이 선언된 위치에 의해 자신이 유효한 범위, 즉 다른 코드가 변수 자신을 참조할 수 있는 범위가 결정 -> 스코프(Scope, 유효범위)</p><p>스코프라는 개념이 없다면 전체 프로그램에서 동일 변수명은 사용이 불가</p><p>var 키워드로 선언된 변수는 같은 스코프 내에서 중복 선언이 허용 -> 의도치 않게 변수 값이 변경되는 부작용 발생<br>let, const 키워드로 선언된 변수는 같은 스코프내에서 중복 선언을 허용하지 않음</p><h2 id="스코프의-종류"><a href="#스코프의-종류" class="headerlink" title="스코프의 종류"></a>스코프의 종류</h2><p>전역 : 코드의 바깥 영역 -> 전역 스코프, 전역 변수<br>지역 : 함수 몸체 내부 -> 지역 스코프, 지역 변수</p><h3 id="전역과-전역-스코프"><a href="#전역과-전역-스코프" class="headerlink" title="전역과 전역 스코프"></a>전역과 전역 스코프</h3><p>전역이란 코드의 가장 바깥 영역<br>전역은 전역 스코프를 생성<br>전역에 변수를 선언하면 전역 스코프를 갖는 전역 변수가 됨<br>전역 변수는 어지서든 참조 가능</p><h3 id="지역과-지역-스코프"><a href="#지역과-지역-스코프" class="headerlink" title="지역과 지역 스코프"></a>지역과 지역 스코프</h3><p>지역이란 함수 몸체 내부<br>지역 변수는 자신의 지역 스코프와 하위 지역 스코프에서 유효<br>전역과 지역에 동일한 변수명이 있고 지역에서 해당 변수를 찾는 다면 지역에 선언된 변수를 참조</p><h2 id="스코프-체인"><a href="#스코프-체인" class="headerlink" title="스코프 체인"></a>스코프 체인</h2><p>스코프는 함수의 중첩에 의해 계충적 구조를 갖음<br>외부 함수의 지역 스코프를 중첩 함수의 상위 스코프라 함<br>-> 이렇게 스코프가 계층적으로 연결된 것을 스코프 체인이라 함</p><p>변수를 참조할 때, 자바스크립트 엔진은 스코프 체인을 통해 변수를 참조하는 코드의 스코프에서 시작하여 상위 스코프 방향으로 이동하며 선언된 변수를 검색</p><p>상위 스코프에서 유요한 변수는 하위 스코프에서 자유롭게 참조할 수 있지만 하위 스코프에서 유효한 변수를 상위 스코프에서 참조할 수 없음</p><p>함수를 어디서 호출했는지가 아닌 어디에 정의 했는가에 따라 상위 스코프를 결정</p><h2 id="암묵적-전역-변수"><a href="#암묵적-전역-변수" class="headerlink" title="암묵적 전역 변수"></a>암묵적 전역 변수</h2><p>선언하지 않은 변수에 값을 할당하면 자바스크립트 엔진은 아무런 에러없이 암묵적으로 전역 변수를 선언하고 값을 할당 -> 암묵적 전역 변수</p><p>자바스크립트는 파일마다 독립적인 파일 스코프를 갖지 않음<br>-> 하나의 전역</p>]]></content>
<categories>
<category> fast campus </category>
<category> Javascript </category>
</categories>
<tags>
<tag> Javascript </tag>
</tags>
</entry>
<entry>
<title>codility-3-2-FrogJmp</title>
<link href="/2019/05/06/codility-3-2-FrogJmp/"/>
<url>/2019/05/06/codility-3-2-FrogJmp/</url>
<content type="html"><![CDATA[<h1 id="FrogJmp"><a href="#FrogJmp" class="headerlink" title="FrogJmp"></a>FrogJmp</h1><figure class="highlight plain hljs"><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></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"></span><br><span class="line">A small frog wants to get to the other side of the road. The frog is currently located at position X and wants to get to a position greater than or equal to Y. The small frog always jumps a fixed distance, D.</span><br><span class="line"></span><br><span class="line">Count the minimal number of jumps that the small frog must perform to reach its target.</span><br><span class="line"></span><br><span class="line">Write a function:</span><br><span class="line"></span><br><span class="line"> function solution(X, Y, D);</span><br><span class="line"></span><br><span class="line">that, given three integers X, Y and D, returns the minimal number of jumps from position X to a position equal to or greater than Y.</span><br><span class="line"></span><br><span class="line">For example, given:</span><br><span class="line"> X = 10</span><br><span class="line"> Y = 85</span><br><span class="line"> D = 30</span><br><span class="line"></span><br><span class="line">the function should return 3, because the frog will be positioned as follows:</span><br><span class="line"></span><br><span class="line"> after the first jump, at position 10 + 30 = 40</span><br><span class="line"> after the second jump, at position 10 + 30 + 30 = 70</span><br><span class="line"> after the third jump, at position 10 + 30 + 30 + 30 = 100</span><br><span class="line"></span><br><span class="line">Write an efficient algorithm for the following assumptions:</span><br><span class="line"></span><br><span class="line"> X, Y and D are integers within the range [1..1,000,000,000];</span><br><span class="line"> X ≤ Y.</span><br><span class="line"></span><br><span class="line">Copyright 2009–2019 by Codility Limited. All Rights Reserved. Unauthorized copying, publication or disclosure prohibited.</span><br></pre></td></tr></table></figure><h2 id="설명"><a href="#설명" class="headerlink" title="설명"></a>설명</h2><p>X : 시작 위치<br>Y : 도착 위치<br>D : 증가량</p><p>X+nD > Y의 n을 구하기<br>도착위치에서 시작위치를 뺀 후 증가량 D로 나누기<br>다른 언어의 경우 기본적으로 정수형 연산이기 때문에 나머지가 있으면 몫+1 이지만<br>javascript는 기본적으로 모든 숫자의 연산이 정수가 아닌 실수형이기 때문에 올림으로 계산하면 됨</p><h2 id="코드"><a href="#코드" class="headerlink" title="코드"></a>코드</h2><figure class="highlight javascript hljs"><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="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">solution</span>(<span class="hljs-params">X, Y, D</span>) </span>{</span><br><span class="line"> <span class="hljs-comment">// write your code in JavaScript (Node.js 8.9.4)</span></span><br><span class="line"> <span class="hljs-keyword">return</span> <span class="hljs-built_in">Math</span>.ceil((Y - X) / D);</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h2 id="결과"><a href="#결과" class="headerlink" title="결과"></a>결과</h2><p><img src="https://user-images.githubusercontent.com/48123604/57214792-05ce8700-7026-11e9-911d-e4a9b4df4473.png" alt="image"></p>]]></content>
<categories>
<category> Study </category>
<category> codility </category>
</categories>
<tags>
<tag> study </tag>
<tag> coding </tag>
<tag> codility </tag>
</tags>
</entry>
<entry>
<title>codility Lesson3 TapeEquilibrium</title>
<link href="/2019/05/05/codility-3-1-TapeEquilibrium/"/>
<url>/2019/05/05/codility-3-1-TapeEquilibrium/</url>
<content type="html"><![CDATA[<h1 id="TapeEquilibrium"><a href="#TapeEquilibrium" class="headerlink" title="TapeEquilibrium"></a>TapeEquilibrium</h1><figure class="highlight plain hljs"><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></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"></span><br><span class="line">A non-empty array A consisting of N integers is given. Array A represents numbers on a tape.</span><br><span class="line"></span><br><span class="line">Any integer P, such that 0 < P < N, splits this tape into two non-empty parts: A[0], A[1], ..., A[P − 1] and A[P], A[P + 1], ..., A[N − 1].</span><br><span class="line"></span><br><span class="line">The difference between the two parts is the value of: |(A[0] + A[1] + ... + A[P − 1]) − (A[P] + A[P + 1] + ... + A[N − 1])|</span><br><span class="line"></span><br><span class="line">In other words, it is the absolute difference between the sum of the first part and the sum of the second part.</span><br><span class="line"></span><br><span class="line">For example, consider array A such that:</span><br><span class="line"> A[0] = 3</span><br><span class="line"> A[1] = 1</span><br><span class="line"> A[2] = 2</span><br><span class="line"> A[3] = 4</span><br><span class="line"> A[4] = 3</span><br><span class="line"></span><br><span class="line">We can split this tape in four places:</span><br><span class="line"></span><br><span class="line"> P = 1, difference = |3 − 10| = 7</span><br><span class="line"> P = 2, difference = |4 − 9| = 5</span><br><span class="line"> P = 3, difference = |6 − 7| = 1</span><br><span class="line"> P = 4, difference = |10 − 3| = 7</span><br><span class="line"></span><br><span class="line">Write a function:</span><br><span class="line"></span><br><span class="line"> function solution(A);</span><br><span class="line"></span><br><span class="line">that, given a non-empty array A of N integers, returns the minimal difference that can be achieved.</span><br><span class="line"></span><br><span class="line">For example, given:</span><br><span class="line"> A[0] = 3</span><br><span class="line"> A[1] = 1</span><br><span class="line"> A[2] = 2</span><br><span class="line"> A[3] = 4</span><br><span class="line"> A[4] = 3</span><br><span class="line"></span><br><span class="line">the function should return 1, as explained above.</span><br><span class="line"></span><br><span class="line">Write an efficient algorithm for the following assumptions:</span><br><span class="line"></span><br><span class="line"> N is an integer within the range [2..100,000];</span><br><span class="line"> each element of array A is an integer within the range [−1,000..1,000].</span><br><span class="line"></span><br><span class="line">Copyright 2009–2019 by Codility Limited. All Rights Reserved. Unauthorized copying, publication or disclosure prohibited.</span><br></pre></td></tr></table></figure><h2 id="방법"><a href="#방법" class="headerlink" title="방법"></a>방법</h2><p>배열의 요소를 둘로 나누어 좌측 합과 우측합의 차를 절대값으로 계산하여 가장 작은 값을 찾는다.<br>좌측은 첫 요소부터 마지막요소를 제외한 나머지 요소의 합까지이며<br>우측은 첫 요소를 제외한 나머지의 합부터 마지막 요소까지<br> A[0] = 3<br> A[1] = 1<br> A[2] = 2<br> A[3] = 4<br> A[4] = 3<br>일 때,<br>3+1+2+4+5 = 13 이며,<br>|3 - (1+2+4+3)| 부터 |(3+1+2+4)-3|까지 이므로<br>마지막 요소는 좌측의 합이 아니기 때문에 반복문은 A.length-1</p><h2 id="코드"><a href="#코드" class="headerlink" title="코드"></a>코드</h2><figure class="highlight javascript hljs"><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="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">solution</span>(<span class="hljs-params">A</span>) </span>{</span><br><span class="line"> <span class="hljs-keyword">const</span> getSum = <span class="hljs-function">(<span class="hljs-params">accumulator, currentValue</span>) =></span> accumulator + currentValue;</span><br><span class="line"> <span class="hljs-keyword">let</span> right = A.reduce(getSum);</span><br><span class="line"> <span class="hljs-keyword">let</span> left = <span class="hljs-number">0</span>;</span><br><span class="line"> <span class="hljs-keyword">let</span> min = <span class="hljs-number">10001</span>;</span><br><span class="line"> <span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> i = <span class="hljs-number">0</span>; i < A.length - <span class="hljs-number">1</span>; i++) {</span><br><span class="line"> left += A[i];</span><br><span class="line"> right -= A[i];</span><br><span class="line"></span><br><span class="line"> min = <span class="hljs-built_in">Math</span>.min(<span class="hljs-built_in">Math</span>.abs(left - right), min);</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="hljs-keyword">return</span> min;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h2 id="결과"><a href="#결과" class="headerlink" title="결과"></a>결과</h2><p><img src="https://user-images.githubusercontent.com/48123604/57189585-61781200-6f4b-11e9-96c5-1805183ed67f.png" alt="image"></p>]]></content>
<categories>
<category> Study </category>
<category> codility </category>
</categories>
<tags>
<tag> study </tag>
<tag> coding </tag>
<tag> codility </tag>
</tags>
</entry>
<entry>
<title>javascript-2</title>
<link href="/2019/05/02/javascript-2/"/>
<url>/2019/05/02/javascript-2/</url>
<content type="html"><![CDATA[<h1 id="제어문"><a href="#제어문" class="headerlink" title="제어문"></a>제어문</h1><p>주어진 조건에 따라 블록을 실행하거나 반복 실행 할 때 사용<br>일반적 코드의 실행 순서를 인위적으로 제어</p><h2 id="블록문"><a href="#블록문" class="headerlink" title="블록문"></a>블록문</h2><p>0개 이상의 문을 중괄호로 묶은 것<br>자바스크립트에서는 하나의 실행 단위로 취급<br>단독으로 사용가능하나 일반적으로 제어문, 함수 선언문 등에서 사용<br><a id="more"></a></p><h2 id="조건문"><a href="#조건문" class="headerlink" title="조건문"></a>조건문</h2><p>주어진 조건식의 평가 결과에 따라 코드 블록의 실행 결정<br>조건식은 boolean 값으로 평가될 수 있는 표현 식</p><h3 id="if…else-문"><a href="#if…else-문" class="headerlink" title="if…else 문"></a>if…else 문</h3><p>주어진 조건식의 평과 결과에 따라 실행할 코드 블록을 결정<br>조건식의 평가 결과가 불리언 값이 아니면 불리언으로 강제 변환되어 논리적 구별</p><p>else if, else는 옵션<br>if와 else는 2번 사용 할 수 없지만 else if는 여러번 사용 가능</p><p>대부분 삼항 조건 연산자와 바꿔 사용 가능하지만 삼항 조건 연산자는 식으로 값처럼 사용이 가능하지만 if…else문은 값처럼 사용할 수 없는 문</p><h3 id="switch-문"><a href="#switch-문" class="headerlink" title="switch 문"></a>switch 문</h3><p>주어진 표현식을 평가하여 그 값과 일치하는 표현식을 갖는 case문으로 실행 순서를 이동<br>상황을 의미하는 표현식을 지정하고 콜론으로 마침<br>switch 문의 표현식과 일치하는 case 문의 표현식이 없다면 default 문으로 이동</p><p>default 의 사용은 옵션</p><h3 id="if…else-vs-switch"><a href="#if…else-vs-switch" class="headerlink" title="if…else vs switch"></a>if…else vs switch</h3><p>if…else 문의 조건식은 반드시 불리언 값으로 평가<br>switch 문의 표현식은 문자열, 숫자도 가능<br>switch 문은 놀리적 참, 거짓 보다는 상황에 따라 실행할 코드 블록을 결정할 때 주 사용</p><h2 id="반복문"><a href="#반복문" class="headerlink" title="반복문"></a>반복문</h2><p>주어진 조건식의 평가 결과가 참인 경우 코드 블록을 실행<br>실행 후 조건식을 다시 검사하여 여전히 참인 경우 다시 실행<br>조건식이 거짓일 때까지 반복</p><h3 id="for-문"><a href="#for-문" class="headerlink" title="for 문"></a>for 문</h3><figure class="highlight javascript hljs"><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="hljs-keyword">for</span> (변수 선언문 또는 할당문; 조건식; 증감식)</span><br><span class="line"> 조건식이 참인 경우 반복 실행될 문;</span><br></pre></td></tr></table></figure><p>변수 선언문, 조건식, 증감식은 모두 옵션<br>어떤 식도 없으면 무한 루프</p><p>변수 선언문은 한 번만 실행<br>코드 블록의 실행이 종료된 후 증감식이 실행<br>조건식이 참이면 코드 블록 실행, 거짓이면 for 문의 실행 종료</p><h3 id="while-문-vs-do…while-문"><a href="#while-문-vs-do…while-문" class="headerlink" title="while 문 vs do…while 문"></a>while 문 vs do…while 문</h3><p>조건식의 평가 결과가 참이면 코드 블록을 계속해서 반복 실행<br>조건식의 평가 결과가 불리언 값이 아니면 불리언 값으로 강제 변환되어 논리적 참, 거짓 구별</p><p>조건식의 평가 결과가 언제나 참이면 무한루프</p><p>do…while문은 코드 블록을 먼저 실행 후 조건식 평가</p><h2 id="break-문"><a href="#break-문" class="headerlink" title="break 문"></a>break 문</h2><p>코드 블록 탈출 -> 레이블문, 반목문 또는 switch 문의 코드 블록을 탈출</p><p>레이블문, 반복문, switch 문의 코드 블록 이외에 break문을 사용하면 SyntaxError</p><blockquote><p>레이블문 : 식별자가 붙은 문</p><p>// foo라는 레이블 식별자가 붙은 레이블 문<br>foo: console.log(‘foo’);</p></blockquote><h2 id="continue-문"><a href="#continue-문" class="headerlink" title="continue 문"></a>continue 문</h2><p>반복문의 코드 블록 실행을 현 시점에서 중단하고 반복문의 증감식으로 이동<br>break 문처럼 반복문을 탈출하지 않음</p><h1 id="타입-변환과-단축-평가"><a href="#타입-변환과-단축-평가" class="headerlink" title="타입 변환과 단축 평가"></a>타입 변환과 단축 평가</h1><h2 id="타입-변환"><a href="#타입-변환" class="headerlink" title="타입 변환"></a>타입 변환</h2><p>타입 캐스팅(Type casting) : 명시적 타입 변환(Explicit coercion), 개발자가 의도적으로 값의 타입을 변환한 것<br>타입 강제 변환(Type coercion) : 암묵적 타입 변환(Implicit coercion), 개발자의 의도와 상관없이 자바스크립트 엔진에 의해 암묵적으로 타입이 자동 변환하는 것</p><h2 id="암묵적-타입-변환"><a href="#암묵적-타입-변환" class="headerlink" title="암묵적 타입 변환"></a>암묵적 타입 변환</h2><p>자바스크립트 엔진은 표현식을 평가할 때 코드의 문맥을 고려하여 암묵적 타입 변환을 실행</p><p>자바스크립트는 가급적 에러를 발생시키지 않도록 암묵적 타입 변환을 통해 표현식을 평가</p><h3 id="문자열-타입으로-변환"><a href="#문자열-타입으로-변환" class="headerlink" title="문자열 타입으로 변환"></a>문자열 타입으로 변환</h3><p>문자열 연결 연산자 표현식을 평가하기 위해 문자열 연결 연산자의 피연산자 중에서 문자열 타입이 아닌 피연산자를 문자열 타입으로 암묵적 타입 변환</p><blockquote><p>ex) 1 + ‘2’ //“12”</p></blockquote><h3 id="숫자-타입으로-변환"><a href="#숫자-타입으로-변환" class="headerlink" title="숫자 타입으로 변환"></a>숫자 타입으로 변환</h3><p>산순 연산자의 역활은 숫자 값을 만드는 것, 따라서 산술 연산자의 모든 피연산자는 코드의 문맥 상 모두 숫자 타입이어야 함</p><blockquote><p>ex)<br>1 - ‘1’ // 0</p><p>1 * ‘10’ // 10</p><p>1 / ‘one’ // NaN</p></blockquote><p>자바스크립트 엔진은 비교 연산자 표현식을 평가하기 위해 비교 연산자의 피연산자 중에서 숫자 타입이 아닌 피연산자를 숫자 타입으로 암묵적 타입 변환</p><blockquote><p>ex)<br>‘1’ > 0 // true</p></blockquote><h3 id="불리언-타입으로-변환"><a href="#불리언-타입으로-변환" class="headerlink" title="불리언 타입으로 변환"></a>불리언 타입으로 변환</h3><p>논리적 참, 거짓을 반환해야 하는 표현식에서 자바스크립트 엔진은 조건식의 평가 결과를 불리언 타입으로 암묵적 타입 변환</p><h2 id="명시적-타입-변환"><a href="#명시적-타입-변환" class="headerlink" title="명시적 타입 변환"></a>명시적 타입 변환</h2><ul><li>래퍼 객체 생성자 함수를 new 연산자 없이 호출하는 방법</li><li>빌트인 메소드를 사용하는 방법</li><li>암묵적 타입 변환을 이용하는 방법</li></ul><h3 id="문자열-타입으로-변환-1"><a href="#문자열-타입으로-변환-1" class="headerlink" title="문자열 타입으로 변환"></a>문자열 타입으로 변환</h3><blockquote><p>console.log(String(1));</p><p>console.log((1).toString());</p><p>console.log(1 + ‘’)</p></blockquote><h3 id="숫자-타입으로-변환-1"><a href="#숫자-타입으로-변환-1" class="headerlink" title="숫자 타입으로 변환"></a>숫자 타입으로 변환</h3><blockquote><p>console.log(Number(‘0’));</p><p>console.log(Number(true)); // 1</p><p>console.log(parseInt(‘0’)); // 0</p><p>console.log(+’0’); // 0</p><p>console.log(+true); // 1</p><p>console.log(‘0’ * 1); // 0</p><p>console.log(true * 1); // 1</p></blockquote><h3 id="불리언-타이으로-변환"><a href="#불리언-타이으로-변환" class="headerlink" title="불리언 타이으로 변환"></a>불리언 타이으로 변환</h3><ul><li>boolean 생성자 함수를 new 연산자 없이 호출하는 방법</li><li>!부정 논리 연산자를 두번 사용하는 방법</li></ul><h2 id="단축-평가"><a href="#단축-평가" class="headerlink" title="단축 평가"></a>단축 평가</h2><table><thead><tr><th>단축 평가 표현식</th><th>평가 결과</th></tr></thead><tbody><tr><td>true \</td><td>\</td><td>anything</td><td>true</td></tr><tr><td>false \</td><td>\</td><td>anything</td><td>anything</td></tr><tr><td>true && anything</td><td>anything</td></tr><tr><td>false && anything</td><td>false</td></tr></tbody></table><h3 id="단축-평가-사용-패턴"><a href="#단축-평가-사용-패턴" class="headerlink" title="단축 평가 사용 패턴"></a>단축 평가 사용 패턴</h3><figure class="highlight javascript hljs"><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="hljs-keyword">var</span> elem = <span class="hljs-literal">null</span>;</span><br><span class="line"></span><br><span class="line"><span class="hljs-built_in">console</span>.log(elem.value); <span class="hljs-comment">// TypeError: Cannot read property 'value' of null</span></span><br><span class="line"><span class="hljs-built_in">console</span>.log(elem && elem.value); <span class="hljs-comment">// null</span></span><br></pre></td></tr></table></figure><h1 id="객체-리터럴"><a href="#객체-리터럴" class="headerlink" title="객체 리터럴"></a>객체 리터럴</h1><h2 id="객체란"><a href="#객체란" class="headerlink" title="객체란?"></a>객체란?</h2><p>javascript에서 원시 타입을 제외한 모든 것</p><p>원시 타입은 단 하나의 값만을 나타내지만 객체 타입(object / reference type)은 다양한 타입의 값(원시 타입의 값 또는 다른 객체)들을 하나의 단위로 구성한 복합적인 자료 구조</p><ul><li>mutable value</li><li>키(key)와 값(value)로 구성된 프로퍼티(Property)의 집합</li><li>프로퍼티의 값은 자바스크립트에서 사용할 수 있는 모든 값</li><li>값으로 취급 가능</li><li>프로퍼티 값으로 함수를 사용할 수도 있으며 프로퍼티의 값이 함수일 경우 일반 함수와 구분하기 위해 메소드(Method)라고 부름</li></ul><p>데이터를 의미하는 프로퍼티와 데이터를 참조하고 조작할 수 있는 동작을 의미하는 메소드로 구성<br>데이터와 동작을 하나의 단위로 구조화 가능</p><p>자바스크립트는 함수로 객체를 생성하기도 하며 함수 자체가 객체</p><h2 id="객체-리터럴에-의한-객체-생성"><a href="#객체-리터럴에-의한-객체-생성" class="headerlink" title="객체 리터럴에 의한 객체 생성"></a>객체 리터럴에 의한 객체 생성</h2><p>인스턴스 : 클래스에 의해 생성되어 메모리에 저장된 실체<br>객체 지향 프로그래밍에서 객체는 클래스와 인스턴스를 포함한 개념</p><p>자바스크립트의 객체 생성방법</p><ul><li>객체 리터럴 : 가장 일반적이고 간단한 방법</li><li>Object 생성자 함수</li><li>생성자 함수</li><li>Object.create 메소드</li><li>클래스(ES6)</li></ul><p>객체 리터럴의 중괄호는 코드 블록을 의미하지 않음<br>객체 리터럴은 표현식 -> 닫는 중괄호 뒤 ; 필요</p><p>객체를 생성하기 위해 클래스를 먼저 정의하고 new 연산자와 함께 생성자를 호출할 필요없음<br>숫자 값이나 문자열 값을 만드는 것과 유사한 리터럴 표기법만드로 객체를 생성<br>객체 리터럴에 프로퍼티를 포함시켜 객체의 생성과 동시에 프로퍼티를 만들 수 있고 객체를 생성한 후 프로퍼티를 동적으로 추가 가능</p><h2 id="프로퍼티"><a href="#프로퍼티" class="headerlink" title="프로퍼티"></a>프로퍼티</h2><p>객체 = 프로퍼티의 집합<br>프로퍼티 = 키와 값으로 구성<br>프로퍼티의 나열은 <code>,</code>로 구분<br>마지막 프로퍼티의 <code>,</code>은 없어도 됨</p><p>프로퍼티 키</p><ul><li>빈 문자열을 포함하는 모든 문자열</li><li>symbol 값</li><li>프로퍼티 값에 접근할 수 있는 이름</li><li>식별자 네이밍규칙을 따라야 하지는 않음</li><li>숫자리터럴을 사용하면 암묵적 타입 변환을 통해 문자열로 변환</li><li>갱신 - 중복 선언시 나중에 선언한 프로퍼티가 덮어짐 -> 에러 발생 안함</li></ul><p>프로퍼티 값</p><ul><li>자바스크립트에서 사용할 수 있는 모든 값</li><li>식별자 네이밍 규칙을 따르지 않는 이름에는 반드시 따옴표 필요</li></ul><p>문자열 또는 문자열로 변환 가능한 값을 반환하는 표현식을 사용하여 프로퍼티 키 동적 생성 가능<br>프로퍼티 키로 사용할 표현식을 <code>[...]</code>로 묶어야 함<br>이를 계산된 프로퍼티 이름(Computed Property name)이라 함</p><p>빈 문자열을 프로퍼티 키로 사용해도 가능하지만 키로서 의미가 없으므로 권장하지 않음<br>예약어도 사용 가능하지만 에러발생의 소지가 있어 권장하지 않음</p><h2 id="메소드"><a href="#메소드" class="headerlink" title="메소드"></a>메소드</h2><p>프로퍼티 값이 함수일 경우 일반 함수와 구분하기 위하여 메소드라 부름<br>메소드 = 객체에 제한되어 있는 함수</p><p>this : 객체 자신을 가리키는 참조변수</p><h2 id="프로퍼티-접근"><a href="#프로퍼티-접근" class="headerlink" title="프로퍼티 접근"></a>프로퍼티 접근</h2><p>마침표 표기법(Dot notation), 대괄호 표기법(Bracket notation)으로 접근</p><p>네이밍 규칙을 따르는 이름으로 키를 만든 경우 두 방법 모두 사용 가능 -> 네이밍 규칙을 따르지 않은 경우 반드시 대괄호 표기법을 사용해야 함</p><p>대괄호 연산자는 내부에 지정하는 프로퍼티 키는 반드시 따옴표를 감싼 문자열 -> 없으면 식별자로 인식, 숫자의 경우 생략 가능</p><h2 id="프로퍼티-동적-생성"><a href="#프로퍼티-동적-생성" class="headerlink" title="프로퍼티 동적 생성"></a>프로퍼티 동적 생성</h2><p>존재하지 않는 프로퍼티에 값을 할당하면 동적으로 생성되고 값이 할당</p><h2 id="프로퍼티-삭제"><a href="#프로퍼티-삭제" class="headerlink" title="프로퍼티 삭제"></a>프로퍼티 삭제</h2><p>delete 연산자 이용<br>delete 연산자의 피연산자는 프로퍼티 값에 접근할 수 있는 표현식 -> 존재 하지 않는 프로퍼티의 삭제시 에러없이 무시</p><h2 id="ES6에서-추가된-객체-리터럴-확장기능"><a href="#ES6에서-추가된-객체-리터럴-확장기능" class="headerlink" title="ES6에서 추가된 객체 리터럴 확장기능"></a>ES6에서 추가된 객체 리터럴 확장기능</h2><h3 id="프로퍼티-축약-표현"><a href="#프로퍼티-축약-표현" class="headerlink" title="프로퍼티 축약 표현"></a>프로퍼티 축약 표현</h3><figure class="highlight javascript hljs"><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="hljs-comment">// ES6</span></span><br><span class="line"><span class="hljs-keyword">let</span> x = <span class="hljs-number">1</span>,</span><br><span class="line"> y = <span class="hljs-number">2</span>;</span><br><span class="line"></span><br><span class="line"><span class="hljs-comment">// 프로퍼티 축약 표현</span></span><br><span class="line"><span class="hljs-keyword">const</span> obj = { x, y };</span><br><span class="line"></span><br><span class="line"><span class="hljs-built_in">console</span>.log(obj); <span class="hljs-comment">// {x: 1, y: 2}</span></span><br></pre></td></tr></table></figure><p>변수명과 프로퍼티 키가 동일한 이름이면 프로퍼티 키 생략가능<br>프로퍼티키가 변수의 이름으로 자동 생성</p><h3 id="프로퍼티-키-동적-생성"><a href="#프로퍼티-키-동적-생성" class="headerlink" title="프로퍼티 키 동적 생성"></a>프로퍼티 키 동적 생성</h3><p>객체 리터럴 내부에서 프로퍼티 키 동적 생성 가능</p><h3 id="메소드-축약-표현"><a href="#메소드-축약-표현" class="headerlink" title="메소드 축약 표현"></a>메소드 축약 표현</h3><p>메소드 선언시 function 키워드 생략 가능</p><h1 id="고찰"><a href="#고찰" class="headerlink" title="고찰"></a>고찰</h1><ol><li>Truthy 값과 Falsy 값은 엔진에서 변환을 위해서만 존재하는건가요?<br>해당 값들도 프로그래머가 사용 할 수 있나요?</li></ol>]]></content>
<categories>
<category> fast campus </category>
<category> Javascript </category>
</categories>
<tags>
<tag> Javascript </tag>
</tags>
</entry>
<entry>
<title>Javascript-1</title>
<link href="/2019/04/30/Javascript-1/"/>
<url>/2019/04/30/Javascript-1/</url>
<content type="html"><![CDATA[<h1 id="자바스크립트-개발-환경과-실행-방법"><a href="#자바스크립트-개발-환경과-실행-방법" class="headerlink" title="자바스크립트 개발 환경과 실행 방법"></a>자바스크립트 개발 환경과 실행 방법</h1><p>자바스크립트 = ES + Web API<br>Node.js : ES + Node.js API</p><p>자바스크립트는 브라우저에서 HTML, CSS와 함께 실행<br>렌더링엔진 : HTML, CSS<br>자바스크립트 엔진 : 자바스크립트</p><p>HTML 파서는 script 태그를 만나면 DOM 생성 프로세스를 중지하고 자바스크립트 엔진으로 제어 권한을 넘김<br>자바스크립트의 실행이 완료되면 다시 HTML 파서로 제어권한을 넘겨서 브라우저가 중지했던 시점부터 DOM생성을 재개<br>DOM이 완성되지 않은 상태에서 자바스크립트가 DOM을 조작하면 애러가 발생할 수 있다.<br><a id="more"></a></p><h1 id="변수"><a href="#변수" class="headerlink" title="변수"></a>변수</h1><p>변수 : 하나의 값을 저장할 수 있는 메모리 공간에 붙인 이름 또는 메모리 공간 자체<br>할당 : 변수에 값을 저장하는 것<br>참조 : 변수에 저장된 값을 읽어 들이는 것<br>식별자 : 변수명, 어떤 값을 구별하여 식별해낼 수 있는 고유한 이름<br>변수선언 : 변수명을 등록하여 자바스크립트 엔진에 변수의 존재를 알려 관리하도록 하는 것<br>키워드 : 자바스크립트 엔진이 수행 할 동작을 규정한 일종의 명령어</p><p>변수선언</p><ul><li>선언단계</li><li>초기화 단계 : 암묵적 undefined 할당</li></ul><p>var 키워드 사용시 선언단계와 초기화 단계가 동시 진행</p><p>초기화 : 변수가 선언된 후 최초 값을 할당하는 것<br>호이스팅 : 자바스크립트 엔진은 소스 코드를 한줄씩 순차적으로 실행하기 전 소스코드 전체의 모든 선언문을 찾아내어 식별자를 등록하고 초기화, 그 후 소스코드 순차 실행</p><p>변수 선언과 값의 할당을 하나의 문으로 축약가능</p><p>재할당 : var 키워드로 선언한 변수는 값을 재할당 가능</p><p>상수 : 변수에 저장된 값을 변경할 수 없는 것</p><h1 id="데이터-타입"><a href="#데이터-타입" class="headerlink" title="데이터 타입"></a>데이터 타입</h1><p>데이터 타입 : 값의 종류</p><p>메모리에 값을 저장하기 위해서는 확보해야 할 메모리 공간의 크기 파악, 값의 종류에 따라 확보해야 할 메모리의 크기가 다름 -> 몇 byte의 공간을 사용해야 손실없이 값을 저장할 수 있는지 알아야 함을 의미</p><p>자바스크립트는 모든 숫자 타입을 64비트 부동소수점으로 저장</p><p>필요</p><ul><li>값을 저장할 때 확보해야 하는 메모리 공간의 크기를 결정</li><li>값을 참조할 때 한번에 읽어 들여야 할 메모리 공간의 크기를 결정</li><li>메모리에서 읽어들은 2진수를 어떻게 해설할 지 결정</li></ul><p>값</p><ul><li>더이상 평가할 수 없는 하나의 표현식</li><li>다양한 방법(표현식)으로 생성가능</li><li>가장 기본적 방법은 리터럴 표기법</li></ul><p>리터럴</p><ul><li>소스코드 안에서 직접 만들어 낸 고정된 값 자체</li><li>리터럴 표기법으로 생성</li></ul><p>값과 리터럴</p><ul><li>표현식 : 값을 생성하는 문, 하나의 값으로 평가될 수 있는 문</li><li>리터럴은 값의 최소단위</li><li>리터럴은 값이 될 수 있지만 모든 값은 리터럴이 아님</li></ul><p>종류</p><ul><li>원시타입</li><li>객체타입</li></ul><p>null : 변수에 값이 없다는 것을 의도적으로 명시, 변수가 기억하는 메모리 주소에 대한 참조 정보를 제거하는 것을 의미</p><p>자바스크립트의 변수는 선언이 아닌 할당에 의해 타입이 결정<br>재할당에 의해 변수의 타입은 언제든지 동적으로 변화 -> 동적 타이핑</p><p>변수의 수가 많을수록 오류의 발생 활률은 상승<br>변수의 생명주기는 최대한 짧게<br>변수보다는 상수를 사용하여 값의 변경을 억제<br>변수명은 변수의 존재 이유를 파악할 수 있도록 명명</p><h1 id="연산자"><a href="#연산자" class="headerlink" title="연산자"></a>연산자</h1><p>표현식은 리터럴 표현식, 식별자 표현식, 연산자 표현식, 함수/메소드 호출 표현식 등으로 나누어지지만 결국 하나의 값을 만듬<br>표현식 = 표현식이 평가되어 생성된 값 -> 동치</p><p>문(statement) : 자바스크립트 엔진에게 내리는 명령</p><p>자바스크립트 코드 = 문 or 표현식</p><p>표현식은 값을 생성<br>문은 표현식으로 생성한 값을 사용하여 자바스크립트 엔진에게 명령을 내리는 것</p><p>문 = 표현식인 문, 표현식이 아닌 문 존재<br>표현식이 아닌 문은 값이 될 수 없기에 값처럼 사용 불가<br>할당문은 그 자체가 표현식으로 값처럼 사용 가능</p><p>삼항연산자는 값으로 평가할 수 있는 표현식인 문<br>if문은 표현식이 나닌 문으로 값으로 사용불가능 하여 삼항연산자로 사용 불가</p><hr><h1 id="고찰"><a href="#고찰" class="headerlink" title="고찰"></a>고찰</h1><ol><li><p>Javascript의 모든 변수는 상수인가?<br>Javascript에서 값을 재할당 하는 경우 메모리의 주소값이 변경.<br>식별자는 동일해도 해당 식별자가 참조하는 메모리의 공간은 바뀌는 것이고 결국 할당된 메모리 영역에 값을 바꾸는게 아니라 새로운 할당이 일어나는 것과 같은데 그러면 하나의 값을 저장할 수 있는 메모리 공간에 붙인 이름 또는 메모리 공간 자체라는 의미에서 자바스크립트의 모든 변수는 상수인가?</p></li><li><p>null타입의 값 null을 할당하면 식별자에 메모리 참조가 없어지면 식별자의 주소는 없는건가?<br>null도 null타입의 값 null로 값으로 표현하는데 null을 할당하면 식별자의 참조가 사라지는데 그러면 참조가 사라진 식별자는 아무것도 참조를 안하는건지 아니면 null값이 들어있는 새로운 공간을 참조하고 기존 참조하던 공간이 참조가 없으면 가비지컬렉션 수행으로 사라지는건가?<br> 참조가 없어지는거라면 null값을 주는게 아니라 아스키 0번을 변수에 주면 어떻게 되나?</p></li><li><p>이항산술연산자 +와 단항 산술연산자 +는 다른건가?<br>0 + true = +true = 1인데 두 연산이 아예 다른 의미의 연산인가?</p></li></ol>]]></content>
<categories>
<category> fast campus </category>
<category> Javascript </category>
</categories>
<tags>
<tag> Javascript </tag>
</tags>
</entry>
<entry>
<title>Javascript vs ECMAScript</title>
<link href="/2019/04/29/Javascript-ES/"/>
<url>/2019/04/29/Javascript-ES/</url>
<content type="html"><![CDATA[<h1 id="Javascript-ECMAScript"><a href="#Javascript-ECMAScript" class="headerlink" title="Javascript = ECMAScript ?"></a>Javascript = ECMAScript ?</h1><p>최초의 Javascript는 넷스케이프의 웹 브라우저에서 정적 HTML페이지를 동적으로 표현하기 위하여 탄생하였다.</p><p>그리고 마이크로소프트에서 이 Javascript의 파생 버전인 JScript를 만들었다.</p><p>당시 웹브라우저 시장은 넷스케이프가 압도적이었으나 MS사가 Windows에 자신들의 웹브라우저를 끼워팔면서 점유율은 역전되었다.</p><p>이 때 많은 웹브라우저 제조사들은 자사의 브라우저에서만 동작하는 기능을 경쟁적으로 만들면서 Javascript의 파편화가 극심해졌다.</p><p>이런 각 벤더 사마다 다른 Javascript를 표준화하기 위하여 넷스케이프가 ECMA 인터내셔널에 표준화를 요청하였고 그렇게 탄생한 것이 ECMAScript이다.</p><p>그러나 당시 막강한 점유율로 시장에서 압도적 우위에 있던 MS사의 미온한 참여로 당시 ECMAScript 버전은 많은 문제가 있었다.</p><p>그 후 Google의 Chrome이 IE의 점유율을 끌어내리면서 ESMAScript5(ES5)가 제정되면서 표준화 문제가 어느정도 해결되기 시작하였다.</p><p>이렇게 여러 밴드사가 공통으로 지원하는 Javascript의 Core를 ES = ESMAScript라고 한다.</p><p>그 외에 각 벤더의 브라우저가 별도로 지원하는 Web API는 어전히 존재하고 있다.<br>즉,</p><blockquote><p>자바스크립트 = ES + Web API</p></blockquote><p>와 같다.<br><a id="more"></a></p><h1 id="Node-js에서-Web-API"><a href="#Node-js에서-Web-API" class="headerlink" title="Node.js에서 Web API?"></a>Node.js에서 Web API?</h1><p>기본적으로 Javascript를 구동하는 환경은 브라우저이다.</p><p>그러나 Node.js의 등장으로 Javascript로 브라우저 밖에서 서버를 구축하는 등의 코드를 실행 할 수 있게 되었다.</p><p>그렇다면 두 환경은 같은가?</p><p>크롬 브라우저와 Node.js는 모두 V8엔진을 사용한다. 하지만 Node.js에서 Web API는 사용이 불가능하다.</p><blockquote><p>브라우저 : html, css + js</p><p>Node.js 환경 : ES + Node.js API</p></blockquote><p>브라우저에서 Web API의 관리는 V8엔진이 담당하지만 V8엔진을 사용한 Node.js는 Web API는 지원되지 않는다.</p><p>이는 브라우저에서 Web API에 대한 기능은 내부적으로는 V8엔진이 하지만 기본적으로는 ES코드를 실행하는 엔진이기 때문에 같은 V8엔진을 사용하는 Node.js에서는 실행이 되지 않느다.</p>]]></content>
<categories>
<category> fast campus </category>
<category> Javascript </category>
</categories>
<tags>
<tag> Javascript </tag>
<tag> ESMAScript </tag>
</tags>
</entry>
<entry>
<title>call_by_Value, call_by_Reference</title>
<link href="/2019/04/22/call-by-Value-call-by-Reference/"/>
<url>/2019/04/22/call-by-Value-call-by-Reference/</url>
<content type="html"><![CDATA[<h1 id="Call-by-Value-와-Call-by-Reference"><a href="#Call-by-Value-와-Call-by-Reference" class="headerlink" title="Call by Value 와 Call by Reference"></a>Call by Value 와 Call by Reference</h1><h2 id="Call-by-Value"><a href="#Call-by-Value" class="headerlink" title="Call by Value"></a>Call by Value</h2><figure class="highlight c hljs"><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="hljs-function"><span class="hljs-keyword">void</span> <span class="hljs-title">change_value</span><span class="hljs-params">(<span class="hljs-keyword">int</span> x, <span class="hljs-keyword">int</span> val)</span> </span>{</span><br><span class="line">x = val;</span><br><span class="line"><span class="hljs-built_in">printf</span>(<span class="hljs-string">"x : %d in change_value \n"</span>, x);</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="hljs-function"><span class="hljs-keyword">int</span> <span class="hljs-title">main</span><span class="hljs-params">(<span class="hljs-keyword">void</span>)</span> </span>{</span><br><span class="line"><span class="hljs-keyword">int</span> x = <span class="hljs-number">10</span>;</span><br><span class="line">change_value(x, <span class="hljs-number">20</span>);</span><br><span class="line"><span class="hljs-built_in">printf</span>(<span class="hljs-string">"x : %d in main \n"</span>, x);</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>위 소스는 main에서 선언된 변수 x에 값 10을 주고 변수 x와 정수 val 매개변수로 하여 change_value를 호출한 후 change_value에서 x의 값을 val로 변경하는 소스이다.</p><p><img src="https://user-images.githubusercontent.com/48123604/56506442-7622d600-6559-11e9-9741-97a8cd044c0c.png" alt="image"></p><p>실행을 하면 change_value에서 x의 값은 20으로 변경되었지만 main에서는 여전히 10이다.</p><p>이는 main에서 넘긴 x는 x의 값 10을 의미하기 때문에 이것을 바꾸어도 main의 x는 영향을 받지 않는다.</p><p>그래서 Call by Value이다.</p><hr><a id="more"></a><h2 id="Call-by-Reference"><a href="#Call-by-Reference" class="headerlink" title="Call by Reference"></a>Call by Reference</h2><p>그렇다면 change_value에서 main의 x의 값을 어떻게 변경하는가?<br><figure class="highlight c hljs"><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="hljs-meta">#<span class="hljs-meta-keyword">include</span> <stdio.h</span></span><br><span class="line"></span><br><span class="line"><span class="hljs-function"><span class="hljs-keyword">void</span> <span class="hljs-title">change_value</span><span class="hljs-params">(<span class="hljs-keyword">int</span> * x, <span class="hljs-keyword">int</span> val)</span> </span>{</span><br><span class="line">*x = val;</span><br><span class="line"><span class="hljs-built_in">printf</span>(<span class="hljs-string">"x : %d in change_value \n"</span>, *x);</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="hljs-function"><span class="hljs-keyword">int</span> <span class="hljs-title">main</span><span class="hljs-params">(<span class="hljs-keyword">void</span>)</span> </span>{</span><br><span class="line"><span class="hljs-keyword">int</span> x = <span class="hljs-number">10</span>;</span><br><span class="line">change_value(&x, <span class="hljs-number">20</span>);</span><br><span class="line"><span class="hljs-built_in">printf</span>(<span class="hljs-string">"x : %d in main \n"</span>, x);</span><br><span class="line">}</span><br></pre></td></tr></table></figure><br>위 소스는 Call by Value와 거의 흡사하지만 결과는 다르다.</p><p><img src="https://user-images.githubusercontent.com/48123604/56506704-46280280-655a-11e9-8aff-a3d1421316d3.png" alt="image"></p><p>값이 변경되었다!</p><p>왜?!</p><p>main이 change_value를 호출 할 때 x의 값을 넘긴게 아니라 x의 주소를 넘겨 change_value에서 x의 주소의 값을 변경하여 main의 x의 값이 바뀌게 된다.</p><hr><h2 id="아닌데-그거-Call-by-Address인데"><a href="#아닌데-그거-Call-by-Address인데" class="headerlink" title="아닌데! 그거 Call by Address인데!"></a>아닌데! 그거 Call by Address인데!</h2><p>맞다. 사실 이것은 Call by Reference가 아니라 Call by Address라 부르는 그것이다.</p><p>주소를 넘겼는데 이 주소도 <code>주소값</code> 즉, 값이다.</p><p>그러니 Call by Value인데 주소를 넘겼기에 Call by Address라 부르는 것이다.</p><p><img src="https://user-images.githubusercontent.com/48123604/56507347-f813fe80-655b-11e9-8bcf-11e64357176a.png" alt="image"></p><p>visual studio에서 change_value의 x값을 보면 위와 같다.</p><p>x에는 주소값이 들어있고 그 주소에는 20이 들어있다.</p><p><code>*x = val;</code> 은 그 x의 주소에 들어있는 값을 val로 바꾸는 것이다.</p><p>그렇기에 x의 주소는 따로 존재한다.</p><p>즉 x라는 변수는 따로 메모리주소를 갖고 있으며 그 메모리 주소에는 값으로 주소를 가지고 있다. 그 가지고 있는 주소의 값은 main의 변수 x의 주소이기에 그 x의 주소를 가지고 값을 변경하는 것이다.</p><p><img src="https://user-images.githubusercontent.com/48123604/56507599-c2234a00-655c-11e9-97d1-0104beee8f0f.png" alt="image"></p><p>change_value에서 x가 가지고 있는 값은 main에서 x의 주소와 동일하다.</p><p>주소<code>값</code>도 <code>값</code>이기 때문에 Call by Value이고 <code>주소</code>값이기 때문에 일반 값과 구분하여 Call by Address이다.</p><hr><h2 id="C에는-포인터만-있지만-C-에는-참조자가-있지"><a href="#C에는-포인터만-있지만-C-에는-참조자가-있지" class="headerlink" title="C에는 포인터만 있지만 C++에는 참조자가 있지!"></a>C에는 포인터만 있지만 C++에는 참조자가 있지!</h2><p>이와 동일한 소스를 C++로 해보면 역시나 동일하다.</p><figure class="highlight c++ hljs"><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="hljs-meta">#<span class="hljs-meta-keyword">include</span><iostream</span></span><br><span class="line"><span class="hljs-keyword">using</span> <span class="hljs-keyword">namespace</span> <span class="hljs-built_in">std</span>;</span><br><span class="line"></span><br><span class="line"><span class="hljs-function"><span class="hljs-keyword">void</span> <span class="hljs-title">change_value</span><span class="hljs-params">(<span class="hljs-keyword">int</span> * x, <span class="hljs-keyword">int</span> val)</span> </span>{</span><br><span class="line">*x = val;</span><br><span class="line"><span class="hljs-built_in">cout</span> << <span class="hljs-string">"x : "</span> << *x << <span class="hljs-string">" in change_value"</span> << <span class="hljs-built_in">endl</span>;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="hljs-function"><span class="hljs-keyword">int</span> <span class="hljs-title">main</span><span class="hljs-params">(<span class="hljs-keyword">void</span>)</span> </span>{</span><br><span class="line"><span class="hljs-keyword">int</span> x = <span class="hljs-number">10</span>;</span><br><span class="line">change_value(&x, <span class="hljs-number">20</span>);</span><br><span class="line"><span class="hljs-built_in">cout</span> << <span class="hljs-string">"x : "</span> << x << <span class="hljs-string">" in main"</span> << <span class="hljs-built_in">endl</span>;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p><img src="https://user-images.githubusercontent.com/48123604/56507983-006d3900-655e-11e9-9dcb-f5a39285a948.png" alt="image"></p><p><img src="https://user-images.githubusercontent.com/48123604/56508031-1e3a9e00-655e-11e9-9693-d73dd9a123e9.png" alt="image"></p><p><img src="https://user-images.githubusercontent.com/48123604/56508082-3f02f380-655e-11e9-90fc-a6f4a7e344cc.png" alt="image"></p><p>하지만 이 소스를 참조자를 이용하여 짤 수 있다.</p><figure class="highlight c++ hljs"><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="hljs-meta">#<span class="hljs-meta-keyword">include</span><iostream</span></span><br><span class="line"><span class="hljs-keyword">using</span> <span class="hljs-keyword">namespace</span> <span class="hljs-built_in">std</span>;</span><br><span class="line"></span><br><span class="line"><span class="hljs-function"><span class="hljs-keyword">void</span> <span class="hljs-title">change_value</span><span class="hljs-params">(<span class="hljs-keyword">int</span> &x, <span class="hljs-keyword">int</span> val)</span> </span>{</span><br><span class="line">x = val;</span><br><span class="line"><span class="hljs-built_in">cout</span> << <span class="hljs-string">"x : "</span> << x << <span class="hljs-string">" in change_value"</span> << <span class="hljs-built_in">endl</span>;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="hljs-function"><span class="hljs-keyword">int</span> <span class="hljs-title">main</span><span class="hljs-params">(<span class="hljs-keyword">void</span>)</span> </span>{</span><br><span class="line"><span class="hljs-keyword">int</span> x = <span class="hljs-number">10</span>;</span><br><span class="line">change_value(x, <span class="hljs-number">20</span>);</span><br><span class="line"><span class="hljs-built_in">cout</span> << <span class="hljs-string">"x : "</span> << x << <span class="hljs-string">" in main"</span> << <span class="hljs-built_in">endl</span>;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p><img src="https://user-images.githubusercontent.com/48123604/56508800-2f84aa00-6560-11e9-99e7-10bb29e60137.png" alt="image"></p><p><img src="https://user-images.githubusercontent.com/48123604/56508831-462b0100-6560-11e9-9704-d0173e4c3c30.png" alt="image"></p><p>위 change_value에서 x에는 정수 값이 들어있고 x의 주소는 main에서 x의 주소와 동일하다.</p><p>오오! c++에서 참조자를 이용한 함수 호출에서는 진정으로 Call by Reference가 이루어지는 것이다.</p><p>c에는 참조자가 없지? 아마?</p><p>그렇기에 Call by Address다.</p><hr><h2 id="어차피-컴파일러는-주소로-연산한다"><a href="#어차피-컴파일러는-주소로-연산한다" class="headerlink" title="어차피 컴파일러는 주소로 연산한다."></a>어차피 컴파일러는 주소로 연산한다.</h2><p>Call by Value, Call by Reference, Call by Address 다 값을 전달하는 건 똑같다.</p><p>Call by Reference는 호출 할 때 값을 전달하는 것처럼 보이지만 포인터로 받는거다.</p><p>다 똑같다. 어차피 컴파일러는 주소로 연산한다. 코드에서 선언을 포인터와 참조자 중 뭐로 했냐의 차이다.</p><p>C언어의 창시자인 데니스 리차드가 쓴 The C Programming Language를 보자.</p><p><img src="https://user-images.githubusercontent.com/48123604/56510054-a5d6db80-6563-11e9-88c7-e1fe9bafb9ce.png" alt="image"></p><p>C언어는 <code>값</code>으로 인자를 전달한다.</p><p>Call by Reference는 호출 된 함수는 복사본이 아닌 원래 인수에 액세스 할 수 있는건데 결국 Call by Address도 주소값을 이용하여 원래 인수의 값을 바꾼다.</p><p><img src="https://user-images.githubusercontent.com/48123604/56511116-bfc5ed80-6566-11e9-80a1-410d7692437a.png" alt="image"></p><p><img src="https://user-images.githubusercontent.com/48123604/56511233-0e738780-6567-11e9-9bac-2e3e48b4c722.png" alt="image"></p><p><img src="https://user-images.githubusercontent.com/48123604/56511182-ebe16e80-6566-11e9-85ea-0a5a4c2178ce.png" alt="image"></p><p>순서대로 Call by Value, Call by Address, Call by Reference다.</p><p>Call by Value는 call stack에서 호출된 함수는 호출을 한 main의 인자에 접근 할 수 없다.</p><p>나머지 둘은 접근한다.</p><p>함수가 자신의 stack frame의 인수에만 영향을 줄 수 있다면 Call by Value이고 자신을 호출한 stack frame에 인수를 변경 가능하다면 Call by Reference이기에 결국 <b>주소를 이용하여 값을 변경하는 Call by Address도 값을 이용하지만 Call by Reference의 의미에 맞는게 아닌가 싶다.</b></p>]]></content>
<categories>
<category> Study </category>
<category> programming </category>
</categories>
<tags>
<tag> study </tag>
<tag> coding </tag>
<tag> call by value </tag>
<tag> call by reference </tag>
</tags>
</entry>
<entry>
<title>codility Lesson2 CyclicRotation</title>
<link href="/2019/04/19/codility-2-2-CyclicRotation/"/>
<url>/2019/04/19/codility-2-2-CyclicRotation/</url>
<content type="html"><![CDATA[<h1 id="CyclicRotation"><a href="#CyclicRotation" class="headerlink" title="CyclicRotation"></a>CyclicRotation</h1><figure class="highlight plain hljs"><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></pre></td><td class="code"><pre><span class="line">An array A consisting of N integers is given. Rotation of the array means that each element is shifted right by one index, and the last element of the array is moved to the first place. For example, the rotation of array A = [3, 8, 9, 7, 6] is [6, 3, 8, 9, 7] (elements are shifted right by one index and 6 is moved to the first place).</span><br><span class="line"></span><br><span class="line">The goal is to rotate array A K times; that is, each element of A will be shifted to the right K times.</span><br><span class="line"></span><br><span class="line">Write a function:</span><br><span class="line"></span><br><span class="line"> def solution(A, K)</span><br><span class="line"></span><br><span class="line">that, given an array A consisting of N integers and an integer K, returns the array A rotated K times.</span><br><span class="line"></span><br><span class="line">For example, given</span><br><span class="line"> A = [3, 8, 9, 7, 6]</span><br><span class="line"> K = 3</span><br><span class="line"></span><br><span class="line">the function should return [9, 7, 6, 3, 8]. Three rotations were made:</span><br><span class="line"> [3, 8, 9, 7, 6] -[6, 3, 8, 9, 7]</span><br><span class="line"> [6, 3, 8, 9, 7] -[7, 6, 3, 8, 9]</span><br><span class="line"> [7, 6, 3, 8, 9] -[9, 7, 6, 3, 8]</span><br><span class="line"></span><br><span class="line">For another example, given</span><br><span class="line"> A = [0, 0, 0]</span><br><span class="line"> K = 1</span><br><span class="line"></span><br><span class="line">the function should return [0, 0, 0]</span><br><span class="line"></span><br><span class="line">Given</span><br><span class="line"> A = [1, 2, 3, 4]</span><br><span class="line"> K = 4</span><br><span class="line"></span><br><span class="line">the function should return [1, 2, 3, 4]</span><br><span class="line"></span><br><span class="line">Assume that:</span><br><span class="line"></span><br><span class="line"> N and K are integers within the range [0..100];</span><br><span class="line"> each element of array A is an integer within the range [−1,000..1,000].</span><br><span class="line"></span><br><span class="line">In your solution, focus on correctness. The performance of your solution will not be the focus of the assessment.</span><br><span class="line">Copyright 2009–2019 by Codility Limited. All Rights Reserved. Unauthorized copying, publication or disclosure prohibited.</span><br></pre></td></tr></table></figure><a id="more"></a><h2 id="방법"><a href="#방법" class="headerlink" title="방법"></a>방법</h2><p>배열 A의 크기를 N으로 하였을 때 N의 요소들을 K만큼 옮기기 위하여 N의 요소들의 index값에 K를 더하여 해결<br>N의 inedx+K의 값이 N의 전체 길이보다 클 경우 0부터 증가시킴<br>위 방법을 그대로 사용 할 경우 반복이 많아짐<br>N의 길이가 5이고 K가 3이라고 할 경우 N[0]의 값은 N[3]이 되며 N[4]는 N[7]이 되어 0부터 다시 계산하면 N[2]가 됨<br>K의 값이 N의 길이보다 많이 클 경우를 생각하여 %연산을 이용<br>즉 본래 index+K의 값을 N의 길이로 나눈 나머지 값을 새로운 index로 사용<br>N[4]는 N[7]되고 7%5=2가 됨</p><hr><h2 id="코드"><a href="#코드" class="headerlink" title="코드"></a>코드</h2><figure class="highlight python hljs"><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 class="hljs-keyword">import</span> copy</span><br><span class="line"><span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title">solution</span><span class="hljs-params">(A, K)</span>:</span></span><br><span class="line"> <span class="hljs-comment"># write your code in Python 3.6</span></span><br><span class="line"></span><br><span class="line"> n = len(A)</span><br><span class="line"> </span><br><span class="line"> </span><br><span class="line"> <span class="hljs-comment">#return [9, 7, 6, 3, 8]. </span></span><br><span class="line"> result = copy.deepcopy(A)</span><br><span class="line"> </span><br><span class="line"> <span class="hljs-keyword">if</span> n==<span class="hljs-number">0</span> <span class="hljs-keyword">or</span> K%n==<span class="hljs-number">0</span>:</span><br><span class="line"> <span class="hljs-keyword">return</span> A</span><br><span class="line"> </span><br><span class="line"> <span class="hljs-keyword">else</span>:</span><br><span class="line"> <span class="hljs-keyword">for</span> i <span class="hljs-keyword">in</span> range(n):</span><br><span class="line"> index = (i+K)%n </span><br><span class="line"> result[index] = A[i] </span><br><span class="line"> <span class="hljs-keyword">return</span> result</span><br><span class="line"> </span><br><span class="line"> <span class="hljs-keyword">pass</span></span><br></pre></td></tr></table></figure><hr><h2 id="추가"><a href="#추가" class="headerlink" title="추가"></a>추가</h2><p>오늘 python을 배운김에 python으로 작성해봄</p><hr><h2 id="결과"><a href="#결과" class="headerlink" title="결과"></a>결과</h2><p><img src="https://user-images.githubusercontent.com/48123604/56419609-cd187900-62d5-11e9-8d3a-77cfe2e9e2e9.png" alt="image"></p>]]></content>
<categories>
<category> Study </category>
<category> codility </category>
</categories>
<tags>
<tag> study </tag>
<tag> coding </tag>
<tag> codility </tag>
</tags>
</entry>
<entry>
<title>codility Lesson2 OddOccurrencesInArray</title>
<link href="/2019/04/19/codility-2-1-OddOccurrencesInArray/"/>
<url>/2019/04/19/codility-2-1-OddOccurrencesInArray/</url>
<content type="html"><![CDATA[<h1 id="OddOccurrencesInArray"><a href="#OddOccurrencesInArray" class="headerlink" title="OddOccurrencesInArray"></a>OddOccurrencesInArray</h1><figure class="highlight plain hljs"><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></pre></td><td class="code"><pre><span class="line">A non-empty array A consisting of N integers is given. The array contains an odd number of elements, and each element of the array can be paired with another element that has the same value, except for one element that is left unpaired.</span><br><span class="line"></span><br><span class="line">For example, in array A such that:</span><br><span class="line"> A[0] = 9 A[1] = 3 A[2] = 9</span><br><span class="line"> A[3] = 3 A[4] = 9 A[5] = 7</span><br><span class="line"> A[6] = 9</span><br><span class="line"></span><br><span class="line"> the elements at indexes 0 and 2 have value 9,</span><br><span class="line"> the elements at indexes 1 and 3 have value 3,</span><br><span class="line"> the elements at indexes 4 and 6 have value 9,</span><br><span class="line"> the element at index 5 has value 7 and is unpaired.</span><br><span class="line"></span><br><span class="line">Write a function:</span><br><span class="line"></span><br><span class="line"> function solution(A);</span><br><span class="line"></span><br><span class="line">that, given an array A consisting of N integers fulfilling the above conditions, returns the value of the unpaired element.</span><br><span class="line"></span><br><span class="line">For example, given array A such that:</span><br><span class="line"> A[0] = 9 A[1] = 3 A[2] = 9</span><br><span class="line"> A[3] = 3 A[4] = 9 A[5] = 7</span><br><span class="line"> A[6] = 9</span><br><span class="line"></span><br><span class="line">the function should return 7, as explained in the example above.</span><br><span class="line"></span><br><span class="line">Write an efficient algorithm for the following assumptions:</span><br><span class="line"></span><br><span class="line"> N is an odd integer within the range [1..1,000,000];</span><br><span class="line"> each element of array A is an integer within the range [1..1,000,000,000];</span><br><span class="line"> all but one of the values in A occur an even number of times.</span><br><span class="line"></span><br><span class="line">Copyright 2009–2019 by Codility Limited. All Rights Reserved. Unauthorized copying, publication or disclosure prohibited.</span><br></pre></td></tr></table></figure><a id="more"></a><h2 id="방법"><a href="#방법" class="headerlink" title="방법"></a>방법</h2><p>xor을 이용<br>0과 어떤 수 n을 xor 연산하면 n이된다.<br><code>000 xor 101</code>의 결과는 <code>101</code>이다.<br>어떤 수 n에 x를 짝수번 xor연산 할 경우 그 값은 n과 동일하다.<br>10진수 5은 2진수로 101이고 10진수 3은 2진수로 011이다.<br><code>101 xor 011</code>의 결과는 <code>110</code> 이고 <code>110 xor 011</code>의 결과는 <code>101</code>이 된다.<br>즉 0에 짝수개 만큼 존재하는 수들을 xor연산하면 그 결과는 0이 되고 짝수개가 존재하는 수들 가운데 홀수개가 존재하는 수를 xor하면 결국 홀수개가 존재하는 수의 값이 남는다.<br>0에 7, 5, 7, 4, 5를 xor연산하면 7과 5는 두 개씩 존재하기 때문에 0이되고 하나만 존재하는 4의 값만 남는다.</p><hr><h2 id="코드"><a href="#코드" class="headerlink" title="코드"></a>코드</h2><figure class="highlight javascript hljs"><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="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">solution</span>(<span class="hljs-params">A</span>) </span>{</span><br><span class="line"> <span class="hljs-comment">// write your code in JavaScript (Node.js 8.9.4)</span></span><br><span class="line"> <span class="hljs-keyword">var</span> result = <span class="hljs-number">0</span>;</span><br><span class="line"> <span class="hljs-keyword">for</span>(<span class="hljs-keyword">var</span> i=<span class="hljs-number">0</span>; i<A.length; i++){</span><br><span class="line"> result = result^A[i];</span><br><span class="line"> }</span><br><span class="line"> </span><br><span class="line"> <span class="hljs-keyword">return</span> result;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><hr><h2 id="결과"><a href="#결과" class="headerlink" title="결과"></a>결과</h2><p><img src="https://user-images.githubusercontent.com/48123604/56371200-a146b600-6237-11e9-97f1-a2ccce91fd62.png" alt="image"></p>]]></content>
<categories>
<category> Study </category>
<category> codility </category>
</categories>
<tags>
<tag> study </tag>
<tag> coding </tag>
<tag> codility </tag>
</tags>
</entry>
<entry>
<title>box-sizing</title>
<link href="/2019/04/18/box-sizing/"/>
<url>/2019/04/18/box-sizing/</url>
<content type="html"><![CDATA[<h1 id="box-sizing과-box-model"><a href="#box-sizing과-box-model" class="headerlink" title="box-sizing과 box model"></a>box-sizing과 box model</h1><h2 id="box의-크기를-어떤-기준으로-계산-할-것인가"><a href="#box의-크기를-어떤-기준으로-계산-할-것인가" class="headerlink" title="box의 크기를 어떤 기준으로 계산 할 것인가?"></a>box의 크기를 어떤 기준으로 계산 할 것인가?</h2><p> HTML은 Box로 이루어져 있으며 문서의 레이아웃을 계산 할 때 박스 모델에 따라 박스의 사이즈가 달라지게 됨</p><hr><h2 id="box의-크기는-어떤-요소들로-이루어-지는가"><a href="#box의-크기는-어떤-요소들로-이루어-지는가" class="headerlink" title="box의 크기는 어떤 요소들로 이루어 지는가?"></a>box의 크기는 어떤 요소들로 이루어 지는가?</h2><p> box의 크기에 영향을 주는 요소는 box의 width, height, border, padding, margin이 됨</p><hr><h2 id="각-요소의-값이-동일-할-때-box의-크기는-달라지는가"><a href="#각-요소의-값이-동일-할-때-box의-크기는-달라지는가" class="headerlink" title="각 요소의 값이 동일 할 때 box의 크기는 달라지는가?"></a>각 요소의 값이 동일 할 때 box의 크기는 달라지는가?</h2><figure class="highlight html hljs"><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="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"div content"</span>></span>content-box<span class="hljs-tag"></<span class="hljs-name">div</span>></span></span><br><span class="line"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"div border"</span>></span>border-box<span class="hljs-tag"></<span class="hljs-name">div</span>></span></span><br></pre></td></tr></table></figure><a id="more"></a><figure class="highlight css hljs"><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="hljs-selector-class">.div</span>{ </span><br><span class="line"> <span class="hljs-attribute">width</span>: <span class="hljs-number">100px</span>;</span><br><span class="line"> <span class="hljs-attribute">height</span>: <span class="hljs-number">100px</span>;</span><br><span class="line"> <span class="hljs-attribute">background</span>: pink;</span><br><span class="line"> <span class="hljs-attribute">border</span>:<span class="hljs-number">10px</span> solid black;</span><br><span class="line"> <span class="hljs-attribute">padding</span>: <span class="hljs-number">10px</span>;</span><br><span class="line"> <span class="hljs-attribute">margin</span>: <span class="hljs-number">20px</span>;</span><br><span class="line">}</span><br><span class="line"><span class="hljs-selector-class">.content</span>{</span><br><span class="line"> <span class="hljs-attribute">box-sizing</span>: content-box;</span><br><span class="line">}</span><br><span class="line"><span class="hljs-selector-class">.border</span>{</span><br><span class="line"> <span class="hljs-attribute">box-sizing</span>: border-box;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>다음과 같은 html과 css가 있을 때 두 div는 <code>.div</code>의 스타일을 적용받아 동일한 size가 됨</p><p>그러나 두 div는 box-sizing이 각각 content-box와 border-box로 box-sizing의 값이 다름</p><p><img src="https://user-images.githubusercontent.com/48123604/56360310-3ee1bb80-621f-11e9-9988-e611d6abcfd2.png" alt="image"><br>그 결과 두 div는 전혀 다른 크기를 갖게 됨</p><hr><h2 id="왜-두-div는-다른-크기가-되었는가"><a href="#왜-두-div는-다른-크기가-되었는가" class="headerlink" title="왜 두 div는 다른 크기가 되었는가?"></a>왜 두 div는 다른 크기가 되었는가?</h2><p><img src="https://user-images.githubusercontent.com/48123604/56360381-6e90c380-621f-11e9-8876-919c1da8ce05.png" alt="image"><br><img src="https://user-images.githubusercontent.com/48123604/56360430-96802700-621f-11e9-83fd-12190fdc3146.png" alt="image"></p><p>위는 content, 아래는 border의 사이즈</p><p>content-box는 100x100의 사이즈에 추가적으로 10px의 padding, 10px의 border와 20px의 margin을 추가적으로 갖게 되어 총 140x140의 사이즈를 갖게 됨</p><p>border-box는 100x100의 사이즈를 10px의 border와 padding이 함께 갖게 됨</p><p>즉 content-box에서 height와 width는 box의 content의 크기이며 그 외 padding과 margin, border의 크기를 추가로 갖음</p><p>border-box는 border까지는 크기를 함게 갖고 margin의 크기를 추가로 갖게 됨</p>]]></content>
<categories>
<category> Study </category>
<category> HTML-CSS </category>
</categories>
<tags>
<tag> HTML-CSS </tag>
<tag> study </tag>
</tags>
</entry>
<entry>
<title>codility Lesson1 BinaryGap</title>
<link href="/2019/04/17/codility-1-1-BinaryGap/"/>
<url>/2019/04/17/codility-1-1-BinaryGap/</url>
<content type="html"><![CDATA[<h1 id="BinaryGap"><a href="#BinaryGap" class="headerlink" title="BinaryGap"></a>BinaryGap</h1><figure class="highlight plain hljs"><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">A binary gap within a positive integer N is any maximal sequence of consecutive zeros that is surrounded by ones at both ends in the binary representation of N.</span><br><span class="line"></span><br><span class="line">For example, number 9 has binary representation 1001 and contains a binary gap of length 2. The number 529 has binary representation 1000010001 and contains two binary gaps: one of length 4 and one of length 3. The number 20 has binary representation 10100 and contains one binary gap of length 1. The number 15 has binary representation 1111 and has no binary gaps. The number 32 has binary representation 100000 and has no binary gaps.</span><br><span class="line"></span><br><span class="line">Write a function:</span><br><span class="line"></span><br><span class="line"> function solution(N);</span><br><span class="line"></span><br><span class="line">that, given a positive integer N, returns the length of its longest binary gap. The function should return 0 if N doesn't contain a binary gap.</span><br><span class="line"></span><br><span class="line">For example, given N = 1041 the function should return 5, because N has binary representation 10000010001 and so its longest binary gap is of length 5. Given N = 32 the function should return 0, because N has binary representation '100000' and thus no binary gaps.</span><br><span class="line"></span><br><span class="line">Write an efficient algorithm for the following assumptions:</span><br><span class="line"></span><br><span class="line"> N is an integer within the range [1..2,147,483,647].</span><br><span class="line"></span><br><span class="line">Copyright 2009–2019 by Codility Limited. All Rights Reserved. Unauthorized copying, publication or disclosure prohibited.</span><br></pre></td></tr></table></figure><a id="more"></a><h2 id="기본"><a href="#기본" class="headerlink" title="기본"></a>기본</h2><p>input : 37<br>입력된 값 N을 2진수로 변경하였을 때 1과 1 사이의 가장 많은 0의 수를 계산하는 문제로 N을 2로 나누어 떨어지는 경우는 0으로 나누어 지지 않는 경우는 1이기 때문에 나머지가 0인 경우 숫자를 카운트</p><p>10진수 37의 경우 2진수로 100101이며 2로 나눈 값은 10진수로 18과 나머지 1, 2진수로 10010과 나머지 1이 된다.</p><p>2로 나누어 지지 않는 경우 나머지는 2진수의 가장 오른쪽 1이고 이 후 2로 나누어지는 경우 2진수에서 가장 오른쪽에 다시 1이 올 때까지 0의 갯수를 카운트한다.</p><p>기본 cnt는 0이기 때문에 2진수로 1, 10, 100 등과 같이 1이 하나만 존재하는 수는 cnt의 값이 증가하지 않는다.</p><hr><h2 id="추가"><a href="#추가" class="headerlink" title="추가"></a>추가</h2><p>2진수 1000100000과 같이 끝이 1로 끝나지 않는 2진수는 결국 10001만 필요하고 100000은 오른족이 1이 아니기 때문에 숫자를 카운트 할 필요가 없기 때문에 right shift연산을 한다.</p><p>2진수 2는 10이기 때문에 1000100000가 10001이 될 때까지 right shift를 하여 10001을 만든다.<br>이 부분은 shift연산이 아닌 N/2연산을 통해 2진수 10으로 나누어도 동일한 결과를 얻을 수 있다.</p><p>추가2 부분을 나누기로 할 경우 javascript는 모든 숫자가 double형이기 때문에 N을 2로 나눈 후 소수점을 버린다.</p><hr><h2 id="코드"><a href="#코드" class="headerlink" title="코드"></a>코드</h2><figure class="highlight javascript hljs"><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="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">solution</span>(<span class="hljs-params">N</span>) </span>{</span><br><span class="line"> <span class="hljs-comment">// write your code in JavaScript (Node.js 8.9.4)</span></span><br><span class="line"> <span class="hljs-keyword">var</span> cnt = <span class="hljs-number">0</span>;</span><br><span class="line"> <span class="hljs-keyword">var</span> max = <span class="hljs-number">-1</span>; </span><br><span class="line"> </span><br><span class="line"> <span class="hljs-comment">//추가1</span></span><br><span class="line"> <span class="hljs-keyword">while</span> (N % <span class="hljs-number">2</span> == <span class="hljs-number">0</span>)</span><br><span class="line"> {</span><br><span class="line"> N = N <span class="hljs-number">1</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="hljs-keyword">while</span> (N <span class="hljs-number">0</span>)</span><br><span class="line"> {</span><br><span class="line"> <span class="hljs-keyword">if</span> (N % <span class="hljs-number">2</span> == <span class="hljs-number">0</span>)</span><br><span class="line"> {</span><br><span class="line"> cnt++;</span><br><span class="line"> }</span><br><span class="line"> <span class="hljs-keyword">else</span></span><br><span class="line"> {</span><br><span class="line"> max = <span class="hljs-built_in">Math</span>.max(cnt, max);</span><br><span class="line"> cnt = <span class="hljs-number">0</span>;</span><br><span class="line"> }</span><br><span class="line"> </span><br><span class="line"> N = N <span class="hljs-number">1</span>; <span class="hljs-comment">//추가2</span></span><br><span class="line"> }</span><br><span class="line"> <span class="hljs-keyword">return</span> max;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h2 id="결과"><a href="#결과" class="headerlink" title="결과"></a>결과</h2><p><img src="https://user-images.githubusercontent.com/48123604/56284179-b4318b80-614e-11e9-9144-85dc32c7f247.png" alt="image"></p>]]></content>
<categories>
<category> Study </category>
<category> codility </category>
</categories>
<tags>
<tag> study </tag>
<tag> coding </tag>
<tag> codility </tag>
</tags>
</entry>
<entry>
<title>2019-04-16 TIL</title>
<link href="/2019/04/16/fc-190416/"/>
<url>/2019/04/16/fc-190416/</url>
<content type="html"><![CDATA[<h1 id="picture"><a href="#picture" class="headerlink" title="picture"></a>picture</h1><p><code><picture></code> 내에 <code><img></code>를 사용하는 것은 필수</p><figure class="highlight hljs"><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"><div class="rwd-wrapper"></span><br><span class="line"> <<span class="hljs-selector-tag">picture</span>></span><br><span class="line"> <source srcset="images/image-1x.png 1x, images/image-2x.png 2x" </span><br><span class="line"> </picture></span><br><span class="line"></div></span><br></pre></td></tr></table></figure><a id="more"></a><p><img src="https://user-images.githubusercontent.com/48123604/56175768-958aa200-6033-11e9-8a52-1b948ee53b98.png" alt="image"></p><figure class="highlight hljs"><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"><div class="rwd-wrapper"></span><br><span class="line"> <<span class="hljs-selector-tag">picture</span>></span><br><span class="line"> <source srcset="images/image-1x.png 1x, images/image-2x.png 2x"></span><br><span class="line"> <img src="images/image-src.png"></span><br><span class="line"> </picture></span><br><span class="line"></div></span><br></pre></td></tr></table></figure><p><img src="https://user-images.githubusercontent.com/48123604/56175793-afc48000-6033-11e9-83ac-40ad118fc55c.png" alt="image"></p>]]></content>
<categories>
<category> fast campus </category>
<category> HTML-CSS </category>
</categories>
<tags>
<tag> HTML-CSS </tag>
<tag> TIL </tag>
</tags>
</entry>
<entry>
<title>2019-04-15 TIL</title>
<link href="/2019/04/15/fc-190415/"/>
<url>/2019/04/15/fc-190415/</url>
<content type="html"><![CDATA[<h1 id="footer"><a href="#footer" class="headerlink" title="footer"></a>footer</h1><h2 id="img"><a href="#img" class="headerlink" title="img"></a>img</h2><p><img src="https://user-images.githubusercontent.com/48123604/56102827-7e33b200-5f6a-11e9-8b80-1e12403bf194.png" alt="image"></p><hr><h2 id="마크업"><a href="#마크업" class="headerlink" title="마크업"></a>마크업</h2><p>내 마크업<br><figure class="highlight plain hljs"><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">div.footer-bg</span><br><span class="line"> footer.footer</span><br><span class="line"> a</span><br><span class="line"> img</span><br><span class="line"> </span><br><span class="line"> ul.footer-menu</span><br><span class="line"> li</span><br><span class="line"> div.copyright</span><br><span class="line"> p</span><br><span class="line"> a</span><br><span class="line"> p</span><br><span class="line"> div.badge</span><br><span class="line"> img.badge-html</span><br><span class="line"> img.badge-css</span><br></pre></td></tr></table></figure></p><a id="more"></a><p>강사님 마크업<br><figure class="highlight plain hljs"><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">.footer</span><br><span class="line"> a.footer-logo</span><br><span class="line"> img</span><br><span class="line"> ul.guide</span><br><span class="line"> li</span><br><span class="line"> a</span><br><span class="line"> address.address</span><br><span class="line"> span</span><br><span class="line"> span</span><br><span class="line"> span</span><br><span class="line"> a</span><br><span class="line"> small.copyright</span><br><span class="line"> div.badge</span><br><span class="line"> img</span><br><span class="line"> img</span><br></pre></td></tr></table></figure></p><h3 id="address"><a href="#address" class="headerlink" title="address"></a>address</h3><p>주소, 연락처에 사용<br>본문에서는 사용하지 않음</p><hr><h3 id="small-amp-big"><a href="#small-amp-big" class="headerlink" title="small & big"></a>small & big</h3><p>small : 주변 보다 작게<br>big : 주변 보다 크게</p><hr><h3 id="copyright"><a href="#copyright" class="headerlink" title="copyright"></a>copyright</h3><p>&copy\; 로 입력 </p><h1 id="반응형"><a href="#반응형" class="headerlink" title="반응형"></a>반응형</h1><h2 id="padding"><a href="#padding" class="headerlink" title="padding"></a>padding</h2><p>padding 은 width의 값을 기준으로 동작<br>width가 100% 일 때 padding-top을 75%로 하면 4:3이 됨</p>]]></content>
<categories>
<category> fast campus </category>
<category> HTML-CSS </category>
</categories>
<tags>
<tag> HTML-CSS </tag>
<tag> TIL </tag>
</tags>
</entry>
<entry>
<title>2019-04-12 TIL</title>
<link href="/2019/04/12/fc-190412/"/>
<url>/2019/04/12/fc-190412/</url>
<content type="html"><![CDATA[<h1 id="인기-사이트"><a href="#인기-사이트" class="headerlink" title="인기 사이트"></a>인기 사이트</h1><p><img src="https://user-images.githubusercontent.com/48123604/56009298-4fbf9800-5d1a-11e9-9030-248e5e3ff541.png" alt="image"></p><h2 id="마크업"><a href="#마크업" class="headerlink" title="마크업"></a>마크업</h2><p>내 마크업<br><figure class="highlight plain hljs"><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">section.favorite</span><br><span class="line"> h2.favorite-heading</span><br><span class="line"> ol.favorite-list</span><br><span class="line"> li</span><br><span class="line"> a</span><br><span class="line"> strong </span><br><span class="line"> a.favorite-more</span><br></pre></td></tr></table></figure><br>강사님 마크업<br><figure class="highlight plain hljs"><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">section.favorite</span><br><span class="line"> h2.favorite=heading</span><br><span class="line"> ol</span><br><span class="line"> li.no1</span><br><span class="line"> a</span><br><span class="line"> em.up, em.down, em.stop</span><br><span class="line"> favorite-more</span><br></pre></td></tr></table></figure></p><a id="more"></a><h1 id="인용구"><a href="#인용구" class="headerlink" title="인용구"></a>인용구</h1><p><img src="https://user-images.githubusercontent.com/48123604/56020245-a9878880-5d41-11e9-9d3f-480f3c4a8fce.png" alt="image"></p><h2 id="인용구-tag"><a href="#인용구-tag" class="headerlink" title="인용구 tag"></a>인용구 tag</h2><figure class="highlight html hljs"><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="hljs-tag"><<span class="hljs-name">q</span>></span><span class="hljs-tag"></<span class="hljs-name">q</span>></span></span><br><span class="line"><span class="hljs-tag"><<span class="hljs-name">blockquote</span>></span><span class="hljs-tag"></<span class="hljs-name">blockquote</span>></span></span><br></pre></td></tr></table></figure><hr><h2 id="마크업-1"><a href="#마크업-1" class="headerlink" title="마크업"></a>마크업</h2><blockquote></blockquote><figure class="highlight plain hljs"><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">article.web-cafe</span><br><span class="line"> h2</span><br><span class="line"> p</span><br><span class="line"> footer</span><br></pre></td></tr></table></figure><p>article에 footer를 숨김영역으로 하여 내용을 복사 할 때 같이 복사가 됨</p><hr><h2 id="html"><a href="#html" class="headerlink" title="html"></a>html</h2><figure class="highlight html hljs"><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="hljs-tag"><<span class="hljs-name">article</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"slogan"</span>></span></span><br><span class="line"> <span class="hljs-tag"><<span class="hljs-name">h2</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"slogan-heading"</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"웹카페에서 웹표준을"</span>></span>슬로건<span class="hljs-tag"></<span class="hljs-name">h2</span>></span></span><br><span class="line"> <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"slogan-content"</span>></span></span><br><span class="line"> <span class="hljs-tag"><<span class="hljs-name">q</span> <span class="hljs-attr">site</span>=<span class="hljs-string">"http://w3.org"</span>></span>The power of the Web is in its universality, Access by everyone regardless of disability is an essential aspect." Tim Berners - Lee , W3C Director and inventor of the World Wide Web<span class="hljs-tag"></<span class="hljs-name">q</span>></span></span><br><span class="line"> <span class="hljs-tag"><<span class="hljs-name">footer</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"readable-hidden"</span>></span></span><br><span class="line"> 출처 : Worl Wide Web Consortium</span><br><span class="line"> <span class="hljs-tag"></<span class="hljs-name">footer</span>></span></span><br><span class="line"> <span class="hljs-tag"></<span class="hljs-name">p</span>></span></span><br><span class="line"><span class="hljs-tag"></<span class="hljs-name">article</span>></span></span><br></pre></td></tr></table></figure><figure class="highlight css hljs"><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></pre></td><td class="code"><pre><span class="line"><span class="hljs-selector-class">.slogan</span>{ </span><br><span class="line"> <span class="hljs-attribute">position</span>: relative;</span><br><span class="line"> <span class="hljs-attribute">padding</span>:<span class="hljs-number">10px</span> <span class="hljs-number">70px</span> <span class="hljs-number">10px</span> <span class="hljs-number">180px</span>;</span><br><span class="line">}</span><br><span class="line"><span class="hljs-selector-class">.slogan-heading</span>{ </span><br><span class="line"> <span class="hljs-attribute">width</span>: <span class="hljs-number">110px</span>;</span><br><span class="line"> <span class="hljs-attribute">height</span>: <span class="hljs-number">83px</span>;</span><br><span class="line"> <span class="hljs-attribute">line-height</span>: <span class="hljs-number">83px</span>;</span><br><span class="line"> <span class="hljs-attribute">text-align</span>: center;</span><br><span class="line"> <span class="hljs-attribute">position</span>: absolute;</span><br><span class="line"> <span class="hljs-attribute">left</span>: <span class="hljs-number">35px</span>;</span><br><span class="line"> <span class="hljs-attribute">bottom</span>: -<span class="hljs-number">35px</span>;</span><br><span class="line">} </span><br><span class="line"><span class="hljs-selector-class">.slogan-heading</span><span class="hljs-selector-pseudo">::after</span>{</span><br><span class="line"> <span class="hljs-attribute">content</span>: <span class="hljs-string">""</span>;</span><br><span class="line"> <span class="hljs-attribute">width</span>: <span class="hljs-number">100%</span>;</span><br><span class="line"> <span class="hljs-attribute">height</span>: <span class="hljs-number">100%</span>;</span><br><span class="line"> <span class="hljs-attribute">position</span>: absolute;</span><br><span class="line"> <span class="hljs-attribute">top</span>: <span class="hljs-number">0</span>;</span><br><span class="line"> <span class="hljs-attribute">left</span>: <span class="hljs-number">0</span>;</span><br><span class="line"> <span class="hljs-attribute">background</span>: <span class="hljs-built_in">url</span>(<span class="hljs-string">"./images/coffee.png"</span>) no-repeat;</span><br><span class="line">}</span><br><span class="line"><span class="hljs-selector-class">.slogan-content</span>{</span><br><span class="line"> <span class="hljs-attribute">color</span>: <span class="hljs-number">#a09784</span>;</span><br><span class="line">}</span><br><span class="line"><span class="hljs-selector-class">.slogan-content</span> <span class="hljs-selector-tag">q</span><span class="hljs-selector-pseudo">::before</span>{</span><br><span class="line"> <span class="hljs-attribute">content</span>: <span class="hljs-string">'"'</span>;</span><br><span class="line"> <span class="hljs-attribute">font-size</span>: <span class="hljs-number">3rem</span>;</span><br><span class="line"> <span class="hljs-attribute">position</span>: relative;</span><br><span class="line"> <span class="hljs-attribute">top</span>:<span class="hljs-number">10px</span>;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>]]></content>
<categories>
<category> fast campus </category>
<category> HTML-CSS </category>
</categories>
<tags>
<tag> HTML-CSS </tag>
<tag> TIL </tag>
</tags>
</entry>
<entry>
<title>2019-04-11 TIL</title>
<link href="/2019/04/11/fc-190411/"/>
<url>/2019/04/11/fc-190411/</url>
<content type="html"><![CDATA[<h1 id="새소식"><a href="#새소식" class="headerlink" title="새소식"></a>새소식</h1><p><img src="https://user-images.githubusercontent.com/48123604/55924758-1ddd0180-5c46-11e9-8fdf-0d59d410b8b0.png" alt="image"></p><h2 id="마크업"><a href="#마크업" class="headerlink" title="마크업"></a>마크업</h2><p>내 마크업<br><figure class="highlight plain hljs"><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">section.news</span><br><span class="line"> h2.news-header</span><br><span class="line"> a.news-link</span><br><span class="line"> article.news-item </span><br><span class="line"> h3.news-item-subject</span><br><span class="line"> time</span><br><span class="line"> p.news-item-brief </span><br><span class="line"> span</span><br><span class="line"> img </span><br><span class="line"> a.news-more</span><br></pre></td></tr></table></figure><br>강사님 마크업</p><figure class="highlight plain hljs"><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">section.news</span><br><span class="line"> h2.news-heading</span><br><span class="line"> article.news-item</span><br><span class="line"> h3.news-item-subject</span><br><span class="line"> time.news-item-date</span><br><span class="line"> p.news-item-brief</span><br><span class="line"> figure.news-item-thumbnail</span><br><span class="line"> img</span><br><span class="line"> figcaption</span><br><span class="line"> a.news-more</span><br></pre></td></tr></table></figure><hr><a id="more"></a><h2 id="figure"><a href="#figure" class="headerlink" title="figure"></a>figure</h2><p>caption을 달기 위한 마크업</p><blockquote><p>적절한 예 <br><br><img src="https://user-images.githubusercontent.com/48123604/55925870-043db900-5c4a-11e9-9d47-722cb463618e.png" alt="image"></p></blockquote><blockquote><p>부적절한 예<br><br><img src="https://user-images.githubusercontent.com/48123604/55925952-58489d80-5c4a-11e9-8166-f17de4f2fc89.png" alt="image"></p></blockquote><hr><h2 id="html"><a href="#html" class="headerlink" title="html"></a>html</h2><figure class="highlight html hljs"><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 class="hljs-tag"><<span class="hljs-name">section</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"news clearfix"</span>></span></span><br><span class="line"> <span class="hljs-tag"><<span class="hljs-name">h2</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"news-heading"</span>></span>새소식<span class="hljs-tag"></<span class="hljs-name">h2</span>></span></span><br><span class="line"> <span class="hljs-tag"><<span class="hljs-name">article</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"news-item clearfix"</span>></span></span><br><span class="line"> <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span></span><br><span class="line"> <span class="hljs-tag"><<span class="hljs-name">h3</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"news-item-subject"</span>></span>W3C 사이트가 리뉴얼 되었습니다.<span class="hljs-tag"></<span class="hljs-name">h3</span>></span></span><br><span class="line"> <span class="hljs-tag"><<span class="hljs-name">time</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"news-item-date"</span> <span class="hljs-attr">datetime</span>=<span class="hljs-string">"2019-04-11T11:19:37"</span>></span>2019.04.11<span class="hljs-tag"></<span class="hljs-name">time</span>></span></span><br><span class="line"> <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"news-item-brief"</span>></span>디자인 및 다양한 view 환경을 고려하여 구성되어 있으며, 기존보다 최신 정보 및 개발자를 위한 기술 가이드도 찾기</span><br><span class="line"> 쉽도록 구성되어 있습니다.</span><br><span class="line"> <span class="hljs-tag"></<span class="hljs-name">p</span>></span></span><br><span class="line"> <span class="hljs-tag"><<span class="hljs-name">figure</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"news-item-thumbnail"</span>></span></span><br><span class="line"> <span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"./images/news.gif"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">""</span>></span></span><br><span class="line"> <span class="hljs-tag"><<span class="hljs-name">figcaption</span>></span>W3C 리뉴얼<span class="hljs-tag"></<span class="hljs-name">figcaption</span>></span></span><br><span class="line"> <span class="hljs-tag"></<span class="hljs-name">figure</span>></span></span><br><span class="line"> <span class="hljs-tag"></<span class="hljs-name">a</span>></span></span><br><span class="line"> <span class="hljs-tag"></<span class="hljs-name">article</span>></span></span><br><span class="line"> <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"news-more icon-plus"</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"새소식"</span> <span class="hljs-attr">target</span>=<span class="hljs-string">"_blank"</span>></span>더보기<span class="hljs-tag"></<span class="hljs-name">a</span>></span></span><br><span class="line"><span class="hljs-tag"></<span class="hljs-name">section</span>></span></span><br></pre></td></tr></table></figure><hr><h2 id="css"><a href="#css" class="headerlink" title="css"></a>css</h2><p>내 css<br><figure class="highlight css hljs"><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></pre></td><td class="code"><pre><span class="line"><span class="hljs-comment">/* news */</span></span><br><span class="line"><span class="hljs-selector-class">.news</span>{ </span><br><span class="line"> <span class="hljs-attribute">position</span>: relative; </span><br><span class="line">}</span><br><span class="line"><span class="hljs-selector-class">.news-heading</span>{ </span><br><span class="line"> <span class="hljs-attribute">padding</span>: <span class="hljs-number">15px</span> <span class="hljs-number">0</span>;</span><br><span class="line"> <span class="hljs-attribute">color</span>: <span class="hljs-number">#e25d2d</span>;</span><br><span class="line"> <span class="hljs-attribute">font-weight</span>: <span class="hljs-number">700</span>;</span><br><span class="line">}</span><br><span class="line"><span class="hljs-selector-class">.news-item</span>{ </span><br><span class="line"> <span class="hljs-attribute">position</span>: relative;</span><br><span class="line"> <span class="hljs-attribute">margin</span>: <span class="hljs-number">35px</span> <span class="hljs-number">0</span>;</span><br><span class="line">}</span><br><span class="line"><span class="hljs-selector-class">.news-item-subject</span>{ </span><br><span class="line"> <span class="hljs-attribute">float</span>: right; </span><br><span class="line"> <span class="hljs-attribute">width</span>: <span class="hljs-number">245px</span>;</span><br><span class="line"> <span class="hljs-attribute">font-weight</span>: <span class="hljs-number">700</span>;</span><br><span class="line">}</span><br><span class="line"><span class="hljs-selector-class">.news-item-date</span>{ </span><br><span class="line"> <span class="hljs-attribute">float</span>: right; </span><br><span class="line"> <span class="hljs-attribute">width</span>: <span class="hljs-number">245px</span>; </span><br><span class="line"> <span class="hljs-attribute">margin-bottom</span>: <span class="hljs-number">10px</span>;</span><br><span class="line">}</span><br><span class="line"><span class="hljs-selector-class">.news-item-brief</span>{ </span><br><span class="line"> <span class="hljs-attribute">float</span>: right; </span><br><span class="line"> <span class="hljs-attribute">width</span>: <span class="hljs-number">245px</span>;</span><br><span class="line">}</span><br><span class="line"><span class="hljs-selector-class">.news-item-thumbnail</span>{</span><br><span class="line"> </span><br><span class="line"> <span class="hljs-attribute">float</span>: left;</span><br><span class="line"> <span class="hljs-attribute">position</span>: absolute;</span><br><span class="line"> <span class="hljs-attribute">top</span>: <span class="hljs-number">0</span>;</span><br><span class="line"> <span class="hljs-attribute">text-align</span>: center;</span><br><span class="line">}</span><br><span class="line"><span class="hljs-selector-class">.news-item-thumbnail</span>><span class="hljs-selector-tag">figcaption</span>{</span><br><span class="line"> <span class="hljs-attribute">margin-top</span>: <span class="hljs-number">10px</span>;</span><br><span class="line">}</span><br><span class="line"><span class="hljs-selector-class">.news</span>><span class="hljs-selector-tag">a</span>{</span><br><span class="line"> <span class="hljs-attribute">position</span>: absolute;</span><br><span class="line"> <span class="hljs-attribute">right</span>: <span class="hljs-number">0</span>;</span><br><span class="line"> <span class="hljs-attribute">top</span>: <span class="hljs-number">15px</span>;</span><br><span class="line">}</span><br><span class="line"><span class="hljs-selector-class">.news</span>><span class="hljs-selector-tag">a</span><span class="hljs-selector-pseudo">::before</span>{</span><br><span class="line"> <span class="hljs-attribute">color</span>: darkgreen;</span><br><span class="line">}</span><br></pre></td></tr></table></figure></p><p><br><br>강사님 css<br><figure class="highlight css hljs"><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><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br></pre></td><td class="code"><pre><span class="line"><span class="hljs-selector-class">.news</span>{ </span><br><span class="line"> <span class="hljs-attribute">margin-top</span>: <span class="hljs-number">20px</span>;</span><br><span class="line"> <span class="hljs-attribute">position</span>: relative;</span><br><span class="line">}</span><br><span class="line"><span class="hljs-selector-class">.news</span><span class="hljs-selector-pseudo">::before</span>{</span><br><span class="line"> <span class="hljs-attribute">content</span>: <span class="hljs-string">""</span>;</span><br><span class="line"> <span class="hljs-attribute">position</span>: absolute;</span><br><span class="line"> <span class="hljs-attribute">top</span>: <span class="hljs-number">35px</span>;</span><br><span class="line"> <span class="hljs-attribute">left</span>: <span class="hljs-number">0</span>;</span><br><span class="line"> <span class="hljs-attribute">width</span>: <span class="hljs-number">80%</span>;</span><br><span class="line"> <span class="hljs-attribute">height</span>: <span class="hljs-number">1px</span>;</span><br><span class="line"> <span class="hljs-attribute">background</span>: <span class="hljs-number">#aaa</span> <span class="hljs-built_in">linear-gradient</span>(to right, #aaa, #fff);</span><br><span class="line"></span><br><span class="line">}</span><br><span class="line"><span class="hljs-selector-class">.news-heading</span>{</span><br><span class="line"> <span class="hljs-attribute">font-size</span>: <span class="hljs-number">1.5rem</span>;</span><br><span class="line"> <span class="hljs-attribute">font-weight</span>: <span class="hljs-number">700</span>;</span><br><span class="line"> <span class="hljs-attribute">color</span>:<span class="hljs-number">#e25d2d</span>; </span><br><span class="line">}</span><br><span class="line"><span class="hljs-selector-class">.news-item</span>{</span><br><span class="line"> </span><br><span class="line"> <span class="hljs-attribute">margin-top</span>: <span class="hljs-number">35px</span>;</span><br><span class="line"> <span class="hljs-attribute">position</span>: relative;</span><br><span class="line">}</span><br><span class="line"><span class="hljs-selector-class">.news-item</span> <span class="hljs-selector-tag">a</span>{</span><br><span class="line"> <span class="hljs-attribute">display</span>: block;</span><br><span class="line"> <span class="hljs-attribute">padding-left</span>: <span class="hljs-number">130px</span>; </span><br><span class="line">}</span><br><span class="line"><span class="hljs-selector-class">.news-item-subject</span>{</span><br><span class="line"> <span class="hljs-attribute">font-size</span>: <span class="hljs-number">1.5rem</span>;</span><br><span class="line">}</span><br><span class="line"><span class="hljs-selector-class">.news-item-brief</span>{</span><br><span class="line"> <span class="hljs-attribute">margin-top</span>: <span class="hljs-number">10px</span>;</span><br><span class="line"> <span class="hljs-attribute">line-height</span>: <span class="hljs-number">1.5</span>;</span><br><span class="line">}</span><br><span class="line"><span class="hljs-selector-class">.news-item-thumbnail</span>{ </span><br><span class="line"> <span class="hljs-attribute">position</span>: absolute;</span><br><span class="line"> <span class="hljs-attribute">top</span>: <span class="hljs-number">3px</span>;</span><br><span class="line"> <span class="hljs-attribute">left</span>: <span class="hljs-number">0</span>;</span><br><span class="line"> <span class="hljs-attribute">text-align</span>: center; </span><br><span class="line">}</span><br><span class="line"><span class="hljs-selector-class">.news-item-thumbnail</span> <span class="hljs-selector-tag">img</span>{</span><br><span class="line"> <span class="hljs-attribute">margin-bottom</span>: <span class="hljs-number">15px</span>;</span><br><span class="line"> <span class="hljs-attribute">box-shadow</span>: <span class="hljs-number">0</span> <span class="hljs-number">10px</span> <span class="hljs-number">15px</span> <span class="hljs-number">5px</span> <span class="hljs-number">#aaa</span> ;</span><br><span class="line">}</span><br><span class="line"><span class="hljs-selector-class">.news-more</span>{</span><br><span class="line"> <span class="hljs-attribute">position</span>: absolute;</span><br><span class="line"> <span class="hljs-attribute">padding</span>: <span class="hljs-number">8px</span>;</span><br><span class="line"> <span class="hljs-attribute">top</span>: -<span class="hljs-number">8px</span>;</span><br><span class="line"> right: -8px;;</span><br><span class="line">}</span><br><span class="line"><span class="hljs-selector-class">.news-more</span><span class="hljs-selector-pseudo">::before</span>{</span><br><span class="line"> <span class="hljs-attribute">color</span>: <span class="hljs-built_in">hsla</span>(110, 90%, 30%, 1);</span><br><span class="line">}</span><br></pre></td></tr></table></figure><br>a tag에 여러 요소가 있을 때 a tag를 block으로 하면 선택 촛점 영역이 반듯해짐</p><h1 id="이벤트-amp-사이트"><a href="#이벤트-amp-사이트" class="headerlink" title="이벤트 & 사이트"></a>이벤트 & 사이트</h1><p><img src="https://user-images.githubusercontent.com/48123604/55933817-9f925680-5c69-11e9-9db9-82df1a486ca1.png" alt="image"></p><h2 id="마크업-1"><a href="#마크업-1" class="headerlink" title="마크업"></a>마크업</h2><p>내 마크업<br><figure class="highlight plain hljs"><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">div</span><br><span class="line"> section.event</span><br><span class="line"> h2.event-heading</span><br><span class="line"> span</span><br><span class="line"> div.event-content</span><br><span class="line"> p</span><br><span class="line"> img.event-thumbnail</span><br><span class="line"> p.event-brief</span><br><span class="line"> div.event-buttons</span><br><span class="line"> button.event-pre</span><br><span class="line"> button.event-next</span><br><span class="line"> section.relation</span><br><span class="line"> h2.relation-heading</span><br><span class="line"> span</span><br><span class="line"> ul.relation-site-list</span><br><span class="line"> li.relation-site-item</span><br><span class="line"> a.relation-site-item-text</span><br></pre></td></tr></table></figure></p><h1 id="IR"><a href="#IR" class="headerlink" title="IR"></a>IR</h1><figure class="highlight html hljs"><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></pre></td><td class="code"><pre><span class="line"><span class="hljs-meta"><!DOCTYPE html></span></span><br><span class="line"><span class="hljs-tag"><<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"ko_KR"</span>></span></span><br><span class="line"><span class="hljs-tag"><<span class="hljs-name">head</span>></span></span><br><span class="line"> <span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">"UTF-8"</span> </span></span><br><span class="line"> <title>IR 기법 및 Sprite 이미지의 활용</title></span><br><span class="line"> <span class="hljs-tag"><<span class="hljs-name">style</span>></span><span class="hljs-undefined"></span></span><br><span class="line"><span class="hljs-css"> <span class="hljs-selector-class">.btn-wrapper</span>{</span></span><br><span class="line"><span class="hljs-undefined"> background: yellow;</span></span><br><span class="line"><span class="hljs-undefined"> margin: 50px;</span></span><br><span class="line"><span class="hljs-undefined"> }</span></span><br><span class="line"><span class="hljs-css"> <span class="hljs-selector-class">.btn-wrapper</span> <span class="hljs-selector-tag">span</span>{</span></span><br><span class="line"><span class="hljs-undefined"> background: pink;</span></span><br><span class="line"><span class="hljs-undefined"> display: inline-block;</span></span><br><span class="line"><span class="hljs-undefined"> width: 20px;</span></span><br><span class="line"><span class="hljs-undefined"> height: 0;</span></span><br><span class="line"><span class="hljs-undefined"> padding-top: 20px;</span></span><br><span class="line"><span class="hljs-undefined"> overflow: hidden;</span></span><br><span class="line"><span class="hljs-undefined"> }</span></span><br><span class="line"><span class="hljs-undefined"> </span><span class="hljs-tag"></<span class="hljs-name">style</span>></span></span><br><span class="line"><span class="hljs-tag"></<span class="hljs-name">head</span>></span></span><br><span class="line"><span class="hljs-tag"><<span class="hljs-name">body</span>></span></span><br><span class="line"> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn-wrapper"</span>></span></span><br><span class="line"> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn-prev"</span>></span>이전<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span><br><span class="line"> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn-prev"</span>></span>이전<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span><br><span class="line"> <span class="hljs-tag"></<span class="hljs-name">div</span>></span></span><br><span class="line"><span class="hljs-tag"></<span class="hljs-name">body</span>></span></span><br><span class="line"><span class="hljs-tag"></<span class="hljs-name">html</span>></span></span><br></pre></td></tr></table></figure><figure class="highlight css hljs"><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="hljs-selector-class">.btn-wrapper</span> <span class="hljs-selector-tag">span</span>{</span><br><span class="line"> <span class="hljs-attribute">background</span>: pink <span class="hljs-built_in">url</span>(<span class="hljs-string">"./css/images/backpage_forwardpage.png"</span>);</span><br><span class="line"> <span class="hljs-attribute">display</span>: inline-block;</span><br><span class="line"> <span class="hljs-attribute">width</span>: <span class="hljs-number">20px</span>;</span><br><span class="line"> <span class="hljs-attribute">height</span>: <span class="hljs-number">0</span>;</span><br><span class="line"> <span class="hljs-attribute">padding-top</span>: <span class="hljs-number">20px</span>;</span><br><span class="line"> <span class="hljs-attribute">overflow</span>: hidden;</span><br><span class="line"> }</span><br><span class="line"> <span class="hljs-selector-class">.btn-wrapper</span> <span class="hljs-selector-class">.btn-next</span>{</span><br><span class="line"> <span class="hljs-attribute">background-position</span>: -<span class="hljs-number">40px</span> <span class="hljs-number">0</span>;</span><br><span class="line"> }</span><br></pre></td></tr></table></figure><figure class="highlight css hljs"><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></pre></td><td class="code"><pre><span class="line"><span class="hljs-selector-class">.btn-wrapper</span> <span class="hljs-selector-tag">span</span>{</span><br><span class="line"> <span class="hljs-attribute">background-color</span>: pink;</span><br><span class="line"> <span class="hljs-attribute">background-image</span>: <span class="hljs-built_in">url</span>(<span class="hljs-string">"./css/images/backpage_forwardpage.png"</span>);</span><br><span class="line"> <span class="hljs-attribute">background-repeat</span>: repeat;</span><br><span class="line"> <span class="hljs-attribute">display</span>: inline-block;</span><br><span class="line"> <span class="hljs-attribute">width</span>: <span class="hljs-number">20px</span>;</span><br><span class="line"> <span class="hljs-attribute">height</span>: <span class="hljs-number">0</span>;</span><br><span class="line"> <span class="hljs-attribute">padding-top</span>: <span class="hljs-number">20px</span>;</span><br><span class="line"> <span class="hljs-attribute">overflow</span>: hidden;</span><br><span class="line"> }</span><br><span class="line"> <span class="hljs-selector-class">.btn-next</span>{</span><br><span class="line"> <span class="hljs-attribute">background-position</span>: -<span class="hljs-number">40px</span> <span class="hljs-number">0</span>;</span><br><span class="line"> }</span><br></pre></td></tr></table></figure><p>위 css는 .btn-wrapper span의 background를 대표속성을 사용하여 background-position이 자동으로 지정됨</p><p>.btn-next의 선택자 우선순위가 더 낮아서 .btn-wrapper .btn-next로 선택해야 지정이 됨</p><p>아래 css는 대표속성을 사용하지 않아 .btn-next로 선택해도 동작</p><blockquote><p><a href="https://windtale.net/blog/css-image-sprite-automation-with-grunt-spritesmith/" target="_blank" rel="external nofollow noopener noreferrer">https://windtale.net/blog/css-image-sprite-automation-with-grunt-spritesmith/</a></p></blockquote>]]></content>
<categories>
<category> fast campus </category>
<category> HTML-CSS </category>
</categories>
<tags>
<tag> HTML-CSS </tag>
<tag> TIL </tag>
</tags>
</entry>
<entry>
<title>2019-04-09 TIL</title>
<link href="/2019/04/09/fc-190409/"/>
<url>/2019/04/09/fc-190409/</url>
<content type="html"><![CDATA[<h1 id="time"><a href="#time" class="headerlink" title="time"></a>time</h1><p>datetime 필요<br>time[datetime=”2019-04-09T11:18:27”]</p><a id="more"></a><h1 id="aria-이용한-title"><a href="#aria-이용한-title" class="headerlink" title="aria 이용한 title"></a>aria 이용한 title</h1><figure class="highlight hljs"><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"><section class="notice board-act"></span><br><span class="line"> <h2 class="tab notice-heading" tabindex="0">공지사항</h2></span><br><span class="line"> <ul class="board-list notice-list"></span><br><span class="line"> <li class="icon-dot-circled"></span><br><span class="line"> <a href="#"></a></span><br><span class="line"> <time datetime="2019-04-09T11:18:27">2019.04.09</time></span><br><span class="line"> </li></span><br><span class="line"> <li class="icon-dot-circled"></span><br><span class="line"> <a href="#"></a></span><br><span class="line"> <time datetime="2019-04-09T11:18:27">2019.04.09</time></span><br><span class="line"> </li></span><br><span class="line"> <li class="icon-dot-circled"></span><br><span class="line"> <a href="#"></a></span><br><span class="line"> <time datetime="2019-04-09T11:18:27">2019.04.09</time></span><br><span class="line"> </li></span><br><span class="line"> <li class="icon-dot-circled"></span><br><span class="line"> <a href="#"></a></span><br><span class="line"> <time datetime="2019-04-09T11:18:27">2019.04.09</time></span><br><span class="line"> </li></span><br><span class="line"> <li class="icon-dot-circled"></span><br><span class="line"> <a href="#"></a></span><br><span class="line"> <time datetime="2019-04-09T11:18:27">2019.04.09</time></span><br><span class="line"> </li></span><br><span class="line"> </ul></span><br><span class="line"> <a href="#" class="icon-plus board-more notice-more" title="공지사항" >더보기</a></span><br><span class="line"></section></span><br></pre></td></tr></table></figure><figure class="highlight hljs"><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"><section class="notice board-act"></span><br><span class="line"> <h2 id="notice" class="tab notice-heading" tabindex="0">공지사항</h2></span><br><span class="line"> <ul class="board-list notice-list"></span><br><span class="line"> <li class="icon-dot-circled"></span><br><span class="line"> <a href="#"></a></span><br><span class="line"> <time datetime="2019-04-09T11:18:27">2019.04.09</time></span><br><span class="line"> </li></span><br><span class="line"> <li class="icon-dot-circled"></span><br><span class="line"> <a href="#"></a></span><br><span class="line"> <time datetime="2019-04-09T11:18:27">2019.04.09</time></span><br><span class="line"> </li></span><br><span class="line"> <li class="icon-dot-circled"></span><br><span class="line"> <a href="#"></a></span><br><span class="line"> <time datetime="2019-04-09T11:18:27">2019.04.09</time></span><br><span class="line"> </li></span><br><span class="line"> <li class="icon-dot-circled"></span><br><span class="line"> <a href="#"></a></span><br><span class="line"> <time datetime="2019-04-09T11:18:27">2019.04.09</time></span><br><span class="line"> </li></span><br><span class="line"> <li class="icon-dot-circled"></span><br><span class="line"> <a href="#"></a></span><br><span class="line"> <time datetime="2019-04-09T11:18:27">2019.04.09</time></span><br><span class="line"> </li></span><br><span class="line"> </ul></span><br><span class="line"> <a href="#" class="icon-plus board-more notice-more" title="공지사항" aria-labelledby="notice">더보기</a></span><br><span class="line"></section></span><br></pre></td></tr></table></figure><h1 id="javascritp"><a href="#javascritp" class="headerlink" title="javascritp"></a>javascritp</h1><h2 id="defer"><a href="#defer" class="headerlink" title="defer"></a>defer</h2><p>defer 속성은 HTML 구문 분석이 완전히 완료되면 스크립트 파일을 실행하도록 브라우저에 지시</p>]]></content>
<categories>
<category> fast campus </category>
<category> HTML-CSS </category>
</categories>
<tags>
<tag> HTML-CSS </tag>
<tag> TIL </tag>
</tags>
</entry>
<entry>
<title>2019-04-08 TIL</title>
<link href="/2019/04/08/fc-190408/"/>
<url>/2019/04/08/fc-190408/</url>
<content type="html"><![CDATA[<h1 id="시멘틱-마크업"><a href="#시멘틱-마크업" class="headerlink" title="시멘틱 마크업"></a>시멘틱 마크업</h1><pre><code>article.term h2.term-head div.term-body h3.term-title img.term-img span.term-contentsection.term h2.section-heading{웹 관련 용어} dl.term_list div dt.term-list-subject a dl.term-list-thumbnail img dd.term-list-brief text</code></pre><a id="more"></a><h1 id="img"><a href="#img" class="headerlink" title="img"></a>img</h1><pre><code class="html"><span class="tag"><<span class="name">img</span> <span class="attr">src</span>=<span class="string">"경로"</span> <span class="attr">alt</span>></span><span class="tag"><<span class="name">img</span> <span class="attr">src</span>=<span class="string">"경로"</span> <span class="attr">alt</span>=<span class="string">"설명"</span>></span></code></pre><p>대체 text가 없으면 장식으로 인식(위)</p><h1 id="inline"><a href="#inline" class="headerlink" title="inline"></a>inline</h1><p>base line 기준으로 아래 2px 정도의 descender발생</p><h1 id="input"><a href="#input" class="headerlink" title="input"></a>input</h1><p>1:1 label 필요, title=””을 이용하여 암묵적 label가능</p><h1 id><a href="#" class="headerlink" title></a><main></main></h1><p>ie 버전에 따라 main 및 기타 html5 추가 태그를 지원하지 않음<br>html5 shiv</p>]]></content>
<categories>
<category> fast campus </category>
<category> HTML-CSS </category>
</categories>
<tags>
<tag> HTML-CSS </tag>
<tag> TIL </tag>
</tags>
</entry>
<entry>
<title>2019-04-05 TIL</title>
<link href="/2019/04/05/fc-190405/"/>
<url>/2019/04/05/fc-190405/</url>
<content type="html"><![CDATA[<h1 id="form"><a href="#form" class="headerlink" title="form"></a>form</h1><p>상호작용<br>필수 요소로 action을 가짐(주소)</p><h2 id="fieldset-연관성-있는-서식의-묶음"><a href="#fieldset-연관성-있는-서식의-묶음" class="headerlink" title="fieldset : 연관성 있는 서식의 묶음"></a>fieldset : 연관성 있는 서식의 묶음</h2><blockquote><p>legend : fieldset의 목적</p></blockquote><hr><h2 id="label-입력서식에-대한-표시-모든-입력서식은-label을-가져야-함"><a href="#label-입력서식에-대한-표시-모든-입력서식은-label을-가져야-함" class="headerlink" title="label : 입력서식에 대한 표시, 모든 입력서식은 label을 가져야 함"></a>label : 입력서식에 대한 표시, 모든 입력서식은 label을 가져야 함</h2><blockquote><p>암묵적 label : label 안에 input을 넣는 방법<br>명시적 label ; label에 for를 이용하여 input의 id를 입력</p></blockquote><hr><h2 id="required"><a href="#required" class="headerlink" title="required"></a>required</h2><blockquote><p>논리속성<br>submit의 action으로 데이터 전송 전 browser에서 필수값을 확인</p></blockquote><hr><h2 id="placeholder"><a href="#placeholder" class="headerlink" title="placeholder"></a>placeholder</h2><blockquote><p>안에 들어올 값 이나 값의 힌트를 미리 입력 / label과 동일하게 많이 사용하나 다름</p></blockquote><hr><h2 id="inputtype"><a href="#inputtype" class="headerlink" title="inputtype"></a>inputtype</h2><blockquote><p><a href="https://seulbinim.github.io/WSA/form.html#input-%EC%9A%94%EC%86%8C" target="_blank" rel="external nofollow noopener noreferrer">https://seulbinim.github.io/WSA/form.html#input-%EC%9A%94%EC%86%8C</a><br><a href="https://miketaylr.com/pres/html5/forms2.html" target="_blank" rel="external nofollow noopener noreferrer">https://miketaylr.com/pres/html5/forms2.html</a></p></blockquote><a id="more"></a><h1 id="text-indent"><a href="#text-indent" class="headerlink" title="text-indent"></a>text-indent</h1><p>들여쓰기<br>block에서만 가능<br>음수값이면 내여쓰기</p><h1 id="letter-spacing"><a href="#letter-spacing" class="headerlink" title="letter-spacing:"></a>letter-spacing:</h1><p>자간조절</p>]]></content>
<categories>
<category> fast campus </category>
<category> HTML-CSS </category>
</categories>
<tags>
<tag> HTML-CSS </tag>
<tag> TIL </tag>