소스코드 업로드

완성 소스코드 업로드
codedesign-webapp · Aug 11, 2020 · 6a2af40 · 6a2af40
1 parent bd61879
commit 6a2af40
Show file tree

Hide file tree

Showing 9,921 changed files with 1,072,260 additions and 0 deletions.
diff --git a/ex01-01/index.html b/ex01-01/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title></title>
+</head>
+<body>
+    <h1>안녕하세요!</h1>
+</body>
+</html>
diff --git a/ex02-01/function.html b/ex02-01/function.html
@@ -0,0 +1,27 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title></title>
+</head>
+<body>
+	<button onclick="console.log(fnSayHello())" id="clickme">눌러 주세요!</button>
+	<br>
+	<button onclick="alert(fnPlusNumbers(3, 5))">3 + 5 = ?</button>
+	<button onclick="console.log(fnMinusNumbers(3, 5))">3 - 5 = ?</button>
+	<script>
+		// 버튼이 눌리면 HTML 엘리먼트에 직접 결과 표시
+		function fnSayHello() {
+			document.querySelector('#clickme').innerHTML = '안녕하세요!';
+		}
+		// 함수이름이 function 뒤에 위치, 결과값 반환
+		function fnPlusNumbers(pNum1, pNum2) {
+			return pNum1 + pNum2;
+		}
+		// 함수이름이 function 앞에 위치, 결과값 반환
+		const fnMinusNumbers = function (pNum1, pNum2) {
+			return pNum1 - pNum2;
+		}
+	</script>
+</body>
+</html>
diff --git a/ex02-02/arrow_function.html b/ex02-02/arrow_function.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title></title>
+</head>
+<body>
+    <button onclick="
+        console.log(fnSayHello());
+        console.log('1+2 =',fnPlusNumbers1(1, 2));
+        console.log('2+3 =',fnPlusNumbers2(2, 3));
+        console.log('3+4 =',fnPlusNumbers3(3, 4));
+        console.log('4+1 =',fnPlusNumbers4(4));
+    " id="clickme">화살표 함수 실행!</button>
+
+    <script>
+        // 전통적 함수 표현
+        const fnPlusNumbers1 = function (pNum1, pNum2) {
+            return pNum1 + pNum2;
+        }
+        // 화살표 함수 형식1 : 일반 반환
+        const fnPlusNumbers2 = (pNum1, pNum2) => {
+            return pNum1 + pNum2;
+        }
+        // 화살표 함수 형식2 : 암묵적 반환
+        const fnPlusNumbers3 = (pNum1, pNum2) => pNum1 + pNum2;
+        // 화살표 함수 형식3 : 매개변수 1개 일 때 소괄호 생략 가능
+        const fnPlusNumbers4 = pNum => pNum+1;
+        // 화살표 함수 형식4 : 매개변수 없을 때 반드시 소괄호 사용
+        const fnSayHello = () => '안녕하세요!';
+    </script>
+</body>
+</html>
diff --git a/ex02-03/library_default.js b/ex02-03/library_default.js
@@ -0,0 +1,5 @@
+// 외부 공유할 기본 함수
+const fnPlusNumbers = (pNum1, pNum2) => pNum1 + pNum2;
+
+// 외부에서 기본 함수를 사용할 수 있도록 내보냄
+export default fnPlusNumbers;
diff --git a/ex02-03/library_named.js b/ex02-03/library_named.js
@@ -0,0 +1,8 @@
+// 외부 공유할 상수
+const conHello = '안녕하세요!';
+// 외부 공유할 함수
+const fnPlusNumbers = (pNum1, pNum2) => pNum1 + pNum2;
+
+
+// Named Export로 외부에서 함수들을 사용할 수 있도록 내보냄
+export { conHello, fnPlusNumbers };
diff --git a/ex02-03/main.html b/ex02-03/main.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title></title>
+</head>
+<body>
+    <p>콘솔 창을 열어서 결과를 확인하세요!</p>
+    <!-- 모듈 사용 시 type 어트리뷰트값에 module을 반드시 기입합니다! -->
+    <script type="module" src="main.js"></script>
+</body>
+</html>
diff --git a/ex02-03/main.js b/ex02-03/main.js
@@ -0,0 +1,17 @@
+// Named Export 모듈 사용
+import {
+    conHello,
+    fnPlusNumbers
+} from './library_named.js';
+console.log(conHello,'이름으로 내보내기입니다.');
+console.log('1+2 = ', fnPlusNumbers(1, 2));
+
+// Named Export 라이브러리 모듈을 가져와서 myLibrary 객체에 모두 저장
+import * as myLibrary from './library_named.js';
+console.log(myLibrary.conHello, '*을 사용한 이름으로 내보내기입니다.');
+console.log('3+4 = ', myLibrary.fnPlusNumbers(3, 4));
+
+// Default Export 모듈 사용
+import fnMyfunction from './library_default.js';
+console.log('안녕하세요! 기본으로 내보내기입니다.')
+console.log('5+6 = ', fnMyfunction(5, 6));
diff --git a/ex02-04/callback.html b/ex02-04/callback.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="UTF-8">
+    <title></title>
+</head>
+<body>
+    <button onclick="
+        // 콜백함수를 순서대로 실행하면 콜백지옥의 문제점 발생!
+        fnProductReady(1, 2000, function (pRet) {
+            console.log(pRet);
+            fnProductReady(2, 1000, function (pRet) {
+                console.log(pRet);
+                fnProductReady(3, 500, function (pRet) {
+                    console.log(pRet);
+                    console.log('가독성이 낮고 유지보수하기 어려운 콜백 지옥 발생!');
+                })
+            })
+        })        
+    ">콜백함수 실행!</button>
+
+    <script>
+        // 콜백함수 생성
+        function fnProductReady(pNum, pTime, fnCallback) {
+            setTimeout(() => {
+                console.log(pNum);
+                fnCallback('상품이 성공적으로 배송되었습니다.');
+            }, pTime); // 타이머로 가상의 네트워크 지연상황 연출함
+        }
+    </script>
+</body>
+</html>
diff --git a/ex02-05/data.json b/ex02-05/data.json
@@ -0,0 +1,7 @@
+{
+  "items": [
+    { "name": "홍길동1", "age": 35, "email": "[email protected]" }, 
+    { "name": "홍길동2", "age": 30,"email": "[email protected]" },
+    { "name": "홍길동3", "age": 45, "email": "[email protected]"}
+  ]
+}
diff --git a/ex02-05/promise_getjson.html b/ex02-05/promise_getjson.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title></title>
+</head>
+<body>
+    <button onclick="
+        // 로컬 JSON 텍스트 표시
+        fetch('./data.json')
+            .then(pResponse => pResponse.text())
+            .then(pJSON => console.log(pJSON));
+    ">JSON 로컬 읽기</button>
+
+    <button onclick="
+        /*
+        // 원격 JSON 텍스트 표시
+        fetch('https://cors-anywhere.herokuapp.com/'+'https://jsonplaceholder.typicode.com/posts/1')
+        */
+        // 책의 내용은 jsonplaceholder 사이트가 cors를 지원하지 않을 때를 대비하여 작성되었습니다. 현재는 cors-anywhere를 지원하므로 다음처럼 사용하지 않을 때 정상 실행됩니다.
+        fetch('https://jsonplaceholder.typicode.com/posts/1')
+            .then(pResponse => pResponse.text())
+            .then(pJSON => console.log(pJSON))
+    ">JSON 원격 읽기</button>
+</body>
+</html>
diff --git a/ex02-06/promise_resolve_reject.html b/ex02-06/promise_resolve_reject.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title></title>
+</head>
+<body>
+    <button onclick="
+        // Promise 실행
+        console.log('Promise 시작!');
+        let bStatus = Math.random() > 0.5;
+        fnCreatePromise(bStatus)
+            // 비동기 실행으로 결과 알려줌!
+            .then(pResult => console.log(pResult))
+            .catch(pErrMsg => console.error(pErrMsg));
+        console.log('Promise 종료!');
+    ">상품 배송 시작!</button>
+
+    <script>
+        // Promise 생성
+        function fnCreatePromise(pStatus) {
+            return new Promise((fnResolve, fnReject) => {
+                // 상품 준비 확인의 비동기 함수를 실행했다고 가정함. 
+                setTimeout(() => {
+                    // 상품 준비 결과는 랜덤으로 True 또는 False 가정
+                    if (pStatus) fnResolve('상품이 성공적으로 배송되었습니다.');
+                    else fnReject('죄송합니다. 상품이 아직 준비되지 못했습니다.');                    
+                }, 3000); // 3초 타이머로 가상의 네트워크 지연상황 연출함
+            });
+        }
+    </script>
+</body>
+</html>
diff --git a/ex02-06/promise_sample.html b/ex02-06/promise_sample.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="UTF-8">
+    <title></title>
+</head>
+
+<body>
+    <script>     
+        // 가상의 서버 데이터 요청 및 그 결과 랜덤값 반환
+        function RequestData() {
+            return Math.random() > 0.5;
+        }
+        // 약속을 생성하는 부분
+        const oProductReady = new Promise(function (fnResolve, fnReject) {
+            // (1) 실행 중 결과 기다림(pending)
+            let bStatus = RequestData();
+
+            if (bStatus) {
+                // (2) 요청한 실행이 성공함(resolved)
+                fnResolve('상품이 성공적으로 배송되었습니다.');
+            } else {
+                // (3) 실행 중 결과 기다림(pending)
+                fnReject('죄송합니다. 상품이 아직 준비되지 못했습니다.');
+            }
+        });
+        // 약속의 실행 최종 결과
+        oProductReady.then(function (pResult) {
+            // (1) 약속 지킴 최종 성공(fulfilled)
+            console.log(pResult); 
+        }, function (pErrMsg) {
+            // (2) 약속 못지킴 최종 실패(unfulfilled)
+            console.log(pErrMsg); 
+        });
+    </script>
+</body>
+
+</html>
diff --git a/ex02-06/promise_sample.js b/ex02-06/promise_sample.js
@@ -0,0 +1,27 @@
+// 가상의 서버 데이터 요청 및 그 결과 랜덤값 반환
+function RequestData() { 
+  return Math.random() > 0.5;
+}
+
+// 약속을 생성하는 부분
+const oProductReady = new Promise(function (fnResolve, fnReject) {
+  // (1) 실행 중 결과 기다림(pending)
+  let bStatus = RequestData();
+
+  if (bStatus) {
+    // (2) 요청한 실행이 성공함(resolved)
+    fnResolve('상품이 성공적으로 배송되었습니다.');
+  } else {
+    // (3) 실행 중 결과 기다림(pending)
+    fnReject('죄송합니다. 상품이 아직 준비되지 못했습니다.');
+  }
+});
+
+// 약속의 실행 최종 결과
+oProductReady.then(function (pResult) {
+  // (1) 약속 지킴 최종 성공(fulfilled)
+  console.log(pResult);
+}, function (pErrMsg) {
+  // (2) 약속 못지킴 최종 실패(unfulfilled)
+  console.log(pErrMsg);
+});
diff --git a/ex02-07/promise_multi.html b/ex02-07/promise_multi.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title></title>
+</head>
+<body>
+    <button onclick="
+        // Promise로 비동기 함수를 순서대로 실행
+        fnProductReady(1, 2000)
+            .then((pResult1) => {
+                console.log(pResult1);
+                return fnProductReady(2, 1000);
+            })
+            .then((pResult2) => {
+                console.log(pResult2);
+                return fnProductReady(3, 500);
+            })
+            .then((pResult3) => console.log(pResult3));
+    ">Promise : 상품 배송시작!</button>
+
+    <script>
+        // Promise로 비동기 함수 생성
+        function fnProductReady(pNum, pTime) {
+            return new Promise((fnResolve) => {
+                setTimeout(() => {
+                    console.log(pNum);
+                    fnResolve('상품이 성공적으로 배송되었습니다.');
+                }, pTime);
+            });
+        }
+    </script>
+</body>
+</html>
diff --git a/ex02-08/async_await.html b/ex02-08/async_await.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title></title>
+</head>
+<body>
+    <!-- async의 함수를 실행 -->
+    <button onclick="fnDoAsyncFunc();">async, await : 상품 배송 시작!</button>
+
+    <script>
+        // await으로 비동기 함수를 순서대로 실행. 
+        // Promise보다 소스가 간결하고 가독성이 가장 높음! 
+        async function fnDoAsyncFunc() {
+            console.log(await fnProductReady(1, 2000)); // 2초 지연
+            console.log(await fnProductReady(2, 1000)); // 1초 지연
+            console.log(await fnProductReady(3, 500)); // 0.5초 지연
+        }        
+        // Promise로 비동기 함수 생성
+        function fnProductReady(pNum, pTime) {
+            return new Promise((resolve) => {
+                setTimeout(() => {
+                    console.log(pNum);
+                    resolve('상품이 성공적으로 배송되었습니다.');
+                }, pTime); // 타이머로 가상의 네트워크 지연상황 연출함
+            });
+        }
+    </script>
+</body>
+</html>
diff --git a/ex03/images/hello-pwa.png b/ex03/images/hello-pwa.png
diff --git a/ex03/images/icons/android-chrome-192x192.png b/ex03/images/icons/android-chrome-192x192.png
diff --git a/ex03/images/icons/android-chrome-512x512.png b/ex03/images/icons/android-chrome-512x512.png
diff --git a/ex03/images/icons/apple-touch-icon-120x120.png b/ex03/images/icons/apple-touch-icon-120x120.png
diff --git a/ex03/images/icons/apple-touch-icon-152x152.png b/ex03/images/icons/apple-touch-icon-152x152.png
diff --git a/ex03/images/icons/apple-touch-icon-180x180.png b/ex03/images/icons/apple-touch-icon-180x180.png
diff --git a/ex03/images/icons/apple-touch-icon-60x60.png b/ex03/images/icons/apple-touch-icon-60x60.png
diff --git a/ex03/images/icons/apple-touch-icon-76x76.png b/ex03/images/icons/apple-touch-icon-76x76.png
diff --git a/ex03/images/icons/apple-touch-icon.png b/ex03/images/icons/apple-touch-icon.png
diff --git a/ex03/images/icons/favicon-16x16.png b/ex03/images/icons/favicon-16x16.png
diff --git a/ex03/images/icons/favicon-32x32.png b/ex03/images/icons/favicon-32x32.png
diff --git a/ex03/images/icons/favicon.ico b/ex03/images/icons/favicon.ico
diff --git a/ex03/images/icons/favicon.png b/ex03/images/icons/favicon.png
diff --git a/ex03/images/icons/msapplication-icon-144x144.png b/ex03/images/icons/msapplication-icon-144x144.png
diff --git a/ex03/images/icons/mstile-150x150.png b/ex03/images/icons/mstile-150x150.png