미션 소스코드

codedesign-webapp · Aug 11, 2020 · 1e42e39 · 1e42e39
1 parent 86d510c
commit 1e42e39
Show file tree

Hide file tree

Showing 13,674 changed files with 1,539,155 additions and 0 deletions.
diff --git a/mission02/input.html b/mission02/input.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title></title>
+
+</head>
+
+<body>
+    <h1>1부터 100 범위 안의 숫자를 입력하세요:</h1>
+    <input type="text" id="comIn" value="" />
+    <button onclick="fnMeasure()">확인</button>
+    <p>입력결과:</p>
+    <textarea id="comOutput"></textarea>
+    <script>
+        function fnMeasure() {
+            let iNumber, strResult;
+
+            // 입력한 숫자를 가져옴
+            iNumber = document.querySelector("#comIn").value;
+            // 1부터 100까지 범위인지 확인
+            if (iNumber < 1 || iNumber > 100) strResult = "입력 범위가 맞지 않습니다!";
+            else strResult = "성공적으로 입력하셨습니다!";
+
+            document.querySelector("#comOutput").innerHTML = strResult;
+        }
+    </script>
+</body>
+
+</html>
diff --git a/mission03/images/hello-pwa.png b/mission03/images/hello-pwa.png
diff --git a/mission03/images/icons/android-chrome-192x192.png b/mission03/images/icons/android-chrome-192x192.png
diff --git a/mission03/images/icons/android-chrome-512x512.png b/mission03/images/icons/android-chrome-512x512.png
diff --git a/mission03/images/icons/apple-touch-icon-120x120.png b/mission03/images/icons/apple-touch-icon-120x120.png
diff --git a/mission03/images/icons/apple-touch-icon-152x152.png b/mission03/images/icons/apple-touch-icon-152x152.png
diff --git a/mission03/images/icons/apple-touch-icon-180x180.png b/mission03/images/icons/apple-touch-icon-180x180.png
diff --git a/mission03/images/icons/apple-touch-icon-60x60.png b/mission03/images/icons/apple-touch-icon-60x60.png
diff --git a/mission03/images/icons/apple-touch-icon-76x76.png b/mission03/images/icons/apple-touch-icon-76x76.png
diff --git a/mission03/images/icons/apple-touch-icon.png b/mission03/images/icons/apple-touch-icon.png
diff --git a/mission03/images/icons/favicon-16x16.png b/mission03/images/icons/favicon-16x16.png
diff --git a/mission03/images/icons/favicon-32x32.png b/mission03/images/icons/favicon-32x32.png
diff --git a/mission03/images/icons/favicon.ico b/mission03/images/icons/favicon.ico
diff --git a/mission03/images/icons/favicon.png b/mission03/images/icons/favicon.png
diff --git a/mission03/images/icons/msapplication-icon-144x144.png b/mission03/images/icons/msapplication-icon-144x144.png
diff --git a/mission03/images/icons/mstile-150x150.png b/mission03/images/icons/mstile-150x150.png
diff --git a/mission03/images/icons/safari-pinned-tab.svg b/mission03/images/icons/safari-pinned-tab.svg
diff --git a/mission03/images/splash/splash-1125x2436.png b/mission03/images/splash/splash-1125x2436.png
diff --git a/mission03/images/splash/splash-1242x2148.png b/mission03/images/splash/splash-1242x2148.png
diff --git a/mission03/images/splash/splash-1536x2049.png b/mission03/images/splash/splash-1536x2049.png
diff --git a/mission03/images/splash/splash-1668x2225.png b/mission03/images/splash/splash-1668x2225.png
diff --git a/mission03/images/splash/splash-2048x2732.png b/mission03/images/splash/splash-2048x2732.png
diff --git a/mission03/images/splash/splash-640x1136.png b/mission03/images/splash/splash-640x1136.png
diff --git a/mission03/images/splash/splash-750x1294.png b/mission03/images/splash/splash-750x1294.png
diff --git a/mission03/index.html b/mission03/index.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<!-- 언어를 한글로 설정함-->
+<html lang="ko">
+
+<head>
+  <meta charset="utf-8">
+  <!-- PWA 매너페스트 파일 연결, 상태바 테마색상을 흰색으로 변경 -->
+  <link rel="manifest" href="manifest.json">
+  <meta name="theme-color" content="#ffffff">
+
+  <!-- 모바일 기기 뷰포트, 브라우저 주소줄 파비콘 설정-->
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="shortcut icon" href="images/icons/favicon.ico">
+  <link rel="icon" type="image/png" sizes="16x16" href="images/icons/favicon-16x16.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="images/icons/favicon-32x32.png">
+
+  <title>안녕하세요! PWA by JS</title>
+  <style>
+    html,
+    body {
+      /* html, body 모두 높이를 100%로 고정시켜야 flexbox 동작 */
+      height: 100%;
+      background-color: #F3A530;
+      color: #ffffff;
+    }
+
+    .container {
+      height: 100%;
+      /* 높이를 100%로 고정시킴 */
+      display: flex;
+      /* 컨테이너를 flexbox 스타일로 변경 */
+      align-items: center;
+      /* 상하 가운데 정렬 */
+      justify-content: center;
+      /* 좌우 가운데 정렬*/
+    }
+  </style>
+</head>
+
+<body>
+  <div class="container">
+    <h1>안녕하세요!</h1>
+    <img src="./images/hello-pwa.png" alt=""></img>
+    <p>by JS</p>
+  </div>
+  <!-- 1. 서비스 워커 등록 -->
+  <script>
+    if ('serviceWorker' in navigator) {
+      navigator.serviceWorker
+        .register('./service_worker.js')
+        .then(function () {
+          console.log('서비스 워커가 등록됨!');
+        })
+    }
+  </script>
+</body>
+
+</html>
diff --git a/mission03/manifest.json b/mission03/manifest.json
@@ -0,0 +1,22 @@
+{
+  "name": "안녕하세요! PWA by JS",
+  "short_name": "안녕하세요! PWA by JS",
+  "description": "PWA start program",
+  "scope": ".",
+  "start_url": "./",
+  "display": "fullscreen",
+  "orientation": "portrait",
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "icons": [{
+      "src": "images/icons/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "images/icons/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ]
+}
diff --git a/mission03/service_worker.js b/mission03/service_worker.js
@@ -0,0 +1,41 @@
+const sCacheName = 'hello-pwa-v1'; // 캐시제목 변경
+const aFilesToCache = [ 
+  './',
+  './index.html',
+  './manifest.json',
+  './images/hello-pwa.png',
+  './images/icons/favicon.ico', // 파비콘 이미지 캐시
+  './images/icons/android-chrome-192x192.png' // 아이콘 이미지 캐시
+];
+
+// 2.서비스워커를 설치하고 캐시를 저장함
+self.addEventListener('install', pEvent => {
+  console.log('서비스워커 설치함!');
+  pEvent.waitUntil(
+    caches.open(sCacheName)
+    .then(pCache => {
+      console.log('파일을 캐시에 저장함!');
+      return pCache.addAll(aFilesToCache);
+    })
+  );
+});
+
+// 3. 고유번호 할당받은 서비스 워커 동작 시작
+self.addEventListener('activate', pEvent => {
+  console.log('서비스워커 동작 시작됨!');
+});
+
+// 4.데이터 요청시 네트워크 또는 캐시에서 찾아 반환 
+self.addEventListener('fetch', pEvent => {
+  pEvent.respondWith(
+    caches.match(pEvent.request)
+    .then(response => {
+      if (!response) {
+        console.log("네트워크에서 데이터 요청!", pEvent.request)
+        return fetch(pEvent.request);
+      }
+      console.log("캐시에서 데이터 요청!", pEvent.request)
+      return response;
+    }).catch(err => console.log(err))
+  );
+});
diff --git a/mission04/v-for.html b/mission04/v-for.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="UTF-8">
+    <title></title>
+</head>
+
+<body>
+    <div id="app">
+        <!-- JSON 데이터를 읽어서 항목의 번호와 이름, 나이를 하나씩 표시함 -->
+        <ul v-for="(item, index) in aPersons">
+            <li>
+                <!-- index는 항목의 순서를 숫자로 표시 -->
+                <p>번호: {{ index }} </p>
+                <p>이름: {{ item.name }} </p>
+                <p>나이: {{ item.age }} </p>
+            </li>
+        </ul>
+    </div>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
+    <script>
+        new Vue({
+            el: '#app',
+            // 고객의 이름, 나이를 값으로 하는 JSON 데이터 정의
+            data: {
+                aPersons: [{
+                        name: '홍길동',
+                        age: 27
+                    },
+                    {
+                        name: '이순신',
+                        age: 30
+                    },
+                    {
+                        name: '김유신',
+                        age: 40
+                    }
+                ]
+            }
+        });
+    </script>
+</body>
+
+</html>
diff --git a/mission05/component_prop.html b/mission05/component_prop.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="UTF-8">
+  <title></title>
+</head>
+
+<body>
+  <div id="app">
+    <!-- 초기값(각각 1,10,100) 이 다른 세개의 심플 카운터 표시 -->
+    <simple-counter startnumber="1"></simple-counter>
+    <simple-counter startnumber="10"></simple-counter>
+    <simple-counter startnumber="100"></simple-counter>
+  </div>
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
+  <script>
+    // 심플 카운터 컴포넌트 디자인 및 등록
+    Vue.component('simple-counter', {
+      // 1. 엘리먼트 속성값으로 받을 startnumber 선언
+      props: ['startnumber'],
+      // 2. 화면에 표시할 템플릿 정의
+      template: `
+        <button v-on:click="fnIncCounter">
+          카운터 : {{ fnGetCounter }}
+        </button>`,
+      // 3. 데이터 속성은 함수로 선언하여 속성값으로 받은 startnumber를 nCounter에 저장
+      data: function () {
+        return {
+          nCounter: parseInt(this.startnumber)
+        }
+      },
+      // 4. 데이터 값을 읽어다가 mustache에 바인딩하는 콤퓨티드 속성 정의
+      computed: {
+        fnGetCounter: function () {
+          return this.nCounter
+        }
+      },
+      // 5. 버튼이 눌리면 이벤트 핸들러로 카운터 값 +1 증가하는 메서드 속성 정의
+      methods: {
+        fnIncCounter: function () {
+          this.nCounter += 1
+        }
+      }
+    })
+
+    var gApp = new Vue({
+      el: '#app',
+    })
+  </script>
+</body>
+
+</html>
diff --git a/mission06/floating_button.html b/mission06/floating_button.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
+    <!-- vuetify.js에 필요한 스타일 파일 링크 연결 -->
+    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet">
+    <link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
+</head>
+
+<body>
+    <div id="app">
+        <v-app>
+            <!-- 상단에 툴바 배치하고 좌측에 메뉴 아이콘 넣음 -->
+            <v-app-bar app color="blue" dark>
+                <v-app-bar-nav-icon></v-app-bar-nav-icon>
+                <v-toolbar-title>Virtual University</v-toolbar-title>
+            </v-app-bar>
+            <v-content>
+                <v-container>
+                    <v-row>
+                        <v-col xs="12">
+                            <v-card>
+                                <!-- 내용 영역에 높이 300px 카드 스타일 넣음 -->
+                                <v-card-text style="height: 300px;" class="grey lighten-4"></v-card-text>
+                                <!-- 하단 기준으로 50px 높이에 [추가] 플로팅 단추 넣음 -->
+                                <v-card-text style="height: 50px; position:relative">
+                                    <v-btn absolute dark fab top right color="pink">
+                                        <v-icon>add</v-icon>
+                                    </v-btn>
+                                </v-card-text>
+                            </v-card>
+                        </v-col>
+                    </v-row>
+                </v-container>
+            </v-content>
+        </v-app>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>
+    <script>
+        new Vue({
+            el: '#app',
+            vuetify: new Vuetify()
+        })
+    </script>
+</body>
+
+</html>
diff --git a/mission07/.browserslistrc b/mission07/.browserslistrc
@@ -0,0 +1,2 @@
+> 1%
+last 2 versions
diff --git a/mission07/README.md b/mission07/README.md
@@ -0,0 +1,29 @@
+# mission07
+
+## Project setup
+```
+npm install
+```
+
+### Compiles and hot-reloads for development
+```
+npm run serve
+```
+
+### Compiles and minifies for production
+```
+npm run build
+```
+
+### Run your tests
+```
+npm run test
+```
+
+### Lints and fixes files
+```
+npm run lint
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).