23년 2월 9일
배운 것
오늘 내가 배운 것은 이미 크롤링 했던 것에다 제목에 링크를 걸어줘서 해당 페이지로 이동 한 것이랑 토이 프로젝트 완성 하는 것이였다. 또한 내일 입학 테스트를 위한 예상 문제도 풀어보았다.
시도해본 것
그 전에 어제 3일차 로그인 입력 했을때 로그인 성공 실패 출력하는 것을 구현 하는데 끝내 해결을 하지 못했었다. 그치만 오늘 일어나서 팀원 한분이 같이 3시간정도 더 생각을 해 보았다. 여러가지 if 조건을 걸어보면서 경우의 수도 다 따져보고 했지만 여전히 실패했다. 하지만 팀원 한분이 거의 작동을 하는 데 성공을 했고, 나는 여기서 조금 더 깔끔하게 바꿔서 구현은 완료하였다.
지금 바로 보이는 아래가 성공을 한 코드다.
function check() {
$.ajax({
type: "GET",
url: "/loginchk",
data: {},
success: function (response) {
let rows = response['user_list']
let id = $('#LOGIN_ID').val()
let pw = $('#LOGIN_PW').val()
for (let i = 0; i < rows.length; i++) {
let userId = rows[i]['userId']
let userPw = rows[i]['userPw']
// console.log(userId,userPw)
if (userId == id && userPw == pw) {
alert('로그인!')
localStorage.setItem('account', userId); //세팅 성공
location.href = '/main'
break
} else if (userId == id && userPw != pw || userPw =='') {
alert('pwck') // 비밀번호만 불 일치
break
} else if (userPw == pw && userId != id || userId=='') {
alert('idck') // 아이디만 불 일치
break
}
// if (userId =='' || userPw =='') {
// alert('idpwcck')
// break
// }
}
}
});
}다만, 로그인, 패스워드 둘 다 입력을 안하면 alert을 구동을 하는 것은 끝내 해결하지 못했지만 그래도 기초적으로 아이디 비밀번호 입력 했을때, 몽고디비에 있는 아이디, 패스워드 데이터를 가져와 비교해서 alert를 표시 하는 것은 성공 했고, 로그인 완료 되면 메인 화면으로 돌아가게 하는 것까지 완료 하였다.
로그인 기능을 해결 하고 점심이 지나서 첫날에 영화 순위 크롤링을 했었는데 여기에 다 제목에 링크를 걸어주는 것을 추가 하는 것을 시도를 하였다. 이 부분은 어려운 점은 없었지만 각 제목에 맞는 url를 추가로 데이터를 가져가야 했었기에 새로 다시 크롤링을 했어야 했다.
먼저 url 크롤링 추가까지 구현한 코드이다.
# 크롤링 데이터 (다음 영화 정보)
headers = {
'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64)AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36'}
data = requests.get('https://movie.daum.net/ranking/boxoffice/weekly',
headers=headers)
soup = BeautifulSoup(data.text, 'html.parser')
movies = soup.select('#mainContent > div > div.box_boxoffice > ol > li')
for movie in movies:
a = movie.select_one('div > div.thumb_cont > strong > a')
b = movie.select_one('div > div.thumb_cont > span > span:nth-child(1) > span')
c = movie.select_one('div > div.thumb_item > div.poster_movie > img')
if a is not None:
category = '영화' # 한 종류의 카테고리를 나타낼때는 변수형으로
title = a.text # 텍스트 추출
date = b.text # 텍스트 추출
image = c.get('src') # 태그의 속성값을 추출할 때에는 get메소드를 이용한다. [element.get('속성값')]
url = a.get('href') # 태그의 속성값을 추출할 때에는 get메소드를 이용한다. [element.get('속성값')]
print(category, image, title, date, url)
doc = {
'category': category,
'image': image,
'name': title,
'date': date,
'url': url
}
db.movie.insert_one(doc)여기서 추가 한것은 바로 url = a.get('href')와 'url': url이다. url도 제목 카피 했던 곳이랑 동일해서 그대로 링크인 get('href')값을 크롤링을 하였다.
그런 다음에 이제 ajex로 그 값을 받아야 하는데 href를 어떻게 받는지 몰라서 여기서 1시간을 해맸었다. 그렇게 구글링을 하다가 알게 된 것은 바로 a 태그를 써야 한 다는 것을 알게 되었다. 그리 해서 가장 힘들 었던 링크 거는 것을 성공 하였다.
<a href="https://movie.daum.net${url}"><p style="color: blue">${name}</p></a>이렇게 a태그를 쓰니까 적절하게 나왔고 각 크롤링 했던 주소를 자세히 보니까 https://movie.daum.net 까지만 나왔고 그 다음부터 달랐다는 것을 알게 되어서 바로 뒤에다 ${url}를 표시를 하였다. 추가적으로 링크 된 것에다 p태그를 통해서 파란색으로 칠하게 꾸미는 것도 했다.
마지막으로 내일 입학 테스트로 예상문제를 한번 풀어보았는데 상당히 어려웠었다. 기존에 스파르타피디아 각 카드마다 삭제 버튼을 추가 하고 각 카드마다 삭제 버튼을 누르면 해당 카드가 사라지는 것을 구현을 하는 문제 였다. 그래서 다른 팀원들과 함께 풀어봤지만 상당히 어려웠지만, 그래도 2시간이 걸쳐서 코딩 잘하시는 팀원 한분이 해결 해 주셨고, 조언을 받고 나서 스스로 코드를 짜서 해결을 하였다. 구현 완료 된 코드는 다음과 같았다.
먼저 서버 작업부분이다
# POST : 삭제 버튼 서버 구현
@app.route("/movie/delete", methods=["POST"])
def movie_delete():
movies_receive = request.form["button_delete"]
db.movies.delete_one({'title': movies_receive})
return jsonify({'msg': '영화 삭제 완료!'})다음은 ajax 작업 한 부분이다.
function delete_box(title){
$.ajax({
type: "POST",
url: "/movie/delete",
data: {'button_delete': title},
success: function (response) {
alert(response["msg"])
window.location.reload()
}
});
}마지막으로 temp_html안에 추가한 글인데 사실 요 부분이 가장 어려웠었다. 팀원분의 힌트를 얻어서 풀었지만 결국은 해냈다.
<button onclick="delete_box('${title}')">삭제</button> // 삭제 버튼 기능 추가결정적으로 이것저것 시도하면서 성공은 했지만 사실 5주차때 버킷리스트 post 업데이트 부분을 참고하였고, 1시간 정도 더 생각해서 풀었다.
그리고 코딩 잘 하시는 두 분이 추가적으로 기능을 점검 하고 수정을 하여서 완벽하지는 않았지만 마침 내 오늘을 끝으로 토이프로젝트는 성공적으로 마무리 되었다.
해결
오늘 전반적으로 내가 구현을 했던 부분을 전반적으로 모두 마무리 되었다. 완벽하진 않았지만 아이디, 비번 입력했을때 로그인 완료, 실패 유무를 표시해주는 기능을 하였고, 제목에 링크를 추가로 크롤링 한 것이랑 내일 입학테스트 예상문제까지 마무리 하였다.
알게 된 점
처음으로 팀원이랑 협업을 해서 역할을 시작하였다. 코딩 잘 하시는 두분이랑 나를 포함해서 거의 처음이신 한분이랑 같이 총 4명에서 4일간 토이프로젝트를 마무리 하였다. 나도 최선을 다해서 이해하려고 노력을 했고, 특히나 첫날에 했던 크롤링만 해도 4시간 넘게 걸렸는데, 오늘 재 크롤링 시도하니까 1시간만에 끝내서 놀랐었다. 역히 한번 깊게 생각 해 본것은 오래 기억이 난다는 것을 알게 되었고, 특히나 모르는 부분이 있으면 잘 하시는 팀원들한테 조언을 받고 시도를 하니까 마침내 로그인 일부 기능도 구현을 성공을 하였고, 크롤링 전반적으로 다듬는 데도 성공을 하였다. 이처럼 팀원에게 모르는 것을 얘기해주고 조언을 받아 팀 협업에 도움을 받고, 결국에는 스스로 해낼 수 있다는 것을 알게 되었다.
그렇게 토이프로젝트는 완벽하게 완성되지 않은 미완성으로 끝났지만, 그동안 했던 토이프로젝트를 통해서 참고 될 만한 코드들을 많이 수확 하는 계기가 되었다. 이를 경험으로 토요일에 날새서 진행 하는 풀스텍 프로젝트도 코드들을 활용 할 수 있다는 점도 일게 되었다.
앞으로 계획
내일은 대망의 입학테스트가 있는 날이기도 하고 끝나고 나서 약간의 축제가 있다고는 들었다고 했다. 그리고 저녁에 GIT을 공부해서 git 이해를 다시 한번 더 이해하는 시간을 가질 계획이고, 지금까지 토이프로젝트 하면서 짜놓았던 코드들 참고해서 풀스텍 프로젝트도 무사히 잘 되기 희망한다.
