퀴즈 스켈레톤 코드 작성

Woojin Lee
Commit c8a8d7e58d75e53d211c7ef82a0474c4c2b805f7 c8a8d7e5 1 parent a4268863
Showing 4 changed files with 273 additions and 1 deletions
index.js
package-lock.json
package.json
views/quiz.ejs
--- a/index.js
View file @c8a8d7e
+++ b/index.js
View file @c8a8d7e
 var express = require('express');
 var app = express();
+
+app.set('view engine', 'ejs');
+
+app.get('/quiz', function (req, res) {
+  res.render('quiz');
+})
+
 app.get('/', function (req, res) {
   res.send('Hello World');
 })
-var server = app.listen(3000, function () {
+var server = app.listen(23000, function () {
   var host = server.address().address
   var port = server.address().port
   console.log("Example app listening at http://%s:%s", host, port)
--- a/package-lock.json
View file @c8a8d7e
+++ b/package-lock.json
View file @c8a8d7e
@@ -13,11 +13,29 @@
         "negotiator": "0.6.2"
       }
     },
+    "ansi-styles": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+      "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+      "requires": {
+        "color-convert": "^1.9.0"
+      }
+    },
     "array-flatten": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
       "integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI="
     },
+    "async": {
+      "version": "0.9.2",
+      "resolved": "https://registry.npmjs.org/async/-/async-0.9.2.tgz",
+      "integrity": "sha1-rqdNXmHB+JlhO/ZL2mbUx48v0X0="
+    },
+    "balanced-match": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
+      "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c="
+    },
     "body-parser": {
       "version": "1.19.0",
       "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.19.0.tgz",
@@ -35,11 +53,48 @@
         "type-is": "~1.6.17"
       }
     },
+    "brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "requires": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
     "bytes": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.0.tgz",
       "integrity": "sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg=="
     },
+    "chalk": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+      "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+      "requires": {
+        "ansi-styles": "^3.2.1",
+        "escape-string-regexp": "^1.0.5",
+        "supports-color": "^5.3.0"
+      }
+    },
+    "color-convert": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+      "requires": {
+        "color-name": "1.1.3"
+      }
+    },
+    "color-name": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
+    },
+    "concat-map": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s="
+    },
     "content-disposition": {
       "version": "0.5.3",
       "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.3.tgz",
@@ -86,6 +141,14 @@
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
       "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0="
     },
+    "ejs": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.3.tgz",
+      "integrity": "sha512-wmtrUGyfSC23GC/B1SMv2ogAUgbQEtDmTIhfqielrG5ExIM9TP4UoYdi90jLF1aTcsWCJNEO0UrgKzP0y3nTSg==",
+      "requires": {
+        "jake": "^10.6.1"
+      }
+    },
     "encodeurl": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
@@ -96,6 +159,11 @@
       "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
       "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg="
     },
+    "escape-string-regexp": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ="
+    },
     "etag": {
       "version": "1.8.1",
       "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
@@ -138,6 +206,14 @@
         "vary": "~1.1.2"
       }
     },
+    "filelist": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.1.tgz",
+      "integrity": "sha512-8zSK6Nu0DQIC08mUC46sWGXi+q3GGpKydAG36k+JDba6VRpkevvOWUW5a/PhShij4+vHT9M+ghgG7eM+a9JDUQ==",
+      "requires": {
+        "minimatch": "^3.0.4"
+      }
+    },
     "finalhandler": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz",
@@ -162,6 +238,11 @@
       "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
       "integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac="
     },
+    "has-flag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
+    },
     "http-errors": {
       "version": "1.7.2",
       "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.2.tgz",
@@ -192,6 +273,17 @@
       "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
       "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g=="
     },
+    "jake": {
+      "version": "10.8.2",
+      "resolved": "https://registry.npmjs.org/jake/-/jake-10.8.2.tgz",
+      "integrity": "sha512-eLpKyrfG3mzvGE2Du8VoPbeSkRry093+tyNjdYaBbJS9v17knImYGNXQCUV0gLxQtF82m3E8iRb/wdSQZLoq7A==",
+      "requires": {
+        "async": "0.9.x",
+        "chalk": "^2.4.2",
+        "filelist": "^1.0.1",
+        "minimatch": "^3.0.4"
+      }
+    },
     "media-typer": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
@@ -225,6 +317,14 @@
         "mime-db": "1.44.0"
       }
     },
+    "minimatch": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
+      "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
+      "requires": {
+        "brace-expansion": "^1.1.7"
+      }
+    },
     "ms": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
@@ -341,6 +441,14 @@
       "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
       "integrity": "sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow="
     },
+    "supports-color": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+      "requires": {
+        "has-flag": "^3.0.0"
+      }
+    },
     "toidentifier": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz",
--- a/package.json
View file @c8a8d7e
+++ b/package.json
View file @c8a8d7e
@@ -13,6 +13,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "ejs": "^3.1.3",
     "express": "^4.17.1"
   }
 }
