├── README.md
├── google_map_sample
├── marker.js
├── navermap.html
├── googlemap_infoWindow.html
├── googlemap_polyline.html
├── googlemap_polygon.html
├── googlemap_circle.html
└── googlemap.html
├── 과제.md
├── DOM.html
└── javascript.md
/README.md:
--------------------------------------------------------------------------------
1 | # javascriptBasicStudySummary
2 | 자바스크립트 기초 스터디 정리
3 |
--------------------------------------------------------------------------------
/google_map_sample/marker.js:
--------------------------------------------------------------------------------
1 | const marker = [{
2 | "Name": "KIS",
3 | "lat": 33.289631,
4 | "lng": 126.283982,
5 | }, {
6 | "Name": "NLCS",
7 | "lat": 33.297159,
8 | "lng": 126.288322,
9 | }, {
10 | "Name": "BHA",
11 | "lat": 33.291213,
12 | "lng": 126.287798,
13 | }, {
14 | "Name": "SJA",
15 | "lat": 33.283767,
16 | "lng": 126.283465,
17 | }];
18 |
--------------------------------------------------------------------------------
/google_map_sample/navermap.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | 간단한 지도 표시하기
8 |
9 |
10 |
11 |
12 |
13 |
21 |
22 |
--------------------------------------------------------------------------------
/과제.md:
--------------------------------------------------------------------------------
1 | - 최종 과제입니다. 최종 배포 repo 디스코드로 업로드 해주세요.
2 |
3 | - 제출 기한 : 11월 12일
4 |
5 | - 맵은 구글맵이나 네이버맵, 카카오맵 상관없이 사용하셔도 됩니다. 각 맵의 사용 방법은 YouTube에서 검색해보세요. 이번 시간에는 google map 사용 방법에 대해 알아봅니다.
6 |
7 | - 어려우시면 제가 드린 파일에서 개발자 모드로 개발하셔도 좋습니다.
8 |
9 | - https://www.data.go.kr/data/15096996/fileData.do
10 |
11 | - https://api.odcloud.kr/api/15096996/v1/uddi:6738a90c-ec96-4245-a187-9528cea62904?page=1&perPage=10&serviceKey=3MCBWEYPV4%2BY4Un8XqdBpFBiaGQKGsEVpC1HIK1DCoHqjNlhaUGcwjBIJGDYeTaTOiG4GKJorKXpGpfNpOEjhQ%3D%3D
12 |
13 | ```js
14 | fetch(
15 | "https://api.odcloud.kr/api/15096996/v1/uddi:6738a90c-ec96-4245-a187-9528cea62904?page=1&perPage=10&serviceKey=3MCBWEYPV4%2BY4Un8XqdBpFBiaGQKGsEVpC1HIK1DCoHqjNlhaUGcwjBIJGDYeTaTOiG4GKJorKXpGpfNpOEjhQ%3D%3D"
16 | )
17 | .then((r) => r.json())
18 | .then((r) => console.log(r));
19 | ```
20 |
--------------------------------------------------------------------------------
/DOM.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Document
8 |
9 |
10 |
11 | hello world
12 |
13 | hello world 2
14 |
15 | Lorem ipsum dolor sit, amet consectetur adipisicing elit.
16 | Perspiciatis suscipit quis ex totam nam dignissimos, porro
17 | praesentium accusamus iure, voluptates eaque corporis tempore
18 | quo excepturi possimus rerum et earum asperiores.
19 |
20 |
21 |
22 |
23 |
--------------------------------------------------------------------------------
/google_map_sample/googlemap_infoWindow.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
10 |
11 |
12 | My Google Maps Demo
13 |
14 |
40 |
45 |
46 |
47 |
--------------------------------------------------------------------------------
/google_map_sample/googlemap_polyline.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
10 |
11 |
12 | My Google Maps Demo
13 |
14 |
42 |
47 |
48 |
49 |
--------------------------------------------------------------------------------
/google_map_sample/googlemap_polygon.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
10 |
11 |
12 | My Google Maps Demo
13 |
14 |
44 |
49 |
50 |
51 |
--------------------------------------------------------------------------------
/google_map_sample/googlemap_circle.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
10 |
11 |
12 | My Google Maps Demo
13 |
14 |
45 |
50 |
51 |
52 |
--------------------------------------------------------------------------------
/google_map_sample/googlemap.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
10 |
11 |
12 | My Google Maps Demo
13 |
14 |
15 |
58 |
63 |
64 |
65 |
--------------------------------------------------------------------------------
/javascript.md:
--------------------------------------------------------------------------------
1 | # 자바스크립트
2 |
3 | - HTML은 콘텐츠와 골격, CSS는 웹페이지의 레이아웃, JavaScript(Brendan Eich, 브레덴 아이크, Netscape에 있었을 당시 개발)는 웹페이지의 동작
4 | - ES1 (초판, 1997)
5 | - ES2 (1998)
6 | - ES3 (1999)
7 | - ES5 (2009, 엄격모드, 배열메서드(map, filter, forEach 등), JSON 등)
8 | - ES6 (2015, ECMAScript 2015)
9 | - ES7 (2016, ECMAScript 2016, 이하 생략)
10 | - ES6 부터 `const`, `let`, `Promise`, `Arrow function`, `class` 등의 문법들이 대거 추가
11 | - ECMA-인터내셔널 공식 사이트 : https://www.ecma-international.org/
12 | - wiki : https://en.wikipedia.org/wiki/ECMAScript
13 |
14 | ## 수업 환경 설정
15 |
16 | - about:blank
17 |
18 | ## 자바스크립트 삽입위치
19 |
20 | - head, body의 문서 처음, 중간, 끝
21 | - 보통 body의 맨 끝
22 |
23 | ```js
24 |
25 |
26 |
27 |
28 |
29 |
30 | Document
31 |
32 |
33 | hello world 1
34 | hello world 2
35 |
38 |
39 | hello world 2
40 |
41 |
42 | ```
43 |
44 | ## 내부 스크립트와 외부 스크립트
45 |
46 | ```js
47 |
48 | ```
49 |
50 | ```js
51 |
52 | ```
53 |
54 | ## JavaScript를 출력하는 4가지 방법
55 |
56 | 1. 문서 내에 요소를 선택하여 출력하는 방법(innerHTML, innerText 등)
57 | 2. 문서 내에 직접 출력하는 방법(write 등)
58 | 3. 사용자 인터렉션(alert, confirm 등)
59 | 4. 콘솔에 찍는 방법(console.log, console.table, console.error 등)
60 |
61 | ## 코드 구조
62 |
63 | 1. 문(statement)은 세미콜론으로 구분(세미콜론을 붙이지 않는 곳도 있습니다.)
64 | 2. 문은 값, 연산자, 키워드, 명령어, 표현식(값으로 평가, 함수나 key, index를 통한 값의 호출도 표현식) 등으로 구성됩니다.
65 | 3. 공백 병합 :
66 | 1. 함수나 메서드 내 공백 병합
67 | 2. object 형 자료형 내 공백 병합
68 | 3. 선언식에서의 공백 병합
69 | 4. 메서드 채이닝의 공백 병합
70 | 5. 주의 : ''작은 따옴표, ""큰 따옴표는 개행 공백을 인식하지 못함 -> ``백틱, 템플릿 리터럴은 개행 공백을 인식함
71 |
72 | ```js
73 | // 1번
74 | console.log(1 +
75 | 2 +
76 | 3)
77 | console.log(1,
78 | 2,
79 | 3)
80 |
81 | // 2번
82 | [10,
83 | 20,
84 | 30]
85 | {
86 | 'one' :1,
87 | 'two' :2,
88 | 'three':3
89 | }
90 |
91 | // 3번
92 | let x = 10,
93 | y = 20,
94 | z = 30;
95 | console.log(x, y, z);
96 |
97 | // 4번
98 | [1, 2, 3]
99 | .map(x=>x*2)
100 | .map(x=>x*2)
101 | .map(x=>x*2)
102 | .map(x=>x*2)
103 |
104 | // 5번
105 | // error
106 | // console.log('abc
107 | // abc
108 | // ')
109 | console.log(`abc
110 | abc
111 | `)
112 | ```
113 |
114 | 4. 주석
115 |
116 | ```js
117 | // 한 줄 주석입니다.
118 | /*
119 | 여러줄 주석입니다.
120 | */
121 |
122 | /**
123 | * a와 b를 더함
124 | *
125 | * @author: jun
126 | * @param {number} a 더할 숫자
127 | * @param {number} b 더할 숫자
128 | * @return {number} a + b를 반환함
129 | */
130 | function add(a, b) {
131 | return a + b;
132 | }
133 | ```
134 |
135 | 5. 엄격모드
136 |
137 | - ES5에서 최신의 문법들이 많이 추가가 되었는데 기존에 있었던 문법을 변경하는 문법도 나옴
138 | - 이러한 문법들은 기존 코드의 문제를 불러일으킬 수 있기 때문에 use strict라는 지시자를 통해 엄격모드를 활성화 했을 때에만 반영
139 | - class 문법의 경우 엄격 모드가 기본
140 | - 함수별로 엄격모드를 다르게 적용할 수 있으나 혼란을 야기할 수 있습니다.
141 | - 변수 선언 키워드를 반드시 사용, delete 키워드 사용 불가
142 |
143 | ```js
144 | "use strict";
145 | // 코드
146 | ```
147 |
148 | ```html
149 |
154 | ```
155 |
156 | ```html
157 |
161 | ```
162 |
163 | # 변수
164 |
165 | - 변수 이름 규칙
166 | - 변수는 숫자로 시작할 수 없다.
167 | - 띄어쓰기가 안된다.
168 | - 예약어를 사용할 수 없다.(예약어가 사용 불가능한 것은 아닙니다.)
169 | - $, \_를 제외한 특수문자를 사용하지 않는다.
170 | - 대소문자를 구분한다.
171 | - class는 첫 문자를 대문자로, 나머지는 보통 소문자로 시작한다.
172 | - var, let, const
173 | ```js
174 | if (true) {
175 | const testName = "hojun";
176 | let testAge = 10;
177 | }
178 | if (true) {
179 | var testName2 = "hojun";
180 | var testAge2 = 10;
181 | }
182 | ```
183 | - var(ES5 이전, 지금 사용 권장 X) : 함수 레벨 스코프, 재선언시 애러 X
184 | - let(ES5) : 블록 레벨 스코프, 재선언시 애러 O, 콘솔에서는 애러 X, 변경가능한 자료형
185 | - const(ES5) : 블록 레벨 스코프, 재선언시 애러 O, 콘솔에서는 애러 X, 변경이 불가능한 자료형(상수)
186 | - 모든 변수는 const를 사용하고, let을 꼭 사용해야 하는 변수에서만 let을 사용하길 권고합니다.
187 | ```js
188 | function hello() {
189 | const x = 10;
190 | // 1000줄의 코드
191 | return x * 1000;
192 | }
193 | ```
194 | - DOM을 탐색해야 하는 경우 const를 사용하고, (간혹) $를 하는 경우도 있습니다. 반복문이나 함수 밖에서 주로 사용합니다.
195 | ```js
196 | const $helloElement = document.getElementById("hello");
197 | ```
198 |
199 | # 연산
200 |
201 | - 산술 연산자(+, -, /, \*, \*\*, %)
202 | - (복합) 할당 연산자(=, +=, -=, /=, \*=, \*\*=, %=)
203 | - 논리 연산자(&&, ||, !, !!, &, |, ~)
204 |
205 | - 참 -> true -> 1
206 | - 거짓 -> false -> 0
207 | - &&는 곱
208 | - ||는 합
209 | - !는 부정
210 | - !!는 true와 false를 반환하게 해주는 코드
211 | - 암기코드
212 |
213 | ```js
214 | // 할당연산자 체이닝(권하지 않습니다.)
215 | a = b = c = 2 + 2;
216 | ```
217 |
218 | ```js
219 | for (let x = 0; x < 100; x++) {
220 | if (x % 3 == 0 && x % 5 == 0) {
221 | console.log(x);
222 | }
223 | }
224 | ```
225 |
226 | ```js
227 | // 앞에 값이 널이냐를 확인하고 싶은 경우, 단락 회로 평가라고 부릅니다.
228 | result1 = 10 || 100;
229 | result2 = 0 && 100;
230 | result3 = null || 100;
231 | result4 = null && 100;
232 |
233 | username = "hojun";
234 | result5 = username || "유저 이름이 없습니다";
235 |
236 | username = undefined;
237 | result5 = username || "유저 이름이 없습니다";
238 | ```
239 |
240 | - 비교 연산자(>, >=, <, <=, ==, !=, ===, !==)
241 |
242 | - 문자열 비교 : 유니코드 순
243 | - 문자열 순서대로 하나씩 비교하고, 문자가 모두 같은데 길이가 다른 경우 길이가 더 긴 것이 크다
244 | ```js
245 | leehojun > leehojung; // false
246 | ```
247 | - 다른 형을 가진 값 간의 비교 : 비교하려는 값의 자료형이 다르면 값들을 모두 숫자형으로 변환
248 | ```js
249 | console.log("2" > 1); // true
250 | console.log("01" == 1); // true
251 | ```
252 | - null과 undefined 비교하기
253 | - 산술 연산자나 기타 비교 연산자를 사용하면(==, === 제외) null과 undefined는 숫자형으로 변환
254 | - null은 0
255 | - undefined는 NaN
256 | ```js
257 | console.log(null == undefined); // true
258 | console.log(null === undefined); // false
259 | ```
260 | - 에지 케이스(edge case)
261 |
262 | ```js
263 | console.log(null > 0); // f(null이 0으로 변환)
264 | console.log(null == 0); // f(null이 0으로 변환되지 않음)
265 | console.log(null >= 0); // t(null이 0으로 변환)
266 | // >= 연산을 할 때에 null이 0으로 변환이 되어 위와 같은 일을 만듬
267 |
268 | console.log(undefined > 0); // f (undefined가 NaN으로 변환, NaN은 뒤도 돌아보지 않고 비교를 하면 false)
269 | console.log(undefined < 0); // f (undefined가 NaN으로 변환, NaN은 뒤도 돌아보지 않고 비교를 하면 false)
270 | console.log(undefined == 0); // f(undefined와 null이 같고, 그 외에 값은 false)
271 | ```
272 |
273 | - 단항 산술 연산자(++x, x++, --x, x--)
274 | - nullish 병합 연산자(??)
275 | - 비트 연산자(AND - &, OR - |, XOR - ^, NOT - ~, 왼쪽 시프트 - <<, 오른쪽 시프트 - >>, 부호 없는 오른쪽 시프트 - >>> )
276 |
277 | ```js
278 | let result1;
279 | let result2 = result1 ?? 100;
280 |
281 | let result3 = 10;
282 | let result4 = result3 ?? 100;
283 |
284 | let result5 = null;
285 | let result6 = result5 ?? 100;
286 |
287 | username = "hojun";
288 | result5 = username ?? "유저 이름이 없습니다";
289 |
290 | username = undefined;
291 | result5 = username ?? "유저 이름이 없습니다";
292 |
293 | let x = 0;
294 |
295 | console.log(x || 10); // 10 (x가 0이니 false로 판단)
296 | console.log(x ?? 10); // 0 (x라는 값이 있다고 판단)
297 | ```
298 |
299 | - typeof 연산자
300 | - 프로퍼티 접근 연산자
301 | 1. 마침표 프로퍼티 접근 연산자
302 | 2. 대괄호 프로퍼티 접근 연산자
303 | - 관계 연산자
304 | - 키만 가지고 판단
305 | ```js
306 | 10 in [10, 20, 30]; // false
307 | 1 in [10, 20, 30]; // true
308 | 1 in "hello"; // error
309 | "name" in { name: "hojun", age: 10 }; //true
310 | "length" in [10, 20, 30]; // true
311 | ```
312 |
313 | # 변수의 형
314 |
315 | ## 변수(타입, typeof로 확인 가능)
316 |
317 | - 원시타입(primitive types) : number, string, boolean, null, undefined, symbol(ES6 추가, 변경 불가능한 유일한 값)
318 | - 참조타입(reference types) : object(object, array, map, set), function
319 |
320 | - Number(숫자)
321 |
322 | - 형태 : 10, 10.123, -10, Infinity(1/0), -Infinity, NaN("hello"/2)
323 | - 호출 : 변수명
324 | - 메서드 :
325 | - 10.toString()는 안됩니다. 이유는 무엇일까요? 소수점 때문에 그렇습니다.(JavaScript의 parsing때문이고, 아는 분이 많지는 않습니다.)
326 | - (10).toString()와 변수명.toString()은 가능합니다.
327 | - num.toFixed()
328 | ```js
329 | num = 10.12345;
330 | num.toFixed(3);
331 | ("10.123");
332 | ```
333 | - Number.MAX_SAFE_INTEGER : JavaScript에서 안전한 최대 정수값
334 | - Number.MIN_SAFE_INTEGER : JavaScript에서 안전한 최소 정수값
335 | - Number.MAX_VALUE : JavaScript가 표현할 수 있는 제일 큰 양의 숫자
336 | - Number()
337 | - parseInt() - 권고, parseFloat()
338 |
339 | ```js
340 | parseInt("1hello world"); // 1
341 | Number("1hello world"); // NaN
342 | ```
343 |
344 | - Math
345 | - Math.PI
346 | - Math.max()
347 | - Math.min()
348 | - Math.floor()
349 | - Math.round()
350 | - Math.random()
351 | - Math.abs()
352 | - Math.sqrt()
353 | - Math.pow()
354 | - NaN
355 | - Infinity, -Infinity
356 |
357 | - BigInt
358 |
359 | - (2\*\*53-1)(9007199254740991) 보다 큰 값을 Number로 나타낼 수 없으며, 나타내도 안전한 연산을 할 수 없습니다.
360 |
361 | ```js
362 | const big =
363 | 123123123123123123123123123123123123123123123123123123123123123123n;
364 | ```
365 |
366 | - String(문자열)
367 |
368 | - 형태 : 'abcde', "abcde", `abcde ${변수명}`
369 | - 호출 : 변수명, 변수명[0] (변수명[index], 호출은 할 수 있지만 개별 값 변경 불가)
370 | - 메서드 :
371 | - str.length
372 | - str.indexOf()
373 | - str.lastIndexOf()
374 | - str.includes()
375 | - str.slice()
376 | - str.split()
377 | - str.substring()
378 | - str.substr() // 비권고 사항, MDN 문서 참고
379 | - str.toLowerCase()
380 | - str.toUpperCase()
381 | - str.trim()
382 | - str.replace()
383 | - str.concat()
384 | - str.repeat()
385 | - str.splice() -> 업데이트 사항 : 배열에 있는 메서드입니다. str에는 없습니다.
386 | ```js
387 | 'hello'.repeat(100)
388 | '0'.repeat(100)
389 | '5'.repeat(100).split('').map(Number)
390 | '5'.repeat(100).split('').map(parseInt) -> 중간에 NaN이 됩니다. 2번째 인자가 진수여서 그렇습니다.
391 | '5'.repeat(100).split('').map(e => parseInt(e))
392 | ```
393 |
394 | - Boolean(논리값, 논리형, 분린형)
395 |
396 | - 형태 : true, false
397 | - 호출 : 변수명
398 | - 어떤 것이 true이고 어떤 것이 false인지 판단할 수 있어야 합니다.(truthy, falsy -> 우리가 매우 깊이 다뤘던 내용입니다.)
399 |
400 | - undefine : undefind
401 |
402 | - 형태 : let a, console.log(a)
403 |
404 | - null : object
405 |
406 | - 형태 : let a = null
407 |
408 | - Array(배열) : object
409 |
410 | - 형태 : ['하나', '둘', '셋'], [100, 200, 300],
411 | - 호출 : 변수명, 변수명[0], 변수명[0][0] (변수명[index], 개별값 변경 가능)
412 | - Array
413 | - 메서드 :
414 | - length
415 | - forEach
416 | - map
417 | - filter
418 | - push / pop - mutable(수정 가능한)
419 | - slice - immutable(수정이 불가한)
420 | - splice - mutable
421 | - reduce - immutable
422 | - join
423 | - indexOf
424 | - includes
425 | - find
426 | - concat
427 | - every
428 | - some
429 | - fill — mutable
430 | - shift — mutable
431 | - unshift — mutable
432 | - reverse — mutable
433 | - sort — mutable
434 |
435 | ```js
436 | Array(100).fill(0)
437 | Array(100).fill('hello')
438 | Array(100).fill('hello'.repeat(2))
439 | Array(100).fill(0).map((value, index)=> value + index)
440 | Object.keys(Array(100).fill(0)).map(Number)
441 | [...Array(100).keys()]
442 | Array.from({length: 100}, (v, i) => i + 1)
443 | ```
444 |
445 | - Object(객체)
446 |
447 | - 생성하는 방법
448 |
449 | ```js
450 | let data = new Object(); // '객체 생성자'
451 | let data = {}; // '객체 리터럴'
452 |
453 | let human = {
454 | name: "hojun",
455 | age: 10,
456 | };
457 | human.name;
458 | human["name"];
459 | // delete human.age; // 권하지 않습니다.
460 | // human.age = null // 권합니다.
461 | ```
462 |
463 | - 형태 :
464 | ```js
465 | {
466 | "지역이름": "전국", // key : value(2개의 집합을 가리켜 객체 프로퍼티)
467 | "확진자수": 24889,
468 | "격리해제수": 23030,
469 | "사망자수": 438,
470 | "십만명당발생율": 48.0
471 | }
472 | {
473 | 'one' : 1,
474 | 'o n e' : 1,
475 | '1 one' : 1
476 | }
477 | {
478 | one : 1,
479 | o n e : 1, // error
480 | 1 one : 1 // error
481 | }
482 | let x=1, y=2, z=3
483 | let object = {x, y, z} // {x: 1, y: 2, z: 3}
484 | ```
485 | - 호출 : 변수명, 변수명.지역이름, 변수명['지역이름'] (변수명.key, 변수명[key])
486 | - 수정, 삭제 :
487 | - 수정 : value['hello'] = 'world', value['hello'] = null
488 | - 삭제 : delete value['hello']는 추천하지 않음(메모리 상에 'world'가 남아있음, value['hello'] = null을 권장)
489 | - 속성 :
490 | ```js
491 | console.log(Object.getOwnPropertyDescriptor(person, "name"));
492 | Object.getOwnPropertyDescriptors(person);
493 | // {10: {…}, name: {…}, age: {…}, height: {…}, weight: {…}, 이력: {…}}
494 | // value: '이호준',
495 | // writable: true, // 변경 가능 여부, 기본값 false
496 | // enumerable: true, // 열거(for) 가능 여부, 기본값 false
497 | // configurable: true // 재정의 가능 여부, 기본값 false
498 | ```
499 | - 메서드 : Object.keys, Object.values, Object..entries
500 |
501 | ```js
502 | //변수명.keys()와 같은 형식은 안됩니다.
503 | x.keys();
504 | ```
505 |
506 | - Map : object
507 |
508 | - 메서드 : set, get, has, delete, size, clear, keys, values, entries
509 |
510 | ```js
511 | let map = new Map();
512 | map.set("one", 100);
513 | map.set("two", 200);
514 | map.set("three", 300);
515 | map;
516 | // Map(3) {'one' => 100, 'two' => 200, 'three' => 300}
517 |
518 | // map = {"one":100, "two":200, "three":300}
519 | // map["one"] // object에서만 됩니다.
520 |
521 | map.set("four", [10, 20]);
522 | map.set(5, [100, 200]);
523 | map.set([1, 2], [100, 200]);
524 | map.get(5);
525 | // let test = {
526 | // 1:10,
527 | // 2:20,
528 | // 3:30
529 | // }
530 | // test.1 // error
531 | // test[1] // 됩니다.
532 |
533 | let human = {
534 | name: "hojun3",
535 | age: 30,
536 | local: "jeju",
537 | };
538 | let hojun = new Map(Object.entries(human));
539 | ```
540 |
541 | - Set : object
542 | - 메서드 : add, delete, has, size
543 | - 중복을 허락하지 않는다
544 | - 합집합, 교집합, 차집합 등에 메서드가 있진 않지만, 이러한 합집합, 교집합, 차집합을 구현하기 위해 Set을 사용하는 경우가 많습니다.
545 | ```js
546 | let set = new Set();
547 | set.add(1);
548 | set.add(1);
549 | set.add(2);
550 | set.add(2);
551 | set.add(3);
552 | set.add(3);
553 | set.add(3);
554 | set.add(3);
555 | set.size;
556 | // let set = new Set([1, 2, 3, 3, 3, 3])
557 | // let set = new Set('helllllllllo')
558 | ```
559 | ```js
560 | let a = new Set([1, 2, 3]);
561 | let b = new Set([3, 4, 5]);
562 | const 합집합 = new Set([...a, ...b]);
563 | const 교집합 = [...a].filter((x) => b.has(x));
564 | const 차집합1 = [...a].filter((x) => !b.has(x));
565 | const 차집합2 = [...b].filter((x) => !a.has(x));
566 | ```
567 |
568 | # 형변환
569 |
570 | - String 보다는 toString(명시적)
571 | - Number 보다는 parseInt(명시적)
572 | - 명시적 형변환이 아니라 암시적(묵시적) 형변환
573 | ```js
574 | console.log("6" / "2");
575 | console.log("6" * "2");
576 | console.log(+"6");
577 | console.log(-"6");
578 | console.log(Number(undefined));
579 | console.log(Number(null));
580 | console.log(Number(true));
581 | console.log(Number(false));
582 | ```
583 | - 0, null, undefined, NaN, ""은 false이며 그 외의 값은 true입니다.
584 | - +를 사용해서 2개 이상을 연산할 때에 하나가 문자열이면 나머지 하나도 문자열로 연산합니다.(뺄셈과 나눗셈, 곱셈의 방식은 다릅니다.)
585 | ```js
586 | "2" + 2;
587 | // '22'
588 | 2 + "2";
589 | // '22'
590 | 1 + 1 + 3 + "2" + "2";
591 | // 522
592 | // 덧셈이 아닌 경우에는 다른 결과가 나옵니다
593 | 2 * "2";
594 | // 4
595 | "2" * "2";
596 | // 4
597 | "2" * 2;
598 | // 4
599 | ```
600 |
601 | # 조건문과 반복문
602 |
603 | ## 조건문
604 |
605 | - if
606 | - else if
607 | - else
608 | - switch
609 |
610 | ```js
611 | // 한 줄로 사용하는 경우도 종종 있습니다.
612 | if (true) console.log("hello world");
613 | ```
614 |
615 | ```js
616 | // if문 안에서 선언된 변수(let, const)는 밖에서 읽을 수 없습니다.
617 | if (true) {
618 | let x = 10;
619 | console.log(x);
620 | }
621 | console.log(x);
622 | ```
623 |
624 | ```js
625 | if (1) console.log("1");
626 | if ("") console.log("공백없음");
627 | if (" ") console.log("공백");
628 | if ("hello") console.log("hello");
629 | if (NaN) console.log("NaN");
630 | if (null) console.log("null");
631 | if ([]) console.log("[]"); // 주의
632 | if ({}) console.log("{}"); // 주의
633 | ```
634 |
635 | ```js
636 | if (false) {
637 | console.log("hello 1");
638 | }
639 | if (false) {
640 | console.log("hello 2");
641 | }
642 | if (true) {
643 | console.log("hello 3");
644 | }
645 | if (true) {
646 | console.log("hello 4");
647 | }
648 | ```
649 |
650 | ```js
651 | if (false) {
652 | console.log("hello 1");
653 | } else if (false) {
654 | console.log("hello 2");
655 | } else if (true) {
656 | console.log("hello 3");
657 | } else if (true) {
658 | console.log("hello 4");
659 | } else {
660 | console.log("!!");
661 | }
662 | ```
663 |
664 | ```js
665 | // condition ? value1 : value2;
666 | let result = true ? 1 : 100;
667 | ```
668 |
669 | - 문제 : 다음 if문을 3항 연산자로 만들어보세요.
670 |
671 | ```js
672 | // 문제1
673 | let money = 500;
674 | if (money < 1300) {
675 | console.log("버스를 탈 수 없습니다.");
676 | } else {
677 | console.log("버스를 탔습니다.");
678 | }
679 | // let money = 500
680 | // money < 1300 ? console.log('버스를 탈 수 없습니다.') : console.log('버스를 탔습니다.')
681 |
682 | // 문제2
683 | let money = 500;
684 | if (money < 1300) {
685 | money += 1000;
686 | } else if (money < 2000) {
687 | money += 500;
688 | } else {
689 | money += 100;
690 | }
691 | //let money = 500
692 | //money < 1300 ? money += 1000 : (money < 2000 ? money += 500 : money += 100)
693 |
694 | //let money = 500
695 | //money < 1300 ? money += 1000 : money < 2000 ? money += 500 : money += 100
696 | ```
697 |
698 | ```js
699 | // switch 문을 사용하실 때에는 type확인을 하세요!
700 | switch (2) {
701 | case 1:
702 | console.log(100);
703 | break;
704 | case 2:
705 | console.log(200);
706 | break;
707 | case 3:
708 | console.log(300);
709 | break;
710 | default:
711 | console.log("값이 없음");
712 | break;
713 | }
714 | ```
715 |
716 | ## 반복문
717 |
718 | - for
719 | - for in
720 | - for of
721 | - while
722 | - do while
723 | - forEach
724 | - break
725 | - continue
726 |
727 | ```js
728 | //예제
729 | for (let i = 0; i < 10; i++) {
730 | console.log(i);
731 | }
732 | ```
733 |
734 | ```js
735 | //예제
736 | let a = [10, 20, 30, 40];
737 | for (let i of a) {
738 | console.log(i);
739 | }
740 | ```
741 |
742 | ```js
743 | //예제
744 | let a = [10, 20, 30, 40];
745 | for (let i in a) {
746 | console.log(i);
747 | }
748 | let a = { one: 1, two: 2 };
749 | for (let i in a) {
750 | console.log(i);
751 | }
752 | ```
753 |
754 | ```js
755 | //예제
756 | let x = 0;
757 | while (x < 10) {
758 | console.log(x);
759 | x++;
760 | }
761 |
762 | let x = 0;
763 | while (x < 10) {
764 | console.log(x);
765 | x += 2;
766 | }
767 |
768 | let x = 0;
769 | while (true) {
770 | console.log(x);
771 | x += 2;
772 | if (x >= 10) {
773 | break;
774 | }
775 | }
776 |
777 | while (true) {
778 | value = prompt("명령을 입력하세요.");
779 | console.log(value);
780 | if (value === "break") {
781 | break;
782 | }
783 | }
784 |
785 | let value = ~~(Math.random() * 100);
786 | console.log(value);
787 | while (true) {
788 | input = prompt("명령을 입력하세요.");
789 | console.log(input);
790 | if (value === parseInt(input)) {
791 | break;
792 | } else if (value > parseInt(input)) {
793 | console.log("UP!!");
794 | } else if (value < parseInt(input)) {
795 | console.log("DOWN!!");
796 | }
797 | }
798 |
799 | let i = 10;
800 | while (i) console.log(i--);
801 | ```
802 |
803 | ```js
804 | //예제
805 | let x = 0;
806 | do {
807 | console.log(x);
808 | x++;
809 | } while (x < 10);
810 | ```
811 |
812 | ```js
813 | //예제
814 | let a = [10, 20, 30, 40];
815 | a.forEach((e) => console.log(e ** 2));
816 | ```
817 |
818 | ```js
819 | // 문법
820 | // for (초깃값; 조건; 증감식) {
821 | // // 구문
822 | // }
823 |
824 | //예제
825 | for (let i = 0; i < 10; i++) {
826 | if (i == 5) {
827 | break;
828 | }
829 | console.log(i);
830 | }
831 |
832 | for (let i = 0; i < 10; i++) {
833 | if (i == 5) break;
834 | console.log(i);
835 | }
836 |
837 | for (let i = 0; i < 10; i++) {
838 | if (i == 5) continue;
839 | console.log(i);
840 | }
841 |
842 | // 여러가지 테스트 문법
843 | for (let i = 10; i > 0; i--) {
844 | console.log(i);
845 | }
846 |
847 | let k = 1;
848 | for (; k < 10; k++) {
849 | console.log(k);
850 | }
851 |
852 | let k = 1;
853 | for (; k < 10; ) {
854 | console.log(k);
855 | k += 2;
856 | }
857 |
858 | for (;;) {
859 | value = prompt("명령을 입력하세요.");
860 | console.log(value);
861 | if (value === "break") {
862 | break;
863 | }
864 | }
865 |
866 | for (let test = ["a", "b", "c", "d"]; test.length >= 1; test.pop()) {
867 | console.log(test);
868 | }
869 |
870 | for (let test = ["a", "b", "c", "d"]; test.length >= 0; test.pop()) {
871 | console.log(test);
872 | }
873 |
874 | for (let i = 2; i < 10; i++) {
875 | for (let j = 1; j < 10; j++) {
876 | console.log(`${i} X ${j} = ${i * j}`);
877 | }
878 | }
879 | console.log("end");
880 |
881 | for (let i = 2; i < 10; i++) {
882 | for (let j = 1; j < 10; j++) {
883 | if (i == 5) break;
884 | console.log(`${i} X ${j} = ${i * j}`);
885 | }
886 | }
887 | console.log("end");
888 |
889 | outer: for (let i = 2; i < 10; i++) {
890 | for (let j = 1; j < 10; j++) {
891 | console.log(`${i} X ${j} = ${i * j}`);
892 | if (i == 5) break outer;
893 | }
894 | }
895 | console.log("end");
896 |
897 | for (let i = 2; i < 10; i++) {
898 | for (let j = 1; j < 10; j++) {
899 | if (i == 5) break;
900 | console.log(`${i} X ${j} = ${i * j}`);
901 | }
902 | if (i == 5) break;
903 | }
904 | console.log("end");
905 | ```
906 |
907 | # 함수와 클래스
908 |
909 | ## 함수
910 |
911 | - 함수 표현식과 함수 선언식
912 |
913 | ```js
914 | let 함수표현식 = function () {}; // 호이스팅 X
915 | function 함수선언식() {} // 호이스팅 O
916 |
917 | sum(10, 20);
918 | function sum(x, y) {
919 | return x + y;
920 | }
921 |
922 | sum(10, 20);
923 | let sum = function (x, y) {
924 | return x + y;
925 | };
926 |
927 | sum(10, 20);
928 | let sum = (x, y) => {
929 | return x + y;
930 | };
931 | ```
932 |
933 | - 함수(파선아실)
934 |
935 | - 여기서 x, y를 보통 한국에서는 인자
936 | - 매개변수(파라미터, parameter) : x, y
937 | - 전달인자(아규먼트, argument) : 3, 5
938 | - 사용이유
939 | 1. 재사용성
940 | 2. 아키텍처 파악
941 | 3. 유지보수
942 | ```js
943 | function 땅다지기() {}
944 | function 시멘트작업() {}
945 | function 철근() {}
946 | function 벽돌() {}
947 | function 지붕() {}
948 | 땅다지기();
949 | 시멘트작업();
950 | 철근();
951 | 벽돌();
952 | 지붕();
953 | ```
954 | - 예제
955 |
956 | ```js
957 | function add(x, y) {
958 | return x + y;
959 | }
960 |
961 | add(3, 5);
962 |
963 | function add(a = 100, b = 200) {
964 | console.log(a, b);
965 | return a + b;
966 | }
967 |
968 | add(10, 20);
969 | // 30
970 | add(10);
971 | // 210
972 | add();
973 | // 300
974 | add((b = 300)); // a에 입력
975 | // 500
976 | add(undefined, 300);
977 | // 400
978 |
979 | function add({ a = 100, b = 200 }) {
980 | console.log(a + b);
981 | }
982 |
983 | add({ b: 300 }); // 400
984 | ```
985 |
986 | - 콜백함수
987 |
988 | ```js
989 | function add(x, y) {
990 | return x + y;
991 | }
992 |
993 | function mul(x, y) {
994 | return x * y;
995 | }
996 |
997 | function cal(a, b) {
998 | return a(10, 10) + b(10, 10);
999 | }
1000 |
1001 | cal(add, mul);
1002 | ```
1003 |
1004 | - 화살표 함수를 콜백함수로 사용했을 경우의 장단점
1005 | - 장점 : 네이밍을 안해도 됩니다.
1006 | - 단점 : 다른 곳에서 사용할 수가 없다.
1007 | - 단점 : 콜백지옥에 빠질 수가 있습니다.
1008 |
1009 | ```js
1010 | function cal(a, b) {
1011 | return a(10, 10) + b(10, 10);
1012 | }
1013 |
1014 | cal(
1015 | (a, b) => a + b,
1016 | (a, b) => a * b
1017 | );
1018 | ```
1019 |
1020 | - 화살표함수
1021 |
1022 | ```js
1023 | function 제곱(x) {
1024 | return x ** 2;
1025 | }
1026 |
1027 | // 함수표현식, 호이스팅 X
1028 | let 제곱 = (x) => x ** 2;
1029 |
1030 | // 인자가 1개일 때에는 괄호 X
1031 | let 제곱 = (x) => x ** 2;
1032 |
1033 | // 본문이 있는 경우 중괄호
1034 | let 제곱 = (x) => {
1035 | console.log(x);
1036 | return x ** 2;
1037 | };
1038 |
1039 | function f(a, b) {
1040 | let z = 10;
1041 | let result = z + a + b;
1042 | return result;
1043 | }
1044 |
1045 | // 함수표현식, 호이스팅 X
1046 | let f = (a, b) => {
1047 | let z = 10;
1048 | let result = z + a + b;
1049 | return result;
1050 | };
1051 | ```
1052 |
1053 | - 기명 함수
1054 |
1055 | ```js
1056 | // 기명 함수
1057 | let aa = function sum(x, y) {
1058 | return x + y;
1059 | };
1060 |
1061 | // 익명 함수인것 같지만 바뀜
1062 | let bb = function (x, y) {
1063 | return x + y;
1064 | };
1065 | // ES5에서는 빈 문자열이었는데 ES6에서 name 값을 가지는 것으로 바뀌었습니다.
1066 | let cc = (x, y) => x + y;
1067 | ```
1068 |
1069 | - 익명 함수
1070 |
1071 | ```js
1072 | console.dir(function (x, y) {
1073 | return x + y;
1074 | });
1075 | ```
1076 |
1077 | - return
1078 | ```js
1079 | function hello() {
1080 | console.log("hello");
1081 | console.log("hello");
1082 | console.log("hello");
1083 | return;
1084 | console.log("hello");
1085 | console.log("hello");
1086 | console.log("hello");
1087 | }
1088 | hello();
1089 | ```
1090 |
1091 | ## 클래스
1092 |
1093 | - 클래스 - 붕어빵 찍는 틀, 공장
1094 | - 인스턴스 - 붕어빵, 제품
1095 |
1096 | ```js
1097 | class Human {
1098 | constructor() {}
1099 | // 인스턴스 메서드, 인스턴스 프로퍼티 메서드, 프로토타입 메서드
1100 | a() {}
1101 | // 클래스 메서드, 클래스 프로퍼티 메서드, 정적 메서드
1102 | static b() {}
1103 | }
1104 |
1105 | hojun = new Human("호준");
1106 |
1107 | typeof hojun; // object
1108 | typeof Human; // function
1109 |
1110 | // getter - 획득
1111 | // setter - 설정
1112 | // # = private 필드
1113 | class Student {
1114 | subject = "javascript study";
1115 | #level;
1116 | constructor(level, name, skill) {
1117 | this.#level = level;
1118 | this.name = name;
1119 | this.skill = skill;
1120 | }
1121 | get level() {
1122 | // hojun.level로 출력
1123 | return this.#level;
1124 | }
1125 | set level(level) {
1126 | // hojun.level = 10
1127 | this.#level = level;
1128 | }
1129 | attack() {
1130 | console.log("파이어볼!");
1131 | }
1132 | }
1133 |
1134 | class Mento extends Student {
1135 | codeReview() {
1136 | console.log("코드리뷰를 진행합니다.");
1137 | }
1138 | }
1139 |
1140 | let hojun = new Student(999, "호준", ["python", "js", "...생략..."]);
1141 |
1142 | let hojun2 = new Mento(999, "호준", ["python", "js", "...생략..."]);
1143 | ```
1144 |
1145 | # 예외처리, 전개표현식, 정규표현식, 리터럴 등
1146 |
1147 | ## 예외처리
1148 |
1149 | ```js
1150 | try {
1151 | // 코드
1152 | } catch (e) {
1153 | // 코드
1154 | } finally {
1155 | // 코드
1156 | }
1157 | //throw new Error(message);
1158 | //throw new SyntaxError(message);
1159 | //throw new ReferenceError(message);
1160 | ```
1161 |
1162 | ## 전개구문 사용
1163 |
1164 | - 전개구문 사용 예제
1165 |
1166 | ```js
1167 | function f(...x) {
1168 | return x;
1169 | }
1170 |
1171 | f(1, 2, 3, 4, 5);
1172 | ```
1173 |
1174 | ```js
1175 | let arr1 = [1, 2, 3, 4];
1176 | let arr2 = [10, 20, 30, 40];
1177 | let arr3 = [100, ...arr1, 200, ...arr2, 300];
1178 | let arr4 = [100, arr1, 200, arr2, 300];
1179 | console.log(arr3);
1180 | Math.max(...arr3);
1181 | let [a, b, c, ...d] = [10, 20, 30, 40, 50, 60, 70];
1182 | ```
1183 |
1184 | ## 정규표현식
1185 |
1186 | - 특정 패턴을 찾아낼 때 사용
1187 | - 연습사이트 : https://regexr.com/5nvc2
1188 |
1189 | ```js
1190 | // 0 문자 제거
1191 | let s = "010100020201020304812123";
1192 | s.replace(/[^1-9]/g, "");
1193 | ("11221234812123");
1194 |
1195 | // 앞 뒤 공백 제거(캐릭터 클래스 `\s`사용)
1196 | s = " 010100020201020304812123 ";
1197 | s.replace(/^\s+|\s+$/g, "");
1198 | ("010100020201020304812123");
1199 |
1200 | // 문자열 내 공백 제거
1201 | s = " 01010002020 102030 4812123 ";
1202 | s.replace(/\s/g, "");
1203 | ("010100020201020304812123");
1204 |
1205 | // 개행 제거
1206 | s = `
1207 | a
1208 | b
1209 | c
1210 | d
1211 | `;
1212 | ("\na\nb\nc\nd\n");
1213 | s.replace(/\n/g, "");
1214 | ("abcd");
1215 |
1216 | s = "hello world HELLO WORLD";
1217 | s.match(/hello/gi);
1218 |
1219 | s1 = "010-5000-2000";
1220 | s2 = "010 5000 2000";
1221 | s3 = "010~5000!2000";
1222 | s4 = "010!!5000!!2000";
1223 | s5 = "01050002000";
1224 |
1225 | s1.split(/-/g);
1226 |
1227 | // hint
1228 | // s.split(/([a-z])([0-9])/g)
1229 | // s.split(/([a-z]{3})/g)
1230 |
1231 | s1.split(/([0-9]{3})[- ~!]*([0-9]{4})[- ~!]*([0-9]{4})/);
1232 |
1233 | /*
1234 | - `^` : 문자열의 시작
1235 | - `$` : 문자열의 종료. 옵션에 따라 문장의 끝 또는 문서의 끝에 매치된다.
1236 | - `.` : 임의의 한 문자
1237 | - `[]`: 문자 클래스. 문자 클래스 안에 들어가 있는 문자는 그 바깥에서 하나의 문자로 취급된다.
1238 | - `^` : 문자 클래스 내에서 ^는 not
1239 | - `-` : ex) a-z는 a에서 z까지의 문자
1240 | - `|` : or를 나타냄
1241 | - `?` : 앞 문자가 없거나 하나 있음
1242 | - `+` : 앞 문자가 하나 이상임
1243 | - `*` : 앞 문자가 0개 이상임
1244 | - `{n,m}` : 앞 문자가 `n`개 이상 `m`개 이하. `{0,1}` 은 `?`와 같은 의미다.
1245 | - `{n,}` : 앞 문자가 `n`개 이상. 위의 형태에서 `m`이 생략된 형태이다. `{0,}` 이면 `*`와 같고 `{1,}` 이면 `+`와 같은 의미이다.
1246 | - `{n}` : 앞 문자가 정확히 `n`개. `{n,n}` 과 같은 의미이다.
1247 | - `()` : 하나의 패턴구분자 안에 서브 패턴을 지정해서 사용할 경우 괄호로 묶어주는 방식을 사용한다.
1248 | - `\s` : 공백문자
1249 | - `\b` : 문자와 공백 사이를 의미한다.
1250 | - `\d` : 숫자 [0-9]와 같다.
1251 | - `\t` : 탭문자
1252 | - `\w` : 단어 영문자+숫자+_(밑줄) [0-9a-zA-Z_]문자 이스케이프는 대문자로 적으면 반대를 의미한다.
1253 | [a-z] : a ~ z 사이의 문자를 찾음
1254 | [1-9] : 1 ~ 9 사이의 문자를 찾음
1255 | [abc] : a, b, c중 하나를 찾음
1256 | [^abc] : a, b, c를 제외한 문자를 찾음
1257 | .z : 아무 문자 하나를 . 기호로 찾으며 z로 끝남을 의미
1258 | a+ : a가 1개 이상을 의미함
1259 | a* : a가 0개 또는 그 이상을 의미함
1260 | s : 공백 문자를 찾음(스페이스, 탭 등), 대문자의 경우 아닌 문자를 찾음
1261 | d : 숫자를 찾음, 대문자의 경우 아닌 문자를 찾음
1262 | w : 알파벳 영문과 숫자와 언더바 _ 기호를 찾음, 대문자의 경우 아닌 문자를 찾음
1263 | t : 탭 공간을 찾음
1264 | g : 검색범위를 전역으로 확장
1265 | i : 대소문자를 구분하지 않음
1266 | gi : 검색 범위를 전역으로 확대하면서 대소문자를 구분하지 않음
1267 | m : 여러줄을 동시에 매칭함
1268 | */
1269 | ```
1270 |
1271 | ## 리터럴
1272 |
1273 | - 리터럴은 약속된 기호를 사용해 값을 생성하는 것입니다. 예를 들어 문자를 생성하기 위해서는 작은 따옴표, 큰 따옴표, 템플릿 리터럴 중 하나를 사용하죠. 배열을 생성하려면 대괄호를, 오브젝트를 생성하려면 중괄호를 사용해야 합니다.
1274 | - new String(), new Array(), new Object()의 형식으로 만들어야 하는 것을 약속된 기호로 만들 수 있게 해준 것입니다.
1275 | - new Object() 의 리터럴 표현이 {}, new Number(1) 의 리터럴 표현이 1, new String("hello") 의 리터럴 표현이 "hello" 입니다.
1276 | - new Object()는 생성자 함수를 이용한 것이죠.
1277 | - 정규표현식 리터럴
1278 |
1279 | ```js
1280 | let x = /[a-zA-Z0-9]/g;
1281 | ```
1282 |
1283 | - 2진수, 8진수, 16진수 리터럴
1284 |
1285 | ```js
1286 | let a = 0b1001; // a == 9
1287 | let b = 0o1001; // b == 513
1288 | let c = 0x1001; // c == 4097
1289 | ```
1290 |
1291 | ## 사용자와 상호작용
1292 |
1293 | - prompt('hello')
1294 | - comfirm('hello')
1295 | - alert('hello')
1296 |
1297 | ## 구조분해할당
1298 |
1299 | - 예제
1300 |
1301 | ```js
1302 | for (let [[i, j], k] of [
1303 | [[1, 2], 2],
1304 | [[1, 2], 4],
1305 | ]) {
1306 | console.log(i, j);
1307 | }
1308 | ```
1309 |
1310 | ```js
1311 | let x = 10,
1312 | y = ((20)[(x, y)] = [y, x]);
1313 |
1314 | let { a, b } = { b: "hello", a: "world" };
1315 | ```
1316 |
1317 | - 다른 언어에서는 언패킹이라고 부르기도 합니다.
1318 |
1319 | ## 동기와 비동기
1320 |
1321 | - js는 일을 처리할 수 있는 thread가 1개, 싱글쓰레드라고 함.
1322 | - 하지만 모든 일을 여러명이 처리할 수 없다면 항상 기다려야 하는 문제가 생길 수도 있고, 무한대기에 빠질 수도 있음.
1323 |
1324 | ```js
1325 | // 순서대로 한다면 덧셈, 곱셈, hello world 순이지만
1326 | // 비동기이기 때문에 hello world, 곱셈, 덧셈 순이 됨
1327 | function 덧셈(a, b, 콜백함수) {
1328 | setTimeout(() => {
1329 | let result = a + b;
1330 | console.log(result);
1331 | }, 2000);
1332 | }
1333 | function 곱셈(a, b, 콜백함수) {
1334 | setTimeout(() => {
1335 | let result = a * b;
1336 | console.log(result);
1337 | }, 1000);
1338 | }
1339 |
1340 | 덧셈(20, 30);
1341 | 곱셈(2, 6);
1342 | console.log("hello world");
1343 | ```
1344 |
1345 | - Promise
1346 | - pending(대기상태) - resolve(해결) - fulfilled(성공)
1347 | - pending(대기상태) - reject(거부) - rejected(실패)
1348 |
1349 | ```js
1350 | new Promise((resolve, reject) => {
1351 | //code
1352 | })
1353 | .then((result) => result)
1354 | .then((result) => result)
1355 | .catch((err) => err)
1356 | .finally((result) => result);
1357 |
1358 | let p = new Promise(function (resolve, reject) {
1359 | resolve("hello world");
1360 | })
1361 | .then((메시지) => {
1362 | alert(메시지);
1363 | return 메시지.split(" ")[0];
1364 | })
1365 | .then((메시지) => {
1366 | alert(메시지);
1367 | return 메시지[0];
1368 | })
1369 | .then((메시지) => {
1370 | alert(메시지);
1371 | });
1372 |
1373 | p;
1374 | //Promise {: undefined}
1375 |
1376 | let p = new Promise(function (resolve, reject) {
1377 | // resolve('hello world');
1378 | reject("hello world");
1379 | })
1380 | .then((메시지) => {
1381 | alert(메시지);
1382 | return 메시지.split(" ")[0];
1383 | })
1384 | .then((메시지) => {
1385 | alert(메시지);
1386 | return 메시지[0];
1387 | })
1388 | .then((메시지) => {
1389 | alert(메시지);
1390 | })
1391 | .catch((메시지) => {
1392 | alert("catch 실행!! :" + 메시지);
1393 | });
1394 |
1395 | let p = new Promise(function (resolve, reject) {
1396 | // resolve('hello world');
1397 | reject("hello world");
1398 | })
1399 | .then((메시지) => {
1400 | alert(메시지);
1401 | throw Error("에러 발생!");
1402 | return 메시지.split(" ")[0];
1403 | })
1404 | .then((메시지) => {
1405 | alert(메시지);
1406 | return 메시지[0];
1407 | })
1408 | .then((메시지) => {
1409 | alert(메시지);
1410 | })
1411 | .catch((메시지) => {
1412 | alert("catch 실행!! :" + 메시지);
1413 | });
1414 |
1415 | let p = new Promise(function (resolve, reject) {
1416 | resolve("hello world");
1417 | //reject('hello world');
1418 | })
1419 | .then((메시지) => {
1420 | alert(메시지);
1421 | throw Error("에러 발생!");
1422 | return 메시지.split(" ")[0];
1423 | })
1424 | .then((메시지) => {
1425 | alert(메시지);
1426 | return 메시지[0];
1427 | })
1428 | .then((메시지) => {
1429 | alert(메시지);
1430 | })
1431 | .catch((메시지) => {
1432 | alert("catch 실행!! :" + 메시지);
1433 | });
1434 |
1435 | let p = new Promise(function (resolve, reject) {
1436 | setTimeout(() => resolve("끝남!"), 3000);
1437 | });
1438 | console.log("hello world");
1439 | console.log(p);
1440 | //VM92:4 hello world
1441 | //VM92:5 Promise {}
1442 |
1443 | // 3초 후
1444 | console.log(p);
1445 | ///VM139:1 Promise {: '끝남!'}
1446 |
1447 | let p = new Promise(function (resolve, reject) {
1448 | setTimeout(() => resolve("끝남!"), 10000);
1449 | });
1450 | console.log("hello world");
1451 | console.log(p);
1452 | //VM180:1 Promise {}
1453 |
1454 | console.log(p);
1455 | // VM184:1 Promise {}
1456 |
1457 | console.log(p);
1458 | // VM184:1 Promise {}
1459 |
1460 | console.log(p);
1461 | // VM184:1 Promise {}
1462 |
1463 | console.log(p);
1464 | //VM204:1 Promise {: '끝남!'}
1465 |
1466 | // 실행하지 마세요. pending에 빠집니다.
1467 | //let p = new Promise(function(resolve, reject) {
1468 | // console.log('hello world')
1469 | //}).then(d => console.log(d)).catch(e => console.log(e));
1470 |
1471 | let snack = async function () {
1472 | return "cake!";
1473 | };
1474 |
1475 | snack;
1476 | // async ƒ () {
1477 | // return "cake!";
1478 | // }
1479 | snack();
1480 | //Promise {: 'cake!'}
1481 |
1482 | const f = fetch(
1483 | "https://raw.githubusercontent.com/paullabkorea/coronaVaccinationStatus/main/data/data.json"
1484 | );
1485 | f;
1486 | //Promise {: Response}
1487 | const f = fetch(
1488 | "https://raw.githubusercontent.com/paullabkorea/coronaVaccinationStatus/main/data/data.json"
1489 | )
1490 | .then(function (response) {
1491 | return response.json();
1492 | })
1493 | .then(function (json) {
1494 | console.log(json);
1495 | return json;
1496 | });
1497 |
1498 | const f = fetch(
1499 | "https://raw.githubusercontent.com/paullabkorea/coronaVaccinationStatus/main/data/data.json"
1500 | )
1501 | .then((d) => d.json())
1502 | .then((d) => console.log(d));
1503 |
1504 | //VM458:7 (18) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]0: {시·도별(1): '전국', 총인구 (명): 52980961, 1차 접종 누계: 15199919, 2차 접종 누계: 4521785, 1차 접종 퍼센트: 28.6893984426, …}1: {시·도별(1): '서울', 총인구 (명): 9911088, 1차 접종 누계: 2811191, 2차 접종 누계: 835878, ...중략...
1505 |
1506 | /////////
1507 | // 동기처리 //
1508 |
1509 | setTimeout(() => {
1510 | console.log("5초 끝!");
1511 | }, 5000);
1512 |
1513 | setTimeout(() => {
1514 | console.log("10초 끝!");
1515 | }, 10000);
1516 |
1517 | function cook(ms) {
1518 | return new Promise((resolve) => setTimeout(resolve, ms));
1519 | }
1520 |
1521 | const myCake = async () => {
1522 | await cook(3000);
1523 | return "케이크";
1524 | };
1525 |
1526 | const myCoffee = async () => {
1527 | await cook(2000);
1528 | return "커피";
1529 | };
1530 | const myCookie = async () => {
1531 | await cook(5000);
1532 | return "쿠키";
1533 | };
1534 |
1535 | async function asyncProcess() {
1536 | const cake = await myCake();
1537 | console.log(cake);
1538 | const coffee = await myCoffee();
1539 | console.log(coffee);
1540 | const cookie = await myCookie();
1541 | console.log(cookie);
1542 | }
1543 |
1544 | asyncProcess();
1545 |
1546 | ///////////
1547 | // 비동기처리 //
1548 |
1549 | setTimeout(() => {
1550 | console.log("5초 끝!");
1551 | }, 5000);
1552 |
1553 | setTimeout(() => {
1554 | console.log("10초 끝!");
1555 | }, 10000);
1556 |
1557 | function cook(ms) {
1558 | return new Promise((resolve) => setTimeout(resolve, ms));
1559 | }
1560 |
1561 | const myCake = async () => {
1562 | await cook(3000);
1563 | return "케이크";
1564 | };
1565 |
1566 | const myCoffee = async () => {
1567 | await cook(2000);
1568 | return "커피";
1569 | };
1570 | const myCookie = async () => {
1571 | await cook(5000);
1572 | return "쿠키";
1573 | };
1574 |
1575 | async function promiseProcess() {
1576 | const results = await Promise.all([myCake(), myCoffee(), myCookie()]);
1577 | console.log(results);
1578 | }
1579 |
1580 | promiseProcess();
1581 |
1582 | // 질의응답
1583 | async function a() {
1584 | console.log(1);
1585 | setTimeout(() => {
1586 | console.log(2);
1587 | }, 0);
1588 | console.log(3);
1589 | }
1590 | a();
1591 | // 1, 3, 2
1592 |
1593 | async function a() {
1594 | console.log(1);
1595 | await setTimeout(() => {
1596 | console.log(2);
1597 | }, 1000);
1598 | console.log(3);
1599 | }
1600 |
1601 | a();
1602 | // 1, 3, 2
1603 |
1604 | // why? await은 promise 앞에서만 사용
1605 | // await [[Promise 객체]] 의 형식
1606 | ```
1607 |
1608 | - fetch
1609 | - https://ko.javascript.info/fetch
1610 | - Fetch는 비동기 네트워크 통신을 구현하기 위해 사용하는 Web API이다.
1611 | - 자바스크립트를 이용하여 브라우저가 서버에게 비동기적으로 데이터를 요청하고, 응답 받은 데이터를 동적으로 페이지 렌더링 하는 방식을 Ajax(Asynchronous Javascript and XML)라고 하고 대표적인 Web API로는 XMLHttpRequest 객체, JQuery, fetch 등이 있다.
1612 | - response.text()
1613 | - response.json()
1614 | - response.formData() - FormData 객체 반환
1615 | - response.blob() - Blob(타입이 있는 바이너리 데이터) 형태 반환
1616 | - Blob(Binary Large Object)은 이미지 등과 같은 멀티미디어 데이터를 다룰 때 사용하는 데이터 형식
1617 | - https://heropy.blog/2019/02/28/blob/ 블로그 글 추천
1618 | - response.arrayBuffer() – ArrayBuffer(바이너리 데이터를 로우 레벨 형식으로 표현한 것) 형태 반환
1619 |
1620 | ```js
1621 | fetch("https://jsonplaceholder.typicode.com/users/3")
1622 | .then((response) => response.json())
1623 | .then((json) => console.log(json));
1624 |
1625 | async function getUserEmail(id) {
1626 | const response = await fetch(
1627 | `https://jsonplaceholder.typicode.com/users/${id}`
1628 | );
1629 | const user = await response.json();
1630 | const email = user.email;
1631 | console.log(email);
1632 | }
1633 |
1634 | async function printImg() {
1635 | const response = await fetch(`https://picsum.photos/200`);
1636 | const blobImg = await response.blob();
1637 |
1638 | //blob을 담을 img 태그를 만든다.
1639 | const img = document.createElement("img");
1640 | //html body에 위에서 만든 img 태그를 삽입한다.
1641 | document.body.append(img);
1642 | //img 태그의 주소를 설정한다.
1643 | img.src = URL.createObjectURL(blobImg);
1644 | }
1645 | printImg();
1646 |
1647 | fetch("http://test.api.weniv.co.kr/mall")
1648 | .then((data) => data.json())
1649 | .then((data) => console.log(data));
1650 |
1651 | fetch("http://test.api.weniv.co.kr/mall")
1652 | .then(function (response) {
1653 | return response.json();
1654 | })
1655 | .then((json) => {
1656 | const imgURL = "http://test.api.weniv.co.kr/" + json[0]["thumbnailImg"];
1657 | console.log(imgURL);
1658 | const img2 = document.createElement("img");
1659 | document.body.append(img2);
1660 | img2.src = imgURL;
1661 | });
1662 |
1663 | fetch("http://test.api.weniv.co.kr/mall")
1664 | .then(function (response) {
1665 | return response.json();
1666 | })
1667 | .then((json) => {
1668 | json.forEach((item) => {
1669 | const imgElement = document.createElement("img");
1670 | const h1Element = document.createElement("h1");
1671 |
1672 | const imgURL =
1673 | "http://test.api.weniv.co.kr/" + item["thumbnailImg"];
1674 | imgElement.src = imgURL;
1675 | h1Element.innerText = item["productName"];
1676 |
1677 | document.body.append(h1Element);
1678 | document.body.append(imgElement);
1679 | });
1680 | });
1681 |
1682 | /*
1683 | async function request() {
1684 | const response = await fetch('url 기입',
1685 | {
1686 | method: "GET", //POST, DELETE, PUT
1687 | headers: {
1688 | "Content-type": "콘텐츠 형태",
1689 | //application/json, text/plain 등
1690 | },
1691 | body: JSON.stringify(
1692 | 서버에 전달할 데이터
1693 | );
1694 | });
1695 | const data = await response.json();
1696 | console.log(data);
1697 | }
1698 | request();
1699 | */
1700 | ```
1701 |
1702 | # DOM
1703 |
1704 | DOM을 탐색해봅시다.
1705 |
1706 | ```js
1707 | // body>h1{hello world}+p{hello}+div>h1{hello world}+p{hello}
1708 | document.body.childNodes;
1709 | document.body.childNodes[1] = "hello hojun";
1710 | document.body.childNodes[3].childNodes[1];
1711 | ```
1712 |
1713 | ```js
1714 | // 해당하는 Id를 가진 요소에 접근하기
1715 | document.getElementById(); // V
1716 |
1717 | // 해당하는 모든 요소에 접근하기
1718 | document.getElementsByTagName();
1719 |
1720 | // 해당하는 클래스를 가진 모든 요소에 접근하기
1721 | document.getElementsByClassName();
1722 |
1723 | // css 선택자로 단일 요소에 접근하기
1724 | document.querySelector("#selector"); // V
1725 | document.querySelector(".selector"); // V
1726 | document.querySelector("h1"); // V
1727 |
1728 | // css 선택자로 여러 요소에 접근하기
1729 | document.querySelectorAll("selector");
1730 |
1731 | // target 요소를 생성합니다.
1732 | document.createElement(target); // V
1733 |
1734 | // target 텍스트를 생성합니다.
1735 | document.createTextNode(target);
1736 |
1737 | // target 요소를 element의 자식으로 위치합니다.
1738 | element.appendChild(target); // V
1739 |
1740 | // element의 target 자식 요소를 제거합니다.
1741 | element.removeChild(target); // V
1742 | ```
1743 |
1744 | ```js
1745 | // parentElement.insertBefore(target, location); target요소를 parentElement의 자식인 location 위치 앞으로 이동합니다.
1746 |
1747 | var span = document.createElement("span");
1748 | var sibling = document.getElementById("childElement");
1749 | var parentDiv = document.getElementById("parentElement");
1750 | parentDiv.insertBefore(span, sibling);
1751 |
1752 | const myP = document.querySelector("p");
1753 | myP.innerHTML = "I'm Strong!!";
1754 |
1755 | ///////////////
1756 |
1757 | const cont = document.querySelector(".cont");
1758 | console.log(cont.firstElementChild); // 첫번째 자식을 찾습니다.
1759 | console.log(cont.lastElementChild); // 마지막 자식을 찾습니다.
1760 | console.log(cont.nextElementSibling); // 다음 형제요소를 찾습니다.
1761 | console.log(cont.previousSibling); // 이전 형제노드를 찾습니다.
1762 | console.log(cont.children); // 모든 직계자식을 찾습니다.
1763 | console.log(cont.parentElement); // 부모 요소를 찾습니다.
1764 |
1765 | // 브라우저의 기본 이벤트 동작을 취소
1766 | event.preventDefault();
1767 | ```
1768 |
1769 | ```js
1770 | // 1
1771 | let 제목 = document.createElement('h1')
1772 | 제목.innerText = 'hello world'
1773 | document.body.append(제목)
1774 |
1775 | // 2
1776 | for (let i = 0; i < 10; i++) {
1777 | let 내용 = document.createElement('p')
1778 | 내용.innerText = 'hello world'
1779 | document.body.append(내용)
1780 | }
1781 |
1782 | // 3
1783 | let 컨테이너 = document.createElement('div')
1784 | 컨테이너.classList.add('one')
1785 | 컨테이너.classList.add('two')
1786 | // 컨테이너.classList.add('three four')
1787 | 컨테이너.classList.remove('one')
1788 | for (let i = 0; i < 10; i++) {
1789 | 내용 = document.createElement('p')
1790 | 내용.innerText = 'hello world'
1791 | 컨테이너.append(내용)
1792 | }
1793 | document.body.append(컨테이너)
1794 |
1795 | // 콘솔창에서 실행
1796 | 컨테이너.classList
1797 | // DOMTokenList(2) ['one', 'two', value: 'one two']
1798 | 컨테이너.classList.remove('two')
1799 |
1800 | 컨테이너.classList.toggle('four')
1801 | // true
1802 | 컨테이너.classList.toggle('four')
1803 | // false
1804 |
1805 | // 직접 attribute를 컨트롤
1806 | 컨테이너.getAttribute('class')
1807 | // 'one four'
1808 | 컨테이너.hasAttribute('class')
1809 | // true
1810 |
1811 | // 기존에 있었던 class는 날아갑니다.
1812 | 컨테이너.setAttribute('class', 'five six')
1813 | 컨테이너.setAttribute('class', '')
1814 |
1815 |
1816 | // 4
1817 | // https://test.api.weniv.co.kr/mall
1818 | // test.api.weniv.co.kr/asset/img/1/thumbnailImg.jpg
1819 | fetch('https://test.api.weniv.co.kr/mall')
1820 | .then(r => r.json())
1821 | .then(r => {
1822 | console.log(r)
1823 | for (const item of r) {
1824 |
1825 | const 상품이름 = document.createElement('h3')
1826 | 상품이름.innerText = item.productName
1827 |
1828 | const 이미지 = document.createElement('img')
1829 | 이미지.setAttribute('src', 'https://test.api.weniv.co.kr/' + item.thumbnailImg)
1830 |
1831 | const 가격 = document.createElement('p')
1832 | 가격.innerText = item.price
1833 |
1834 | document.body.append(상품이름)
1835 | document.body.append(이미지)
1836 | document.body.append(가격)
1837 | }
1838 | })
1839 | ```
--------------------------------------------------------------------------------