드디어 8주간의 프로젝트 진행이 끝났다. '내가 이런 것을 했다니!' 라는 생각도 많이 들고 더 해보고 싶었던 부분을 하지 못한 아쉬움도 남는다.
다만, 확실한 건 이 8주 동안의 시간을 통해서 프론트엔드와 백엔드를 모두 다뤄보면서 내가 새로운 세상에 뛰어들게 되었다는 점이다. 만약 이 시간이 없었더라면 그저 이론적으로만 알고 있지 않았을까, 하는 생각이 든다.
이번 도전을 통해서 다음에 더 큰 발자취를 남길 것을 기대하며 내 개인프로젝트였던 'Lego, Hangang (한강의 모든 것)'에 대한 소개 및 회고록을 작성하고자 한다.
프로젝트 개요 🎈
한강을 너무 좋아한 나머지 웹사이트로 만들었지 뭐야!
나는 한강을 너무나도 좋아하고 힘들 때면 한강에 가서 위로를 얻고 오곤 한다. 그래서 개인 프로젝트를 바로 '한강'을 주제로 해야겠다는 생각이 들었다. 그래서 내가 한강에서 시간을 보내면서 필요했던 정보들, 그리고 '이런 것들을 알면 시간을 더 알차고 행복하게 보낼 수 있을 것 같아!'라고 생각하게 되는 것들을 담은 웹사이트를 제작하게 되었다.
크게 다음과 같이 구성되어 있다.
- 길 찾기: 길 찾기 (normal ver.) / 가장 가까운 한강공원 찾기
- 자전거 대여: 한강공원 내 자전거 대여소들의 위치 안내
- 피크닉 즐기기: 한강공원 주변 피크닉 세트 / 텐트 / 레저용품 대여소 안내
- 데이트 코스 추천: 한강공원 및 주변과 관련된 리뷰 등록하는 페이지
애정을 가지고 시작한 프로젝트여서 css에도 더 많은 시간을 쓰고 많은 공을 들여 만들게 되었던 것 같다. 처음 해보는 코딩이어서 그런지 이것들을 모두 만드는 데 한 달이 넘는 시간이 걸렸다🥺 (데드라인까지도 고치고 있던 나..)
사실 더 완벽하게, 흠 없이 하고 싶었지만 그래도 이것을 통해 얻은 게 많기에 토닥토닥하면서 각각의 페이지에 대한 설명으로 넘어가 보도록 하겠다!
페이지 별 기능 소개 🎈
페이지가 무려 6개 (길어도.. 읽다보면 재미있을 걸요?🕺)
0. 프론트 페이지 (index.html)
- bootstrap의 carousel을 응용해서 프론트 페이지를 만들었다.
🤓🙈 프론트페이지와 이 프로젝트에 사용된 모든 사진들은
내가 직접 찍은 사진들이라는 놀라운 사실~! 🙉🥳
<style>
.typing-demo {
width: 65ch;
animation: typing 2s steps(22), blink .7s infinite alternate;
white-space: nowrap;
overflow: hidden;
border-right: 3px solid;
font-family: monospace;
font-size: 2em;
}
</style>- 위와 같은 style을 적용해서 타자 효과도 적용해 보았다.
- navbar에는 마우스 커서를 가져가면 밑줄이 그어지고 '길찾기'메뉴의 경우 dropdown 이 되도록 구현했다.
-
carousel아래는 card deck들을 만들어서 간단한 설명과 함께 'Let's go'버튼을 눌러도 바로 해당 페이지로 이동할 수 있게 했다.
-
앞에 개발일지에서도 말했던 footer! Codepen.io에서 찾아서 사용했는데 해당 제작자가 bubble은 24개까지만 사용하라고 명시해두어서 그렇게 ㅎㅎ 활용했다! 하늘색으로 바꾸니 마치 물이 튀는 것과 같아서 내 프로젝트의 테마와 어울린다고 생각해 가져왔다.🐳
-
개발자의 계정들과 내가 참고한 사이트, 그리고 스파르타 코딩클럽 홈페이지 주소를 href로 걸어놓았다.
1. 길 찾기 (location.html - 기본 ver.)
-
geolocation을 이용해서 사용자의 위치 (경도, 위도)를 받아온다.
-
사용자가 가고자 하는 한강공원을 선택하면 선택된 공원에 따라서 해당 공원의 경도, 위도를 받아와 지도 위 경로를 그리는 함수와 옆에 list로 경로를 보여주는 함수가 실행된다.
<script>
function findMapTest() {
if (navigator.geolocation) { // GPS를 지원하면
navigator.geolocation.getCurrentPosition(function (position) {
user_latitude = position.coords.latitude;
user_longitude = position.coords.longitude;
$.ajax({
type: 'POST',
url: '/get_location',
data: {
user_latitude: user_latitude, user_longitude: user_longitude
},
success: function (response) {
sx = response['result']['SX']
sy = response['result']['SY']
console.log(sx)
console.log(sy)
loc = $("#inputGroupSelect").val()
if (loc == 1) {
ey = 37.528538;
ex = 126.934312;
} else if (loc == 2) {
ey = 37.566273;
ex = 126.876260;
} else if (loc == 3) {
ey = 37.529341;
ex = 127.071357;
}... 중간 생략
else {
ey = 37.509900;
ex = 126.994680;
}
searchPubTransPathAJAX(sx, sy, ex, ey);
getInfo(sx, sy, ex, ey);
}
})
}, function (error) {
console.error(error);
}, {
enableHighAccuracy: false,
maximumAge: 0,
timeout: Infinity
});
}
</script>-
html에서 요청하고 app.py에서 해당 경도, 위도를 jsonify를 통해 json형식으로 보내준다.
-
결과는 다음과 같다. 출발지와 도착지에 각각 marker가 생긴다.
-
자세히 보면 지하철의 경우 호선에 따라서 고유 색깔로 polyline이 그려지도록 구현해 놓았다. 또한 route는 출력되는 결과값들을 분석해 list 형식으로 지하철 이용 / 버스 이용 / 도보 이용 (이 경우에는 소요 시간 표시)으로 나눠 깔끔하게 볼 수 있게 했다.
-
list의 경우 타임라인처럼 깔끔하게 순서대로 보였으면 해서 사진과 같은 style을 적용해 보았다.
2. 가장 가까운 한강공원 찾기 (location2.html)
-
아무래도 길 찾기의 경우에는 사실 나도 카카오맵, 네이버 지도와 같이 기존에 잘 되어있는 서버를 사용하기 때문에 뭔가 특징이 있는 페이지를 응용해서 하나 더 만들어 보고 싶었다.
-
해당 페이지는 '내 위치에서 가장 가까운 한강공원은?' 이라는 버튼을 클릭하게 되면 자동으로 사용자의 위치 정보를 받아와서 location.html과 같은 방식으로 작동한다.
-
위의 페이지와의 차이점은 내 현 위치에서 11개의 서울한강공원까지 소요되는 시간을 각각 호출해서 최솟값을 구해 도출한다는 점이다.
길 찾기 api를 통해 나오는 결과를 console 창에서 분석해보니 다음과 같은 함수를 만들면 경로에서 소요되는 시간만 뽑아낼 수 있었다.
<script>
function getInfo(sx, sy, ex, ey) {
var xhr = new XMLHttpRequest();
//ODsay apiKey 입력
var url = "https://api.odsay.com/v1/api/searchPubTransPath?SX=" + sx + "&SY=" + sy + "&EX=" + ex + "&EY=" + ey + "&apiKey=zZOOCFJaccyfaXpDSn6kJaK%2BV5CTfh4tdW7Bp4Mg2Jo";
xhr.open("GET", url, true);
xhr.send();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
let path = (JSON.parse(xhr.responseText))["result"]["path"][0]
time = path["info"]["totalTime"]
return time
}
}
}
</script>-
그렇게 해서 만든 페이지를 구동시키면 다음과 같다.
-
전체적인 화면 구성 및 작동되는 방식은 location.html과 유사하다.
-
잘 작동되는 것처럼 보이지만 사실 한 가지 오류가 있는데 그것은 뒤에 [보완하고 싶은 부분]에서 적어보도록 하겠다.
3. 자전거 대여 (bicycle.html)
- 서울한강사업본부 (hangang.seoul.go.kr)에는 따릉이가 아닌 한강공원 자체의 자전거 대여소 위치가 소개되어 있었다. 따릉이 api를 사용할까 하다가 따릉이의 경우에는 각각 한강공원에 대해 위치를 나눠 정하기 너무 애매하고 광범위할 것 같아 자체 자전거 대여소의 정보를 excel로 만들어 사용하기로 했다.
- 다음과 같이 bicycle.xlsx를 만들고 pandas를 이용해 불러왔다.
<script>
def getBikeInfo(location):
print("##################")
print(type(location))
print("##################")
base_dir = 'Users/yehee/Desktop/LegoHangang/LegoHangang'
excel_file = 'static/bicycle_info.xlsx'
excel_dir = os.path.join(base_dir, excel_file)
# read a excel file and make it as a DataFrame
if location == '1':
df_bicycle = pd.read_excel(excel_dir,
sheet_name = 'yeouido',
names = ['id', 'location', 'where', 'address', 'latitude', 'longitude'],
dtype = {'id':int, 'location': str,
'where': str,
'address': str,
'latitude': float,
'longitude': float},
index_col = 'id',
na_values = ',',
comment = '#')
df = pd.DataFrame(df_bicycle)
... 중간 생략
elif location == '9':
df_bicycle = pd.read_excel(excel_dir,
sheet_name = 'ichon',
names = ['id', 'location', 'where', 'address', 'latitude', 'longitude'],
dtype = {'id':int, 'location': str,
'where': str,
'address': str,
'latitude': float,
'longitude': float},
index_col = 'id',
na_values = ',',
comment = '#')
df = pd.DataFrame(df_bicycle)
elif location == '10':
df_bicycle = pd.read_excel(excel_dir,
sheet_name = 'jamwon',
names = ['id', 'location', 'where', 'address', 'latitude', 'longitude'],
dtype = {'id': int, 'location': str,
'where': str,
'address': str,
'latitude': float,
'longitude': float},
index_col = 'id',
na_values = ',',
comment = '#')
df = pd.DataFrame(df_bicycle)
else:
df_bicycle = pd.read_excel(excel_dir,
sheet_name='banpo',
names=['id', 'location', 'where', 'address', 'latitude', 'longitude'],
dtype={'id': int, 'location': str,
'where': str,
'address': str,
'latitude': float,
'longitude': float},
index_col='id',
na_values=',',
comment='#')
df = pd.DataFrame(df_bicycle)
convert_bicycle = df.to_dict()
return convert_bicycle
@app.route("/bicycle_locate", methods=["GET"])
def my_excel_data():
q = request.args.get('locate')
print(q)
data = getBikeInfo(q)
# 돌아오는 data는 dataframe이기 때문에 data to list변환을 해주어야합니다.
df_data = pd.DataFrame(data)
convert_data = df_data.to_dict()
print(convert_data)
return convert_data
</script>-
사용자가 정보를 보고자 하는 한강공원을 클릭하면 아래와 같이 별표로 마크된 marker들이 나타난다. (위도, 경도 정보를 사용해서 표시)
-
해당 api는 kakao 지도 api를 사용했다.
-
마우스를 이용해서 확대 축소도 가능하다.
4. 피크닉 즐기기 (place.html)
-
한강공원에서 놀다보면 매트, 테이블, 텐트(사용가능한 지역 내)등이 필요할 때가 있다. 생각보다 인터넷에는 정보가 흩어져있어서 그것들을 모아서 볼 수 있으면 좋겠다는 생각에 만들게 되었다.
-
각 공원 별로 존재하는 피크닉/캠핑세트 대여 가게 또는 카페를 모두 데이터베이스로 만들어서 버튼을 클릭하면 보여주도록 했다. 각 card에 마우스 커서를 가져가면 가게의 위치와 전화번호를 확인할 수 있고 'Go to website' 버튼을 클릭하면 해당 가게의 사이트로 바로 연결되도록 만들었다.
-
아래는 데이터베이스를 만든 엑셀 파일이다.
-
각각의 공원 버튼을 클릭하면 아래와 같이 나타난다.
5. 데이트 코스 추천 (review.html)
- 이 페이지의 경우에는 스파르타 코딩클럽에서 배웠던 '나홀로 메모장'을 응용해서 만들었다. 응용했다함은 디자인적인 요소를 내가 원하는 대로 바꿨다고 해야하나? 조금 내 느낌에 더 맞게 바꿔 보았다.
어려웠던 점 & 극복 방법 🎈
-
내가 지금까지 배웠던 지식들은 많았지만 그것을 응용해서 내 프로젝트에 적용한다는 것이 쉽지만은 않았다. 또한 하다보니 배운 것들도 물론 사용하지만, 그 이상으로 개인적으로 찾아보아야 하는 부분이 더 많았던 것 같다.
개발자들은 모두 구글링에 아주 익숙해진다고 하는데 나도 그걸 조금은 경험해본 것 같다. stackflow와 같은 코드를 보면서 이해를 하려고 노력해보기도 하고 새로운 개념들을 정말 많이 배웠다. -
어려운 개념의 경우에는 피드백, 질문을 통해서 더 알아갈 수 있었다. 그리고 유투브나 velog, tistory등 다양한 페이지에 사람들이 내가 하는 고민들이나 겪는 오류들을 해결하는 방법을 세세하게 적어두어 해결할 수 있었다.
보완하고 싶은 부분 🎈
-
location2.html에서 오류가 하나 있었는데 getInfo함수가 xhr이라 이미 비동기적으로 실행을 하고 있었다. 그렇기 때문에 그 함수를 fastest_way()함수에 Request()방식을 이용해 넣어야 한다고 튜터님께서 피드백을 해주셨다. 그런데,,, javascript에 url request하는 게 아직은 나에게는 어려워서 일단은..보류해두었다. 사실은 그래서 계속 default값인 '반포한강공원'만 결과로 나온다..😮
-
로컬에서 서버로 옮기는 것은 했는데, 문제는 내 서버가 http로 작동한다는 점이었다. 내가 만든 페이지들이 주로 지도 api를 사용하고 geolocation을 사용하기 때문에 사용자의 위치정보를 받아와야 한다. 그래서 secure only 에러가 계속 뜨는 것이었다.
http를 https로 바꾸기 위해 아래 페이지에서 설명하는 것 뿐만 아니라 다양한 페이지들을 찾아보고 그대로 aws에서도 해보고 SSL인증서도 받아서 해보고 했는데 실패했다. 그래서 그 부분은 후에 다시 하고 싶다.
멋지네요