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