--- a/views/quiz.ejs 0 → 100644
View file @c8a8d7e
+++ b/views/quiz.ejs 0 → 100644
View file @c8a8d7e
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <title>로드뷰에 마커와 인포윈도우 올리기</title>
+  <style>
+    .screen_out {
+      display: block;
+      overflow: hidden;
+      position: absolute;
+      left: -9999px;
+      width: 1px;
+      height: 1px;
+      font-size: 0;
+      line-height: 0;
+      text-indent: -9999px
+    }
+
+    .wrap_content {
+      overflow: hidden;
+      width: 1500px;
+      height: 600px;
+    }
+
+    .wrap_map {
+      width: 400px;
+      height: 400px;
+      float: left;
+    }
+
+    .wrap_roadview {
+      width: 1100px;
+      height: 100%;
+      float: left;
+    }
+  </style>
+</head>
+
+<body>
+  <div class="wrap_content">
+    <div class="wrap_roadview">
+      <div id="roadview" style="width:100%;height:100%"></div> <!-- 로드뷰를 표시할 div 입니다 -->
+    </div>
+    <div class="wrap_map">
+      <div id="map" style="width:100%;height:100%"></div> <!-- 지도를 표시할 div 입니다 -->
+    </div>
+    <button onclick="checkResult()">정답 확인</button>
+    <div id=distance></div>
+  </div>
+
+  <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=1c8aa0e80b11e6e96520d80aaeb85a4e"></script>
+  <script>
+    var mapContainer = document.getElementById('map'), // 지도를 표시할 div 
+      answerLocation = new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심 좌표
+      mapOption = {
+        center: answerLocation, // 지도의 중심 좌표
+        level: 4 // 지도의 확대 레벨
+      };
+
+    // 지도를 표시할 div와  지도 옵션으로  지도를 생성합니다
+    var map = new kakao.maps.Map(mapContainer, mapOption);
+
+    var userLocation = null;
+
+    // 지도를 클릭한 위치에 표출할 마커입니다
+    var marker = new kakao.maps.Marker({
+      // 지도 중심좌표에 마커를 생성합니다 
+      position: map.getCenter()
+    });
+    // 지도에 마커를 표시합니다
+    marker.setMap(map);
+
+    // 지도에 클릭 이벤트를 등록합니다
+    // 지도를 클릭하면 마지막 파라미터로 넘어온 함수를 호출합니다
+    kakao.maps.event.addListener(map, 'click', function (mouseEvent) {
+
+      // 클릭한 위도, 경도 정보를 가져옵니다 
+      userLocation = mouseEvent.latLng;
+
+      // 마커 위치를 클릭한 위치로 옮깁니다
+      marker.setPosition(userLocation);
+
+      // var message = '클릭한 위치의 위도는 ' + userLocation.getLat() + ' 이고, ';
+      // message += '경도는 ' + userLocation.getLng() + ' 입니다';
+    });
+
+    var rvContainer = document.getElementById('roadview'); // 로드뷰를 표시할 div
+    var rv = new kakao.maps.Roadview(rvContainer); // 로드뷰 객체 생성
+    var rc = new kakao.maps.RoadviewClient(); // 좌표를 통한 로드뷰의 panoid를 추출하기 위한 로드뷰 help객체 생성
+    var rvResetValue = {} //로드뷰의 초기화 값을 저장할 변수
+    rc.getNearestPanoId(answerLocation, 50, function (panoId) {
+      rv.setPanoId(panoId, answerLocation);//좌표에 근접한 panoId를 통해 로드뷰를 실행합니다.
+      rvResetValue.panoId = panoId;
+    });
+
+    // 로드뷰 초기화 이벤트
+    kakao.maps.event.addListener(rv, 'init', function () {
+
+    });
+
+    //지도 이동 이벤트 핸들러
+    function moveKakaoMap(self) {
+
+      var center = map.getCenter(),
+        lat = center.getLat(),
+        lng = center.getLng();
+
+      self.href = 'https://map.kakao.com/link/map/' + encodeURIComponent('스페이스 닷원') + ',' + lat + ',' + lng; //Kakao 지도로 보내는 링크
+    }
+
+    //지도 초기화 이벤트 핸들러
+    function resetKakaoMap() {
+      map.setCenter(answerLocation); //지도를 초기화 했던 값으로 다시 셋팅합니다.
+      map.setLevel(mapOption.level);
+    }
+
+    //로드뷰 이동 이벤트 핸들러
+    function moveKakaoRoadview(self) {
+      var panoId = rv.getPanoId(); //현 로드뷰의 panoId값을 가져옵니다.
+      var viewpoint = rv.getViewpoint(); //현 로드뷰의 viewpoint(pan,tilt,zoom)값을 가져옵니다.
+      self.href = 'https://map.kakao.com/?panoid=' + panoId + '&pan=' + viewpoint.pan + '&tilt=' + viewpoint.tilt + '&zoom=' + viewpoint.zoom; //Kakao 지도 로드뷰로 보내는 링크
+    }
+
+    //로드뷰 초기화 이벤트 핸들러
+    function resetRoadview() {
+      //초기화를 위해 저장해둔 변수를 통해 로드뷰를 초기상태로 돌립니다.
+      rv.setViewpoint({
+        pan: rvResetValue.pan, tilt: rvResetValue.tilt, zoom: rvResetValue.zoom
+      });
+      rv.setPanoId(rvResetValue.panoId);
+    }
+
+    function checkResult() {
+      var linePath = [answerLocation, userLocation];
+
+      var distanceLine = new kakao.maps.Polyline({
+        path: linePath, // 선을 구성하는 좌표배열 입니다
+        strokeWeight: 5, // 선의 두께 입니다
+        strokeColor: '#FFAE00', // 선의 색깔입니다
+        strokeOpacity: 0.7, // 선의 불투명도 입니다 1에서 0 사이의 값이며 0에 가까울수록 투명합니다
+        strokeStyle: 'solid' // 선의 스타일입니다
+      });
+
+      distanceLine.setMap(map);
+
+      var distance = Math.round(distanceLine.getLength());
+      var message = '거리: ' + distance + 'm'
+
+      var resultDiv = document.getElementById('distance');
+      resultDiv.innerHTML = message;
+    }
+  </script>
+</body>
+
+</html>
\ No newline at end of file