스파르타 코딩클럽
프로젝트 챌린지 2주차 개발일지
(2021.09.11 ~ 2021.09.17)
#코딩 개발일지 시작의 한마디
- 이번주는 고난과 역경의 주간이다. 구현해야 하는 기능은 몇개 안되지만 정말 하나해결하는데 며칠씩 걸렸다...
# 개발 업무내용
[이번 주 토의 내용]
- 구체적인 기능 구현 협의
- 조원 별 각자 역할 배분 및 기능 구현
- 나의 역할 - 시작페이지, 메인페이지 백엔드
- 시작페이지 - db데이터를 활용해 검색 - 첫째주 完
- 카테고리 키워드에 맞게 카드덱 출력하기(db활용)
- 출력된 카드덱에 해당하는 지역을 지도에 표시하기
- 시작페이지에서 지역태그 클릭 시 해당 지역 지도 및 카드 출력
- 나의 역할 - 시작페이지, 메인페이지 백엔드
# 새로 학습한 내용
<첫번째>
카테고리 키워드에 맞게 db 정보를 가져와 카드덱 출력하기!
먼저 임시 데이터 가져오기, for i in doc 부터는 꼭 필요한 과정인지는 잘모르겠으나 그냥 입력해봤다
collection = db.collection
doc = collection.find({})
# 임시 데이터
db.travelInfo.insert_one({'img_url': 'http://ojsfile.ohmynews.com/STD_IMG_FILE/2019/0510/IE002495204_STD.jpg',
'title': '남산타워', 'info': '가족', 'review': '가족', 'star': '가족', 'hashtag': '가족1, 서울',
'address': '서울 용산구 용산동2가 산 1-3'})
db.travelInfo.insert_one({'img_url': 'http://ojsfile.ohmynews.com/STD_IMG_FILE/2019/0510/IE002495204_STD.jpg',
'title': '경복궁', 'info': '가족2', 'review': '가족2', 'star': '가족2', 'hashtag': '가족2, 서울',
'address': '서울 종로구 사직로 161'})
db.travelInfo.insert_one({'img_url': 'http://ojsfile.ohmynews.com/STD_IMG_FILE/2019/0510/IE002495204_STD.jpg',
'title': '63빌딩', 'info': '아이', 'review': '아이', 'star': '아이', 'hashtag': '아이1, 서울',
'address': '서울 영등포구 63로 50'})
db.travelInfo.insert_one({'img_url': 'http://ojsfile.ohmynews.com/STD_IMG_FILE/2019/0510/IE002495204_STD.jpg',
'title': '서울역', 'info': '친구', 'review': '친구', 'star': '친구', 'hashtag': '친구1, 광주',
'address': '서울 용산구 한강대로 405'})
db.travelInfo.insert_one({'img_url': 'http://ojsfile.ohmynews.com/STD_IMG_FILE/2019/0510/IE002495204_STD.jpg',
'title': '여의도 한강공원', 'info': '경관', 'review': '경관', 'star': '경관', 'hashtag': '경관1, 서울',
'address': '서울 영등포구 여의도동 85'})
db.travelInfo.insert_one({'img_url': 'http://ojsfile.ohmynews.com/STD_IMG_FILE/2019/0510/IE002495204_STD.jpg',
'title': '서울숲', 'info': '자연', 'review': '자연', 'star': '자연', 'hashtag': '자연1, 광주',
'address': '서울 성동구 성수동1가 678-1'})
db.travelInfo.insert_one({'img_url': 'http://ojsfile.ohmynews.com/STD_IMG_FILE/2019/0510/IE002495204_STD.jpg',
'title': '서울맛집', 'info': '맛집', 'review': '맛집', 'star': '맛집', 'hashtag': '맛집1, 서울',
'address': '서울 성동구 성덕정15길 6-9'})
for i in doc:
img_url = i["img_url"]
title = i["title"]
info = i["info"]
review = i["review"]
star = i["star"]
hashtag = i["hashtag"]
travel_db_doc = {
'img_url': img_url,
'title': title,
'info': info,
'review': review,
'star': star,
'hashtag': hashtag
}
db.travelInfo.insert_one(travel_db_doc)저번주에도 사용했던 임시데이터. hashtag는 ','로 구분해서 넣어줬다.
본격적으로 카테고리에 맞게 해시태그를 가져와 카드 출력하기
<python 코드>
1주차 검색할 때 코드와 비슷하다. get으로 db 데이터 가져오기
## Title.html 연결은 필수!
@app.route('/title')
def mainpage():
return render_template('Title.html')
## db에서 해시태그에 해당하는 데이터리스트 가져오기
@app.route('/category', methods=['GET'])
def show_category():
keywordData = request.args.get('hashtag')
myquery = list(db.travelInfo.find({'hashtag':{'$regex':keywordData}}, {'_id': 0}))
# 디버깅은 필수!
# print(keywordData)
return jsonify({'myquery': myquery})
<html 코드>
ajax로 get을 받아서 데이터를 얻은 다음 temp_html로 카드양식을 가져와 데이터를 넣어줬다. 그리고 나서 카드 자리인 #ct1의 div에 카드 양식 넣어주고, 카테고리에는 함수 넣어주기!
'함수(data)' 형태는 프로젝트를 하면서 새로알게 되었는데 키워드를 이용할 때 정말 유용하다.
// 카테고리에 seleccategory(data)함수를 걸어줬다.
<div>
<ul id="scategoryLit" class="home_list">
<div class="wrap">
<button onclick="selectCategory('가족')" class="button">가족과 함께</button>
</div>
<div class="wrap">
<button onclick="selectCategory('아이')" class="button">아이와 함께</button>
</div>
<div class="wrap">
<button onclick="selectCategory('친구')" class="button">친구와 함께</button>
</div>
<div class="wrap">
<button onclick="selectCategory('경관')" class="button">경관이 멋진</button>
</div>
<div class="wrap">
<button onclick="selectCategory('자연')" class="button">자연속 힐링</button>
</div>
<div class="wrap">
<button onclick="selectCategory('맛집')" class="button">맛집 추천</button>
</div>
</ul>
</div>
// 카드가 들어가는 자리
<div id="ct1">
</div>
<script>
// 카테고리 클릭시 카드 보이기
function selectCategory(data) {
$('#ct1').empty();
$.ajax({
type: "GET",
url: "/category",
data: {"hashtag": data},
success: function (response) {
let categories = response['myquery']
let address_list = [] //나중에 지도와 관련된 코드
for (let i = 0; i < categories.length; i++) {
let photo = categories[i]['img_url']
let spot_name = categories[i]['title']
let rating = categories[i]['review']
let address = categories[i]['address'] //나중에 지도와 관련된 코드
address_list.push({'address': address, 'spot_name': spot_name}) // 나중에 지도와 관련된 코드
let temp_html = `<div class="card-deck">
<div class="col" >
<div class="card">
<img src="${photo}"
class="card-img-top"
alt="...">
<div class="card-body">
<h5 class="card-title">${spot_name}</h5>
<div class="star-ratings">
<div class="star-ratings-fill"
:style="{width: ratingToPercent + '%'}">
<span>★</span><span>★</span><span>★</span><span>★</span><span>★</span>
</div>
<div class="star-ratings-base">
<span>★</span><span>★</span><span>★</span><span>★</span><span>★</span>
</div>
</div>
<p class="card-text text-truncate">${rating}</p>
</div>
<a data-toggle="modal" data-target="#editModal">자세히<span class="glyphicon glyphicon-pencil"></span></a>
</div>
</div>
</div>`
$('#ct1').append(temp_html) // 나중에 지도와 관련된 코드
}
addMarker(address_list)
}
})
}
</script>
이렇게 하면 오른쪽 카테고리를 클릭했을 때 해당 해시태그에 해당하는 카드가 나왔다. 이 카드의 키워드는 '가족'
<두번째>
위에 키워드에 맞게 카드가 출력 되는것 같이 지도에 마커 표시 해주기!! 이것은 결국 같은 조인 다른분의 손에서 완성되었다. 카카오 지도 api에 거의 다 나와있지만 나는 결국 완성을 못시켰다ㅠ_ㅠ
나도 아직 다른 조원분이 작성했던 코드를 공부 중이라 내가 알게 된 사실만 기록해볼려고 한다.
카카오 지도 API : https://apis.map.kakao.com/web/
샘플, 위자드, 가이드 등이 잘 되어 있다. script를 복사해다 쓰면 되서 편하다.
사용 전 꼭 페이지 왼쪽 아래에서 키를 발급받아야 한다. 애플리게이션 추가하기를 눌렀고 앱이름, 사업자명에 모두 내 이름을 넣었다.
그리고 만들어진 카드를 클릭하면 아래와 같은 화면이 뜨는데 앱키를 바로 사용하지 않고 본인이 사용 할 플랫폼을 등록해야한다.
플랫폼은 왼쪽 메뉴에서 등록할 수 있으며 사이트는 내가 만들고 있는 아직 서버가 없는 주소를 입력했다. 플랫폼 등록이 완료되면 이후 키 사용하기!
또 한가지 꿀팁! 가이드나 위자드에 api script가 있는데 여기서는 친절하게 발급받은 APP KEY를 입력하라고 되어 있다. 여기에 위에서 받은 Javascript키를 넣으면 되는데
<script src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY를 사용하세요"></script>
다른 라이브러리들은 왕초보인 나는 사용하기가 너무 어려웠다. 오류도 많이나고...... 지도에서 원래는 좌표 작성해서 마커를 찍는데 이를 주소로 바꾸어 표시하는 코드가 있다(가이드에 있음). 이코드를 사용하기 위해서는 2번째 라이브러리가 필요한데 사용방법은 이렇다.
apikey 부분에 내 자바스크립트 키를 넣고 꼭!!!! services 라이브러리는 맨위에 올려야 한다. 이유는 모르지만 해결못했던 오류가 사라진다. 오류는 기억안나지만 구글링으로 찾아낸 해결방법!
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=자바스크립트키&libraries=services"></script>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=자바스크립트키"></script>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=자바스크립트키&libraries=LIBRARY"></script>
<세번째>
역시 진짜 이틀 내내 찾았지만 너무 못찾아서 사실 개발자로 일하고 있는 친동생에게 물어봐서 해결한 부분이다......알고보니 이상한데서 삽질하고 있었다.
기능은 시작페이지에서 지역태그를 클릭하면 메인페이지로 넘어가면서 해당지역 카드와 그 지역을 나타내는 마커가 지도에 표시 되는것!
나는 페이지를 이동하면서 어떻게 키워드에 맞게 함수를 실행시킬지 계속 찾았는데 동생은 듣자마자 get으로 데이터를 받으라고 한다. get으로 받으면 주소창에 아래와 같이 페이지 이름이나 정보가 담기는데 이걸 활용하는 방법!!!!!!!
여기서는 시작페이지 HTML, 메인페이지 HTML, python 파일이 모두 필요하다
<python 코드>
## get으로 데이터 받기
@app.route('/areatag')
def areatag():
return render_template('Title.html')<시작페이지 html/script>
<div class="home_listContainer">
<ul id="categoryList" class="home_list">
<li><a onclick="area('서울')">#서울</a></li>
<li><a onclick="area('경기')">#경기</a></li>
<li><a onclick="area('인천')">#인천</a></li>
<li><a onclick="area('부산')">#부산</a></li>
<li><a onclick="area('대구')">#대구</a></li>
<li><a onclick="area('광주')">#광주</a></li>
<li><a onclick="area('대전')">#대전</a></li>
<li><a onclick="area('울산')">#울산</a></li>
<li><a onclick="area('세종')">#세종</a></li>
<li><a onclick="area('강원')">#강원</a></li>
<li><a onclick="area('충청북도')">#충청북도</a></li>
<li><a onclick="area('충청남도')">#충청남도</a></li>
<li><a onclick="area('전라북도')">#전라북도</a></li>
<li><a onclick="area('전라남도')">#전라남도</a></li>
<li><a onclick="area('경상북도')">#경상북도</a></li>
<li><a onclick="area('경상남도')">#경상남도</a></li>
<li><a onclick="area('제주')">#제주</a></li>
</ul>
</div>
<script>
// data 넣기, href 넣기
function area(data) {
// /areatag는 python의 데이터, area는 임의 문자
window.location.href = "/areatag?area="+data;
}
</script>
// a태그에 바로 href를 넣지 않고 href에 데이터를 넣어서 메인페이지로 보내주기
// 앞서 유용하다고 말했던 (data)를 또 썼다.
<메인페이지 html/script>
<script>
// 메인페이지로 화면 전환 시 바로 실행되는 함수
$(document).ready(function () {
let areatag = window.location.href; // 경우에 따라 window.location.search로 쓰기도, input태그 사용시
let getarea = areatag.split('='); //getarea를 '='를 기준으로 두 배열 요소로 분리
let getOnlyArea = getarea[1]; //분리한 배열 중 두번째 요소 변수에 넣기
// console.log(getarea)
// console.log(getOnlyArea)
let areaTag = decodeURI(getOnlyArea)
selectCategory(areaTag)
});
</script>
이렇게 해서 우여곡절 끝에 작성한 코드!!!
# 마무리 한마디
강의를 다 들었을 때 내가 개발을 할 수 있을까하는 확신이 없어 프로젝트에 참여하게 됬는데, 이번프로젝트가 정말 도움이 많이 됐다. '이렇게 하면 되구나!'하는 걸 느끼기 되었다. 함께하는 팀원들도 모두 잘해주어서 모두 열심히 해주어서좋았다. 다만 처음 마음먹었던거에 비해 적극적으로 참여하지 못한 나에게 조금 서운하다.
프로젝트가 끝난게시원섭섭하지만 결과적으로 시간의 압박으로 완벽히 완성을 못한게 너무 아쉽다ㅜㅜ 이번경험을 살려서 더욱 멋진 서비스를 만들어봐야겠다.
# 우리가 만든 프로젝트
'기록 > 회고' 카테고리의 다른 글
| [TIL] 21.11.01 항해 1일차 (0) | 2021.11.02 |
|---|---|
| 21.10.28 개발일지 (0) | 2021.10.28 |
| [스파르타 코딩클럽] 프로젝트 챌린지 1주차 개발일지 (0) | 2021.09.14 |
| [스파르타 코딩클럽] 내일배움단(웹개발종합반) 5주차 기록 (0) | 2021.09.07 |
| [스파르타 코딩클럽] 내일배움단(웹개발종합반) 4주차 기록 (0) | 2021.09.03 |
