forked from barryclark/jekyll-now
-
Notifications
You must be signed in to change notification settings - Fork 0
/
search.xml
311 lines (311 loc) · 176 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
<?xml version="1.0" encoding="utf-8"?>
<search>
<entry>
<title><![CDATA[Angular2 form 유효성 검증]]></title>
<url>%2F2017%2F11%2F21%2FTIL-1121%2F</url>
<content type="text"><![CDATA[form - submit 서버에 전송. 페이지 전환(깜박거림). form안의 요소들(그룹)이 하나라도 유효하지 않으면 전송할 수 없다. form control name 어트리뷰트가 데이터의 이름이 된다. ngModel을 써줘야 control이 만들어짐 각각의 input에 접근하기 위해서는 form 참조 변수를 사용한다. ex) userForm.value (참조변수:#userForm) #name=”ngModel”: 유효성 검증 상태 추적이 가능해진다. 템플릿 기반 폼 유효성 검증 - AbstractControl클래스 유효성 검증의 상태를 나타내는 프로퍼티를 가지고 있음 errors, invalid, valid, pristine, undouched, dirty 등 untouched: fousin -> focusout되면 false pristine: 값이 한번이라도 입력된 상태 false *ngIf를 사용해서 에러메시지를 출력하는게 좋다 -> 조건에 부합하면 DOM에서 사라지기 때문 에러메시지는 값을 입력하고 focusout됐을 때 출력되야 함. errors => invalid: true, untouched: false 리액티브폼 - 컴포넌트 기반 템플릿 기반보다 복잡할 경우 사용. (form이 15개 이상이거나 많은 검증이 필요할때) 컴포넌트 기반 formControlName이 템플릿기반 폼에서 name의 역할을 한다.]]></content>
<categories>
<category>TIL</category>
</categories>
<tags>
<tag>reactiveform, form</tag>
</tags>
</entry>
<entry>
<title><![CDATA[angular2 CLI 커맨드 정리]]></title>
<url>%2F2017%2F11%2F13%2FTIL-1113%2F</url>
<content type="text"><![CDATA[Angular CLI 커맨드 정리Angular CLI 설치 npm install -g angular-cli 프로젝트 생성 ng new 프로젝트명 포트변경ng serve -port 4001 구성요소 추가컴포넌트 추가 ng g c 컴포넌트명 디렉티브 추가 ng g d 디렉티브명 파이프 추가 ng g p 파이프명 서비스 추가*ng g s 서비스명 빌드 및 실행개발 서버 실행 ng serve 개발 서버 실행(watch) ng serve -o 빌드 ng build]]></content>
<categories>
<category>TIL</category>
</categories>
<tags>
<tag>angular2, cli, ng</tag>
</tags>
</entry>
<entry>
<title><![CDATA[Angular2 문법과 MVC패턴]]></title>
<url>%2F2017%2F11%2F09%2FTIL-1109%2F</url>
<content type="text"><![CDATA[Angular 형식12345678910import {...} from '@angular/core';//데코레이터@Complate({ selector:..., template:..., styles:...})export class AppComponent{ name:String; //template과 연동} Angular에서 뷰(템플릿) 변경앵귤러가없으면 DOM API를 이용해서 데이터를 변경한다.그러나 앵귤러에서는 DOM API를 쓰지 않고 컴포넌트 클래스 내에 데이터를 갖고 있으면 Data Binding로직에 의해서 template syntax에 표시하여 변경한다.(인터폴레이션)** 앞으로 배울것 Data binding Data binding DOM API 접근 방식: javascript는 DOM에 강하게 의존하고 있다(조작하고 있는 view태그를 변경하면 자바스크립트를 변경해야 한다.) Angular는 템플릿(html)이 컴포넌트 클래스(javascript)의 데이터를 인터폴레이션이 가져가도록 작동한다. 따라서 템플릿에서 태그를 변경해도 영향을 미치지 않는다 => 템플릿이 주도권을 가짐 인터폴레이션 : { { title } } 변화감지 데이터 바인딩 할 때 변경된 것을 감지한다. 기본자료형의 값이 바뀌면 변화를 바로 감지한다.=> 메모리 주소가 변경되기 때문에. 객체형은 재할당 해야 변화를 감지한다. TodoList에서 render()과 같은 역할을 한다. 인터폴레이션 단방향 바인딩에 사용되는 템플릿 문법이다. 문법 : [] 표현식의 평가 결과를 문자열로 변환하여 템플릿에 바인딩한다. 프로퍼티 바인딩* DOM 객체의 프로퍼티와 HTML 어트리뷰트 input을 객체화하면 input의 attributes(어트리뷰트의 값들)이 들어온다. => ex) 0:id, 1:type, 2:value attribute 내부에 있는 id 값과 id 프로퍼티 값이 같다.(1:1 매핑)DOM객체내의 class 프로퍼티가 없고, classList 프로퍼티로 변환된다. td 요소의 colspan의 어트리뷰트의 경우 매핑하는 프로퍼티가 존재하지 않는다. input의 value 어트리뷰트는 value 프로퍼티와 1:1 매핑하지만 서로 다르게 동작한다. => 초기값이 보존된다.(새로고침하면 시작하는 값은 어트리뷰트 value), .getAttribute(‘value) 사용자가 input한 값은 프로퍼티 value로 사용한다. 입력된 input 값을 가져오려면 .value로 접근해야한다. .value input type=”text” [value]=”name” // []를 떼면 어트리뷰트. 컴파일되면 name 값을 프로퍼티 바인딩한다. 이외에도 많은 경우가 있으므로 어트리뷰트와 프로퍼티를 구별해서 사용해야 한다. 이벤트 바인딩, 클래스 바인딩, 어트리뷰트 바인딩, 스타일 바인딩, 양방향 데이터 바인딩 등이 있다. 프로퍼티 바인딩 예제(DOM 객체로 변환)1) [value] 프로퍼티2) [innerHTML] 프로퍼티 - p [innerHTML]="contents" - 위 코드는 인터폴레이션을 사용한 [ <p>{ {contents} }</p> ] 와 같다. - 인터폴레이션은 syntax sugar이다. 3) [src] 프로퍼티4) [disabled] 프로퍼티 - button [disabled]="isDisabled"> - isDisabled = true; - true이면 해당 버튼을 사용할 수 없다. 어트리뷰트 바인딩 [attr.attribute-name] = “expression” 프로퍼티 바인딩보다 사용빈도는 적지만 알고 있어야 함 어트리뷰트 바인딩 예제(HTML)1) 프로퍼티 바인딩과 어트리뷰트 바인딩 input id=”user” type=”text” [value]=”name” input id=”user” type=”text” [attr.value]=”name”2) 프로퍼티가 존재하지 않을때 td [colspan]=”length” colpspan은 프로퍼티가 존재하지 않으므로 [attr.colspan] 을 사용한다. 이벤트 바인딩** 뷰 상태 변환을 컴포넌트 클래스로 전달 (event) = “statement(함수,구문)” MVC1) Model - 애플리케이션에서 사용되는 데이터의 형식으로 비즈니스 로직, 유효성 검사 기능을 포함한다. - 비즈니스 로직: 데이터를 컨트롤하는 로직, 프로그램은 비즈니스 로직을 짜는 것이다. - 유효성 검사: input에 적절한 값이 들어왔는지 검사하는 것. - 친절한 애플리케이션: 사용자와 상호작용을 한다는 느낌을 주는 섬세한 애플리케이션 => 유효성 검사 중요 - ex) todos data. 2) View - Model을 표시하는 것을 말한다.(html과 css로 구성) - DOM은 html만 있으면 브라우저에 의해서 만들어진다. - 1) DOM의 상태 변화 정보가 View에 전달된다. - 2) View(template)는 DOM을 업데이트 한다. - 3) 두 가지를 반복한다.(양방향으로 상태를 주고 받는다) 3) Controller - 모델과 뷰의 상호작용 감시하고 업데이트 한다. 양방향 데이터 바인딩 앵귤러는 “양방향 => wathcer => 끊임없이감지” 이유로 양방향을 지원하지 않는다. 단방향 데이터 바인딩을 가지고 양방향처럼 지원한다. [(ngModel)] = “property” 템플릿과 컴포넌트 클래스 사이에서 양방향 데이터 바인딩을 한다. input type=”text” [(ngModel)]=”name” 꼭~~ 필요할 때만 쓴다. () :이벤트 바인딩 []: 프로퍼티 바인딩 => 양방향 바인딩의 실제 동작은 이벤트 바인딩과 프로퍼티 바인딩의 조합으로 이루어진다. 빌트인 디렉티브 디렉티브 : DOM의 모든것을 관리하기 위한 지시 컴포넌트 디렉티브, 어트리뷰트 디렉티브, 구조 디렉티브 ngIf 요소를 보이기/숨기기를 쉽게 할 수 있다. display:none 은 표시만 안했을뿐 DOM에 남아있는다. ngIf로 감추면 DOM에서도 사라진다. 사용법 : [ < p *ngIf = “isShow” >< p > ] ngFor, ngIf 를 한번에 사용할 때 ng-container를 사용한다. NgFor 컴포넌트 클래스의 컬렉션을 반복하여 하위요소를 DOM에 추가한다. forEach와 같다. 사용법 : [ < li *ngFor = ‘let user of users; let i = index”> ] [ { { i } } : { { user.name } } ] 디렉티브 DOM의 모든 것을 관리하기 위한 명령(스타일,모양,동작) 컴포넌트의 복잡도를 낮추고 가독성을 향상시킨다.]]></content>
<categories>
<category>TIL</category>
</categories>
<tags>
<tag>angular2, mvc, 데이터바인딩</tag>
</tags>
</entry>
<entry>
<title><![CDATA[Angular2 기본 개념과 구성]]></title>
<url>%2F2017%2F11%2F07%2FTIL-1107%2F</url>
<content type="text"><![CDATA[Angular 기본 개념 및 구성 정리Angular소개 “Web Component”를 기반으로 프레임워크가 만들어짐 SPA(Single Page Application)개발을 위한 구글의 오픈소스 자바스크립트 프레임워크 초기 로딩이 길다(SPA의 단점) 초기 로딩 이후의 화면전환이나 인터렉션은 빠르다. AngularJS(v1,ES5) 2012년 구글의 미스코 헤브리가 공개. 지속적으로 업데이트를 진행하고 있다. Angular(v2~, typescriprt) 2014년 ng컨퍼런스에서 처음으로 소개. Angular는 AngularJS의 후속 버전이지만 호환성이 없다. Angular에서는 자바스크립트 값이 html과 상호 연동된다. 하나 이상의 모듈과 컴포넌트가 존재해야 된다. 대부분의 모던 브라우저를 지원한다.(IE는 9이상) Angular의 장점1) 개선된 개발 생산성 1) 컴포넌트 기반 개발 2) Typescript의 도입 - Typescript의 정적 타이핑/ ECMAScript6의 클래스,모듈/ ECMAScript7의 데코레이터를 지원한다. 3) 개발 도구의 통합 및 개발 환경 구축 자동화 - 설정해야 할 도구가 많고 설정 방법은 익숙지 않다. => Angular는 CLI을 통해 간편한 개발 환경 구축을 지원한다.(개발환경 구축에 소요되는 시간 최소화) 2) 성능 향상 1) Digest Loop로 인한 성능저하 문제의 해결 - AngularJS는 Model의 변화를 View에 반영시키는 과정(Digest Loog)로 인한 성능저하가 단점 (양방향 바인딩을 위해서는 watcher가 추가됨, watcher가 늘어날수록 성능 저하) 2) AoT 컴파일 - 사전 컴파일 방식을 의미. 런타임에서 실시하지 않고 사전에 컴파일하여 속도를 향상시키는 기법. 3) Lazy Loading - 지연 로딩. SPA의 단점을 극복하기 위한 대안. - 애플리케이션 실행 시점에 모든 모듈을 한꺼번에 로딩하지 않고 필요한 시점에 필요한 모듈만을 로딩하는 방식 4) 코드 최적화 Angular CLI 간단한 명령어를 사용하여 Angular 프로젝트 스캐폴딩(scaffolding)을 생성, 실행, 빌드할 수 있으며 다양한 구성 요소를 선별적으로 추가할 수 있는 커맨드-라인 인터페이스이다. Angular 프로젝트 스캐폴딩을 간단한 명령어로 생성해 주어 개발환경 구축에 소요되는 시간을 최소화할 뿐 아니라 표준적인 스타일 가이드를 제공한다. 여기서, 스캐폴딩(scaffolding)이란… (건축 공사장의) 비계? 높은 곳에서 공사를 할 수 있도록 임시로 설치한 가설물을 비계라고 한다. 개발에서는 스캐폴딩을 개발을 시작하기 위해 여러 폴더를 만들고, 라이브러리를 다운받고, 기본적인 뼈대를 만들면서 시작을 하며 이러한 작업을 몇줄의 명령어로 끝마치는 것! 이라고 한다. Angular CLI 사용법1) 설치 npm install -g @angular/cli node.js 6.9.0 / npm 3.0.0 이상 2) Angular 프로젝트 생성 ng new 새로운 프로젝트 폴더가 생성되고 스캐폴딩(프로젝트 기본 골격)이 작성된다. 3) 프로젝트 실행 ng serve ng serve –open(or -o) ng serve –port(or -p) 4201 serve => webpack을 사용하여 소스코드와 의존 모듈을 번들링하고 Angular CLI가 내장하고 있는 개발용 서버를 실행한다. 개발용 서버는 코드의 변경을 감지하여 자동으로 브라우저를 리로드하는 LiveReload기능을 제공한다.(–open명령어) locahost:4200으로 접속한다. 4200번을 이미 사용하고 있다면 예)4201로 변경해준다. 프로젝트 구성요소1) Component(컴포넌트) 화면 전환 단위로 만드는 것이 좋다. 모든 구성요소는 컴퓨넌트를 중심으로 구성된다. 애플리케이션의 화면을 구성하는 뷰를 생성하고 관리한다. 1) 컴포넌트 요소 추가 명령어 ng g(enerate) c(omponent) component-name 파일명(구성 요소 명칭)은 하이픈으로 구별된 케밥표기법을 사용한다. 명령어를 실행하면, src/app/폴더를 생성 src/app/폴더에 4개의 파일을 추가한다. 4개의 파일 : 컴포넌트 HTML템플릿을 위한 HTML파일, 컴포넌트 HTML템플릿의 스타일링을 위한 CSS파일, 컴포넌트 유닛 테스트를 위한 스펙 파일, 컴포넌트 클래스 파일(ts) 루트 모듈 src/app/app.module.ts에 새롭게 추가된 컴포넌트를 등록한다. 2) 컴포넌트 요소 추가(인라인) 명령어 ng g c about -it -is -spec false it(inline templete) is(inline style) spec false(spec 테스트 파일 안만듦) 3) 서비스 요소 추가(sepc 테스트 파일 안만듦) 명령어 ng g c service -it -is -spec false -flat 4) Selector 프로퍼티 값 컴포넌트를 마크업으로 표현할 때 사용하는 이름. 루트 컴포넌트에서 home 컴포넌트를 사용하려면, app.component.html을 아래처럼 수정한다. ex) Selector:’app-home’ => 기본 접두사는 angular-cli.json에서 설정할 수 있다. 참고) anular-cli.json 설정파일 selector 접두사 설정(prefix) 빌드 후 저장될 경로 설정(outDir) ng build로 배포하기 build 후 생성된 dist폴더 안의 파일들이 서버에 배포된다. 웹 컴포넌트 변화감지(change detection)]]></content>
<categories>
<category>TIL</category>
</categories>
<tags>
<tag>angular2, typescript, framework</tag>
</tags>
</entry>
<entry>
<title><![CDATA[Typescript 문법]]></title>
<url>%2F2017%2F11%2F06%2FTIL-1106%2F</url>
<content type="text"><![CDATA[typescript “type”을 가지고 있다.(javascript와의 차이점, java,c와 비슷함) code assistant 활용으로 생산성 향상(vscode에서 지원이 빵빵함) AltJS(javascript의 대체언어)중 하나 기본적으로 ES6기반으로 씀 자체적으로 Babel과 유사한 컴파일러를 가지고 있음 type 지정의 장점 에러를 사전 점검할수 있음 문법 변수 타입 지정을 반드시 해줘야 함 선언과 할당이 함께 되면 타입 지정을 안해줘도 에러가 발생하지않음 정적타이핑 변수의 타입 선언, 지정에 맞는 값을 할당하여 사용하는 것 동적타이핑과 반대개념, javascript는 동적 타이핑 언어이다. 타입에 일치하지 않는 값을 넣었을 때는 에러가 발생(아예 컴파일이 실행 안됨) 타입을 써주면 더 확실하다. 코드 가독성, 예측성, 안정성의 향상의 장점이 있다. 타입추론 타입선언이 생략됐을 때, 선언과 동시에 값을 초기화하지 않으면 any타입이 된다. let foo; // let foo: any와 같음. javascript var키워드와 같이 재할당이 가능함으로 사용하지 않는 편이 좋다. 클래스 class body에서 멤버변수를 꼭 선언해야 한다.(ES6은 constructor내부에서만 가능하고 class body에서 선언하면 안된다.) 접근제한자 public, protected, private public 어디서든 참조가능, 공개 protected 클래스 인스턴스에서 참조불가능, 부분 공개 private 클래스 내부에서만 참조가능, 비공개 readonly 상수가 된다. 값을 할당 할 수 없고, 오직 읽기만 가능하다 생성자 파라미터에 접근 제한자 사용 아래 두 경우는 실행 결과가 같다. 1234567class Foo{ constructor(public x: string) { }}class Foo{ public x: string constructor(x: string) {//여기서 x는 매개변수(지역변수)로 class body(멤버변수)와 다른 x이다.}} 추상클래스(Abstract class) 추상 메소드를 포함할 수 있는 클래스. 상속만을 위해 사용된다. 추상 클래스를 상속하는 클래스는 추상 클래스의 추상 메소드를 반드시 “구현”해야 한다. 인터페이스 기계(소프트웨어)와 사용자 간의 접점 옛날은 CLI 명령어으로 컴퓨터에 명령을 함(그래픽으로 처리 한 것은 GUI) 타입 체크를 위해 일반 변수, 함수, 클래스에 사용함(변수에 타입, 함수의 매개 변수 등) 함수의 매개 변수 : 인터페이스 설계대로 리턴타입을 준수해야함 interface, implements interface에서 정의된 프로퍼티 전부를 implements한 클래스 내에서 반드시 구현한다. 덕 타이핑 반드시 implements를 쓰지 않아도 interface를 구현한 것으로 인정되는 것 implements를 하지않아도 interface에 부합하는 메소드나 프로퍼티를 가지고 있다면 implements된걸로(해당 interface타입을 가지고 있는 것) 인정된다. 선택적 프로퍼티 인터페이스의 프로퍼티 구현 중 프로퍼티명 뒤에 ? 가 붙어있으면 생략해도 에러가 발생하지 않는다. 제네릭 : <안에 type을 지정> 클래스를 생성할 때 타입을 지정한다.]]></content>
<categories>
<category>TIL</category>
</categories>
<tags>
<tag>typescript, type지정</tag>
</tags>
</entry>
<entry>
<title><![CDATA[네트워크 구성]]></title>
<url>%2F2017%2F10%2F27%2FTIL-1027%2F</url>
<content type="text"><![CDATA[네트워크의 구성허브(hub?) 같은 신호(외부에서 온 신호)를 여러 기기에 보여줌 라우터(Router) 외부신호를 받아서 내부로(?) 전달하는 것 - 공유기x, 좁은범위 공유기(매핑하여 특정한 컴퓨터에 전달할 수 있는 것) LAN 가까운 지역의 좁은 범위 wireless LAN :무선인터넷 802.11 != wifi 802.11 : IEEE에서 개발된 표준무선통신기술 wifi : 와이파이 얼라이언스의 상표, 802.11 기술을 사용하는 무선근거리 통신망 제품으로 사용하려면(?) 허가를 받아야함 WAN 국가, 대륙의 넓은 범위 LAN < MAN < WAN MAN : LAN들끼리 연결(LAN을 묶어준것) WAN : MAN들끼리 연결 Another 네트워크 Lifi : 빛이 도달하는 범위에 연결되있고 정보(?)를 전송한다, 곧 상용화될 듯.. power line networking x Network topology(네트워크 연결 형태) Line : 한방향 Bus : Line형태가 발전한 것. 큰 연결선과 작은 연결선이 있음. ring : 방향이 두개 fully connected : ring형태 발전한 것, 모두 1:1연결(케이블 설치하는데…비용문제) 해외로 연결하는 망은 해저(?) 케이블로 구성되어 있다. 회사마다 설치할 수 있음(돈많은회사~) Ethernet 통신방법 중 하나 ether == 에테르 == 빛의매질 (틀린개념. 빛은 파동이면서 입자라는데… 아무튼 저렇게 부름) IEEE 802.3규약 패킷을 계속 확인해서 원하는 지역의 최단 경로를(빠른쪽) 알아서 탐색해줌 OSI 7 layer Open Systems Interconnection Reference Model 프로토콜 디자인과 통신 계층 각 계층의 data header에 정보를 담아서 다른 PC로 전달한다. application layer 사용자에게 넽워크 자원에 대한 접근을 제공, 연결정보 인터페이스를 제공 presentation layer 암호화/복호화,패킷이 다른곳에 전달될때 암호화.(개인정보유출 방지) session layer 두 컴퓨터 사이의 세션이나 대화를 관리. 연결하고 관리. 연결유지 연결이 불안정할때 종료시킬떄의 과정을 담당 transport layer 신뢰성있는 데이터를 전송할수 있게함, 패킷 검사, 방화벽과 프록시 서버가 동작하는 계층 *방화벽 : 의심스러운 접근을 막는다. 신뢰된 정보는 미리 열어놓은 구멍(?)을 통해 들어온다. network layer 복잡한계층. 넽워크 사이의 라우팅을 담당. 넽워크 호스트의 논리적인 주소관리(ip 주소 할당->라우터,공유기 역할). Ethernet datalink layer 기지국에 데이터를 보내줌. 물리적인 데이터 사이의 전송. ex) 전화국끼리 주고받을때 각 기지국의 역할 physical layer 실제로 전달되는 데이터 매개체, 하드웨어 케이블, 아날로그를 디지털로(1과0으로 구성된 데이터,간단,모듈레이션), 디지털을 아날로그로 변환 transport 계층에서 방화벽을 열어서 전송시작. network(경로지정) data link physical을 반복하여 패킷 헤더를 확인해서(까보고 포장하여) 목적지로 이동 packet 데이터를 한번에 전송할 단위로 자른 데이터의 묶음 컴퓨터는 바이트byte, 네트워크는 옥텟(octet) : 1byte -> 8bit이므로… HTTP: HyperText Transfer Protocol www상에서 정보를 주고 받는 프로토콜 **HyperText : 문자의 상위개념, 하이퍼텍스트 상에서 글자에 대한 의미를 부여하기 위한 text가 HyperText HTTP method를 가짐. TCP UDP 전송 방식 활용 FTP: File Transfer Protocol 서버와 클라이언트 사이에 파일 전송을 위한 프로토콜 보안에 취약(무차별대입으로 비번을알아냄, 패킷 가로채기), FTPS,SFTP,SSH 사용 SMTP 네트워크에서 메일을 보내기 위한 프로토콜 TCP/ UDP 헤더가 있다 tcp sequence number가 있어서 순서를 적어서 조립 udp 그냥 도착한 순서대로…전송 TCPTransmission COntrol protocol 전송제어프로토콜,패킷을 주고받을때 안정적 순서대로 에러없이 교환할 수 있게함 STREAM(TCP) 스트림소켓은 두개의 시스템이 1:1로 연결된 상태에서 데이터를 주고받고 연결됨. 안정적 게임을 제외한것… UDPUser datagram protocol DATAGRAM(UDP) 연결과해제가없음. 비연결형 데이터그램 소켓(빠른 전송이 가능하나 받은것을 모를 수도 있음) 데이터그램을 전송하기 위한 프로토콜-수신확인x, 도착순서 예측x 빠르나 안정적이지않음 주로 게임에사용 IP 인터넷 프로토콜 IPv4 사용중 -> IPv6 사용하게 될것 IPv4(32bit,2^32), IPv6(128bit,2^128) 32bit로 구성 0.0.0.0 ~ 255.255.255.255 ip라우터가 주소 재할당 한것(=192.168.x.x) -> local ip 192.168.0.1(라우터 즉 현재 내컴퓨터에서는 와이파이, 이거로 접속하면 아이피를 바꿀수 있다!) 통신사가 하나의 주소를 할당받아서 나눠서 분배하여 사용하고 있다. 127.0.0.1 Loopback 컴퓨터가 가지고 있는 무조건 반대신호를 반환하는 대역 localhost public ip adress 전세계적으로 하나만 private ip adress private(지역) network에서만 유효 DNSdomain name system ipconfig/ifconfig 이더넷정보, 맥주소 MACMedia Access Control adress고유번호 디폴트 서브넷마스크 네트워크를 서브넷으로 나누지않아도 할당 class c 255.255.255.0 / class b / class a class로 나눠짐. 옥텟은 패킷의 단위wrieshark data 컴퓨터가 처리할 수 있는 문자,숫자,그림 따위의 형태의 정보 NoSQL MongoDB , Docs는 자바스크립트로 구성(JSON타입,key:value) 다중타입(몽고디비), 단일타입, 구조가간단(Documnet) MongoDB 응용 프로그램 robo 해석가능한 상태를 GUI로 보여주는 클라이언트 프로그램 www.mongodb.org 맥은 homebrew 설치 > brew update robodb 설치, 다음주에 함. 자바스크립트 크롤링]]></content>
<categories>
<category>TIL</category>
</categories>
<tags>
<tag>network, tcp/ip</tag>
</tags>
</entry>
<entry>
<title><![CDATA[es6 디스트럭처링과 클래스 상속]]></title>
<url>%2F2017%2F10%2F26%2FTIL-1026%2F</url>
<content type="text"><![CDATA[디스트럭처링배열의 요소나 객체의 속성을 배열 리터럴이나 객체 리터럴과 비슷한 문법을 이용해서 변수에 할당할 수 있다. 객체 복사 Object.assign을 주로 쓴다 JSON.stringify(?) 꼼수. Object.assign static 메서드 가변인자함수(매개변수가 여러개 올 수 있음) ({}, 매개변수1, 매개변수2…){}로 복사본을 만들 수 있음,매개변수1에 매개변수2…가 merge됨 배열 디스트럭처링 배열의 요소를 추출해서 변수리스트에 할당한다. 추출/할당의 기준은 index [x, …y] = [1,2,3,4]; spread 연산자는 매개변수의 마지막에 올 수 있고, 그런 경우에sms 할당된 요소의 남은 갯수만큼의 배열이 생성된다. result => y = [2 ,3 ,4]; 객체 디스트럭처링 프로퍼티 이름(키)이 같은 것을 가져온다. todo.filter(({completed})) => {…}) forEach(({id, content, completed}) => {…}) 위처럼 객체 디스트럭처링을 하며 ${todo.id} -> ${id}로 사용할 수 있다. const { … } 형태 참고) _변수명 : 내부에서만 쓰는 변수(private), 외부에서 참조할 수 없음, 문법x 클래스 ES6 class는 접근 제한자를 지원하지 않는다. constructor와 메서드만 올 수 있다. 프로퍼티는 constructor 내부에 선언할 수 있다. 메소드 내부에서 프로퍼티를 접근할 때는 this를 사용한다. 내부에서는 클래스가 Function(생성자)이다. 멤버변수 값을 함수로 가지고 있는 변수 -> 메소드 -> “멤버변수” constructor 내부에서만 선언할 수 있다.( this.name = name, 반드시 this 사용) 즉, constructor의 지역 변수 pubilic, 외부에서 접근할 수 있다. 클래스의 호이스팅 let, const와 같다. 선언문 이전에 호출하면 에러예) const foo = new Foo(); //Reference Error getter, setter get(set) 메서드(){…} getter는 프로퍼티처럼 쓴다. get firstElem(){return…} console.log(foo.firstElem); setter는 return이 없고 값을 할당한다. 클래스 상속 super :부모클래스의 contsructor 호출 (상속받을 constructor) 인자가 있다. 현재 클래스에 없는 변수(아마 부모 클래스의 멤버변수일 듯)를 상속받을 때 해당변수를 인자로 써준다. super 호출이 없으면 this가 없다. 모듈 관련성이 있는 것들을 모아둔 파일이 분리된 형태 html에서 <script src=''>로 js파일을 불러들이는 경우, 파일마다 독립적인 scope가 없고, 전역(window)이 하나이다. npm 파일이 분리된 모듈 형태로 쓰려면 webpack을 사용해야 한다. ES6 모듈은 export,import 키워드를 지원하지만, 모든 브라우저에서 지원하지 않는다. export,import 키워드만 지정, 표준x, 스펙이 없어서 쓸 수 없다. 에러 처리의 한계 (비동기) -> Promise 비동기 함수에선 error가 catch 되지 않는다. Promise를 사용하여 에러 처리의 한계 극복]]></content>
<categories>
<category>TIL</category>
</categories>
<tags>
<tag>es6, class, 디스트럭처링</tag>
</tags>
</entry>
<entry>
<title><![CDATA[javascript ES6 let,const]]></title>
<url>%2F2017%2F10%2F24%2FTIL-1024%2F</url>
<content type="text"><![CDATA[ES6 공부let javascript ES5에서는 function-level scope를 갖기 때문에 함수 내에서 선언된 변수만 외부에서 참조할 수 없고, 블록 내에서 선언된 변수는 제한이 없기 때문에 전역에 선언된 변수와 이름이 중복되면 그 값을 재할당 해버려서 의도치 않은 변수 값 변경이 발생할 문제가 있다. let으로 변수를 선언하면 block-level scope를 갖기 때문에 전역 변수와 이름이 같더라도 전역 변수를 참조할 수 없다. let은 중복 선언시 SyntaxError가 발생한다. var, let 의 호이스팅 비교 호이스팅이란 var 선언문이나 function 선언문을 해당 스코프의 선두로 옮기는 것을 말한다.(암묵적으로) var 키워드로 선언된 변수는 선언 단계와 초기화 단계가 함께 이뤄지기 때문에 할당 단계를 거치지 않고 선두에서 호출을 하더라도 에러가 발생하지 않는다. => undefined로 초기화 let 키워드로 선언된 변수는 선언 단계와 초기화 단계가 분리되어 진행된다. 스코프에 변수가 등록되고, 일시적 사각지대(Temporal Dead Zone)를 지나서 변수 선언문에 도달했을 때 초기화가 이뤄진다. => 초기화 이전에 선두에서 변수를 호출한다면 ReferenceError가 발생한다. Arrow function 함수표현식에서 사용한다. 일반함수, 생성자함수에서는 사용하지 않는다. Arrow function 사용하면 안되는 경우 메소드 정의 프로토타입 메소드 생성자 함수 addEventListener 함수의 콜백 함수(this는 window가 된다. => click 이벤트일 경우, e.currentarget으로 함수를 호출한 자신을 호출할 수 있지만 this로 자기 자신을 호출해야 한다면.. Arrow function을 쓰지 않도록 한다. ) arguments -> rest 파라미터 가변 인자 함수를 구현함. arguments은 가변인자 개수 지정을 가능하게 하는 순회가능한 유사 배열 객체이다. ES6에는 argumnets가 없고 rest 파라미터를 사용한다. rest 파라미터 Spread(…)연산자를 사용하여 파라미터를 작성한 형태 분리된 요소들을 함수 내부에서 배열로 전달 받을 수 있음(순차적으로) 반드시 마지막 파라미터(인수).(안그럼 syntaxError)` Spread(…) 연산자 개별 요소로 분리한다. 이터러블(순서를 가지고 순회할 수 있는 객체)에 Spread 연산자를 붙이면 개별 요소로 펴진다(?) 배열을 함수의 인자로 전달하려고 할때 사용한다. 인수는 자유롭게 (마지막이 아니여도) 사용할 수 있다. 일반함수의 this function 키워드를 이용하여 생성한 일반 함수 생성자함수의 this는 생성된 객체. 콜백함수, 내부함수의 this는 window. Arrow function의 this 자신을 포함하는 외부 scope에서 this를 계승받는다. 그것을 Lexical this라고 함.]]></content>
<categories>
<category>TIL</category>
</categories>
<tags>
<tag>let, const, es6</tag>
</tags>
</entry>
<entry>
<title><![CDATA[실행 컨텍스트, 빌트인객체, Ajax REST API 정리]]></title>
<url>%2F2017%2F10%2F22%2FTIL-1022%2F</url>
<content type="text"><![CDATA[Excution Context ~ REST API 총정리 Object - Built-in Object , Host Object Built-in Object - 표준 빌트인 객체, Native Object(BOM,DOM) Standard Built-in Object 표준빌트인도 전역객체의 자식객체이다. alert(‘hello’); = window.alert(‘hello’); 대문자로 시작하며 String,Number,Array 등이 있다. Standard Built-in Object(표준 빌트인 객체)의 종류 Object, Function, Boolean, Number, Math, Date, String, RegExp, Array, Error,SymbolObject Object 생성자 함수는 객체를 생성한다. 생성자 함수의 인수값에 따라 강제 형변환된 객체가 반환된다. 반환된 객체의 [[prototype]] 프로퍼티에 바인딩된 객체는 Object.prototype이 아니다.12345var strObj = new Object('String');// var strObj = new String('String'); 와 같다.var numObj = new Object(123);// var numObj = new Number(123); 과 같다. Function 모든 함수는 Function 객체이며, Function 객체는 new 연산자로 생성할 수 있다. var sum = new function(‘a’,’b’,’return a + b’); Boolean 기본자료형 boolean을 위한 레퍼(Wrapper) 객체이다.12345678910//Boolean 객체var foo = new Boolean(true); //여기서 Boolean은 기본자료형이 아닌 객체이다.//true,false를 포함하고 있는 객체이다.//따라서 x는 객체로서 존재함으로 참으로 간주된다.var x = new Boolean(false);if (x) { // . . . 이 코드는 실행된다.} Number Number Constructor: Number() 생성자 함수를 통해 객체를 생성한다. Number() 생성자 함수의 인자값이 숫자로 변환될 수 없으면 NaN을 반환한다. new 연산자를 붙여 생성자 함수로 사용하지 않으면 기본자료형 숫자를 반환한다. Number Property : 정적메소드. Number객체를 생성할 필요 없이 Number.prototypeName의 형태로 사용한다. Number.MAX_VALUE(큰 숫자: Infinity), Number.MIN_VALUE(작은 숫자 : 0) 자바스크립트에서 사용가능한 가장 큰 숫자/작은 숫자 Number.POSITIVE_INFINITY(=Infinity), number.NEGATIVE_INFINITY(-Infinity) Number.NaN : Not a Number, window.NaN과 같다. Number Method!! Number 메소드는 대부분 인수가 숫자가 아닐 때 숫자로 변환하지 않는다. Number.isFinite() : 인수가 숫자가 아닐 때는 false를 반환한다.(전역의 isFinite()는 인수를 숫자로 변환하여 값을 반환한다) Number.isInteger() : 정수인지 검사하여 Boolean값 반환.(인수를 숫자로 변환하지 않는다.) Number.isNaN() : 숫자인지 아닌지를 판별하여 아니면(NaN) true를 반환. 단, 인수가 숫자(형)가 아닐 때 false이다. 123456789101112// Number.isNaN()과 isNaN()비교//숫자형이 아님, 변환하지 않고 false를 반환한다.Number.isNaN(undefined); // falseNumber.isNaN({}); // falseNumber.isNaN('Hello'); // false//전역의 isNaN은 다른 타입일때, 형변환한다. // undefined, {}, 'Hello' 는 Not a Number 이다. 따라서 true(window).isNaN(undefined); // undefined -> NaN -> trueisNaN({}); // trueisNaN('Hello'); // true Number.isSafeInteger(): 안전한 정수값인지 검사하여 결과값을 Boolean으로 반환한다. Number.prototype.toExponential(): 대상을 지수표기법으로 변환하여 문자열로 반환한다. Number.prototype.toFixed() : 0~20 사이의 정수값으로 소숫점 이하 자릿수를 나타낸다. (나머지 반올림) Number.prototype.toPrecision() : 매개변수로 지정된 전체 자릿수까지 유효하도록 나머지 자릿수를 반올림하여 문자열로 반환한다. 지정된 전체 자릿수로 표현할 수 없는 경우 지수 표기법으로 결과를 반환한다. Number.prototype.toString() : 숫자를 문자열로 변환하여 반환한다. Number.prototype.valueOf() : Number 객체의 기본자료형 값을 반환한다, Math Math Method Math.round() : 가장 인접한 정수로 올림/내림한다. 123x = Math.round(20.5); // 21y = Math.round(-20.5); // -20z = Math.round(-20.51); // -21 Math.ceil() : 자신보다 큰 가장 가까운 정수로 올림한다. Math.floor() : 자신보다 작은 가장 가까운 정수로 내림한다. Math.random() : 0~1사이의 숫자로 1은 포함되지 않는다. 1var randomNum = Math.floor((Math.random() * 10) + 1); // 1 ~ 10 Math.pow() : 거듭제곱을 반환한다. pow(밑,지수); Math.max() : 가장 큰수를 반환한다. 배열을 인수로 받을때는 apply를 사용한다.1234567Math.max(1, 2, 3, 4, 5) ; // 5var arr = [1, 2, 3];var max = Math.max.apply(null, arr); // 3// ES6var max = Math.max(...arr); // 3 String String Method String.prototype.lastIndexOf() : 매개변수로 전달된 문자를 대상 문자열에서 검사하여 마지막으로 발견된 곳에 index를 반환한다. 2번째 인수가 전달되면 검색 시작 위치가 되어 역방향으로 검색을 하고 반환값은 정방향 기준의 index이다. String.prototype.replace(), split(), substring():원본 문자열은 변경되지 않는다.12345678910111213141516var str = 'Hello World';//첫번째 인수가 클 경우 순서를 바꾼다.var res = str.substring(5,1); // substring(1,5) -> 'ello'//두번째 인수가 생략된 경우 해당 문자열 끝까지 반환한다. var res = str.substring(6); // 'World'//인수가 문자열보다 길 경우 인수는 문자열의 길이로 취급한다.(인수가 두개일 경우)var res = str.substring(2,12); // substring(2, str.lengh) -> 'llo World'//인수가 문자열보다 길 경우 (인수가 한개일 경우) 공백출력var res = str.substring(11); // ''//인수가 0보다 작거나 NaN일 경우 0으로 취급된다.var res = str.substring(-5); // 'Hello World' RegExp (정규표현식, Regular Expression) 플래그 i(Ignore Case) : 대소문자를 구별하지 않고 검색한다. g(Global) : 문자열 내에 모든 패턴을 검색한다. m(Multi Line) : 문자열의 행이 바뀌더라도 계속 검색한다. 패턴 /…/ 에서 .은 문자 한개를 의미한다. 한번 검색되면 끝나는 것이 아니라 반복하여 검색하려면 /…/g 플래그g를 사용한다. /A/ig : ‘A’를 대소문자 구분없이 반복 검색 /A+/g : ‘A’가 한번이상 반복되는 문자열을 반복 검색 -> ‘AA’ ‘AAA’ 출력 /A+|B+/g 는 /[AB]+/g 와 같다. |,[]는 “OR”을 의미한다. /[A-Z]+/g : ‘A’~’Z’가 한번 이상 반복되는 문자열 반복 검색 /[A-Za-z]+/g : ‘A’~’Z’ 대소문자 구분없이 한번 이상 반복되는 문자열 반복 검색 /[0-9,]+/g : 0~9 또는 , 가 한번 이상 반복되는 문자열 반복 검색 \d는 숫자 \D는 숫자가 아닌 문자 var str=’Aa3 Bb2C c10,d’; var regexr=/[\D,]+/g; -> [‘Aa’, ‘ Bb’ ,’C c’, ‘,d’] \w는 알파벳과 숫자 \W는 알파벳가 숫자가 아닌 문자 자주 사용하는 정규표현식 /^abc/ : 특정 단어로 시작하는지 /abc$/ : 특정 단어로 끝나는지 /^\d$/ : 모두 숫자인지 /^[\s]+/(=/^\s+/) : 한개 이상의 공백으로 시작하는지 /^[A-Za-z0-9]{4,10}$/ : 알파벳 대소문자 또는 숫자로 시작하고 끝나며, 4~10자리 인지 /^\d{3}-\d{3,4}-\d{4}$/ : 핸드폰 형식에 맞는지 검사 RegExp Constructor12345678//정규식 리터럴var regExp = /ab+c/i;//RegExp 생성자 함수 - 패턴, 플래그var regExp = new RegExp('ab+c','i');var regExp = new RegExp(/ab+c/,'i');//ECMAScript 6var regExp = new RegExp(/ab+c/i); Array 배열의 생성 [배열 리터럴] 배열리터럴 arr의 프로토타입은 Array.prototype 객체리터럴 arr의 프로토타입은 Object.prototype12345678910111213//배열 리터럴var arr = [ 'zero', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine'];//객체 리터럴var obj = { '0': 'zero', '1': 'one', '2': 'two', '3': 'three', '4': 'four', '5': 'five', '6': 'six', '7': 'seven', '8': 'eight', '9': 'nine'}; Array 생성자 함수 var arr = new Array(2); length가 2인 빈 배열 생성 -> [undfined,undefined] var arr = new Array(1,2,3); 매개변수로 전달된 값을 요소로 가지는 배열 -> [1,2,3] 배열 요소의 삭제 delete로 삭제할 경우 해당 요소 값만 삭제되어, 해당 인덱스는 undefined가 된다. Array.prototype.splice() 메소드를 사용하면 요소를 완전히 지울 수 있다. splice()는 제거한 요소를 반환한다. 1234567var arr = ['one','two','three','four'];delete arr[3];console.log(arr); // ['one','two','three', undefined];var arr2 = ['zero','one','three','four'];arr2.splice(2,1) //시작인덱스, 삭제할 요소 수console.log(arr2); // ['three']; Array Method concat(), slice() : 원본이 변경되지 않고 복사본을 반환한다. Array.prototype.concat() : 자신(배열)의 복사본에 인수로 넘어온 값들을 요소로 추가하고 반환한다. 원본 배열은 변경되지 않는다. Array.prototype.join() : 배열요소 전체를 연결하여 생성한 문자열을 반환. 기본구분자는 ‘,’이며 + 연산자보다 빠르다. Array.prototype.pop(), push(), shift(), unshift(), reverse() : 원본 배열이 수정된다. push()는 원본 배열을 직접 변경하여 변경된 배열의 length를 반환하고, concat()은 원본 배열을 직접 변경하지 않고 복사본을 반환한다. unshift() : push()와 반대로 배열의 선두에 추가된다. shift() : pop()과 반대로 배열에서 첫요소를 제거하고 제거한 요소를 반환한다. Array.prototype.reverse() : 배열 요소의 순서를 반대로 변경하고 원본 배열이 변경된다. 반환값은 변경된 배열이다. Array.prototype.slice(start, end) : 원본이 변경되지 않는다. 인수가 음수일 경우 끝에서 갯수만큼 반환한다. 모든 요소를 반환할때(인수가 비었을 때) 복사본이 생성된다. Array.prototype.splice(start, deleteCount, item…) : 매개변수는 시작위치 삭제할 요소 수, 삭제할 위치에 추가될 요소들(item…)이다. 제거한 요소가 배열로 반환되고 원본 배열이 변경된다. *삭제/배열 중간에 새로운 요소를 추가 Error Error 생성자는 error 객체를 생성한다. error 객체의 인스턴스는 런타임 에러가 발생하였을 때 throw된다. Error에 관련된 객체 : EvalError InternalError RangeError ReferenceError SyntaxError TypeError URIError 레퍼(Wrapper)객체 - 기본형이 레퍼객체를 사용할 수 있는 이유 기본자료형으로 프로퍼티나 메소드를 호출할 때 기본자료형과 연관된 Wrapper 객체로 일시적으로 변환되어 프로토타입 객체를 공유하기 때문이다. 메소드 호출이 종료되면 객체로 변환된 기본자료형의 값은 다시 기본자료형의 값으로 복귀한다. 정적(Static)메소드,프로퍼티 prototype에 속해있는 메소드는 해당 prototype을 상속받은 인스턴스가 있어야 사용할 수 있지만 정적 프로퍼티, 메소드는 해당 인스턴스를 생성하지 않아도 사용할 수 있다. 전역 프로퍼티 Infinity, NaN, undefined(type도 undefined) 전역 함수(isFinity,isNaN은 문자열을 받을 경우 숫자로 변환한 후, 결과값을 나타낸다) eval(String) isFinity() isNaN() parseFloat() parseInt() encodeURI(), decodeURI() encodeURIComponent(), decodeURIComponent() encodeURI(), encodeURIComponent() 비교 encodeURI(): 매개변수로 전달된 URI를 인코딩한다. 인수를 URI 전체라고 간주하고 파라미터 구분자인 =,?,&을 인코딩하지 않는다. encodeURIComponent(): 매개변수로 전달된 URI Component(구성요소)를 인코딩한다. 인수를 쿼리스트링의 일부라고 간주하여 =,?,&을 인코딩한다. URI의 문자들을 이스케이프 처리한다. URI(Protocol, Host, Port, Path, Query, Fragment) 이스케이프 처리는 네트워크를 통해 정보를 공유할 때 어떤 시스템에서도 읽을 수 있는 아스키 코드(ASCII Character-set)로 변환하는 것이다. URI 문법 형식 표준에 따르면 URI는 ASCII Character-set으로만 구성되어야 하며 ASCII에 정의되지 않은 특수문자나 한글을 포함한 외국어의 경우는 URL에 포함될 수 없기 때문에 이스케이프 처리를 하는 것이다. URL내에서 의미를 갖는 문자(%, ?, #), URL에 올수 없는 문자(한글,공백 등) 또는 시스템에 의해 해석될 수 있는 문자(<,>)를 이스케이프 처리하여 야기될 수 있는 문제를 예방하기 위해 이스케이프 처리를 한다. 알파벳, 0~9의 숫자, -_.!~*’()는 이스케이프 처리에서 제외된다. decodeURI(), decodeURIComponent() 인코딩된 완전한 URI, 인코딩된 URI Component를 원래의 URI로 돌려놓는다. DOMDOM tree의 구성 문서노드(Document Node) - DOM tree에 접근하기 위한 시작점 요소노드(Element Node) 어트리뷰트노드(Attribute Node) 텍스트노드(Text Node) - DOM tree의 최종점 요소에의 접근document.getElementsByClassName(class) 메소드 반환값은 HTMLCollection이다. HTMLElement의 리스트를 담아 반환하기 위한 객체로 유사배열이다. 실시간으로 Node의 상태 변경을 반영한다.(live HTMLCollection) querySelectorAll 메소드를 사용하여 NodeList(none-live)를 반환하게 한다. 반복문을 역방향으로 돌린다. HTMLCollection을 배열로 변경한다. var arr = [].slice.call(elems); elems(getElementsByClassName)은 배열이 아니기 때문에 배열로 변환해준다. DOM 탐색 hasChildNodes() : 자식노드가 있는지 확인하고 Boolean값 반환 childNodes : 자식노드의 컬렉션을 반환한다. NodeList(non-live) firstChild, lastChild, previousSibling, nextSibling 조작텍스트 노드에 접근/수정 nodeValue 텍스트 노드의 프로퍼티 텍스트 노드일 경우 문자열 반환, 요소 노드일 경우 null 반환 nodeName, nodeType (노드의 정보 취득) 어트리뷰트 노드에 접근/수정 className, id hasAttribute(attribute) : 지정한 어트리뷰트를 가지고 있는지(Boolean) getAttribute(attribute) : 어트리뷰트의 값을 취득한다. 문자열을 반환한다. setAttribute(attribute, value) : 어트리뷰트와 어트리뷰트 값을 설정한다. removeAttribute(attribute) : 지정한 어트리뷰트를 제거한다. HTML 콘텐츠 조작 textContent : 요소의 텍스트 콘텐츠 취득 또는 변경. 마크업을 포함시키면 문자열로 인식하여 그대로 출력한다. innerText: 비표준. visibility:hidden(영역을 유지) 지정되어있으면 텍스트가 반환되지 않는다. css를 고려하기 때문에 textContent 프로퍼티보다 느리다. innerHTML : 해당 요소의 모든 자식요소를 포함하는 모든 콘텐츠를 하나의 문자열로 취득할 수 있다. 이 문자열은 마크업을 포함한다. 그러나 마크업이 포함된 콘텐츠를 추가하는 것은 크로스 스크립팅 공격(XSS)에 취약하다. DOM 조작 방식 innerHTML을 사용하지 않고 새로운 컨텐츠를 추가할 수 있는 방법은 DOM을 직접 조작하는 것이다. createElement(tagName) createTextNode(text) appendChild(Node) : 생성된 노드를 DOM tree에 저장한다. removeChild(Node) insertAdjacentHTML(position, string) : 삽입위치, 삽입할요소beforebegin, afterbegin, beforeend, afterend innerHTML과 inssertAdjacentHTML()은 크로스 스크립팅 공격(XSS)에 취약하다. 텍스트를 추가 또는 변경시에는 textContent, 새로운 요소 추가/삭제는 DOM 조작 방식을 사용한다. DOM조작 방식의 단점은 innerHTML 보다 느리고 특정노드 한개를 추가할 때 사용하므로 여러 노드를 추가하려면 많은 코드가 필요하다. Event Flow(이벤트 흐름) 이벤트 핸들러 : 요소에 어떤 이벤트가 일어날때(이벤트발생) 실행되는 함수. 버블링 : 자식 요소에서 발생한 이벤트가 부모 요소로 전파되는 것 캡처링 : 자식 요소에서 발생한 이벤트가 부모 요소부터 시작하여 이벤트를 발생시킨 자식 요소까지 도달하는 것 이벤트가 발생했을 때 캡처링과 버블링은 순차적으로 발생한다. 3번째 매개변수가 true면 capturing, false면 bubbling, 미설정하면 bubbling 클로저 내부함수가 참조하는 외부함수의 지역변수가 외부함수에 의해 내부함수가 반환된 이후에도 life-cycle이 유지되는 것. 자유변수에 엮여있는 함수. 12345678function outer(){ var x = 'Hello'; //자유 변수 var inner = function(){console.log(x);}; return inner;}var result = outer();result(); 실행컨텍스트 관점에서, 내부함수가 유효한 상태에서 외부함수가 종료되어 외부함수의 실행 컨텍스트가 반환되어도 외부함수의 실행 컨텍스트 내의 AO(Activation object)는 유효하여 내부함수가 스코프 체인을 통해 참조할 수 있는 것을 의미한다. 전역 변수 사용 억제를 위해 사용한다. 클로저 활용 - for문 전역변수i12345678910111213var arr = [];for(var i=0; i<5; i++){ arr[i] = (function(id){ return function(){ return id; }; }(i));}for(var j=0;j<arr.length;j++){ console.log(arr[j]());} 즉시실행함수는 한번만 실행된다. 즉시실행함수는 i를 인자로 받고 매개변수 id를 할당한 후, 내부함수를 반환하고 life-cycle이 종료된다. 매개변수 id는 자유변수이다. 123456789101112var add = (function(){ var counter = 0; return function(){ return ++counter; }}()); // 즉시실행함수는 한번만 실행된다. // counter는 한번만 초기화된다.function myFunction(){ document.getElementById('demo').innerHTML = add();} counter는 자유변수이고, 외부에서 직접 접근할 수 없는 private 변수이다. counter는 자신을 참조하는 함수가 소멸될때까지 유지된다. 비동기식 처리 모델 비동기식 처리 모델은 병렬적으로 작업을 수행한다. 서버에 데이터를 요청한 이후 서버로부터 데이터가 응답될때까지 대기하지 않고(Non-blocking) 즉시 다음 작업을 수행한다. 호출되는 함수는 Call Stack에 쌓이고, setTimeout이 호출되면 즉시 실행되지 않고 지정 대기 시간만큼 기다리다가 ‘tick’ 이벤트가 발생하면 이벤트 큐로 이동한 후 Call Stack이 비어졌을 때 Call Stack으로 이동되어 실행된다. Ajax(Asynchronous JavaScript and XML) 자바스크립트를 이용해서 비동기적으로 서버와 브라우저가 데이터를 교환할 수 있는 통식 방식 서버로부터 웹페지가 반환되면 화면 전체를 갱신해야 하는데 페이지 전체를 로드하여 렌더링하지 않고 갱신이 필요한 일부만 로드 후 갱신하여 동일한 효과를 볼 수 있도록 하는 것이다. 객체를 JSON형식의 문자열로 변환 큰따옴표 사용 JSON.stringify(o) : o는 JSON으로 변환할 객체 JSON.stringify(o, 필터함수, 공백의수) JSON형식의 문자열을 객체로 변환(=역직렬화) JSON.parse(str) : str은 JSON 형식의 문자열, 문자열 Ajax request123var xhr = new XMLHttpRequest();xhr.open('GEN','/users'); //세번째인수 default:True(비동기)xhr.send(); XMLHttpRequest객체 생성(Ajax 요청을 생성하고 전송한다) 비동기 방식으로 Request를 오픈한다. Request를 전송한다. xhr.open(method, url, async) method : HTTP method(GET,POST,PUT,DELETE) url 요청을 보낼 url async 비동기조작여부, default:true xhr.send() 메소드로 준비된 요청을 서버에 전달한다. GET 메소드 : URL의 일부분인 쿼리문자열로 데이터를 서버로 전송한다. send 메소드의 인수는 무시되고 request body는 null로 설정된다. POST 메소드 : 데이터(페이로드)를 Request Body에 담아 전송한다. xhr.setRequestHeader HTTP Request Header의 값을 설정한다. 반드시 open 메소드 뒤에서 호출한다 Accept 헤더를 설정하지 않으면 send가 호출될 때 Accept 헤더가 /로 전송된다. content-type request body에 담아 전송할 데이터의 MIME-type의 정보를 표현한다. ex) xhr.setRequestHeader(‘Content-type’,’application/json’); // 서버가 전송할 데이터의 MIME-type 지정-json ex) xhr.setRequestHeader(‘Content-type’,’application/x-www-form-urlencoded’); //key=value&key=value..의 형태로 전송한다. Accept HTTP 클라이언트가 서버에 요청할 때 서버가 센드백할 데이터의 MIME-type을 지정한다. Ajax response12345678910111213141516171819202122232425262728293031323334var req = new XMLHttpRequest();req.open('GET','data/test.json');req.send();req.onreadystatechange = function(e){ //readyState:4 -> DONE if(req.readyState === XMLHttpRequest.DONE){ // status는 response 상태 코드를 반환. // 200이 정상응답(GET) if(req.status === 200){ //데이터 출력 console.log(req.responseText); //3가지 구체적인 출력 방식 //1.Load HTML(HTML형식 추가) -> 전송받은 데이터를 DOM에 추가한다. document.getElementById('content').innerHTML = req.responseText; //또는 document.getElementById('content').insertAdjacentHTML('beforeend',req.responseText); //2.Load JSON(JSON 형식 -> 객체화) : JSON.parse() //역직렬화 responseObject = JSON.parse(req.responseText); var newContent = ''; newContent += '<div id="tours">'; ... for(var i=0; i < responseObject.tours.length; i++){ ... responseObject.tours[i].region... } //생략 }else{ console.log("Error!"); } }} readyState : response가 클라이언트에 도달했는지를 추적한다. 0(UNSET) XMLHttpRequest.open() 메소드 호출 이전 1(OPENED) XMLHttpReqeust.open() 메소드 호출 완료 2(HEADERS_RECEIVED) XMLHttpRequst.send() 메소드 호출 완료 3(LOADING) 서버응답중(XMLHttpRequest.responseText 미완성 상태) 4(DONE) 서버응답완료(정상적으로 response가 돌아온 상태) Load JSONP 와 동일출처원칙 요청에 의해 웹페이지가 전달된 서버와 동일한 도메인의 서버로 부터 전달된 데이터는 문제없이 처리할 수 있다. 그러나 보안상의 이유로 다른 도메인으로의 요청은 제한된다. 동일출처원칙을 우회하는 방법 웹서버의 프록시 파일 서버에 원격 서버로부터 데이터를 수집하는 별도의 기능을 추가하는 것이다. 이를 프록시(Proxy)라 한다. JSONP script 태그의 원본 주소에 대한 제약이 존재하지 않는데 이것을 이용하여 다른 도메인의 서버에서 데이터를 수집하는 방법이다. 자신의 서버에 함수를 정의하고 다른 도메인의 서버에 얻고자 하는 데이터를 인수로 하는 함수 호출문을 로드하는 것이다. Cross-Origin Resource Sharing HTTP 헤더에 추가적으로 정보를 추가하여 브라우저와 서버가 서로 통신해야 한다는 사실을 알게하는 방법이다. REST API REST는 HTTP 1.0/1.1의 스펙 작성에 참여했다. 로이필딩의 논문에서 웹이 HTTP의 설계상 우수성을 제대로 사용하지 못하는 상황을 보고 웹의 장점을 최대한 활용할 수 있는 아키텍쳐로 REST를 소개했다. *HTTP 프로토콜을 의도에 맞게 디자인하도록 유도하고 있다. RESTful이란? REST의 기본 원칙을 성실히 지킨 서비스 디자인을 RESTful이라 한다. REST API의 중심규칙 URI는 정보의 자원을 표현해야 한다. 자원에 대한 행위는 HTTP Method로 표현한다. HTTP Method 4가지의 Method를 사용하여 CRUD를 구현한다. Action Method 역할 Create POST 리소스를 생성 Read - index/retrieve GET 모든/특정 리소스를 조회 Update PUT 리소스를 갱신 delete DELETE 리소스를 삭제 REST API의 구성 REST API는 자원(Resource),행위(Verb),표현(Representations)의 3가지 요소로 구성된다. REST는 자체 표현 구조(Self-descriptiveness)로 구성되어 REST API만으로 요청을 이해할 수 있다 구성요소 내용 표현 방법 Resource 자원 HTTP URI Verb 자원에 대한 행위 HTTP Method Representations 자원에 대한 행위의 내용 HTTP Message Pay Load *pay Load(페이로드) - body에 담기는 데이터 GET1234var req = new XMLHttpRequest();req.open('GET', 'http://localhost:5000/books');req.send();*정상 : req.status === 200 POST12345678910var req = new XMLHttpRequest();req.open('POST', 'http://localhost:5000/books');req.setRequestHeader('Content-type', 'application/json');req.send(JSON.stringify({ title : "ES6", author : "Choi"}));*정상 : req.status === 201 PUT12345678var req = new XMLHttpRequest();req.open('PUT', 'http://localhost:5000/books/4');req.setRequestHeader('Content-type', 'application/json');req.send(JSON.stringify({ title : "javascript", author : "Kim"})); DELETE123var req = new XMLHttpRequest();req.open('DELETE', 'http://localhost:5000/books/4');req.send(); POST, PUT은 setRequetHeader를 지정해준다. 실행 컨텍스트 실행 컨텍스트는 실행 가능한 코드(전역코드와 함수 내 코드)가 실행되는 환경이다. 자바스크립트 엔진은 코드를 실행하기 위해 변수, 함수선언, 변수의 유효범위, this의 정보를 알고 있어야 한다. 실행 컨텍스트의 3가지 객체 VO(Variable Object) SC(Scope Chain) this(thisValue) Scope Chain 스코프 체인은 일종의 리스트로서 중첩된 함수의 스코프의 레퍼런스를 차례대로 저장하고 있는 개념이다. 함수 실행 컨텍스트일 경우 Activation Object를 선두로하여 순차적으로 상위 컨텍스트(가 있다면)의 Activation Object를 가리키며 마지막 리스트는 전역 객체를 가리킨다. 함수 실행중에 변수를 만나면 그 변수를 우선 현재 Scope인 Activation Object에서 검색해보고, 만약 검색에 실패하면 스코프 체인에 담겨진 순서대로 그 검색을 이어가게 된다. 스코프 체인의 순차적인 검색에 실패하면 정의되지 않은 변수에 접근하는 것으로 판단하여 Reference 에러를 발생시킨다. 스코프 체인은 [[scope]] 프로퍼티로 참조할 수 있다. 전역 코드에의 진입(순서) 전역 컨텍스트에 접근하기 이전에 전역 객체(GO)가 생성된다. 전역 코드로 컨트롤이 진입하면 전역 실행 컨텍스트(Global EC)가 생성되고 실행 컨텍스트에 스택이 쌓인다. 스코프체인이 초기화된다.(스코프 체인의 생성과 초기화) Variable Instantiation(변수객체화)가 실행된다. -> Variable Object에 프로퍼티 값을 추가하는 것이다. this value가 결정된다. 변수 객체화(전역) (Function Code인 경우) 매개변수가 Variable Object의 프로퍼티로, 인수가 값으로 설정된다. 함수선언을 대상으로 함수명이 Variable Object의 프로퍼티로, 생성된 객체가 값으로 설정된다.(함수 호이스팅) 변수 선언을 대상으로 변수명이 Variable Object의 프로퍼티로, undefined가 값으로 설정된다.(변수 호이스팅) 함수 호이스팅 코드가 실행되기 이전에 전역에서 선언된 함수의 함수명은 Variable Object의 프로퍼티가 되고 생성된 함수 객체(Function Object)가 값으로 설정된다. 따라서 스코프 체인이 가리키는 변수 객체에 이미 함수가 등록되어 있으므로 이후 코드를 실행할 때 함수선언식 이전에 함수를 호출할 수 있게 된다. 변수 호이스팅전역에서 var 키워드로 선언된 변수는 선언 단계와 초기화 단계가 한번에 이루어진다. 즉, 스코프 체인이 가리키는 변수 객체에 변수가 등록되고 변수는 undefined로 초기화된다. 따라서 변수 선언문 이전에 변수에 접근하여도 Variable Object에 변수가 존재하기 때문에 에러가 발생하지 않고 undefined를 반환한다. this value 결정 this value가 결정되기 이전에 this는 전역 객체를 가리키고 있다가 함수 호출 패턴에 의해 this에 할당되는 값이 결정된다. 전역코드의 실행함수의 실행 스코프 체인의 선두에 Activation Object를 참조하도록 설정한다. Activation Object는 우선 arguments 프로퍼티의 초기화를 실행하고, 그 후 Variable Instantiation가 실행된다.(VO객체는 Activation Object에 바인딩하여 Variable Instantiation를 실행한다.) this value가 결정된다.]]></content>
<categories>
<category>TIL</category>
</categories>
<tags>
<tag>rest, built-in</tag>
</tags>
</entry>
<entry>
<title><![CDATA[REST API]]></title>
<url>%2F2017%2F10%2F17%2FTIL-1017-2%2F</url>
<content type="text"><![CDATA[REST API REST(Representational State Transfer)는 HTTP/1.0과 1.1의 스펙 작성에 참여하였고, 아파치 HTTP 서버 프로젝트의 공동설립자인 로이 필딩(Roy Fielding)의 2000년 논문에서 처음 소개되었다. 발표 당시의 웹이 HTTP의 설계 상 우수성을 제대로 사용하지 못하고 있는 상황을 보고 웹의 장점을 최대한 활용할 수 있는 아키텍쳐로 REST를 소개했다고 한다. HTTP 프로토콜을 의도에 맞게 디자인하도록 유도하고 있다. REST의 기본 원칙을 성실히 지킨 서비스 디자인을 “RESTful”이라고 표현한다. REST API 중심 규칙1. URI는 정보의 자원을 표현해야 한다. 자원을 표현하는데 중점을 두어야 한다. 리소스명은 동사(get)보다는 명사를 사용한다. GET /books/1 (o) GET /members/delete/1 (x) - delete와 같은 행위에 대한 표현이 들어가선 안된다. DELETE /members/1 (o) - 위의 잘못된 표현 수정 2. 자원에 대한 행위는 HTTP Method(GET,POST,PUT,DELETE 등)으로 표현한다. DELETE /books/1 HTTP Method 4가지의 Method를 사용하여 CRUD를 구현한다. Method Action 역할 Create POST 리소스를 생성 Read - index/retrieve GET 모든/특정 리소스를 조회 Update PUT 리소스를 갱신 delete DELETE 리소스를 삭제 REST API의 구성 REST API는 자원(Resource),행위(Verb),표현(Representations)의 3가지 요소로 구성된다. REST는 자체 표현 구조(Self-descriptiveness)로 구성되어 REST API만으로 요청을 이해할 수 있다 구성요소 내용 표현 방법 Resource 자원 HTTP URI Verb 자원에 대한 행위 HTTP Method Representations 자원에 대한 행위의 내용 HTTP Message Pay Load]]></content>
<categories>
<category>TIL</category>
</categories>
<tags>
<tag>rest, crud</tag>
</tags>
</entry>
<entry>
<title><![CDATA[Ajax와 JSON]]></title>
<url>%2F2017%2F10%2F17%2FTIL-1017%2F</url>
<content type="text"><![CDATA[Ajax(Asynchronous JavaScript and XML) 자바스크립트를 이용해서 비동기적(Asynchronous)으로 서버와 브라우저가 데이터를 교환할 수 있는 통신 방식이다. 서버로부터 웹페이지가 반환되면 화면 전체를 갱신해야 하는데 페이지 일부만 갱신하고도 동일한 효과를 볼 수 있도록 하는 것이다. Client에서 HTTP Request 객체를 이용해 데이터를 요청한다. Server에서 HTTP Response 객체를 이용해 server의 응답에 요청한다. 데이터를 반환할 때 데이터 형식은 문자열로 받은 객체를 JSON으로 변경하거나, JSON을 객체화 시키는 두가지가 있다. JSON (JavaScript Object Notation) HTML, Text, JSON 등을 반환하는데 Ajax을 위한 데이터 형식이다. 쌍 따옴표를 사용한다.(프로퍼티 이름도) 객체리터럴과 흡사하나, 순순한 텍스트로 구성되었다. 코멘트, 주석을 쓰면 에러가 발생한다. 데이터 형식객체 -> JSON 형식의 문자열 JSON.stringify(객체) 123456789var obj = { name : 'Choi', gender : 'female', age : 20};var strObj = JSON.stringify(obj);console.log(typeof strObj, strObj);// string {"name":"Choi","gender":"female","age":"20"} 개발자가 데이터 확인할 때,(편의성, 가독성) JSON.stringify(obj, 필터함수, 공백갯수) 의 인자값을 준다. 필터 함수는 직접 함수를 정의한다. (원하는 데이터만 출력하기 위해 작성) 공백갯수는 프로퍼티 앞의 공백의 갯수를 말한다. 개발자의 가독성을 위해 준다. JSON 형식의 문자열 -> 객체 JSON.parse(문자열) 역직렬화12345var o = JSON.parse(stObj);//strObj = {"name":"Choi","gender":"female","age":"20"}console.log(typeof o, o);//o {name:'Choi',gender:'female',age:'20'} XMLHttpRequest 브라우저는 XMLHttpRequest 객체를 이용하여 Ajax 요청을 생성하고 전송한다. Ajax request Ajax 요청 처리 123456//XMLHttpRequest 객체 생성var xhr = new XMLHttpRequest();//비동기 방식으로 Request를 오픈한다.xhr.open('GET', '/users');//Request를 전송한다.xhr.send(); XMLHttpRequest.open XMLHttpRequest 객체의 인스턴스를 생성하고 open메소드를 사용하여 서버로의 요청을 준비한다. XMLHttpRequest.open(method, url, async) method : HTTP method(GET, POST, PUT, DELETE 등) url : 요청을 보낼 URL, 한서버에서만 요청을 주고 받기 때문에(파일을 전달받은 서버와 같은 서버) 주로 같은 경로를 사용한다. async : 비동기 조작 여부, default는 true(비동기) XMLHttpRequest.send 준비된 요청을 서버에 전달한다. GET, POST 메소드에 따라 전송방식에 차이가 있다. GET 메소드는 URL의 일부분인 쿼리문자열(쿼리 파라미터)로 데이터를 서버로 전송한다. POST 메소드는 데이터(payload)를 Request body에 담아 전송한다.(payload:body에 담기는 data) XMLHttpRequest.send 메소드는 request body에 담아 전송할 인수를 전달 할 수 있다. HTTP Request/Response Message Pair 에는 Header와 Body가 있는데, Header에는 전달하려는 요청 정보를 담는다. **요청 메소드가 GET인 경우 send메소드의 인수는 무시되고 request body는 null로 설정된다. XMLHttpRequest.setRequestHeader HTTP Request Header 값을 설정한다. Request Header의 Content-type은 request body에 담아 서버로 전송할 데이터의 MIME-type을 지정한다. Request header의 Accept는 클라이언트가 서버에 요청할 때 서버가 센드백할 데이터의 MIME-type을 지정한다. Accept 헤더를 설정하지 않으면 /으로 전송된다. setReuqestHeader 메소드는 반드시 open메소드 뒤에 호출한다. 12345req.open('POST','/users');//application/x-www-form-urlencoded는 key=value&key=value...형태로 전송req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');//서버가 센드백할 데이터의 MIME-type : jsonreq.setRequestHeader('Accept','application/json'); Ajax response Ajax 응답 처리 1234567891011121314151617181920// request(요청방식)와 동일// 비동기방식으로 (XMLHttp)Request를 오픈한 후, 전송var req = new XMLHttpRequest();req.opne('GET', 'data/test.json');req.send();//readyState 프로퍼티가 변경될 때마다 콜백함수를 호출한다.req.onreadystatechange = function(e){//readyState: XMLHttpRequest 상태(state)를 반환// 4(DONE) : 서버 응답 완료 if(req.readyState === XMLHttpRequest.Done){ // response 상태 코드를 반환, 200(정상 응답) if(req.status === 200){ //텍스트(데이터) 출력 console.log(req.responseText); }else{ console.log("Error!"); } }}; localhost 내 PC에 깔려있는 웹서버(가상 서버) localhost:port 웹서버마다 port를 설정해준다. 가상 서버(localhost)에서 실제 서버로 보내는 것을 배포라고 한다.]]></content>
<categories>
<category>TIL</category>
</categories>
<tags>
<tag>ajax, json, Asynchronous, http</tag>
</tags>
</entry>
<entry>
<title><![CDATA[DOM Tree와 HTML 문서 구조]]></title>
<url>%2F2017%2F10%2F16%2FTIL-1016%2F</url>
<content type="text"><![CDATA[문서 객체 모델(DOM) 브라우저는 파일을 불러들인 후(loading) 컴퓨터가 이해할수 있는 방식으로 한줄씩 해석하여(parsing) 문서객체모델(DOM)을 생성한다. 자바스크립트 엔진을 구동시킨다. HTML 문서는 DOM tree 형태로 구조화 되어 있다. DOM tree + CSSOM tree = Render tree DOM은 html 문서에 대한 구성(DOM tree), 문서 내의 각 요소에 접근/수정(프로퍼티와 메소드 제공)을 할 수 있다. DOM tree 브라우저가 HTML문서를 로드한 후 생성하는 모델을 의미한다. 객체의 트리로 구조화되어 있기 때문에 DOM tree라고 부른다. DOM에서 모든 요소, 어트리뷰트, 텍스트는 하나의 객체이며 Document 객체의 자식이다. DOM tree는 문서노드, 요소 노드, 어트리뷰트 노드, 텍스트 노드로 구성된다. Javascript는 DOM에서 웹 페이지를 조작하기 위한 수단(API)을 제공한다. 한 개의 요소 노드 선택document.getElementById(id) id 어트리뷰트 값으로 요소 노드를 한개 선택한다. 복수개가 선택된 경우, 첫번째 요소만 반환한다. 모든 브라우저에서 동작한다. Return : HTMLElement를 상속받은 객체 document.querySelector(cssSelector) CSS 셀렉터를 사용하여 요소 노드를 한개 선택한다. 복수개가 선택된 경우, 첫번째 요소만 반환한다. IE8이상의 브라우저에서 동작한다. Return : HTMLElement를 상속받은 객체 여러개의 요소 노드 선택document.getElementsByClassName(class) class 어트리뷰트 값으로 요소 노드를 모두 선택한다. 공백으로 구분하여 여러개의 class를 지정할 수 있다. Return: HTMLCollection (live) : 실시간으로 값이 변경된다.(실시간으로 노드의 상태를 반영한다) HTMLCollection : HTMLElement의 리스트를 담아 반환하기 위한 객체로 유사배열(array-like object)이다. IE9이상에서 동작한다. innerHTML 크로스 스크립팅 공격에 취약하다 javascript event 이벤트가 실행, 콜스택이 비었을때 queue에있는 콜백함수가 스택으로 이동한다. 대부분의 Event, Timer 함수, Ajax는 비동기로 동작한다. 이벤트가 발생되었을 때 클릭이벤트에 콜백함수가 바인딩되었다라고한다. 이벤트바인딩 자바스크립트가 HTML 코드 안에 혼용되서는 안된다. 두 언어가 관심사가 다르기 때문이다. onclick 이벤트는 한 이벤트 당 하나의 함수만 호출할 수 있다. => addEventListener]]></content>
<categories>
<category>TIL</category>
</categories>
<tags>
<tag>DOM, document</tag>
</tags>
</entry>
<entry>
<title><![CDATA[Wrapper 객체]]></title>
<url>%2F2017%2F10%2F13%2FTIL-1013%2F</url>
<content type="text"><![CDATA[Number 기본자료형 number를 위한 wrapper 객체 기본자료형으로 프로퍼티나 메소드를 호출할 때 기본자료형과 연관된 wrapper 객체로 일시적으로 변환되어 프로토타입 객체를 공유하게 되기 때문에 기본자료형이 wrapper 객체 메소드를 사용할 수 있다. Number Constructor new Number(value) 숫자로 변환할 수 없다면 NaN을 반환한다. 기본자료형 숫자 반환 방식은 Number(Value) new Number와 Number 형 비교12345678var x = 123;var y = new Number(123);console.log(x == y); // trueconsole.log(x === y); // false (타입이 다르다)console.log(typeof x); // numberconsole.log(typeof y); // object Number PropertyNumber.MAX_VALUE 자바스크립트에서 사용 가능한 가장 큰 숫자이다. MAX_VAULE보다 큰 숫자는 Infinity 이다. Number.MIN_VALUE 0에 가장 가까운 양수값이다. MIN_VALUE보다 작은 숫자는 0 이다. Number.POSITIVE_INFINITY 양의 무한대 Infinity를 반환한다. Number.NEGATIVE_INFINITY 음의 무한대 -Infinity를 반환한다. Number.NaN 숫자가 아님을 나타낸다. window.NaN과 같다. Number Method 숫자가 아닐 경우, 인수를 숫자로 변환하지 않고 false를 반환한다. Number.isFinite(value) 매개변수 값이 정상적인 유한수인지를 검사하여 Boolean값을 반환한다. 전역 함수 isFinite(value)는 인수를 숫자로 변환하여 결과값을 반환한다. Number.isInteger(value) 매개변수 값이 정수인지 검사하여 Boolean값으로 반환한다. Number.isNaN(value) 매개변수 값이 NaN인지를 검사하여 Boolean값을 반환한다. Not a Number 숫자가 아니면 true 반환한다. Number.isSafeInteger() 매개변수 값이 안전한 정수 값인지를 검사하여 Boolean값을 반환한다. 안전한 정수 값은 (253 - 1)와 -(253 - 1) 사이의 정수이다. Number.prototype.toExponential() 지수 표기법으로 변환하여 문자열로 반환한다. 예를들어, 1.234e+3는 e(xponential)의 앞에 있는 숫자의 10의 3승을 나타낸다. 변수.toExponential(n); 반올림하여 소수 n번째 짜리까지 지수 표기법으로 반환한다. 인수는 0~20까지 입력할 수 있다. Number.prototype.toFixed() 매개변수로 지정된 소수점 자리를 반올림하여 문자열로 반환한다. Number.prototype.toPrecision() 지정된 전체 자릿수까지 유효하도록 반올림하여 문자열로 반환한다. 지정된 전체 자릿수로 표현할 수 없을 경우 지수표기법으로 쓴다. Number.prototype.toString() 숫자를 문자열로 변환하여 반환한다. toString(n) n은 2~36값으로 진수를 나타낸다. Math 수학 상수와 함수를 위한 프로퍼티와 메소드를 제공하는 빌트인 객체이다. Math PropertyMath.PI PI값을 반환한다. Math MethodMath.abs() 0 또는 양수인 절대값을 반환한다. 숫자가 아닐 경우 NaN을 반환한다. Math.round() 가장 인접한 정수로 올림/내림한다. x = Math.round(-20.5); // -20 x = Math.round(-20.51); // -21 Math.sqrt() 양의 제곱근을 반환한다. Math.ceil() 지정된 숫자를 자신보다 크고, 가까운 정수로 올림한다. Math.floor() 지정된 숫자를 자기보다 작고, 가까운 정수로 내림한다. Math.random() 0과 1 사이의 임의의 숫자를 반환한다. (Math.random() * 10) + 1 : 1에서 10까지의 임의의 숫자를 반환한다. Math.pow() 첫번째 인수를 밑, 두번째 인수를 지수로 하여 거듭제곱을 반환한다. Math.pow(7,2); // 49 Math.max() 인수중에 가장 큰 수를 반환한다. 배열을 인자값으로 받을때는 apply를 사용한다.12345var arr = [1, 2, 3, 4, 5];var max = Math.max.apply(null, arr);//ES6에서 사용법var max Math.max(...arr); Math.min() 인수중에 가장 작은 수를 반환한다. Date 날짜와 시간(년,월,일,시,분,초)을 위한 빌트인 객체이다. UTC(협정 세계시)는 GMT(그리니치 평균시)라고도 한다. KST(Korea Standard Time)은 UTC보다 9시간이 빠르다. 현재의 날짜와 시간은 자바스크립트 코드가 동작한 시스템의 시계에 의해 결정된다. Date의 Constructor Date 생성자를 이용하여 날짜와 시간을 가지는 인스턴스를 생성한다. 기본적으로 현재 날짜와 시간을 나타내는 값을 가진다. new Date() new 연산자 없이 Date()를 사용하면 결과값을 객체가 아닌 문자열로 반환한다. new Date() 매개변수가 없는 경우, 현재 날짜와 시간을 가지는 인스턴스를 반환한다. new Date(milliseconds) 1970년 1월 1일 00:00(UTC)을 기점으로 전달된 밀리초만큼 경과한 날짜와 시간을 가지는 인스턴스를 반환한다. new Date(dateString) 지정된 날짜와 시간을 가지는 인스턴스를 반환한다. var d = new Date(‘May 12, 2016 12:13:00’); var d = new Date(‘2017/08/08/20:00:00’); new Date(year, month[, day, hour, minute, second, millisecond]) 매개변수에 년,월,일,시,분,초,밀리초를 의미하는 숫자를 전달하면 지정된 날짜와 시간을 가지는 인스턴스를 반환한다. year 1990년 이후의 년 month 월을 나타내는 0~11까지의 정수(1월은 0) Date MethodDate.now() 1970년 1월 1일 00:00:00(UTC)을 기점으로 현재 시간까지 경과한 밀리초를 숫자로 반환한다. Date.parse() 1970년 1월 1일 00:00:00(UTC)을 기점으로 매개변수로 전달된 지정 시간까지의 밀리초를 숫자로 반환한다. var d = Date.parse(‘Jan 2, 1970 00:00:00 UTC’); // UTC var d = Date.parse(‘Jan 2, 1970 09:00:00’); // KST var d = Date.parse(‘1970/01/02/09:00:00’); // KST Date.UTC() 1970년 1월 1일 00:00:00(UTC)을 기점으로 매개변수로 전달된 지정 시간까지의 밀리초를 숫자로 반환한다. var d = Date.UTC(1970, 0, 2); var d = Date.UTC(‘1970/1/2’); //NaN 이 형식으로는 인식되지 않는다. Date.prototype.getFullYear() / getMonth() / getDate() / getDay() / getHours() / getMinutes() / getSeconds() / getMilliseconds() / getTime() 해당 연도/월/일/요일을 나타내는 4자리 숫자를 반환한다. getTime()은 1970년 1월 1일 00:00:00(UTC)를 기점으로 현재 시간까지 경과된 밀리초를 반환한다. Date.prototype.setFullYear() / setMonth() / setDate() / setDay() / setHours() / setMinutes() / setSeconds() / setMilliseconds() / setTime() 해당 연도/월/일/요일을 나타내는 4자리 숫자를 설정한다. setFullYear() 연도 이외의 월,일을 설정할 수 있다. Date.prototype.getTimezoneOffset() UTC와 지정 로케일(Locale) 시간과의 차이를 분단위로 반환한다. Date.prototype.toDateString() / Date.prototype.toTimeString() 사람이 읽을 수 있는 형식의 문자열로 날짜 / 시간을 반환한다. var d = new Date(‘1988/8/17/13:30’); console.log(d.toDateString()); // Sat Sep 17 1988]]></content>
<categories>
<category>TIL</category>
</categories>
<tags>
<tag>wrapper</tag>
</tags>
</entry>
<entry>
<title><![CDATA[실행 컨텍스트와 클로저]]></title>
<url>%2F2017%2F10%2F12%2FTIL-1012%2F</url>
<content type="text"><![CDATA[실행 컨텍스트(Execution Context) 실행 가능한 코드가 실행되는 환경이다. 실행 가능한 코드 : 전역코드, Eval코드(안씀), 함수코드(호출) 변수와 함수가 호출되기 위한 환경이 만들어진다. 자바스크립트 엔진은 코드를 실행하기 위해 실행에 필요한 정보를 알고 있으며, 실행 컨텍스트를 물리적 객체의 형태로 관리한다. 실행에 필요한 정보 : 변수(객체의 프로퍼티, 전역변수, 지역변수, 매개변수), 함수선언(함수명, 함수), 변수의 유효범위(전역이냐 지역이냐), this(가리키고 있는 객체) 실행 컨텍스트 스택(=콜 스택) 실행 컨텍스트가 생성되서 쌓이는 영역 전역 실행 컨텍스트, 함수 실행 컨텍스트가 생성되면 실행 컨텍스트 스택에 쌓인다. 함수를 호출하면 해당 함수의 실행 컨텍스트가 생성되며, 함수가 끝나면 해당 함수의 실행 컨텍스트가 사라진다. 실행 컨텍스트 3가지 객체 Variable Object(VO), Scope Chain(SC), this value Variable Object 변수(함수표현식 포함), 매개변수와 인수, 함수선언의 정보를 담는 객체로 유일하며 최상위에 위치한 객체이다. 전역 컨텍스트의 VO는 전역객체(GO)를 가리키고, 함수 컨텍스트의 VO는 활성객체(AO)를 가리킨다. 전역 객체(GO)는 전역에 선언된 전역 변수, 전역 함수를 프로퍼티로 소유한다. 활성 객체(AO)는 매개변수와 인수들의 정보를 배열의 형태로 담고 있는 arguments객체가 추가된다. 전역 객체(Global Object)는 1개 생성, 활성객체(Activation Object)는 여러개 생성이 가능하다. Scope Chain 스코프 체인은 일종의 리스트로서 중첩된 함수의 레퍼런스를 저장하고 있다. 마지막 리스트는 항상 전역 객체(GO)를 가리킨다. 함수 실행 컨텍스트의 스코프 체인의 경우, 레퍼런스로 자기 자신의 AO와 GO를 가리킨다. 스코프 체인(리스트)을 검색하면 함수가 중첩 상태일 때, 하위함수 내에서 상위함수의 유효 범위까지 참조할 수 있게 된다. this value this의 값이 할당된다. 함수 호출 패턴에 의해 결정된다. 전역 코드에의 진입 전역 객체 생성 컨트롤이 실행 컨텍스트에 접근하기 이전에 유일한 전역 객체(Global Object)가 생성된다. 전역 객체에는 빌트인 객체와 BOM, DOM이 설정되어 있다. 실행 컨텍스트 생성 후 스택 전역 코드로 컨트롤이 진입하면 실행 컨텍스트가 생성된 후, 실행 컨텍스트 스택에 쌓인다. 스코프 체인(SC)의 생성과 초기화 전역 객체의 레퍼런스를 포함하는 리스트가 된다. Variable Instantiation(변수 객체화) 실행 Variable Instantiation은 VO에 프로퍼티와 값을 추가하는 것이다. 변수, 매개변수, 인수정보(arguments), 함수선언을 VO에 추가하여 객체화한다. 함수부터 변수 순으로 저장된다. 4-1. “변수 객체화의 순서” Function일 경우 매개변수(parameter)가 VO의 프로퍼티로, 인수(arguments)가 값으로 설정된다. 함수선언(함수표현식 제외)을 대상으로 함수명이 VO(VO가 가리키고 있는 객체)프로퍼티로, 생성된 함수 객체가 값으로 설정된다.(함수 호이스팅) 변수 선언을 대상으로 변수명이 VO(VO가 가리키고 있는 객체)의 프로퍼티로, undefined가 값으로 설정된다.(변수 호이스팅) 함수의 선언 처리(함수가 있다면) 변수 객체화의 순서 2번처럼 함수명이 프로퍼티로, 생성된 함숫 객체(몸체)가 값으로 설정된다.(전역 함수일 경우 GO에 설정) 생성된 함수 객체는 [[Scope]] 프로퍼티를 가지게 된다. (함수 호출 실행 이전)[[Scope]]는 현재 실행 컨텍스트의 스코프 체인이 참조하고 있는 객체를 값으로 설정하고, (함수 실행 후)스코프 체인이 가리키는 변수 객체에 이미 함수가 등록되어 있으므로 함수선언식 이전에 함수를 호출할 수 있다. (함수 호이스팅) 변수의 선언 처리(변수가 있을때) 변수 객체화의 순서 3번처럼 변수명이 VO(VO가 가리키고 있는 객체)의 프로퍼티로, undefined가 값으로 설정된다. var 키워드로 선언된 변수는 선언과 초기화 단계가 한번에 이루어진다. 변수 선언문 이전에 접근해도 VO에 변수가 undefined로 초기화된 상태로 존재하기 때문에 에러가 나지 않는다.(변수 호이스팅) this value의 결정 this value가 결정되기 이전에 this는 전역 객체를 가리키고 있다가 함수 호출 패턴에 의해 this에 할당되는 값이 결정된다. 전역 코드의 실행 변수값 할당 변수값을 할당할 때는 VO(VO가 가리키고 있는 객체, 전역의 경우 GO)를 선두(0)부터 검색하여 해당 변수의 프로퍼티를 발견하면 값을 할당 한다. 함수 실행 함수가 실행되면 새로운 함수 실행 컨텍스트가 생성된다. 해당 함수로 실행 컨텍스트의 컨트롤이 이동하면 전역 코드와 마찬가지로 1. 스코프 체인의 생성과 초기화, 2. Variable Instantiation 실행, 3. this value 결정이 순서대로 실행된다. 함수 코드에의 진입 전역 코드에의 진입과 순서는 같지만 다른 룰이 적용된다. 스코프 체인의 생성과 초기화 Activation Object생성** AO에 대한 레퍼런스를 스코프 체인의 선두에 설정한다. Activation Object는 arguments 프로퍼티를 초기화한다. 스코프 체인의 마지막 레퍼런스 객체는 전역 객체를 참조한다. Variable Instantiation 실행 함수 객체와 변수를 VO에 바인딩한다.(선언, 초기화) 변수의 프로퍼티는 변수명, 값은 undefined로 VO에 저장한다. 함수의 프로퍼티는 함수명, 값은 Function Object로 VO에 저장한다. Function Object의 [[scope]] 프로퍼티가 생성된다. [[scope]] 프로퍼티는 AO와 전역을 참조하는 리스트의 값을 갖는다. this value 결정 this에 할당되는 값은 함수 호출 패턴에 의해 결정된다. 함수 코드의 실행(함수에 변수가 존재할때) 변수 값의 할당 지역변수를 할당할 때(현재는 내부함수일 경우), 스코프 체인이 참조하고 있는 VO를 선두(0)부터 검색하여 변수명에 해당하는 프로퍼티가 발견되면 값을 할당한다. (해당 영역에도 없으면 스코프 체인 리스트를 참조하여 GO를 검색하도록 한다.) 내부 함수 코드의 실행 내부 함수가 실행되기 시작하면 새로운 실행 컨텍스트가 생성된다. 여기서도 1. 스코프 체인의 생성과 초기화, 2. Variable Instantiation 실행, 3. this value 결정이 순서대로 진행된다. 클로저(closure) 내부함수가 참조하는 외부함수의 지역변수가 외부함수에 의해 내부함수가 반환된 이후에도 life-cycle이 유지되는 것을 의미한다. 외부함수가 내부함수보다 더 오래 유지되는 경우에 내부함수가 외부함수의 지역변수에 접근할 수 있고 외부함수는 외부함수의 지역변수를 사용하는 내부함수가 소멸될 때까지 소멸되지 못하고 상태가 유지되며 내부함수에 의해 소멸하게 되는 특성을 말한다. 클로저에 의해 참조되는 외부함수의 변수를 자유변수(Free variable)이라고 부른다. (실행 컨텍스트 관점에서)내부함수가 유효한 경우에 외부함수가 종료 되면 함수의 실행 컨텍스트도 소멸하지만, 함수 실행 컨텍스트의 AO는 유효하기 때문에 내부함수가 스코프 체인을 통해 참조할 수 있다. 클로저의 활용 성능적인 면과 자원적인 면에서 손해를 볼 수 있다. (실행 컨텍스트에서) 클로저로 참조하는 변수는 프로그램 종료 시까지 계속 메모리에 할당되어 있기 때문에 성능 상 좋다고 할 수 없다.(최소화하며 오남용하지 않아야 한다.) 12345678910111213141516<button type="button" onclick="myFunction()">Count!</button><p id="demo">0</p><script> var add = (function () { var counter = 0; return function () { return ++counter; }; }()); function myFunction() { document.getElementById('demo').innerHTML = add(); }</script> 전역 변수의 사용 억제를 위한 방식 즉시 실행함수는 한번만 실행되므로 counter가 다시 초기화되지 않는다. 외부함수의 변수 counter는 참조하는 함수(내부함수)가 소멸될때까지 유지된다. counter는 외부에서 접근할 수 없는 private 변수이다.]]></content>
<categories>
<category>TIL</category>
</categories>
<tags>
<tag>closure</tag>
</tags>
</entry>
<entry>
<title><![CDATA[빌트인객체-2]]></title>
<url>%2F2017%2F10%2F11%2FTIL-1011%2F</url>
<content type="text"><![CDATA[Number 생성자 함수가 없는 객체는 Static 함수. new Number(value) value에 문자열이 들어갔을때, 최대한 형변환된다.(숫자가 아니면 NaN 반환) 래퍼 객체를 통해 형변환하는 것은 좋은 것이 아니다. Number PropertyNumber.MAX-VALUENumber.MIN-VALUE 0에 가장 가까운 양수값 Number.POSITIVE_INFINITY INFINITY 양의무한대를 가지는 상수 Number.NEGATIVE_INFINITYNumber.NaNNumber method 기본적으로 형변환을 안한다.(엄격함) prototype.메서드를 쓰지 않음. static 함수이다. Number.isFinite() 숫자이고 유한한 값 전역함수의 isNaN()과의 차이 : 형변환을 안함(엄격함) Number.isInteger() Number.isInteger(0 / 0) // NaN(Not a Number) -> false Number.isNaN() 이것도 전역함수의 isNaN()과 다르게 형변환을 안함(엄격함) Number.isSafeInteger() 자바스크립트에서 사용할 수 있는 정수인지를 검사하여 boolean을 반환 Number.isSafeInteger(10000000000000001) // false Number.prototype.toExponential()Number.prototype.toFixed() 매개변수(인자)로 받은 소수점자리수만큼 반올림하고 문자열로 반환. 소수점자리수가 넘칠때는 0을 넣어준다. Number.prototype.toPrecision()Number.prototype.toString() toString(‘정수로 진법을 나타낼수있음’) Number.prototype.valueOf() Number 객체의 값(기본자료형)을 반환한다. Math 정적 메소드 Math PropertyMath.PIMath Method Math.max()]0var max = Math.max.apply(null, arr); // 3 Math.in()]0var max = Math.max.apply(null, arr); // 3 정규 표현식RegExp 생성자 함수를 이용해서 정규표현식 객체가 생성된다. (var regex=~) 배열 1개의 변수에 여러 개의 값을 순차적으로 저장할 때 사용한다. 배열은 프로퍼티 이름이 필요없고 값만 나열하면 된다.(객체와 비교) 배열 생성방식 두가지. 배열리터럴, 배열 생성자함수 배열 리터럴을 사용- var arr = []; (내부적으로는 array생성자 함수를 사용해서 객체가 생성된다.) array에서 length : 요소의갯수(index+1개)순차적인 요소로 구성할 수 있는데요소는 undefined 이외 모든 값이 들어올 수 있다. Array생성자 함수인자값을 매개변수 갯수 또는 요소로 받는다.Array생성자함수는 코딩할때 사용하지 않을것. for-in문-for문을 사용하도록 한다.(속도차이) Array 프로퍼티Array.length 배열의 길이 Array MethodArray.prototype.concat(item…) concat 할때 배열이 아니라 요소로 추가한다. Array.prototype.pop() pop : 대상 요소를 꺼낸다. push: 새로운 요소를 뒤에 추가. unshift : 새로운 요소를 앞에 추가. pop과 push는 원본 배열을 변경한다. 빼낸 요소가 return 된다. 한두번 추가할땐 arr.push(6);(가독성높음, 퍼포먼스가 떨어짐) 여러번 추가할땐 arr[arr.length]=6; 사용. 속도면에서 차이가 있음. arr.unshift(0); [0].concat(arr); 도 마찬가지로 속도차이가 있음. *웹어플리케이션에서는 사용자가 화면 전환 시간을 오래 기다리지 않는다. Array.prototype.reverse() 원본 배열이 변경 Array.prototype.slice(start, end) var res5 = items.slice(); slice() 복사본생성* Array.prototype.splice delete 비교 요소를 제거한 후, 새로운 요소를 추가 Array.prototype.splice.apply ES6 Spread연산자?[참고] this window -> 메소드 내부,생성자함수 제외 중요한 메소드들Array.prototype.forEach() 대상 배열을 알아서 순회한다. 내부에서 for문을 돌린다. 각각의 배열안의 요소에 대해서 콜백 함수를 실행시켜 준다. 매개변수는 필요하면 적어준다. (item, index, array) -> 원본배열의 요소(인자값이 알아서 순서대로 들어온다), index, 원본배열(자신) for문을 간편화하기 위해 만들어짐 break문을 사용할 수 없다. 콜백함수의 this는 window, var that = this; 를 이용해서 this 참조 변경 / 또는 두번째 인자값에 this 전달 Array.prototype.map() 원본 배열과 매핑되는 새로운 배열을 만들어서 반환한다. return 하지 않으면 새로운 배열에 반영되지 않는다. return 필수.]]></content>
<categories>
<category>TIL</category>
</categories>
<tags>
<tag>Built-in Object, Number, Math, Array</tag>
</tags>
</entry>
<entry>
<title><![CDATA[빌트인객체-1]]></title>
<url>%2F2017%2F10%2F10%2FTIL-1010%2F</url>
<content type="text"><![CDATA[Built-in ObjectHost Object 개발자가 직접 만든 객체 표준 빌트인 객체 (= Global Objects) 공통적으로 필요한 기능을 제공한다. Stinrg,Array,Object,Function,Boolean,Number,Math,Date,RegExp, 등등 대문자로 시작. 표준 빌트인 객체들은 생성자 함수이다. 표준 빌트인 객체의 프로퍼티(예)1'abc'.length; //(문자->객체) length는 String의 프로퍼티. 전역 객체 전역 객체의 자식 객체를 사용할 때, window 생략이 가능하다. 예) window.alert(); -> alert(); 전역변수를 프로퍼티로 가진다. 참고 : 프로퍼티, 메서드를 계속 전역으로 선언하면 window 객체 영역이 커진다. (전역 변수를 사용할 때는 즉시 호출 함수(IIFE)를 사용하도록 한다.) 전역 프로퍼티(window.프로퍼티) Infinity (Number.Infinity) : 양/음의 무한대를 나타내는 숫자값 NaN (Number.NaN) : 숫자가 아님을 나타내는 숫자값 undefined : 기본자료형 undefined를 값으로 갖는다. 전역 함수 eval() isFinite() : 숫자로 변환하여 유한수인지를 판단한 후, 결과값을 Boolean으로 나타낸다. isNaN() : NaN인지를 검사하여 Boolean으로 반환한다.(숫자면 false) parseFloat() : 부동소수점 숫자로 변환하여 반환한다. parseInt() : 정수형 숫자로 변환하여 반환한다. URI 형식 http, host(도메인), port 넘버, Path, Query(256개 가능), Pragment로 구성된다. encodeURI() / decodeURI() encodeURI() : URI의 문자들을 이스케이프 처리한다. decodeURI() : 이스케이프 처리된 문자를 다시 반환한다. 이스케이프 어떤 시스템에서도 읽을 수 있는 ASCII Character-set로 변환하는 것. 특수문자/공백/한글일 경우, 정규표현식으로 이스케이프 처리된다. encodeURIComponent() / decodeURIComponent() Query 부분의 =, ?, &를 인코딩한다. encodeURI()와 차이점은 encodeURI()는 =, ?, &을 인코딩하지 않는다. 알파벳, 0~9의 숫자, - _ . ! ~ * ‘ ( )는 이스케이프에서 제외된다. Error자바스크립트는 비동기 처리하므로 try-catch문으로 에러 처리를 하지 않는다. 기본자료형과 래퍼객체 모든 기본자료형은 래퍼객체를 가지고 있다. 예) ‘str’ -> new String(‘str’) 기본자료형을 객체처럼 사용할 수 있게 한다. (객체화되면 메소드 또는 프로퍼티를 호출할 수 있다.-> str.length/ str.toUpperCase();) 메소드를 호출하는 시점에만 객체화. 호출이 종료되면 기본자료형으로 돌아온다. string를 위한 레퍼객체(String) 기본자료형이 String(레퍼객체)의 메소드를 사용할수 있는 이유는 메소드나 프로퍼티를 호출할때 순간적으로 레퍼객체로 변환되어 프로토타입 객체를 상속받기 때문이다. String Constructor String 객체는 String()생성자 함수로 생성됨. 전달되는 모든 인자는 문자열로 변환. length 프로퍼티를 가지고 있으며, 유사객체배열로 사용할 수 있다. String Property String은 원본(기본자료형)을 변경하지 않는다. String.length 문자열의 문자 갯수를 반환String MethodString.prototype.charAt() [프로토타입 붙어있는것 확인] index번호에 해당되는 위치의 문자 반환. 0부터 시작한다.String.prototype.indexOf() 문자또는 문자열을 검색해서 처음 찾은 곳의 index 반환. 못찾으면 -1 반환.String.prototype.lastIndexOf() 자또는 문자열을 검색해서 마지막에 찾은 곳의 index 반환. 못찾으면 -1 반환. 참고로 인덱스의 값은 변하지 않음.String.prototype.replace() 첫번째 인자의 문자열을 찾고 두번째 인자의 문자로 대처함. 원본 문자열은 변하지 않음. 첫번째 인자의 문자열이 검색된 문자열에 여러개 존재하면 첫번째만 바꿔줌. /hello/gi <-첫번째 인자를 이렇게 넣으면 전체검색하여 다바꿔줌. 정규표현식은 어려우니까 나중에 공부하자.String.prototype.split() 인자값에 넣은 문자열을 검색하여 그것을 토대로 문자를 분리후 배열로 반환[배열은 문자열로 들어감] 마찬가지로 원본은 변하지 않는다.String.prototype.substring() 첫번째 인자에 전달된 인덱스값의 문자부터 두번째 인자의 인덱스 값-1까지의 문자를 반환. 두번째인수가 커야된다.String.prototype.toLowerCase() 모두 소문자로 바꿈.String.prototype.toUpperCase() 모두 대문자로 바꿈.3.9 String.prototype.trim() 문자열의 양끝 공백을 제거한 후 문자반환. 가운데 껴있는 공백은 제거안됨. DateDate객체는 날짜와 시간을 위한 빌트인객체 그러나 라이브러리로 대부분 사용.[알아만두자] 1000<–밀리초단위로 1초이다. 1970년 1월 1일 00:00(UTC) 기점. UTC / GMT 같다고 보면되지만 UTC라 부르고 사용하자. Date Constructor var d = new Date(‘2017/08/08/20:00:00’); 이 방법을 쓰자. 월은 0~11까지의 정수로 표현되므로 주의하자.]]></content>
<categories>
<category>TIL</category>
</categories>
<tags>
<tag>Built-in Object, String, Date</tag>
</tags>
</entry>
<entry>
<title><![CDATA[한 주간 배운 내용 Summary2]]></title>
<url>%2F2017%2F10%2F02%2FTIL-1002%2F</url>
<content type="text"><![CDATA[map, filter, reduce* 원본 배열이 변경되지 않는다. Array.prototype.some()= 조건에 부합하는게 하나라도 있으면 참 Number 기본자료형 number를 위한 wrapper 객체 기본자료형으로 프로퍼티나 메소드를 호출할 때 기본자료형과 연관된 wrapper 객체로 일시적으로 변환되어 프로토타입 객체를 공유하게 되기 때문에 기본자료형이 wrapper 객체 메소드를 사용할 수 있다. Number Constructor new Number(value) 숫자로 변환할 수 없다면 NaN을 반환한다. 기본자료형 숫자 반환 방식은 Number(Value) new Number와 Number 형 비교12345678var x = 123;var y = new Number(123);console.log(x == y); // trueconsole.log(x === y); // false (타입이 다르다)console.log(typeof x); // numberconsole.log(typeof y); // object Number PropertyNumber.MAX_VALUE 자바스크립트에서 사용 가능한 가장 큰 숫자이다. MAX_VAULE보다 큰 숫자는 Infinity 이다. Number.MIN_VALUE 0에 가장 가까운 양수값이다. MIN_VALUE보다 작은 숫자는 0 이다. Number.POSITIVE_INFINITY 양의 무한대 Infinity를 반환한다. Number.NEGATIVE_INFINITY 음의 무한대 -Infinity를 반환한다. Number.NaN 숫자가 아님을 나타낸다. window.NaN과 같다. Number Method 숫자가 아닐 경우, 인수를 숫자로 변환하지 않고 false를 반환한다. Number.isFinite(value) 매개변수 값이 정상적인 유한수인지를 검사하여 Boolean값을 반환한다. 전역 함수 isFinite(value)는 인수를 숫자로 변환하여 결과값을 반환한다. Number.isInteger(value) 매개변수 값이 정수인지 검사하여 Boolean값으로 반환한다. Number.isNaN(value) 매개변수 값이 NaN인지를 검사하여 Boolean값을 반환한다. Not a Number 숫자가 아니면 true 반환한다. Number.isSafeInteger() 매개변수 값이 안전한 정수 값인지를 검사하여 Boolean값을 반환한다. 안전한 정수 값은 (253 - 1)와 -(253 - 1) 사이의 정수이다. Number.prototype.toExponential() 지수 표기법으로 변환하여 문자열로 반환한다. 예를들어, 1.234e+3는 e(xponential)의 앞에 있는 숫자의 10의 3승을 나타낸다. 변수.toExponential(n); 반올림하여 소수 n번째 짜리까지 지수 표기법으로 반환한다. 인수는 0~20까지 입력할 수 있다. Number.prototype.toFixed() 매개변수로 지정된 소수점 자리를 반올림하여 문자열로 반환한다. Number.prototype.toPrecision() 지정된 전체 자릿수까지 유효하도록 반올림하여 문자열로 반환한다. 지정된 전체 자릿수로 표현할 수 없을 경우 지수표기법으로 쓴다. Number.prototype.toString() 숫자를 문자열로 변환하여 반환한다. toString(n) n은 2~36값으로 진수를 나타낸다. Math 수학 상수와 함수를 위한 프로퍼티와 메소드를 제공하는 빌트인 객체이다. Math PropertyMath.PI PI값을 반환한다. Math MethodMath.abs() 0 또는 양수인 절대값을 반환한다. 숫자가 아닐 경우 NaN을 반환한다. Math.round() 가장 인접한 정수로 올림/내림한다. x = Math.round(-20.5); // -20 x = Math.round(-20.51); // -21 Math.sqrt() 양의 제곱근을 반환한다. Math.ceil() 지정된 숫자를 자신보다 크고, 가까운 정수로 올림한다. Math.floor() 지정된 숫자를 자기보다 작고, 가까운 정수로 내림한다. Math.random() 0과 1 사이의 임의의 숫자를 반환한다. (Math.random() * 10) + 1 : 1에서 10까지의 임의의 숫자를 반환한다. Math.pow() 첫번째 인수를 밑, 두번째 인수를 지수로 하여 거듭제곱을 반환한다. Math.pow(7,2); // 49 Math.max() 인수중에 가장 큰 수를 반환한다. 배열을 인자값으로 받을때는 apply를 사용한다.12345var arr = [1, 2, 3, 4, 5];var max = Math.max.apply(null, arr);//ES6에서 사용법var max Math.max(...arr); Math.min() 인수중에 가장 작은 수를 반환한다. Date 날짜와 시간(년,월,일,시,분,초)을 위한 빌트인 객체이다. UTC(협정 세계시)는 GMT(그리니치 평균시)라고도 한다. KST(Korea Standard Time)은 UTC보다 9시간이 빠르다. 현재의 날짜와 시간은 자바스크립트 코드가 동작한 시스템의 시계에 의해 결정된다. Date의 Constructor Date 생성자를 이용하여 날짜와 시간을 가지는 인스턴스를 생성한다. 기본적으로 현재 날짜와 시간을 나타내는 값을 가진다. new Date() new 연산자 없이 Date()를 사용하면 결과값을 객체가 아닌 문자열로 반환한다. new Date() 매개변수가 없는 경우, 현재 날짜와 시간을 가지는 인스턴스를 반환한다. new Date(milliseconds) 1970년 1월 1일 00:00(UTC)을 기점으로 전달된 밀리초만큼 경과한 날짜와 시간을 가지는 인스턴스를 반환한다. new Date(dateString) 지정된 날짜와 시간을 가지는 인스턴스를 반환한다. var d = new Date(‘May 12, 2016 12:13:00’); var d = new Date(‘2017/08/08/20:00:00’); new Date(year, month[, day, hour, minute, second, millisecond]) 매개변수에 년,월,일,시,분,초,밀리초를 의미하는 숫자를 전달하면 지정된 날짜와 시간을 가지는 인스턴스를 반환한다. year 1990년 이후의 년 month 월을 나타내는 0~11까지의 정수(1월은 0) Date MethodDate.now() 1970년 1월 1일 00:00:00(UTC)을 기점으로 현재 시간까지 경과한 밀리초를 숫자로 반환한다. Date.parse() 1970년 1월 1일 00:00:00(UTC)을 기점으로 매개변수로 전달된 지정 시간까지의 밀리초를 숫자로 반환한다. var d = Date.parse(‘Jan 2, 1970 00:00:00 UTC’); // UTC var d = Date.parse(‘Jan 2, 1970 09:00:00’); // KST var d = Date.parse(‘1970/01/02/09:00:00’); // KST Date.UTC() 1970년 1월 1일 00:00:00(UTC)을 기점으로 매개변수로 전달된 지정 시간까지의 밀리초를 숫자로 반환한다. var d = Date.UTC(1970, 0, 2); var d = Date.UTC(‘1970/1/2’); //NaN 이 형식으로는 인식되지 않는다. Date.prototype.getFullYear() / getMonth() / getDate() / getDay() / getHours() / getMinutes() / getSeconds() / getMilliseconds() / getTime() 해당 연도/월/일/요일을 나타내는 4자리 숫자를 반환한다. getTime()은 1970년 1월 1일 00:00:00(UTC)를 기점으로 현재 시간까지 경과된 밀리초를 반환한다. Date.prototype.setFullYear() / setMonth() / setDate() / setDay() / setHours() / setMinutes() / setSeconds() / setMilliseconds() / setTime() 해당 연도/월/일/요일을 나타내는 4자리 숫자를 설정한다. setFullYear() 연도 이외의 월,일을 설정할 수 있다. Date.prototype.getTimezoneOffset() UTC와 지정 로케일(Locale) 시간과의 차이를 분단위로 반환한다. Date.prototype.toDateString() / Date.prototype.toTimeString() 사람이 읽을 수 있는 형식의 문자열로 날짜 / 시간을 반환한다. var d = new Date(‘1988/8/17/13:30’); console.log(d.toDateString()); // Sat Sep 17 1988 String 기본자료형 String을 위한 wrapper 객체이다. 기본자료형으로 프로퍼티나 메소드를 호출할 때 기본자료형과 연관된 wrapper 객체로 일시적으로 변환되어 프로토타입 객체를 공유하기 때문에 기본자료형이 wrppaer 객체 메소드를 사용할 수 있다. String Constructor new String(value) new 연산자를 사용하지 않고 String() 생성자 함수를 호출하면 String 객체가 아닌 문자열 리터럴을 반환한다. new없이 String() 생성자 함수를 호출했을 때는 string 이 된다.12345678var x = 'Lee';var y = new String('Lee');console.log(x == y); // trueconsole.log(x === y); // falseconsole.log(typeof x); // stringconsole.log(typeof y); // object String PropertyString.length 문자열 내의 문자 갯수를 반환한다. String MethodString.prototype.charAt() 매개변수로 전달한 index 위치의 문자를 반환한다. String.prototype.indexOf() 매개변수로 전달된 문자나 문자열을 처음 발견한 곳의 index를 반환한다. 발견하지 못한 경우 -1을 반환한다. String.prototype.lastIndexOf() 매개변수로 전달된 문자나 문자열을 마지막으로 발견된 곳의 index를 반환한다. 2번째 매개변수가 전달되면 해당 위치로 이동한 후, 역방향으로 검색을 시작하고 indexOf() 메소드 처럼 문자열을 처음 발견한 곳의 index를 반환한다. 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153var str = 'Hello World';console.log(str.lastIndexOf('l', 10)); // 9``` ## String.prototype.replace()- 첫번째 인자의 값을 두번째 인자에 전달된 문자열로 대체한다.- 검색된 문자열이 복수로 존재할 경우, 첫번째 문자열만 대체된다.- 원본 문자열은 변경되지 않고 새로운 문자열을 반환한다.## String.prototype.split()- 첫번째 인자의 문자열로 구분하여 분리된 각 문자열로 이루어진 배열을 반환한다.- 전달된 인수가 없는 경우, 문자열 전체를 단일 요소로 하는 배열을 반환한다.- 원본 문자열은 변경되지 않는다.- splitStr = str.split(' ', 3); // 공백으로 구분하여 배열로 반환, 3개까지만 허용## String.prototype.substring()- substring(시작index, 종료index-1)- 첫번째 인자의 index에 있는 문자부터 두번째 인자의 index에 있는 문자의 바로 이전 문자까지를 반환한다.- 첫번째 인수 > 두번째 인수 : 두 인수는 교환된다.- 두번째 인수가 생략된 경우 : 해당 문자열의 끝까지 반환한다.- 인수 < 0 또는 NaN인 경우 : 0으로 취급된다.- 인수 > 문자열의 길이(str.length) : 인수는 문자열의 길이(str.length)으로 취급된다.## String.prototype.substr()- substr(시작index, 길이)- var str = 'Hello'; var res = str.substr(3,2); // lo## String.prototype.toLowerCase()- 문자열의 문자를 모두 소문자로 변경한다.## String.prototype.toUpperCase()- 문자열의 문자를 모두 대문자로 변경한다.## String.prototype.trim()- 문자열 양쪽 끝에 있는 공백 문자를 제거한 문자열을 반환한다.- 문자 사이의 공백은 제거하지 못한다.---# 실행 컨텍스트(Execution Context)- 실행 가능한 코드가 실행되는 환경이다.- 실행 가능한 코드 : 전역코드, Eval코드(안씀), 함수코드(호출)- 변수와 함수가 호출되기 위한 환경이 만들어진다.- 자바스크립트 엔진은 코드를 실행하기 위해 실행에 필요한 정보를 알고 있으며, 실행 컨텍스트를 물리적 객체의 형태로 관리한다.- 실행에 필요한 정보 : 변수(객체의 프로퍼티, 전역변수, 지역변수, 매개변수), 함수선언(함수명, 함수), 변수의 유효범위(전역이냐 지역이냐), this(가리키고 있는 객체)# 실행 컨텍스트 스택(=콜 스택)- 실행 컨텍스트가 생성되서 쌓이는 영역- 전역 실행 컨텍스트, 함수 실행 컨텍스트가 생성되면 실행 컨텍스트 스택에 쌓인다.- 함수를 호출하면 해당 함수의 실행 컨텍스트가 생성되며, 함수가 끝나면 해당 함수의 실행 컨텍스트가 사라진다.# 실행 컨텍스트 3가지 객체- Variable Object(VO), Scope Chain(SC), this value1. Variable Object- 변수(함수표현식 포함), 매개변수와 인수, 함수선언의 정보를 담는 객체로 유일하며 최상위에 위치한 객체이다.- 전역 컨텍스트의 VO는 전역객체(GO)를 가리키고, 함수 컨텍스트의 VO는 활성객체(AO)를 가리킨다.- 전역 객체(GO)는 전역에 선언된 전역 변수, 전역 함수를 프로퍼티로 소유한다.- 활성 객체(AO)는 매개변수와 인수들의 정보를 배열의 형태로 담고 있는 arguments객체가 추가된다.- 전역 객체(Global Object)는 1개 생성, 활성객체(Activation Object)는 여러개 생성이 가능하다.2. Scope Chain- 스코프 체인은 일종의 리스트로서 중첩된 함수의 레퍼런스를 저장하고 있다.- 마지막 리스트는 항상 전역 객체(GO)를 가리킨다.- 함수 실행 컨텍스트의 스코프 체인의 경우, 레퍼런스로 자기 자신의 AO와 GO를 가리킨다.- 스코프 체인(리스트)을 검색하면 함수가 중첩 상태일 때, 하위함수 내에서 상위함수의 유효 범위까지 참조할 수 있게 된다.3. this value- this의 값이 할당된다.- 함수 호출 패턴에 의해 결정된다.## 전역 코드에의 진입1. 전역 객체 생성- 컨트롤이 실행 컨텍스트에 접근하기 이전에 유일한 전역 객체(Global Object)가 생성된다.- 전역 객체에는 빌트인 객체와 BOM, DOM이 설정되어 있다.2. 실행 컨텍스트 생성 후 스택- 전역 코드로 컨트롤이 진입하면 실행 컨텍스트가 생성된 후, 실행 컨텍스트 스택에 쌓인다.3. 스코프 체인(SC)의 생성과 초기화- 전역 객체의 레퍼런스를 포함하는 리스트가 된다.4. Variable Instantiation(변수 객체화) 실행- Variable Instantiation은 VO에 프로퍼티와 값을 추가하는 것이다.- 변수, 매개변수, 인수정보(arguments), 함수선언을 VO에 추가하여 객체화한다.- 함수부터 변수 순으로 저장된다.4-1. "변수 객체화의 순서"- 1. Function일 경우 매개변수(parameter)가 VO의 프로퍼티로, 인수(arguments)가 값으로 설정된다.- 2. 함수선언(함수표현식 제외)을 대상으로 함수명이 VO(VO가 가리키고 있는 객체)프로퍼티로, 생성된 함수 객체가 값으로 설정된다.(함수 호이스팅)- 3. 변수 선언을 대상으로 변수명이 VO(VO가 가리키고 있는 객체)의 프로퍼티로, undefined가 값으로 설정된다.(변수 호이스팅)5. 함수의 선언 처리(함수가 있다면)- 변수 객체화의 순서 2번처럼 함수명이 프로퍼티로, 생성된 함숫 객체(몸체)가 값으로 설정된다.(전역 함수일 경우 GO에 설정)- 생성된 함수 객체는 [[Scope]] 프로퍼티를 가지게 된다.- (함수 호출 실행 이전)[[Scope]]는 현재 실행 컨텍스트의 스코프 체인이 참조하고 있는 객체를 값으로 설정하고, (함수 실행 후)스코프 체인이 가리키는 변수 객체에 이미 함수가 등록되어 있으므로 함수선언식 이전에 함수를 호출할 수 있다. (함수 호이스팅)6. 변수의 선언 처리(변수가 있을때)- 변수 객체화의 순서 3번처럼 변수명이 VO(VO가 가리키고 있는 객체)의 프로퍼티로, undefined가 값으로 설정된다.- var 키워드로 선언된 변수는 선언과 초기화 단계가 한번에 이루어진다.- 변수 선언문 이전에 접근해도 VO에 변수가 undefined로 초기화된 상태로 존재하기 때문에 에러가 나지 않는다.(변수 호이스팅)7. this value의 결정- this value가 결정되기 이전에 this는 전역 객체를 가리키고 있다가 함수 호출 패턴에 의해 this에 할당되는 값이 결정된다.## 전역 코드의 실행1. 변수값 할당- 변수값을 할당할 때는 VO(VO가 가리키고 있는 객체, 전역의 경우 GO)를 선두(0)부터 검색하여 해당 변수의 프로퍼티를 발견하면 값을 할당 한다.2. 함수 실행- 함수가 실행되면 새로운 함수 실행 컨텍스트가 생성된다.- 해당 함수로 실행 컨텍스트의 컨트롤이 이동하면 전역 코드와 마찬가지로 1. 스코프 체인의 생성과 초기화, 2. Variable Instantiation 실행, 3. this value 결정이 순서대로 실행된다.## 함수 코드에의 진입- 전역 코드에의 진입과 순서는 같지만 다른 룰이 적용된다.1. 스코프 체인의 생성과 초기화- Activation Object생성**- AO에 대한 레퍼런스를 스코프 체인의 선두에 설정한다.- Activation Object는 arguments 프로퍼티를 초기화한다.- 스코프 체인의 마지막 레퍼런스 객체는 전역 객체를 참조한다.2. Variable Instantiation 실행- 함수 객체와 변수를 VO에 바인딩한다.(선언, 초기화)- 변수의 프로퍼티는 변수명, 값은 undefined로 VO에 저장한다.- 함수의 프로퍼티는 함수명, 값은 Function Object로 VO에 저장한다.- Function Object의 [[scope]] 프로퍼티가 생성된다. - [[scope]] 프로퍼티는 AO와 전역을 참조하는 리스트의 값을 갖는다.3. this value 결정- this에 할당되는 값은 함수 호출 패턴에 의해 결정된다.## 함수 코드의 실행(함수에 변수가 존재할때)1. 변수 값의 할당- 지역변수를 할당할 때(현재는 내부함수일 경우), 스코프 체인이 참조하고 있는 VO를 선두(0)부터 검색하여 변수명에 해당하는 프로퍼티가 발견되면 값을 할당한다. (해당 영역에도 없으면 스코프 체인 리스트를 참조하여 GO를 검색하도록 한다.)## 내부 함수 코드의 실행- 내부 함수가 실행되기 시작하면 새로운 실행 컨텍스트가 생성된다.- 여기서도 1. 스코프 체인의 생성과 초기화, 2. Variable Instantiation 실행, 3. this value 결정이 순서대로 진행된다.---# 클로저(closure)- 내부함수가 참조하는 외부함수의 지역변수가 외부함수에 의해 내부함수가 반환된 이후에도 life-cycle이 유지되는 것을 의미한다.- 외부함수가 내부함수보다 더 오래 유지되는 경우에 내부함수가 외부함수의 지역변수에 접근할 수 있고 외부함수는 외부함수의 지역변수를 사용하는 내부함수가 소멸될 때까지 소멸되지 못하고 상태가 유지되며 내부함수에 의해 소멸하게 되는 특성을 말한다.- 클로저에 의해 참조되는 외부함수의 변수를 자유변수(Free variable)이라고 부른다.- (실행 컨텍스트 관점에서)내부함수가 유효한 경우에 외부함수가 종료 되면 함수의 실행 컨텍스트도 소멸하지만, 함수 실행 컨텍스트의 AO는 유효하기 때문에 내부함수가 스코프 체인을 통해 참조할 수 있다. # 클로저의 활용- 성능적인 면과 자원적인 면에서 손해를 볼 수 있다.- (실행 컨텍스트에서) 클로저로 참조하는 변수는 프로그램 종료 시까지 계속 메모리에 할당되어 있기 때문에 성능 상 좋다고 할 수 없다.(최소화하며 오남용하지 않아야 한다.) Count! 0 var add = (function () { var counter = 0; return function () { return ++counter; }; }()); function myFunction() { document.getElementById('demo').innerHTML = add(); }``` 전역 변수의 사용 억제를 위한 방식 즉시 실행함수는 한번만 실행되므로 counter가 다시 초기화되지 않는다. 외부함수의 변수 counter는 참조하는 함수(내부함수)가 소멸될때까지 유지된다. counter는 외부에서 접근할 수 없는 private 변수이다.]]></content>
<categories>
<category>TIL</category>
</categories>
<tags>
<tag>javascript</tag>
</tags>
</entry>
<entry>
<title><![CDATA[한 주간 배운 내용 Summary]]></title>
<url>%2F2017%2F10%2F01%2FTIL-1001%2F</url>
<content type="text"><![CDATA[한 주간 배운 내용 정리자료형(Data Type)기본자료형 boolean null undefined Number String Symbol 기본자료형 null 설계상의 문제 var name = null; console.log(typeof.name); -> object typeof 연사자로 null값을 가진 변수를 연산해보면 object가 나온다. 따라서 null타입 변수인지 확인할 때는 일치연산자(===)를 사용해야 한다. 기본자료형 특징 변경 불가능한 값(immutable value) pass-by-value 객체형 object 객체형 특징 기본자료형을 제외한 모든 것 이름과 값을 가지는 데이터를 의미하는 프로퍼티 동작을 의미하는 메소드 pass-by-reference 변수(Variable) 변수는 위치(메모리 상의 주소)를 기억하는 저장소이다. 값을 할당하고 참조하기 위해 사용된다. 변수명 식별자(identifier)로도 불린다. 영문자, underscore(_), 달러기호($)로 시작해야 한다. 숫자는 이어지는 문자에 사용할 수 있다. 대소문자를 구별한다. 변수의 특징 선언만 된 변수는 undefined로 초기 값을 갖게 된다. 미선언 변수에 접근하면 ReferenceError 예외가 발생한다. 중복 선언이 가능하다. 변수 선언 시 var 키워드 생략이 가능하다.(=전역변수) 동적 타이핑 (Dynamic Typing) : 변수의 Type annotation이 필요없이 값이 할당되는 과정에서 자료형이 결정된다는 것 변수 호이스팅 var 키워드로 선언된 변수의 문제점(설계상의 오류) function-level scope :for loop 초기화 식에서 선언한 변수를 for loop 외부 또는 전역에서 참조할 수 있다. var 키워드 생략 허용 :의도하지 않은 변수 전역화 중복 선언 허용 : 의도하지 않은 변수값 변경 변수 호이스팅 : 변수를 선언하기 전에 참조가 가능하다. 변수 호이스팅이란var 선언문이나 function 선언문을 해당 scope의 선두로 옮기는 것을 말한다. 변수 호이스팅 과정 (변수 생성 3단계) var 키워드로 선언된 변수는 선언 단계(Variable Object에 등록, 스코프가 VO참조)와 초기화 단계(메모리할당, undefined)가 이루어진다. 변수 선언문 이전에 변수에 접근하면 undefined가 반환된다. => 변수 호이스팅 변수 할당문에 도달하면 할당 단계가 이루어진다. 함수 함수를 정의하는 방법 3가지. 함수선언식 함수표현식 Function() 생성자 함수 함수선언식 function 키워드 function 함수명(매개변수){return 결과값;} 자바스크립트 엔진에 의해 함수표현식으로 형태가 변경되어, 함수참조값을 가진 변수명과 함수명이 일치하여 함수명으로 호출할 수 있다. (실제로는 아래처럼 기명 함수표현식으로 변경되어 변수명으로 호출한 것) var foo = function foo(매개변수){return 결과값;} 결국 함수선언식도 함수 리터럴 방식으로 정의된다. 함수표현식 리터럴 방식으로 함수를 정의, 변수에 할당한 방식(일급객체)을 함수 표현식이라 한다. 함수가 변수에 할당되면, 이 변수는 할당된 함수를 가리키는 참조값을 가지게 되며 함수 호출시 이 변수가 함수명처럼 사용된다. 함수표현식은 일반적으로 함수명을 생략하여 익명함수(무명함수표현식)로 사용한다. var reply = function(a,b){return 결과값;} console.log(reply(5,10)); // 함수호출일급객체 무명의 리터럴로 표현이 가능하다. 변수나 자료구조에 저장할 수 있다. 함수의 파라미터로 전달할 수 있다. 반환값으로 사용할 수 있다. Function() 생성자 함수 Function() 생성자 함수는 function.prototype.constructor 프로퍼티로 접근할 수 있다. var foo = new function (‘a’, ‘return a’); console.log(foo(100)); //100 foo()는 생성자를 통해 만들었기 때문에 객체이다. 함수는 function()이라는 기본 내장 생성자 함수로 생성된 객체이다. 리터럴 방식도 내부적으로는 function() 생성자 함수로 생성된다. 정의방식은 달라도 결국 function() 생성자 함수를 통해 함수가 생성된다. 함수선언식과 함수호이스팅 함수호이스팅은 코드를 실행하기전에 function 선언문을 해당 scope의 맨 위로 옮기는 것이다. 함수 선언 위치와는 상관없이 코드 내 어느곳에서든지 호출이 가능하다. 함수선언식은 함수 선언, 초기화, 할당이 한번에 이루어진다.123456//foo()함수를 상단으로 호이스팅 시켜주기 때문에 에러발생 안함.foo();function foo(){ console.log("hello javascript");} 함수표현식과 변수호이스팅 변수호이스팅은 변수 생성 및 초기화와 할당이 분리되어 진행된다. 호이스팅된 변수는 undefined로 초기화되고 실제값의 할당은 할당문에서 이루어진다. => 상단에서 함수호출시 TypeError 발생123456789//var foo; 변수 생성//foo = undefined; 변수 초기화foo();//여기서 함수 호출시 할당이 이루어지지 않았기 때문에 foo()는 TypeError를 발생시킨다.var foo = function(){ console.log("hello javascript");} 함수 객체의 프로퍼티 함수는 객체이므로 함수도 프로퍼티를 가질 수 있다. 함수 객체의 속성 : arguments, caller, length, name, prototype, [[prototype]] arguments 프로퍼티 함수 호출시 전달된 인수들의 정보를 담고 있는 순회가능한 유사 배열 객체(length 프로퍼티를 가진 객체)이다. 매개변수의 갯수보다 인수를 적게 전달했을 때 인수가 전달되지 않은 매개변수는 undefined으로 초기화된다. 매개변수의 갯수보다 인수를 더 많이 전달한 경우, 초과된 인수는 무시된다. 매개변수 갯수가 확정되지 않은 가변 인자 함수를 구현할 때 유용하다. 배열 메소드를 사용하려면 Function.prototype.call, Function.prototype.apply를 사용해야 한다. caller 프로퍼티 자신을 호출한 함수를 의미한다. length 프로퍼티 함수 정의 시 작성된 매개변수 갯수를 의미한다. function bar(a, b){ return a*b; } // bar.length: 2 arguments.length는 함수 호출시 호출된 인자의 갯수를 의미한다. name 프로퍼티 함수명을 나타낸다. 기명함수일 때는 함수명을 값으로 갖고, 익명함수일 때는 빈문자열을 값으로 갖는다. [[prototype]] 프로퍼티 모든 객체가 가지고 있는 프로퍼티이다. 객체의 입장에서 자신의 부모 역할을 하는 프로토타입 객체를 가리키며, 함수의 경우 Function.prototype을 가리킨다. prototype 프로퍼티 함수 객체만 가지고 있는 프로퍼티이다. 함수객체가 생성자 함수로 사용되어 객체를 생성할 때, 생성된 객체의 부모 역할을 하는 객체를 가리킨다. constructor 프로퍼티를 가지는 객체를 가리킨다. constructor 프로퍼티는 함수 객체 자신을 가리킨다. 제어문(Control Flow) 조건에 따른 명령 실행(조건문)이나 반복 실행(반복문)이 필요할 때 사용된다. 조건문은 if문, switch문, 반복문은 for문, while문, do-while문 등이 있다.블록 구문(Block Statement) 구문들의 집합, 중괄호로 그 범위를 정한다. 함수, 객체 리터럴, 흐름 제어 구문에서 사용된다. 평가 흐름제어를 위해서 논리적 참,거짓을 구별한 후 평과 결과에 따라 결정을 내린다. 이때 자바스크립트는 문맥을 고려하여 내부적으로 자료형을 암묵적으로 강제 형 변환할 수도 있다. 암묵적 형 변환 자바스크립트 엔진이 필요에 의해 암시적으로 형을 자동으로 변환시키는 것이다. 문자와 숫자를 연산하는 것 자체가 불가능 하기에 형변환이 필요하다. 암묵적 형 변환 규칙1) 숫자형 + 문자형 = 문자형console.log(10 + ‘10’); // 1010 2) 숫자형 - 문자형 = 숫자형console.log(2 - ‘1’) // 1 3) 불린형 + 문자형 = 문자형console.log(true + ‘10’); // true10 4) 불린형 + 숫자형 = 숫자형console.log(true + 10); // 11 5) 그 외의 규칙 console.log(‘1’ > 0); // true console.log(‘10’ == 10); // true console.log(‘10’ === 10); // false console.log(undefined == null); // true console.log(undefined === null); // false 명시적 형 변환 개발자가 직접 어떤 형으로 변경할 지를 명시해 주는 것을 명시적 형 변환이라고 한다. 1. 문자를 숫자로 타입 변환 변환 방법 예제 “+” operator 붙이기(권장) var val=’123’; val = +val; “ * 1” var val=’123’; val = val*1; Number() var val=’123’; Number(val); parseInt() var val=’123’; parseInt(val); 2. 숫자를 문자로 타입 변환 변환 방법 예제 ‘ ’ 붙이기(권장) var val=123; val = val + ‘ ’; String() var val=123; String(val); toString() var val=123; toString(val); Falsy values와 Truthy values Falsy values : Boolean context에서 false로 평가되는 값 false, undefined, null, 0, NaN(Not a Number), ‘ ’(빈문자열) Truty values : Boolean context에서 true로 평가되는 값 Falsy values 이외의 값들(객체)은 모두 Truthy values이다. 객체(Object) 자바스크립트는 객체 기반의 스크립트 언어이며, 자바스크립트를 이루고 있는 것은 모두 객체이다. 객체는 데이터와 그 데이터에 관련된 동작을 모두 포함할 수 있는 개념적 존재이다.(프로퍼티와 메소드를 포함하고 있는 독립적 주체이다.) 객체는 Pass-by-reference 객체는 변경가능한 프로퍼티들의 집합 변수는 객체 자체가 아닌 생성된 객체의 참조값을 저장한다. 즉, 동일한 객체를 참조할 경우, 객체의 참조값(주소)를 공유하게 된다. 기본자료형은 Pass-by-value 기본자료형 값이 한번 정해지면 변경될 수 없다.(Immutable, 변경불가성) 변수에 참조형으로 저장되는 것이 아니라 값 자체가 저장된다. 새로운 변수에 값을 가진 또 다른 변수가 대입될 경우, 값이 복사되어 새로운 변수에 저장된다. 프로퍼티란 객체에 속한 데이터(Data)로 이름(name)과 값(value)의 쌍으로 구성된다. 메소드란 객체 내부에서 프로퍼티로 선언된 함수를 뜻한다. 함수와 동일하지만 객체 내에 만들어 진다는 점이 다르다. 객체 생성 방식 객체리터럴, Object()생성자 함수, 생성자 함수 3가지 방식이 있다. 자바스크립트 엔진은 객체 리터럴로 객체를 생성하는 코드를 만나면 내부적으로 Object() 생성자 함수를 사용하여 객체를 생성한다. 객체리터럴 중괄호 {}를 사용하여 객체를 생성한다. {} 내에 프로퍼티 이름: 프로퍼티 값을 기술하면 해당 프로퍼티가 추가된 객체를 생성한다. Object() 생성자 함수 new 연산자와 Object() 생성자 함수로 빈 객체를 생성한 후, 프로퍼티와 메소드를 추가하여 객체를 생성한다. 생성자 함수 생성자 함수는 대문자로 시작한다. 프로퍼티 또는 메소드 앞의 this는 생성자 함수로 생성될 인스턴스를 가리킨다. this에 연결되있는 프로퍼티와 메소드는 외부에서 참조 가능하다.(일반함수의 this는 전역객체에 바인딩된다.) 생성자 함수 내의 일반 변수는 private로 외부에서 참조 불가능하다. 생성자 함수와 일반 함수의 혼란을 방지하기 위한 패턴(Scope-Safe Constructor)1234567891011121314151617function A(arg) { //this가 호출된 함수(arguments.callee)의 인스턴스가 아니면 if(!(this instanceof arguments.callee)){ //생성자 함수를 호출하여 인스턴스를 반환한다. return new arguments.callee(arg); } this.value = arg ? arg : 0;}var a = new A(100);var b = A(10); console.log(typeof a); //objectconsole.log(typeof b); //object 객체 프로퍼티 접근프로퍼티 이름 프로퍼티는 문자열(빈 문자열 포함)과 숫자가 올 수 있다. ‘ - ‘가 들어간 이름은 유효한 이름이 아니기 때문에 ‘’(따옴표)를 사용해야 한다.(연산자가 있는 표현식으로 인식) 예약어는 사용하지 말아야 한다. 프로퍼티 값 읽기 유효한 이름일 경우, 마침표 표기법(.), 대괄호 표기법([‘ ’]) 모두 사용할 수 있다. 유효한 이름이 아니거나 예약어일 경우, 대괄호([‘ ’])로 읽어야 한다. 대괄호 내의 프로퍼티 이름은 꼭 문자열이어야(‘ ’) 한다. 객체에 존재하지 않는 프로퍼티를 참조하면 undefined를 반환한다. 프로퍼티 값 갱신 / 동적 생성 / 삭제 객체가 소유한 프로퍼티 값에 새로운 값을 할당하면 프로퍼티 값이 갱신된다. 객체가 소유하지 않은 프로퍼티에 값을 할당하면 해당 프로퍼티를 객체에 추가하고 값을 할당한다. delete 연산자로 객체의 프로퍼티를 삭제할 수 있다. 객체의 분류(용어 정리)내장객체(Built-in Object) 웹페이지 등을 표현하기 위한 공통의 기능을 제공하며 웹페이지가 브라우저에 의해 로드되자마자 바로 사용이 가능하다. 내장객체에는 Standard Built-in Objects(표준 빌트인 객체)와 Native Object(BOM,DOM)가 있다. 표준 내장 객체 Standard Built-in Objects (or Global Objects) 자바스크립트가 기본적으로 가지고 있는 객체들을 의미한다. Javascript는 프로그램 전체의 영역에서 공통적으로 필요한 기능을 개발자 각자가 일일히 작성하는 수고를 줄이기 위해 Standard Built-in Objects(표준 빌트인 객체)를 제공한다. 전역객체와는 다른 의미이며, 전역객체의 자식이다. Object, Function, Array, String, Number, Math, Date 등이 있다. BOM(Browser Object Model) 브라우저 객체 모델은 현재 브라우저 창 또는 탭을 표현하는 객체이다. 최상위 객체는 window로 Standard Built-in Objects가 구성된 후에 객체가 구성된다. 웹 브라우저의 버튼, URL 주소 입력창, 타이틀 바, 윈도우 크기 등 을 제어할 수 있는 객체 모델이다. 자식 객체로는 window, location, navigator, history, screen, document 등이 있다. DOM(Document Object Model) HTML 문서에 대한 모델을 트리로 구성하고, 문서 내의 각 요소에 접근하여 수정할 수 있도록 프로퍼티와 메소드를 재공한다. 최상위 객체는 document 객체로 전체 문서를 표현한다. 연산자비교연산자( != 와 !== ) 연산자 설명 != 부등비교, 값이 같지 않을 경우 true !== 불일치 비교, 데이터 타입이 다르거나 값이 다를 경우 true 단축 평가 Boolean값으로 평가하기 위해 참조하여야 할 곳까지 진행한 후, 평가를 중지하게된 계기가 된 값을 반환한다. 연산자 설명 true ll anything true false ll anything anything true && anything anything false && anything false 타입 연산자 연산자 설명 typeof 데이터타입을 문자열로 반환한다. null과 배열은 object, 함수는 function instanceof 객체가 동일 객체 타입의 인스턴스이면 true를 반환한다. !! - 피연산자를 불린 값으로 변환하는 역할 객체(배열 포함)의 경우, 빈객체라도 존재한다면 true로 변환된다. !!를 제거한 불린 값과 동일하다. console.log(!!{}); //true console.log(!![]); //true console.log(!!1); // true console.log(!!null); // false 프로토타입(Prototype) 자바스크립트의 모든 객체는 자신의 부모 역할을 담당하는 객체와 연결되어 있고, 부모 객체를 프로토타입(prototype)이라고 한다. 마치 객체 지향의 상속 개념과 같이 부모 객체의 프로퍼티 또는 메소드를 상속받아 사용할 수 있다. Object.prototype 객체는 프로토타입 체인의 종점이다. [[Prototype]] 프로퍼티 proto와 같은 개념이다. 함수를 포함한 모든 객체가 가지고 있는 프로퍼티이다. 객체의 입장에서 자신의 부모 역할을 하는 프로토타입 객체를 가리킨다. 함수 객체는 function.prototype을 가리킨다. prototype 프로퍼티 함수 객체만 가지고 있는 프로퍼티이다. 함수 객체가 생성자로 사용될 때, 생성될 객체의 부모 역할을 하는 객체(프로토타입 객체)를 가리킨다. constructor 프로퍼티 프로토타입 객체를 생성했던 함수에 대한 참조를 나타낸다. constructor가 함수 또는 생성자 객체를 가리키는 참조값이므로 아래처럼 constructor 속성으로 함수를 호출하거나 객체를 생성할 수 있다. 123456function Person(name){ this.name = name;}var mySon = new Person('daniel');var myGrandSon = new mySon.constructor('jessica'); 객체 생성 방식에 따른 프로토타입의 차이 생성자 함수 방식1234function Person(name){ this.name = name;}var choi = new Person('choi'); choi 객체의 [[prototype]]은 Person.prototype 이다. 객체 리터럴 방식12345var choi = { name : 'min', gender: 'female', year : 2017} choi 객체의 [[prototype]]은 Object.prototype 이다. Object() 생성자 함수 방식 생성자 함수 정의를 하기위한 방식은 함수선언식, 함수표현식, function() 3가지 방식이 있다. 3가지 함수 정의 방식은 결국 Function() 생성자 함수를 통해 함수 객체를 생성한다. 따라서 어떠한 방식으로 함수 객체를 생성하여도 모든 함수 객체의 prototype객체는 Function.prototype이다. 12345678// 빈 객체의 생성var choi = new Object();// 프로퍼티 추가person.name = 'Choi';person.gender = 'female';person.sayHello = function () { console.log('Hi! My name is ' + this.name);}; choi 객체의 [[prototype]]은 Object.prototype 이다. 3가지 방식에 따라 생성된 객체의 prototype객체 정리 객체 생성 방식 엔진의 객체 생성 인스턴스의 prototype 객체 생성자함수 생성자함수 생성자 함수 이름.prototype 객체리터럴 object()생성자함수 Object.prototype object() 생성자함수 object()생성자함수 Object.prototype 객체리터럴, 생성자 함수는 내부적으로 Object() 생성자 함수를 사용하여 객체를 생성한다. Object() 생성자 함수는 함수 객체이기 때문에 일반 객체와 다르게 prototype 프로퍼티가 있다. 프로토타입 체인(Prototype chain) 해당 객체에 접근하려는 프로퍼티나 메소드가 없다면 [[Prototype]] 프로퍼티가 가리키는 링크를 따라 자신의 부모 역할을 하는 프로토타입 객체의 프로퍼티나 메소드를 차례대로 검색하는 것을 프로토타입 체인이라고 한다. 프로토타입 객체의 확장 프로토타입 객체도 객체이므로 프로퍼티를 추가,삭제할 수 있다. 아래 예는 Person.prototype 객체에 메소드 sayHello를 추가하였다. 123Person.prototype.sayHello = function(){ console.log('Hi~~ my name is ' + this.name);}; 기본자료형의 확장 기본자료형은 객체가 아니므로 프로퍼티나 메소드를 가질 수 없다. 그러나 기본자료형으로 프로퍼티나 메소드를 호출할 때 기본자료형과 연관된 객체로 일시적으로 변환되어 프로토타입 객체를 공유하게 된다. 프로퍼티나 메소드를 직접 추가할 수는 없고, String 객체의 프로토타입 객체 String.prototype에 메소드를 추가하면 메소드를 사용할 수 있다. 표준 내장 객체(Built-in object)의 프로토타입 객체(String.prototype, Number.prototype, Array.prototype 등)에 개발자가 정의한 메소드의 추가를 허용한다.1234567var objStr = 'this is string';String.prototype.myMethod = function () { return 'String prototype';};console.log(objStr.myMethod()); //String prototype 출력 프로토타입 객체의 변경 객체를 생성할 때 프로토타입이 결정되고, 부모 객체인 프로토타입을 동적으로 변경할 수 있다. 프로토타입 객체 변경 시점 이전에 생성된 객체의 constructor 속성은 해당 객체의 생성자 함수를 가르킨다. 프로토타입 객체 변경 시점 이후에 생성된 객체의 constructor는 Object() 생성자 함수를 가르킨다. 즉, Person(기존생성자명).prototype.constructor 프로퍼티가 삭제되고, Object.prototype.constructor 프로퍼티가 생성된다. 프로토타입 체인 동작 조건 객체의 프로퍼티를 참조하는 경우, 프로토타입 체인이 동작한다. 1234567function Person(name) { this.name = name;}Person.prototype.gender = 'male';var bar = new Person('Kim');var foo = new Person('Choi');foo.gender = 'female'; 위 예제처럼 새로 생성한 객체에 gender 프로퍼티의 값을 할당하면 프로토타입 체인이 동작하지 않고, 해당 객체에 프로퍼티를 동적으로 추가한다. Scope(유효범위) 변수가 가지고 있는 참조범위이다. 변수가 유효한 범위, 변수에 접근할 수 있는 범위를 말한다. function-level scope 함수 코드 블럭 내에서 선언된 변수는 함수 코드 블럭 내에서만 유효하고 함수 외부에서는 참조할 수 없다. 단, ECMAScript 6에서 도입된 let keyword를 사용하면 block-level scope를 사용할 수 있다. function 밖에 선언된 변수는 코드 블랙 내에 선언되었다 할지라도 전역 변수가 된다.(Global scope를 갖는다.) Global scope 글로벌 영역에 변수를 선언하면 그 변수는 어디서나 참조할 수 있는 전역 변수가 된다. 전역 변수는 전역 객체 window의 프로퍼티이다. 암묵적 전역 함수 내에서 var keyword 없이 변수를 선언하면 상위 지역(전역)에서 변수를 찾고 존재하지 않으면 암묵적으로 전역 변수로 선언한다. 의도치 않은 전역 변수가 될 수 있으므로 var keyword를 사용한다. 전역 변수 사용의 억제 암묵적 전역 변수화(var keyword가 없을 경우)와 변수명 중복 허용으로 변수의 값이 변경될 수 도 있다. 전역 변수를 반드시 사용해야 할 경우가 아니라면 지역 변수를 사용해야 한다. 코드가 길어지면 변수명의 중복이 발생하기 쉬워 예기치 못한 이상 동작의 원인이 되기 쉬우며, 전역변수는 지역변수보다 탐색에 걸리는 시간이 더 길다. 즉시 실행 함수(IIFE, Immediately-Invoked Function Expression)를 사용한다. 즉시 실행 함수는 즉시 실행되고 그 후 전역에서 바로 사라진다. 사용법 => (function () { 변수 선언, 실행할 내용… }()); this 함수 호출 패턴 this는 전역 객체에 바인딩된다. 전역함수, 내부함수, 메소드의 내부함수, 콜백함수 모두 전역 객체에 바인딩된다. 메소드 호출 패턴 this는 해당 메소드를 호출한 객체에 바인딩된다. 함수가 객체의 프로퍼티일 때, 메소드 내부의 this 프로토타입 객체 메소드 내부에서 사용된 this도 일반 메소드 방식과 마찬가지로 해당 메소드를 호출한 객체에 바인딩된다. 생성자 호출 패턴 this는 새로 생성된 객체를 가리킨다. new 연산자로 생성자 함수를 호출하면 빈 객체 생성 및 this 바인딩: 빈 객체를 생성후 this는 이 빈 객체를 가리킨다. this를 통한 프로퍼티 생성: 생성된 빈 객체에 this를 사용하여 동적으로 프로퍼티나 메소드를 생성한다. 생성된 객체 반환 : 반환문이 없는 경우, 새로 생성된 객체가 반환된다.]]></content>
<categories>
<category>TIL</category>
</categories>
<tags>
<tag>javascript</tag>
</tags>
</entry>
<entry>
<title><![CDATA[프로토타입과 this]]></title>
<url>%2F2017%2F09%2F29%2FTIL-0929%2F</url>
<content type="text"><![CDATA[prototype 프로토타입 prototype 프로퍼티:생성자가 생성될 객체의 부모 역할을 하는 프로토타입을 찾아갈 때 사용한다. __proto__ 프로퍼티:생성된 객체가 부모 역할을 하는 프로토타입을 찾아갈 때모든 객체는 [[prototype]]이라는 숨겨진 프로퍼티를 가진다. [[prototype]]이 정확한 명칭이고 __proto__와 의미는 같다. -constructor 프로퍼티:프로토타입은 constructor 객체를 가진다.생성된 객체가 생성자를 찾아갈수 있게 한다. 즉시호출함수표현식 (IIFE, Immediately Invoke Function Expression) 함수를 선언하자마자 호출한다. 딱 한번만 호출된다. 변수가 함수내에서만 유효하기 때문에 전역변수를 사용하지 않아서 변수 중복 선언 같은 문제를 방지할 수 있다. 내부함수 함수 내부에 정의된 함수이다. 부모함수, 외부에서는 내부함수에 접근할 수 없다. 프로토타입 객체123456789var student = { name: 'Lee', score: 90};// student에는 hasOwnProperty 메소드가 없지만 아래 구문은 동작한다.console.log(student.hasOwnProperty('name')); // trueconsole.dir(student); student의 프로포타입은 Object이다. (생성자 함수명이 Object) 프로토타입 객체의 확장기본자료형(Primitive data type)의 확장 기본자료형은 객체가 아니므로 프로퍼티와 메서드가 없지만프로퍼티나 메서드가 호출할 때 일시적으로 객체형이 된다. Scope 유효범위전역변수(Global variable) 코드 어디서든 참조할 수 있다.지역변수(Local variable or function-level variable) 정의 된 함수 내에서만 참조할 수 있다. this 메서드, 생성자를 제외한 모든 객체의 this는 window이다. new 연산자가 없는 그냥 함수에서의 this는 window이다. 기존함수에 new 연산자를 붙여서 호출하면 생성자 함수로 동작한다. 생성자 함수로 동작할 때 this는 자신이 생성할 객체를 가리킨다. 메서드의 this는 해당 메서드의 소유주이다.]]></content>
<categories>
<category>TIL</category>
</categories>
<tags>
<tag>prototype, this객체, scope</tag>
</tags>
</entry>
<entry>
<title><![CDATA[객체와 생성자함수]]></title>
<url>%2F2017%2F09%2F28%2FTIL-0928%2F</url>
<content type="text"><![CDATA[객체(Object) 프로퍼티(data)와 메소드(행위)로 구성된다. data를 컨트롤하기 위한 행위를 객체라고 할 수 있다. 객체는 상속을 사용하여 중복을 막는다. 기본자료형을 제외한 모든 것은 객체이다. 추상화: 특징, 행위를 객체에 추가하는 것프로퍼티(Property) key(이름)와 value(값)로 이루어져 있다. 프로퍼티 이름 : 빈문자열, 문자열, 숫자 프로퍼티 값 : undefined를 제외한 모든 값 메소드(Method) 값(value)이 함수인 프로퍼티 일반 함수와 구분하기 위해 메소드라 부른다. 객체생성방법 ES5(3가지)1.객체 리터럴 중괄호를 사용하여 객체를 생성한다. 중괄호 안에 프로퍼티가 없으면 빈 객체 리터럴이다. var emptyObject = {}; //빈 객체 리터럴 [참고] console.log 내장객체.메서드 내장객체(=built-in) : 자바스크립트가 원래부터 갖고 있는 함수이다. 2.Object()생성자 함수 빈 객체 리턴 후, 동적으로 프로퍼티를 추가한다. 객체리터럴 방식으로 객체가 생성되는 동안 실제 내부적으로 처리되는 방식이다. ES5에서 잘 사용하지 않는다. 3.생성자 함수 객체를 생성하기 위한 함수이다. 객체를 생성하기 위한 템플릿을 구성하여 재사용하기 때문에 여러 객체를 간편하게 생성할 수 있다. 인스턴스로 추가적인 객체를 생성할 수 있다. 1234567891011function Person(name, gender){ var married = true; //private 외부에서 접근이 불가능하다. this.name = name; this.gender = gender;}// 인스턴스 생성var Person = new Person('Lee','male');console.log(person.gender); // 'male'console.log(person.married); // undefined 객체 프로퍼티 접근프로퍼티 이름 ‘first-name’는 반드시 따옴표를 사용한다. ‘-‘ 연산자로 인식한다. 예약어는 사용하면 안된다. first-name, ‘first-name’, firstName 프로퍼티 값 읽기 프로퍼티가 gender:’male’일 경우, person.gender로 접근하거나, person[‘gender’]로 접근한다. 프로퍼티가 ‘first-name’:’Ung-mo’일 경우, person[‘first-name’]로 접근한다. 대괄호 표기법을 사용할 때, 대괄호 안의 프로퍼티 이름은 반드시 문자열(‘ ‘)이어야 한다. 프로퍼티 동적 생성 객체에 존재하지 않는 프로퍼티를 참조하면 undefined를 반환한다. 객체가 소유하지 않은 프로퍼티에 값을 할당하면 객체에 해당 프로퍼티를 추가하고 값을 할당한다. 123456789var person = {'first-name': 'Ung-mo','last-name': 'Lee',gender: 'male',};person.age = 20;console.log(person.married); // undefined;console.log(person.age); // 20 for-in 문1234// prop에 객체의 프로퍼티 이름이 반환된다. 단, 순서는 보장되지 않는다.for (var prop in person) { console.log(prop + ': ' + person[prop]);} 프로퍼티 갯수만큼 순회한다. 순서가 보장되지 않으므로 배열에서는 for-of문을 사용한다. for-of는 배열의 요소를 순회한다. Pass-by-reference 객체: pass-by-reference, mutable 객체는 힙에 저장된다. 객체는 객체의 값(value)이 아니라 객체가 들어있는 주소값을 저장한다.(기본자료형은 값 자체가 저장된다.) 할당을 하면 같은 주소를 참조하게 된다. var foo; var bar = foo; bar는 foo의 주소 값을 갖게 된다. 즉 같은 주소를 참조하게 된다. 객체의 분류 (용어정리)Built-in Object(내장 객체) 내장 객체는 자바스크립트 엔진에 내장되어 있어, 필요한 경우 생성해 사용할 수 있다. 내장 객체로는 문자(String), 날짜(Date), 배열(Array), 수학(Math)객체 등이 있다. BOM (Browser Object Model) 브라우저 객체 모델 브라우저에 계층적으로 내장되어 있는 객체로 window, screen, location, history, navigator 등이 있다. window.location.href= “사이트 url” DOM (Document Object Model) 문서 객체 모델 HTML 문서 구조를 말한다. 최상위 객체 <html> 그리고 <head>, <body> 등이 있다. Host Object(사용자 정의 객체) 사용자가 생성한 객체로 사용자가 constructor 혹은 객체리터럴을 통해 사용자가 객체를 정의하고 확장시킨 것들이기 때문에 Built-in Object 와 Native Object가 구성된 이후에 구성된다. 함수 코드재사용 매개변수,인자(parameter) / 인수(argument) 함수 정의 방식 3가지1.함수선언식 함수 호이스팅이 발생한다. 함수를 선언하기 전에 상단에서 호출했을 때 함수를 선언한 것처럼 실행하는 것을 호이스팅이라고 한다. 2.함수표현식 함수 선언식과는 달리 변수 호이스팅이 발생하고, 함수를 먼저 호출할 경우, TypeError가 발생한다. 자바스크립트의 함수는 일급객체 이다. 일급 객체의 특성을 이용하여 함수 리터럴 방식으로 함수를 정의하고 변수에 할당할 수 있는데 이러한 방식을 함수표현식(Function expression)이라 한다. 일급객체(First-class object) 무명의 리터럴로 표현이 가능하다. 함수를 변수나 데이터 구조안에 담을 수 있다. 함수의 파라미터로 함수를 전달 할 수 있다.(함수를 값처럼 사용할 수 있다.) 함수를 반환값으로 사용할 수 있다. 함수표현식 두가지 1.익명 함수표현식(anonymous function expression) : 함수명을 생략해서 함수를 선언한 것이다. 123var bar = function(a, b) { return a * b;}; 2.기명 함수표현식(named function expression) : 외부에서 호출할 수 없다. 123var foo = function multiply(a, b) { return a * b;}; function() 생성자 함수 Function() 생성자 함수는 Function.prototype.constructor 프로퍼티로 접근할 수 있다. 함수선언식과 함수표현식은 모두 함수 리터럴 방식으로 함수를 정의하는데 이것은 결국 내장 함수 Function() 생성자 함수로 함수를 생성하는 것을 단순화 시킨 것이다. 일반적으로 사용하지 않는다. [참고] 함수 호이스팅과 변수 호이스팅함수 선언식 - 함수 호이스팅함수 호이스팅은 함수 선언, 초기화, 할당이 한번에 이루어 진다.따라서 함수 호출이 먼저 진행될 경우 에러가 발생하지 않는다. 함수 표현식 - 변수 호이스팅변수 호이스팅은 변수생성, 초기화, 할당이 분리되어 진행된다.호이스팅된 변수는 undefined로 초기화되고 실제 값의 할당은 할당문에서 이루어진다.따라서 함수 호출이 먼저 진행될 경우 TypeError가 발생하게 된다. arguments 프로퍼티 매개 변수 갯수가 확정되지 않은 가변 인자 함수 구현에 유용하다. 매개 변수의 갯수보다 인수를 적게 전달했을 때, 전달되지 않은 인수 값은 undefind로 초기화된다. 반대로 인수가 초과 전달되었을 때는 초과된 인수가 무시된다. arguments 객체는 배열의 형태로 인자값 정보를 담고 있지만 실제 배열이 아닌 유사배열객체(array-like object)이다.]]></content>
<categories>
<category>TIL</category>
</categories>
<tags>
<tag>object, property, method, constructor</tag>
</tags>
</entry>
<entry>
<title><![CDATA[알고리즘 문제풀이]]></title>
<url>%2F2017%2F09%2F27%2FTIL-0927%2F</url>
<content type="text"><![CDATA[1. for문을 사용하여 0부터 10미만의 정수 중에서 짝수만을 작은 수부터 출력하시오.1234for (var i = 0; i < 10; i++) { if (i % 2 == 0) console.log(i);} 2. for문을 사용하여 0부터 10미만의 정수 중에서 짝수만을 작은 수부터 문자열로 출력하시오.123456var str = "";for (var i = 0; i < 10; i++) { if (i % 2 == 0) str += i;}console.log(str); 3. for문을 사용하여 0부터 10미만의 정수 중에서 홀수만을 큰수부터 출력하시오.1234for (var i = 10; i > 0; i--) { if (i % 2 != 0) console.log(i);} 4. while문을 사용하여 0부터 10까지 정수 중에서 짝수만을 작은 수부터 출력하시오.123456var num = 0;while (num < 10) { if (num % 2 == 0) console.log(num); num++;} //# 5. while문을 사용하여 0부터 10미만의 정수 중에서 홀수만을 큰수부터 출력하시오. 123456var num = 10;while (num > 0) { if (num % 2 != 0) console.log(num); num--;} 6.for 문을 사용하여 0부터 10미만의 정수의 합을 출력하시오.123456var sum = 0;for (var i = 0; i < 10; i++) { sum += i;}console.log(sum); 7. 1부터 20까지의 정수 중에서 2 또는 3의 배수가 아닌 수의 총합을 구하시오.12345678var res = 0;for (var i = 1; i < 21; i++) { if (i % 2 !== 0 && i % 3 !== 0) { res += i; }}console.log(res); 8. 1부터 20까지의 정수 중에서 2 또는 3의 배수인 수의 총합을 구하시오.1234567var res = 0;for (var i = 1; i < 21; i++) { if (i % 2 == 0 || i % 3 == 0) { res += i; }}console.log(res); 9. 두 개의 주사위를 던졌을 때, 눈의 합이 6이 되는 모든 경우의 수를 출력하시오. for문 12345678for (var i = 1; i <= 6; i++) { for (var j = 1; j <= 6; j++) { var num = i + j; if (num == 6) { console.log('[' + i + ',' + j + ']'); } }} while문 1234567891011121314151617var ju1 = 1;var res = [];while (ju1 < 7) { var ju2 = 1; while (ju2 < 7) { var sum = ju1 + ju2; if (sum === 6) { res = [ju1, ju2]; console.log(res); } ju2++; } ju1++;} 10. 삼각형출력하기12345678var result = "";for (var i = 0; i < 5; i++) { for (var j = 0; j <= i; j++) { result += "*"; } result += "\n";}console.log(result); 11. 트리 출력하기 내풀이 123456789101112131415var result = "";for (var i = 0; i < 3; i++) { for (var j = 0; j <= i; j++) { result += "*"; } result += "\n";}console.log(result);for (var i = 0; i < 5; i++) { for (var j = 0; j <= i; j++) { result += "*"; } result += "\n";}console.log(result); 다른사람 풀이 (마지막 sum호출시 \n 때문에 줄바꿈이된다.) 123456789var star = '';var sum = '';for (var i = 1; i <= 5; i++) { star += '*'; sum += star + '\n'; if (i === 3) console.log(sum);}console.log(sum); 12. 정삼각형 출력하기 for문 1234567891011var result = "";for (var i = 0; i < 5; i++) { for (var j = 1; j < 5 - i; j++) { result += " "; } for (var k = 0; k < (i * 2) + 1; k++) { result += "*"; } result += "\n";}console.log(result); 내장함수 (Math,repeat 활용) 123456789var star = '*';var space = ' ';for (var i = 1; i <= 10; i++) { if (i % 2 === 1) { var temp = 0; temp = Math.floor((10 - i) / 2); console.log(space.repeat(temp) + star.repeat(i)); }} 13. 역정삼각형 출력하기1234567891011var result = "";for (var i = 5; i >= 1; i--) { for (var k = 1; k <= 5 - i; k++) { result += " "; } for (var j = 1; j <= (2 * i) - 1; j++) { result += "*"; } result += "\n";}console.log(result);]]></content>
<categories>
<category>TIL</category>
</categories>
<tags>
<tag>javascript, algorithm</tag>
</tags>
</entry>
<entry>
<title><![CDATA[javascript 연산자와 형변환]]></title>
<url>%2F2017%2F09%2F26%2FTIL-0926-2%2F</url>
<content type="text"><![CDATA[1. 산술연산자(Arithmetic Operators) Operator Description + 덧셈 - 뺄셈 * 곱셈 / 나눗셈 % 나머지 ++ 증가 – 감소 + 연산자 연산 대상이 모두 숫자인 경우 : 덧셈 연산 문자나 문자열이 포함된 경우 : 문자열 연결 연산[참고] 연산 대상을 같은 타입으로 맞춰서 덧셈 연산자를 수행하도록 하는 것이 좋다. ++, – (증감 연산자)1234z = x++; // 5 선대입후증가z = ++x; // 7 선증가후대입z = x--; // 7 선대입후감소z = --x; // 5 선감소후대입 2. 대입연산자(Assignment Operators) Operator Example Same As = x = y x = y += x += y x = x + y -= x -= y x = x - y *= x *= y x = x * y /= x /= y x = x / y %= x %= y x = x % y 3. 비교연산자(Comparison Operators) Operator Description == 동등비교 (loose equality) 형변환 후, 비교한다. === 일치비교 (strict equality) 타입까지 일치하여야 true를 반환한다. != 부등비교 !== 불일치비교 > 관계비교 < 관계비교 >= 관계비교 <= 관계비교 ? 삼항연산자 [참고] ==와 === 연산자 비교var num = 5; x == 5 // truex == ‘5’ // true, 데이터형이 달라도 같게 변환하여 true를 반환한다. x === 5 // truex === ‘5’ // false, 데이터형이 다르면 false를 반환한다. 4. 논리 연산자(Logical Operator) Operator Description ` ` or && and ! not || (논리 합) 연산자1234var o1 = true || true; // t || t returns truevar o2 = false || true; // f || t returns truevar o3 = true || false; // t || f returns truevar o4 = false || (3 == 4); // f || f returns false && (논리곱) 연산자123456789var a1 = true && true; // t && t returns truevar a2 = true && false; // t && f returns falsevar a3 = false && true; // f && t returns falsevar a4 = false && (3 == 4); // f && f returns false// ! (논리 부정) 연산자var n1 = !true; // falsevar n2 = !false; // truevar n3 = !'Cat'; // false (빈 문자열이 아닐 경우 true로 간주) [참고] 논리 부정 연산자로 값의 유무를 판별할 수 있다12var str='';console.log(!str); // true - str에 값이 없다. 5. 단축 평가(Short-Circuit Evaluations) Boolean값으로 평가하기 위해 참조하여야 할 곳까지 진행한 후, 평가를 중지하게된 계기가 된 값을 반환한다. 평가식 평가결과 true ` ` anyting true false ` ` anything false true && anything anyting false && anything false 1var foo = 'Cat' && 'Dog' // t && t returns 'Dog' ‘Cat’은 true이므로 ‘Dog’까지 평가해 보아야 한다. 평가를 중지하게된 계기가 된 값 ‘Dog’을 반환한다. 1var foo = 'Cat' || 'Dog' // t || t returns 'Cat' ‘Cat’은 true이므로 평가를 중지하고 ‘Cat’을 반환한다. 평가흐름제어를 위해서는 조건식을 평가하여 논리적 참, 거짓을 구별한 후 평가 결과에 따라 의사결정을 하는 것이 일반적이다.이 때 자바스크립트는 암묵적 강제 형 변환을 통해 조건식을 평가한다. 암묵적 강제 형 변환 (Type coercion)Javascript는 context(문맥)을 고려하여 내부적으로 자료형을 암묵적으로 강제 변환하여 작업을 완료할 수 있다. 1234console.log('1' > 0) // trueconsole.log(1 + '2') // '12'console.log(2 - '1') // 1console.log('10' == 10) //true 직접 형 변환string -> number12345678910111213var val = '123'; //문자열방법1)val =+ val방법2) val = val * 1방법3)Number(value); //객체를 만들때 사용, 사용권장안함방법4)parseInt(value); number -> string12345678910var val = 123; //숫자방법1) val = val + ''; //권장방법2) val = String(val);방법3)val = val.toString(); Truthy & Falsy values Falsy values : Boolean Context에서 false로 평가되는 값들 Truthy Values : Falsy values 이외의 값들이며(object포함) true로 평가된다. Falsy Values false undefined null 0 NaN (Not a Number) '' (빈문자열)]]></content>
<categories>
<category>TIL</category>
</categories>
<tags>
<tag>operator, javascript</tag>
</tags>
</entry>
<entry>
<title><![CDATA[javascript 자료형과 변수]]></title>
<url>%2F2017%2F09%2F26%2FTIL-0926%2F</url>
<content type="text"><![CDATA[Javascript Data type & Variable(자료형과 변수)변수 미선언 변수를 호출하면 ReferenceError 예외가 발생한다. 변수의 중복 선언은 허용되지만 재할당으로 값이 변경된다. var 키워드를 생략하면 전역변수가 된다. [참고] var 키워드로 선언된 변수의 문제점(ES5)전역 변수로 인해서 의도치 않은 변수의 변경이 발생할 가능성이 높다.ES6는 이러한 var의 단점을 보완하기 위해 let과 const 키워드를 도입하였다. 1.Function-level scope 전역 변수의 남발 for loop 초기화식에서 사용한 변수를 for loop 외부 또는 전역에서 참조할 수 있다. 123456var sum = 0;for (var i = 0; i < 10; i++) {sum += i;}console.log('sum:', sum); // sum: 45console.log('i:', i); // i: 10 문제점:var로 선언한 변수는 if나 for같은 block-level이 아닌 function-level에서 범위가 정해지기 때문에 i의 값은 for문이 끝나도 유지된다. 2.var 키워드 생략 허용 의도하지 않은 변수의 전역화 3.중복 선언 허용 의도하지 않은 변수값 변경 4.변수 호이스팅 변수를 선언하기 전에 참조가 가능하다. 변수 호이스팅(Hoisting)이란?변수 Hoisting이란 var 키워드를 사용하여 변수를 선언 시,해당 변수가 속한 범위(scope) 최상단으로 올려버리는 현상을 일컽습니다.그리고 주목할 점은 여기서 속한 범위는 다른 언어처럼 block 레벨이 아니라 function 레벨이라는 점입니다. 1.선언 단계 VO(Variable Object) 변수객체(VO)에 변수를 등록한다. 2.초기화 변수객체(VO)에 등록된 변수를 메모리에 할당된다. 이 단계에서 변수는 undefined로 초기화된다. 3.할당단계 undefined로 초기화된 변수에 실제값을 할당한다. 1234567console.log(foo); // ① undefinedvar foo = 123;console.log(foo); // ② 123 {var foo = 456;}console.log(foo); // ③ 456 ①에서는 변수가 선언되지 않았지만 referenceErorr가 아닌 undefined가 출력된다. ② var 키워드로 선언된 변수는 선언 단계와 초기화 단계가 한번에 이루어진다.즉, 스코프에 변수가 등록되고 변수는 메모리에 공간을 확보한 후 undefined로 초기화된다. 따라서 변수 선언문 이전에 변수에 접근하여도 Variable Object에 변수가 존재하기 때문에 에러가 발생하지 않는다. 다만 undefined를 반환한다. 이러한 현상을 변수 호이스팅(Variable Hoisting)이라한다. ①이 실행되기 이전에 var foo = 123;이 호이스팅되어 ①구문 앞에 var foo;가 옮겨진다. 블럭 내의 변수 foo는 전역변수이므로 전역에 선언된 변수 foo에 할당된 값을 재할당하기 때문에 ③의 결과는 456이 된다. 변수 선언과 메모리 확보var num; 변수의 선언과 초기화 현재 값은 undefined; num은 메모리의 주소 값을 가리키고 있다.(=참조) num = 10; 변수 값의 할당 num = 1000; 변수 값의 재할당 다른 메모리에 값을 넣어두고, num이 해당하는 메모리의 주소를 참조하도록 한다. 유효범위(scope)유효범위는 변수의 수명1.함수 레벨 스코프(function-level scope) 함수내부 어디에서든지 myScope를 출력할 수 있다. 1234567function functionLevelScope() { if (true) { var myScope = "function level scope"; } console.log(myScope);}출력 : function leve scope 2.블록 레벨 스코프(block-level scope)ES6에서 let, const 키워드는 블록 레벨 스코프 변수를 만들어 준다. 12345678function blockLevelScope() { if (true) { let myScope = "block level scope"; console.log(myScope); } console.log(myScope);}출력: 에러(myScope는 if문안에서만 유효하다) 기본자료형(Primitive Data Type) 변경 불가능한 값(immutable) pass-by-value [참고] pass-by-value 란?var x = 10; var num = x;num에게 x의 참조 정보를 주지 않고, 10값을 복사해서 새로운 메모리에 저장한 후에 num이 10의 주소값을 참조하도록 한다. 6가지 기본자료형boolean, null, undefined, Number, String, Symbolboolean 논리적인 요소 true(1), false(0) null 의도적으로 기본형 또는 object형 변수에 값이 없다는 것을 명시한다. 123var foo; var foo = null; ** 기존값(undefined)의 참조 정보(address)가 제거된다.** null은 0 또는 false이다. [참고] 자바스크립트 설계상의 오류null은 기본 자료형이지만, typeof는 object이다.따라서 null로 자료형을 비교할 때는 typeof가 아닌 일치 연산자(===)를 사용한다. 123var foo = null;console.log(typeof foo === null); // falseconsole.log(foo === null); // true undefined 선언만 되어 있는 변수의 초기값 선언은 되었지만 할당된 적이 없는 변수에 접근하거나 존재하지 않는 객체 프로퍼티에 접근할 경우, 오류 대신에 undefined가 출력된다.(javascript만) Number 정수, 실수 +/- Infinity 무한대 NaN(not a number) 정수만을 표현하기 위한 특별한 자료형은 없다. String 문자열 홀따옴표 권장(‘’) ex) ‘He is called “John”‘ 변경 불가능(immutable) Symbol Symbol은 ES6에서 새롭게 추가된 7번째 타입이다. Symbol은 애플리케이션 전체에서 유일하며 변경 불가능한(immutable) 기본 자료형(primitive)이다. 객체형(Object type, 참조형) pass by reference 내일모레설명.]]></content>
<categories>
<category>TIL</category>
</categories>
<tags>
<tag>dataType, variable</tag>
</tags>
</entry>
<entry>
<title><![CDATA[자바스크립트 소개와 기본 규칙]]></title>
<url>%2F2017%2F09%2F25%2FTIL-0925%2F</url>
<content type="text"><![CDATA[자바스크립트 소개 javascript는 인터프리터 언어이기 때문에 컴파일이 필요없다. javaScript는 멀티-패러다임 언어로 명령형 (imperative), 함수형 (functional), 프로토타입 기반 (prototype-based) 객체지향형 언어다. 구글의 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임 환경(Runtime Environment)인 Node.js의 등장으로 JavaScript는 웹 브라우저를 벗어나 서버 사이드 어플리케이션 개발에서도 사용되는 Full stack 개발 언어가 되었다. javascript는 크로스 플랫폼을 위한 모바일 웹/앱 개발 분야에서도 가장 중요한 언어로 주목받고 있다. 웹은 물론 모바일 하이브리드 앱(PhoneGap, Sencha Touch, Ionic), 서버 사이드(NodeJS), Desktop(Electron, AppJS), 로봇 제어(Cylon.js, NodeBots) 언어로서 세계에서 가장 인기있는 언어이다. 프로토타입 기반클래스 기반 언어에서 상속을 사용하는 것과는 다르게, 프로토타입 기반 프로그래밍은 클래스가 없고 객체를 원형으로 하여 복제의 과정을 통해 객체의 동작 방식을 다시 사용할 수 있다.자바스크립트는 클래스와 상속 개념은 없지만 비슷한 프로토타입 개념이 존재 한다. 크로스 플랫폼멀티 플랫폼이라고도 하며, 프로그램들을 하드웨어와 OS 상관없이 둘 이상의 플랫폼에서 실행할 수 있는 것을 말한다.예전에 플랫폼은 특정 컴퓨터 시스템에 특정 프로그램만 실행이 가능했지만, 요즘은 특정 하드웨어나 OS에 상관없이 프로그램을 사용 가능하도록 발전하였다. 이러한 프로그램이나 소프트웨어를 지칭하여 크로스 플랫폼이라고 한다. 자바스크립트 역사 1995년 Javascript는 Brendan Eich가 초기 브라우저인 넷스케이프에 탑재하기 위해서 웹페이지에 포함되는 스크립트 언어로서 개발했다. 인터넷 익스플로러도 JScript라고 이름 붙인 자바스크립트를 지원하기 시작했다. 두 언어가 분화되는 것을 막기 위해 넷스케이프는 자바스크립트 표준화를 Ecma라는 국제 표준 단체로 넘겼다. javaScript는 상표명이기 때문에 상표 분쟁을 막기 위해 Ecma에 등록된 자바스크립트의 이름은 EcmaScript가 되었다. 2015년 6월에 ECMAScript의 6번째 명세인 ECMAScript 2015(이하 ES6)가 발표됐고, let/const keyword, module system, Arrow Function, class 등이 추가되었다. 7번째 명세인 ECMAScript 2016(이하 ES7)이 2016년 6월에 발표되었다. 브라우저 지원 모던 브라우저의 ES6 지원은 97%로 거의 100%에 육박하지만 IE 지원을 고려한다면 babel과 같은 Transpiler를 사용하여야 한다. 자바스크립트 용어와 기본규칙1. 구문(statement) 값, 연산자, 표현식, 키워드, 주석으로 구성되는 한줄의 명령. 세미콜론(;)으로 끝나는 영역. 2. 코드블록(code block) 구문(statement)을 코드블록으로 그룹화할 수 있다. 123function myFunction(x, y) { return x + y; // 구문} 3. 할당연산자(assign, =)Ex) var x = 6; 메모리(x)에 값(6)을 저장한다는 의미. 12var time = 10; // 변수 선언과 할당var greeting; // 변수 선언 4. 흐름제어(Control Flow) 조건문, 반복문 조건이 참이면 해당 구문을 실행하고, 거짓이면 실행하지 않는다.1234567if (time < 10) { greeting = 'Good morning';} else if (time < 20) { greeting = 'Good day';} else { greeting = 'Good evening';} 5. 변수(variable) var 라고 쓴다. 자바스크립트에서는 정해진 변수 타입이 없다. 즉, var로 문자열, 문자, 숫자, 객체 모든 타입을 선언할 수 있다. 값을 할당, 참조하기 위해 사용된다. Typescript는 javascript에서 데이터 타입이 없는 것과 다르게 데이터 타입은 선언할 수 있다. 자바스크립트 기본 규칙 문자열은 홀 따옴표를 사용한다.(‘hello’) 자바스크립트는 아래 7가지 데이터 타입을 제공한다.(기본자료형6개 + 객체) 기본자료형(primitive data type) : Boolean, null, undefined, Number, String, Symbol(ES6에서 추가) 객체형 : Objcet [참고] null과 undefined의 차이null null이라는 값을 가진다. null은 객체 타입(자바스크립트 설계상 오류)으로 문자열일 경우 ‘’, 숫자의 경우 ‘0’과 같다. undefined 변수가 정의되었지만 값이 할당되지 않은 상태 ex) var foo; [참고] javascript 삽입 방식과 위치간단한 스크립트일 경우 또는 해당 문서에만 적용되는 경우 HTML문서안에 스크립트 소스를 배치한다. 그러나 반복 사용되는 코드일 경우 파일별로 저장해두고 필요에 따라 링크해서 사용한다. 자바스크립트 링크태그 삽입 위치<head>에 삽입되는 경우 defer 속성은 HTML 구문 분석이 완전히 완료되면 스크립트 파일을 실행하도록 브라우저에 지시한다. IE8이하는 지원하지 않으므로 두번째 경우를 사용하도록 한다. 12345<head> ...생략... <title>메인 페이지</title> <script defer src="main.js"></script></head> </body>앞에 삽입되는 경우 문서의 DOM 로드가 완료된 시점에 javascript 로드가 실행된다. 1234<body> ...생략... <script src="main.js"></script></body>]]></content>
<categories>
<category>TIL</category>
</categories>
<tags>
<tag>Javascript, 인터프리터, 객체지향언어</tag>
</tags>
</entry>
<entry>
<title><![CDATA[css3 animation]]></title>
<url>%2F2017%2F09%2F24%2FTIL-0924%2F</url>
<content type="text"><![CDATA[CSS3 animation@keyframes 규칙12345678@keyframes animation명{ 0% 또는 from{ } 100% 또는 to{ }} keyframes에 설정한 animation 사용하기animaiton: 이름 진행시간 가속도 지연시간 반복횟수 연결방향;animation: txt-ani 4s 2s infinite alterante; animation 속성animation-delay : 애니메이션 로드 후 언제 다시 시작할지 지정한다. animation-direction : 애니메이션이 종료되고 다시 처음부터 시작할지 역방향으로 진행할지 지정.ex) normal,reverse,alternate,alternate-reverse,initial,inherit animation-duration :애니메이션이 진행시간 (1초 = 1s 으로 표시) animation-iteration-count :반복횟수 지정 (infinite : 계속반복) animation-name: 애니메이션이름@keyframes 애니메이션이름{}으로 쓰임 animation-play-state: 애니메이션 시작 또는 정지 상태기본적으로 사용되는 것들 : running , paused animation-timing-function: 애니메이션 속도(가속/감속 시간간격등 설정)기본적으로 사용되는 것들 : linear,ease,ease-in,ease-out,ease-in-out,step-start,step-end,steps(int,start|end),cubic-bezier(n,n,n,n),initial,inherit animation-fill-mode: 시작되기 전이나 끝나고 난 후 어떤 값이 적용될지 지정합니다.애니메이션이 끝난후 처음상태로? 끝난 상태로?기본적으로 사용되는 것들 : none,forwards,backwards,both,initial,inherit 몇가지 속성은 선택자의 display 속성이 block이어야만 작동한다.inline일 경우에는 block을 적용한 후, 속성을 작성해야 한다. translate()]]></content>
<categories>
<category>TIL</category>
</categories>
<tags>
<tag>css3, animation</tag>
</tags>
</entry>
<entry>
<title><![CDATA[반응형웹과 css3]]></title>
<url>%2F2017%2F09%2F21%2FTIL-0921%2F</url>
<content type="text"><![CDATA[viewport breakpoint는 통계자료를 확인해서 분기한다. 반응형웹(RWD)모바일~ 태블릿 ~데스크탑 적응형웹(AWD)모바일 / 데스크탑참조 : naradesign background-size 속성 (*익스9이상 지원)background-size:auto 이미지가 원래 사이즈로 배치된다. 이미지가 크면 이미지 일부만 보일 수도 있다.background-size:cover 이미지 비율을 맞춘 상태로 너비 높이 중에 큰 값에 맞추는 속성이다. 이미지의 일부가 보이지 않을 수도 있다.background-size:contain 원하는 영역에 전체 이미지가 들어가도록 비율에 맞게 배치된다. 이미지가 잘리지 않는다. 원하는 영역에 꽉 차진 않지만 비율에 맞게 배치된다. 장식용 이미지 마크업에 이미지 넣어서(IR기법) 빈 태그로 활용한 경우 alt=”” 빈 속성으로 처리한다.1<img src="이미지경로" alt=""> 복잡한 포털성 컨텐츠 -> 반응형 적용이 어렵다. 반응형 이미지 처리-부모 요소 크기에 맞게 늘어나도록 한다. (비율 유지)flexible img {max-width:100%; height:auto} srcset, sizes 반응형웹 이미지 속성 여러 스크린별 사이즈를 제어하기 위해서 사용하는 속성이다. 뷰포트에 따라서 보이는 이미지를 다르게 적용한다. 모바일용으로만 만들때 사용한다. IE 11 버전부터 지원 사용방식img src=”bird-wide.jpg” srcset=”bird-wide.jpg 640w, bird-narrow 320w” sizes=”(min-width:640px) 50vw, 100vw” alt=”날고있는새” sizes 속성 : 뷰포트가 640px이상일 경우, 뷰포트 사이즈의 50%만 지정합니다. picture element - 익스11지원안함(picturefill로 대응가능)-반응형웹만들때 사용123456<picture><source media="" srcset=""><img>- picture , source 인식하지못할때 대비(속성은 위참고)</picture>http://www.usefulparadigm.com/2014/11/03/processing-images-on-responsive-web/ 참고해서 다시 정리 display:flex 버그 크롬에서 Form요소에 flex 속성이 안먹힌다. 파이어폭스에서 fieldset 하위 요소가 block level 일때 flex가 안먹힌다. 123456789101112131415/* 크롬 버그 *//* fieldset 하위 요소가 inline level이므로, 파이어폭스에서는 잘 된다. */<form> <fieldset> <legend>검색 폼</legend> <label for="keyward">자료검색</label> <input type="search" id="keyward" required placeholder="검색어를 입력하세요."> <button type="submit" class="btn-search">검색</button> </fieldset></form>fieldset { display: flex; justify-content: flex-end;} 해결법-> 버그 상태에서 flex를 사용하고 싶을때는 div로 묶어주고 해당영역에 flex 속성을 적용한다. 123456789101112131415<form> <fieldset> <div class="flex-container"> /*div로 감싼다*/ <legend>검색 폼</legend> <label for="keyward">자료검색</label> <input type="search" id="keyward" required placeholder="검색어를 입력하세요."> <button type="submit" class="btn-search">검색</button> </div> </fieldset></form>.flex-container { display: flex; justify-content: flex-end;}]]></content>
<categories>
<category>TIL</category>
</categories>
<tags>
<tag>반응형웹, 미디어쿼리, css3</tag>
</tags>
</entry>
<entry>
<title><![CDATA[웹접근성 기술 WAI-ARIA]]></title>
<url>%2F2017%2F09%2F19%2FTIL-0919%2F</url>
<content type="text"><![CDATA[WAI-ARIA의 목적마크업에 역할, 속성, 상태 정보를 추가하여 스크린기기 및 보조 기기에서 접근성 및 상호 운용성을 향상시키고 보다 나은 사용자 경험을 제공하기 위함이다. ARIA의 기능 - 역할(Role) 특정 요소(Element)에 역할을 정의하는것 역할(Role) 작성 규칙HTML5 섹션 관련 요소와 ARIA RoleHTML5섹션을 div로 마크업할 때, div 요소에 역할(role)을 정의해준다. Landmark Role HTML5 섹션 관련 요소 div role=”banner” header div role=”navigation” nav div role=”main” main div role=”complementary” aside role=”form” form role=”contentinfo” footer div role=”alertdialog” 대화상자, 팝업 role=”button” 버튼 ARIA의 기능 - 속성(Properties), 상태(States) 요소(Element)가 기본적으로 갖고 있는 특징이나 상황 ‘aria - *’ 접두어를 가진다. 속성(Properties) 작성 규칙 속성(Properties) 의미 input aria-required=”true” 필수 항목 속성 input aria-label=”그룹제목” 그룹 제목 속성(그룹에 대한 제목정의) input aria-labeledby=”참조그룹ID” label for과 비슷한 역할의 속성 input aria-describedby=”reference” 추가 설명 속성(경고텍스트) aria-hidden=”true” 읽지않음 상태(State) 작성 규칙 상태(State) 의미 aria-expanded=”true” 확장되어 있는 상태의 탭패널 aria-invalid=”true” 오류가 발생한 상태의 입력상자 ARIA 사용시 주의할점 ARIA Role과 HTML5를 중복해서 사용하지 않는다. HTML Element의 기능 변경이 제한된다.ex) h1 role=”button” - 원래의 의도를 바꿔쓴 잘못된 예 키보드 접근이 보장되어야 한다.ex) div role=”button” tabindex=”0” div 태그로만 구성된 코드를 개선하기 위해 사용한다. 웹접근성 미준수 개선방법1.로그인 화면에서 경고텍스트를 읽지 않는 경우123<label for="user-id">아이디</label><input id="user-id" aria-describedby="msg"><span id="msg">이미 존재하는 아이디 입니다.</span> 2. CSS IR기법을 이용한 태그 또는 빈 태그일 경우1<a href="#"><span role="img" aria-label="대체텍스트-Connect via Facebook"></span></a>]]></content>
<categories>
<category>TIL</category>
</categories>
<tags>
<tag>WAI-ARIA, 웹접근성</tag>
</tags>
</entry>
<entry>
<title><![CDATA[GIT 기초 정리]]></title>
<url>%2F2017%2F09%2F17%2FTIL-0917%2F</url>
<content type="text"><![CDATA[로컬PC 작업 파일을 원격 저장소로 올리려면1)add 2)commit 3)push 명령을 사용해야 한다. 1) 작업공간(local directory)에서 add 명령어를 통해 stage에 반영한다.2) commit 명령어를 통해 저장소에 반영한다.stage에 올렸던 데이터를 확정하는 단계이다.여기까지는 중간 단계로 원격 저장소에 파일이 반영되지 않고,내 PC에 있는 Git 로컬 저장소에만 존재한다.3) push 명령어를 통해 원격 저장소에 반영한다.git clone을 통해 원격 저장소의 파일을 읽어와서 작업했을 때,$git push origin “push할 브랜치 이름”ex) $git push origin master원격 저장소를 정의해야 할 때,$git remote add “원격저장소명 원격저장소주소”ex) $git remote add origin http://github.com/… Repository 생성방법(1)123$mkdir 디렉토리명$git init$git remote add origin 원격저장소주소 Repository 생성방법(2)12345github.com 웹에서 repository 생성$git add 파일명$git commit -m "메세지"$git remote add origin 원격저장소주소$git push origin master 갱신$git pull 원격 저장소의 변경내용이 로컬 작업 디렉토리에 받아지고(fetch) 병합(merge)된다.]]></content>
<categories>
<category>TIL</category>
</categories>
<tags>
<tag>git</tag>
</tags>
</entry>
</search>