오지민 / HomePurchaseAgePrediction

Go to a project
Toggle navigation Toggle navigation pinning
서연진
bcf46af3 2 parents e5b9e465 151c1600

Connect with server

Inline Side-by-side
Showing 13 changed files with 563 additions and 0 deletions
1 +node_modules/
2 +
3 +package-lock.json
...\ No newline at end of file ...\ No newline at end of file
File mode changed
1 +
2 +var request = require('request');
3 +
4 +var url = 'http://openapi.molit.go.kr/OpenAPI_ToolInstallPackage/service/rest/RTMSOBJSvc/getRTMSDataSvcLandTrade';
5 +var queryParams = '?' + encodeURIComponent('ServiceKey') + '=aOirrPIaJrx9RbuDcSM5rE3zzWUmbTaR2nAU4AcdQT2cFkJlG1ZeKa%2FlVF8wHFJthJT6C3jeS5n%2FP%2B3pBggZrw%3D%3D'; /* Service Key*/
6 +queryParams += '&' + encodeURIComponent('LAWD_CD') + '=' + encodeURIComponent('11110'); /* */
7 +queryParams += '&' + encodeURIComponent('DEAL_YMD') + '=' + encodeURIComponent('201512'); /* */
8 +
9 +request({
10 + url: url + queryParams,
11 + method: 'GET'
12 +}, function (error, response, body) {
13 + console.log('Status', response.statusCode);
14 + console.log('Headers', JSON.stringify(response.headers));
15 + console.log('Reponse received', body);
16 +});
1 +<!DOCTYPE html>
2 +<html lang="en">
3 + <head>
4 + <meta charset="UTR-8" />
5 + <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6 + <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7 + <title>HomePurchaseAgePrediction</title>
8 + <link rel="stylesheet" href="css/style2.css" />
9 + <link rel="preconnect" href="https://fonts.gstatic.com" />
10 + <link
11 + href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;500;700;900&display=swap"
12 + rel="stylesheet"
13 + />
14 + </head>
15 + <body>
16 + <nav>
17 + <h1 onClick="location.href='/'">Home Purchase Age Prediction</h1>
18 + </nav>
19 + <main>
20 + <div id="info"></div>
21 + <div id="home_info">
22 + <div id="map"></div>
23 + <ul>
24 + <div>LIST</div>
25 + <li></i>아파트 목록을 가져옵니다.</li>
26 + <li></i>아파트 목록을 가져옵니다.</li>
27 + <li></i>아파트 목록을 가져옵니다.</li>
28 + <li></i>아파트 목록을 가져옵니다.</li>
29 + <li></i>아파트 목록을 가져옵니다.</li>
30 + </ul>
31 + </div>
32 + </main>
33 + <script
34 + type="text/javascript"
35 + src="//dapi.kakao.com/v2/maps/sdk.js?appkey=17cbb7795b615d8f1f0595f972e26c0f&libraries=services,clusterer,drawing"
36 + ></script>
37 + <script type="text/javascript" src="../js/next_page.js"></script>
38 + </body>
39 +</html>
1 +<!DOCTYPE html>
2 +<html>
3 +<head>
4 + <meta charset="utf-8">
5 + <title>다음 지도 API</title>
6 +</head>
7 +<body>
8 + <div id="map" style="width:750px;height:350px;"></div>
9 +
10 + <script src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=a21612f3bd7cf34230c238ce03ca482b"></script>
11 + <script>
12 + var mapContainer = document.getElementById('map'), // 지도를 표시할 div
13 + mapOption = {
14 + center: new kakao.maps.LatLng(37.56819, 126.98042), // 지도의 중심좌표
15 + level: 2, // 지도의 확대 레벨
16 + mapTypeId : kakao.maps.MapTypeId.ROADMAP // 지도종류
17 + };
18 +
19 + // 지도를 생성한다
20 + var map = new kakao.maps.Map(mapContainer, mapOption);
21 +
22 + var marker = new kakao.maps.Marker({
23 + position: new kakao.maps.LatLng(37.56756, 126.97927), // 마커의 좌표
24 + map: map // 마커를 표시할 지도 객체
25 + });
26 +
27 + var iwContent = '<div style="padding: 5px">내용</div>'
28 +
29 +
30 +
31 + // 인포윈도우를 생성합니다
32 + var infowindow = new kakao.maps.InfoWindow({
33 + position : iwPosition,
34 + content : iwContent
35 + });
36 +
37 + // 마커 위에 인포윈도우를 표시합니다. 두번째 파라미터인 marker를 넣어주지 않으면 지도 위에 표시됩니다
38 + infowindow.open(map, marker);
39 +
40 + // HTML5의 geolocation으로 사용할 수 있는지 확인합니다
41 + if (navigator.geolocation) {
42 + navigator.geolocation.getCurrentPosition(function(position) {
43 + var lat = position.coords.latitude, // 위도
44 + lon = position.coords.longitude; // 경도
45 + var locPosition = new kakao.maps.LatLng(lat, lon), // 마커가 표시될 위치를 geolocation으로 얻어온 좌표로 생성합니다
46 + message = '<div style="padding:5px;">여기에 계신가요?!</div>'; // 인포윈도우에 표시될 내용입니다
47 +
48 + // 마커와 인포윈도우를 표시합니다
49 + displayMarker(locPosition, message);
50 + });
51 +
52 + }
53 +
54 + else { // HTML5의 GeoLocation을 사용할 수 없을때 마커 표시 위치와 인포윈도우 내용을 설정합니다
55 + var locPosition = new kakao.maps.LatLng(33.450701, 126.570667),
56 + message = 'geolocation을 사용할수 없어요..'
57 + displayMarker(locPosition, message);
58 + }
59 +
60 + var gps_use = null; //gps의 사용가능 여부
61 + var gps_lat = null; // 위도
62 + var gps_lng = null; // 경도
63 + var gps_position; // gps 위치 객체
64 +
65 + gps_check();
66 + // gps가 이용가능한지 체크하는 함수이며, 이용가능하다면 show location 함수를 불러온다.
67 + // 만약 작동되지 않는다면 경고창을 띄우고, 에러가 있다면 errorHandler 함수를 불러온다.
68 + // timeout을 통해 시간제한을 둔다.
69 + function gps_check(){
70 + if (navigator.geolocation) {
71 + var options = {timeout:60000};
72 + navigator.geolocation.getCurrentPosition(showLocation, errorHandler, options);
73 + } else {
74 + alert("GPS_추적이 불가합니다.");
75 + gps_use = false;
76 + }
77 + }
78 +
79 +
80 + // gps 이용 가능 시, 위도와 경도를 반환하는 showlocation함수.
81 + function showLocation(position) {
82 + gps_use = true;
83 + gps_lat = position.coords.latitude;
84 + gps_lng = position.coords.longitude;
85 + }
86 +
87 +
88 + // error발생 시 에러의 종류를 알려주는 함수.
89 + function errorHandler(error) {
90 + if(error.code == 1) {
91 + alert("접근차단");
92 + } else if( err.code == 2) {
93 + alert("위치를 반환할 수 없습니다.");
94 + }
95 + gps_use = false;
96 + }
97 +
98 + function gps_tracking(){
99 + if (gps_use) {
100 + map.panTo(new kakao.maps.LatLng(gps_lat,gps_lng));
101 + var gps_content = '<div><img class="pulse" draggable="false" unselectable="on" src="https://ssl.pstatic.net/static/maps/m/pin_rd.png" alt=""></div>';
102 + var currentOverlay = new kakao.maps.CustomOverlay({
103 + position: new kakao.maps.LatLng(gps_lat,gps_lng),
104 + content: gps_content,
105 + map: map
106 + });
107 + currentOverlay.setMap(map);
108 + } else {
109 + alert("접근차단하신 경우 새로고침, 아닌 경우 잠시만 기다려주세요.");
110 + gps_check();
111 + }
112 + }
113 +
114 +
115 + // 지도에 마커와 인포윈도우를 표시하는 함수입니다
116 + function displayMarker(locPosition, message) {
117 + // 마커를 생성합니다
118 + var marker = new kakao.maps.Marker({
119 + map: map,
120 + position: locPosition
121 + });
122 + var iwContent = message, // 인포윈도우에 표시할 내용
123 + iwRemoveable = true;
124 +
125 + // 인포윈도우를 생성합니다
126 + var infowindow = new kakao.maps.InfoWindow({
127 + content : iwContent,
128 + removable : iwRemoveable
129 + });
130 +
131 + // 인포윈도우를 마커위에 표시합니다
132 + infowindow.open(map, marker);
133 +
134 + // 지도 중심좌표를 접속위치로 변경합니다
135 + map.setCenter(locPosition);
136 + }
137 +
138 + </script>
139 +</body>
140 +</html>
...\ No newline at end of file ...\ No newline at end of file
1 +<!DOCTYPE html>
2 +<html lang="en">
3 + <head>
4 + <meta charset="UTF-8" />
5 + <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6 + <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7 + <title>HomePurchaseAgePrediction</title>
8 + <link rel="stylesheet" href="css/style.css" />
9 + <link rel="preconnect" href="https://fonts.gstatic.com" />
10 + <link
11 + href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;500;700;900&display=swap"
12 + rel="stylesheet"
13 + />
14 + </head>
15 + <body>
16 + <main>
17 + <h1 onClick="location.href='/'"">Home Purchase Age Prediction</h1>
18 + <h4>
19 + 사용자의 위치기반으로 집 구매 시기를 예측해드립니다 (사용자 위치 근처의
20 + 집을 찾아드립니다)
21 + </h4>
22 + <form action="/geolocation" method="GET" onsubmit="return jbSubmit()">
23 + <div>
24 + 월소득(단위:만 원)
25 + <input
26 + type="text"
27 + id="salary"
28 + name="salary"
29 + placeholder="월소득을 숫자로 입력해주세요."
30 + />
31 + </div>
32 + <div>
33 + 지출(단위:만 원)
34 + <input
35 + type="text"
36 + id="expenditure"
37 + name="expenditure"
38 + placeholder="지출을 숫자로 입력해주세요."
39 + />
40 + </div>
41 + <div>
42 + <input class="btn" type="submit" value="SUBMIT" />
43 + </div>
44 + </form>
45 + </main>
46 + <script type="text/javascript" src="../js/home_page.js"></script>
47 + </body>
48 +</html>
1 +{
2 + "name": "map-api",
3 + "version": "1.0.0",
4 + "description": "",
5 + "main": "app.js",
6 + "scripts": {
7 + "test": "echo \"Error: no test specified\" && exit 1"
8 + },
9 + "author": "",
10 + "license": "ISC",
11 + "dependencies": {
12 + "express": "^4.17.1",
13 + "path": "^0.12.7",
14 + "request": "^2.88.2"
15 + }
16 +}
1 +:root {
2 + --main-bg-color: #6e87cf;
3 + --point-color: #2e29af;
4 +}
5 +
6 +h1 {
7 + color: #f3d8be;
8 + font-size: 4em;
9 + font-weight: 900;
10 + margin-top: 0px;
11 + text-shadow: #2e29af 1px 1px, #2e29af 0px 0px, #2e29af 1px 1px,
12 + #2e29af 2px 2px, #2e29af 3px 3px, #2e29af 4px 4px, #2e29af 5px 5px,
13 + #2e29af 6px 6px, #2e29af 7px 7px, #2e29af 8px 8px, #2e29af 9px 9px,
14 + #2e29af 10px 10px, #2e29af 11px 11px, #2e29af 12px 12px, #2e29af 13px 13px,
15 + #2e29af 14px 14px, #2e29af 15px 15px, #2e29af 16px 16px, #2e29af 17px 17px,
16 + #2e29af 18px 18px, #2e29af 19px 19px;
17 +}
18 +
19 +h1:hover {
20 + cursor: pointer;
21 +}
22 +
23 +h4 {
24 + font-weight: 500;
25 +}
26 +
27 +* {
28 + font-family: "Noto Sans KR", sans-serif;
29 +}
30 +
31 +html {
32 + padding: 0;
33 + margin: 0;
34 +}
35 +
36 +body {
37 + background-color: var(--main-bg-color);
38 + background: no-repeat fixed 50% 50% url("../src/background.jpg");
39 + color: var(--point-color);
40 + padding: 0;
41 + margin: 0;
42 + width: 100%;
43 + height: 100%;
44 +}
45 +
46 +main {
47 + display: flex;
48 + flex-direction: column;
49 + justify-content: center;
50 + align-items: center;
51 + position: absolute;
52 + top: 10%;
53 + left: 10%;
54 + background-color: rgb(250, 250, 250, 0.7);
55 + border-radius: 0.8rem;
56 + box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
57 + width: 80%;
58 + height: 80%;
59 + color: var(--point-color);
60 +}
61 +
62 +main > form {
63 + display: flex;
64 + align-items: flex-end;
65 + font-weight: 700;
66 +}
67 +
68 +main > form > div {
69 + display: flex;
70 + flex-direction: column;
71 + padding: 10px;
72 +}
73 +
74 +input {
75 + margin: 10px 0px;
76 + padding: 5px 10px;
77 + border: 0;
78 + border-radius: 0.4em;
79 +}
80 +
81 +.btn:hover {
82 + background-color: var(--point-color);
83 + color: #fff;
84 + cursor: pointer;
85 +}
86 +
87 +.btn:active {
88 + position: relative;
89 + top: 1px;
90 + left: 1px;
91 +}
1 +:root {
2 + --main-bg-color: #6e87cf;
3 + --point-color: #2e29af;
4 +}
5 +
6 +* {
7 + font-family: "Noto Sans KR", sans-serif;
8 +}
9 +
10 +body {
11 + margin: 0;
12 + padding: 0;
13 + background: no-repeat fixed 50% 50% url("../src/background.jpg");
14 +}
15 +
16 +h1 {
17 + color: #f3d8be;
18 + font-size: 40px;
19 + font-weight: 900;
20 + padding: 5px 0 20px 0;
21 + margin: 0;
22 + text-shadow: #2e29af 1px 1px, #2e29af 0px 0px, #2e29af 1px 1px,
23 + #2e29af 2px 2px, #2e29af 3px 3px, #2e29af 4px 4px, #2e29af 5px 5px,
24 + #2e29af 6px 6px, #2e29af 7px 7px;
25 +}
26 +
27 +h1:hover {
28 + cursor: pointer;
29 +}
30 +
31 +nav {
32 + padding: 5px 10px;
33 + /* background-color: rgba(255, 255, 255, 0.9); */
34 +}
35 +
36 +main {
37 + display: flex;
38 + flex-direction: column;
39 + align-items: center;
40 + /* background-color: rgba(255, 255, 255, 0.7); */
41 +}
42 +
43 +main > div {
44 + display: flex;
45 + flex-direction: row;
46 + justify-content: center;
47 + align-items: center;
48 + margin: 30px 0px 0px 0px;
49 + padding: 15px 30px;
50 + border-radius: 0.4em;
51 +}
52 +
53 +#info {
54 + font-size: 30px;
55 + font-weight: 700;
56 + color: var(--point-color);
57 +}
58 +
59 +#home_info {
60 + background-color: rgba(255, 255, 255, 0.7);
61 +}
62 +
63 +ul {
64 + list-style: none;
65 + border-radius: 0.4em;
66 + padding: 3px 10px;
67 + margin-left: 30px;
68 + background-color: rgba(255, 255, 255, 0.7);
69 + box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
70 +}
71 +
72 +ul > div {
73 + font-weight: 500;
74 + font-size: 20px;
75 + color: #fff;
76 + background-color: var(--point-color);
77 + border-radius: 0.4em;
78 + position: relative;
79 + padding: 6px 0;
80 + top: -10px;
81 + text-align: center;
82 + box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
83 +}
84 +
85 +li {
86 + font-weight: 500;
87 + margin: 10px 0;
88 + /* border: medium solid var(--point-color);
89 + border-radius: 0.4em; */
90 + color: var(--point-color);
91 + padding: 6px 36px;
92 +}
1 +function jbSubmit() {
2 + var salary = Number(document.getElementById("salary").value);
3 + var expenditure = Number(document.getElementById("expenditure").value);
4 + console.log(salary);
5 + if (salary == "" || expenditure == "") {
6 + alert("값을 입력하세요!");
7 + return false;
8 + } else if (isNaN(salary) || isNaN(expenditure)) {
9 + alert("숫자를 입력하세요!");
10 + return false;
11 + } else {
12 + return true;
13 + }
14 +}
1 +var Container = document.getElementById("map");
2 +var Option = {
3 + center: new kakao.maps.LatLng(33.450701, 126.570667),
4 + level: 5,
5 +};
6 +
7 +var map = new kakao.maps.Map(Container, Option);
8 +resizeMap();
9 +relayout();
10 +
11 +function resizeMap() {
12 + var Container = document.getElementById("map");
13 + Container.style.width = "400px";
14 + Container.style.height = "300px";
15 +}
16 +
17 +function relayout() {
18 + map.relayout();
19 +}
20 +
21 +if (navigator.geolocation) {
22 + navigator.geolocation.getCurrentPosition(function (position) {
23 + var latitude = position.coords.latitude,
24 + longitude = position.coords.longitude;
25 + var Position = new kakao.maps.LatLng(latitude, longitude);
26 + displayMarker(Position);
27 + });
28 +}
29 +
30 +function displayMarker(Position) {
31 + var marker = new kakao.maps.Marker({
32 + map: map,
33 + position: Position,
34 + });
35 +
36 + map.setCenter(Position);
37 + function getParameterByName(name, url = window.location.href) {
38 + name = name.replace(/[\[\]]/g, "\\$&");
39 + var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
40 + results = regex.exec(url);
41 + if (!results) return null;
42 + if (!results[2]) return "";
43 + return decodeURIComponent(results[2].replace(/\+/g, " "));
44 + }
45 +
46 + //다음 페이지에서 입력값 받아오기
47 + var salary = getParameterByName("salary");
48 + var expenditure = getParameterByName("expenditure");
49 + var year = "3"; //값 받아오기 전 기본값으로 설정
50 + var div = document.getElementById("info");
51 + div.innerText = `${salary}만원의 월급과 ${expenditure}만원의 지출을 유지하면 당신은 ${year}년 후 아래의 집을 구매할 수 있습니다.`;
52 +}
1 +const express = require("express");
2 +const fs = require("fs");
3 +const path = require("path");
4 +const HTTPS = require("https");
5 +
6 +const app = express();
7 +const domain = "2020105619.oss2021.tk";
8 +const sslport = 8080;
9 +
10 +app.use(express.static(path.join(__dirname, "kakao")));
11 +app.use(express.static(path.join(__dirname, "public")));
12 +
13 +app.get("/", function (req, res) {
14 + res.sendFile(path.join(__dirname + "/main.html"));
15 +});
16 +
17 +app.get("/geolocation", function (req, res) {
18 + res.sendFile(path.join(__dirname + "/kakao/kakaomap.html"));
19 +});
20 +
21 +try {
22 + const option = {
23 + ca: fs.readFileSync("/etc/letsencrypt/live/" + domain + "/fullchain.pem"),
24 + key: fs
25 + .readFileSync(
26 + path.resolve(
27 + process.cwd(),
28 + "/etc/letsencrypt/live/" + domain + "/privkey.pem"
29 + ),
30 + "utf8"
31 + )
32 + .toString(),
33 + cert: fs
34 + .readFileSync(
35 + path.resolve(
36 + process.cwd(),
37 + "/etc/letsencrypt/live/" + domain + "/cert.pem"
38 + ),
39 + "utf8"
40 + )
41 + .toString(),
42 + };
43 +
44 + HTTPS.createServer(option, app).listen(sslport, () => {
45 + console.log(`[HTTPS] Server is started on port ${sslport}`);
46 + });
47 +} catch (error) {
48 + console.log(
49 + "[HTTPS] HTTPS 오류가 발생하였습니다. HTTPS 서버는 실행되지 않습니다."
50 + );
51 + console.log(error);
52 +}