[항해99] 1주차 회고 WIL (Weekly I Learned)

1주차를 마무리하며 배운것 / 느낀것 / 내게 아쉬웠던 것을 기록하고자 한다.

 

 

1. 배운점

 #스크래핑(크롤링)

db = client.dbsparta

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://www.google.com/travel/things-to-do/see-all?g2lb=2502548%2C2503780%2C2503806%2C4258168%2C4270442%2C4306835%2C4317915%2C4328159%2C4371335%2C4401769%2C4419364%2C4429192%2C4463666%2C4482194%2C4482438%2C4486153%2C4491350%2C4495816%2C4504283%2C4270859%2C4284970%2C4291517&hl=ko-KR&gl=kr&dest_mid=%2Fm%2F06qd3&dest_state_type=sattd&dest_src=ts&sa=X&ved=2ahUKEwjZgN_v0Y7vAhXI62EKHUDACGYQuL0BMAN6BAgQEDg#ttdm=37.433657_127.251424_9&ttdmf=%252Fm%252F07zj3q',headers=headers)

soup = BeautifulSoup(data.text, 'html.parser')
#스크래핑을 위해 beautifulSoup 이용

#구글 명소지에서 뼈대를 copy selector로 복사
divs = soup.select('#yDmH0d > c-wiz.zQTmif.SSPGKf > div > div.lteUWc > div > c-wiz > div > div > div.zpbwad.mNY2uf > div:nth-child(3) > c-wiz > div > div > div > div > div')

# 명소지, img url, 상세설명, 별점(나중에 추가함) 크롤링
for div in divs:
    name_tag = div.select_one('div > div > div.Ld2paf > div.GwjAi > div.rbj0Ud').text
    img_tag = div.select_one('div > div > div.Ld2paf > div.kXlUEb').img
    img_src = img_tag.get("data-src")  # 이미지 경로
    description = div.select_one('div > div > div.Ld2paf > div.GwjAi > div.nFoFM').text

#이거를 place,img_url,description 이라는 항목으로 몽고디비에 저장(robo 3t에서 확인) 
    doc = {
        'place':name_tag,
        'img_url':img_src,
        'description': description
    }
    # insert를 통해 db 전달
    db.travel_final.insert_one(doc)

 

 #진자문법 (좋아요 하트 누르면 좋아요 되면서 마이페이지에 저장되게 하는 것) 

@app.route('/')
def home():
    token_receive = request.cookies.get('mytoken')
    try:
        places = list(db.places.find({})) # places db(크롤링 db) 에서 장소값 가져오기
        likes = list(db.likes.find({})) #likes db에서 좋아요(하트) 값 가져오기
        payload = jwt.decode(token_receive, SECRET_KEY, algorithms=['HS256'])
        user_info = db.users.find_one({"username": payload["id"]})

        for place in places:
            place['like'] = 0 # 모든 좋아요 버튼을 빈 하트로 기본값 세팅, 빈 하트 = 0 , 꽉찬 하트 = 1

        print(payload['id'])

        for place in places: 
            for like in likes:
                if place['_id'] == like['post_id']: # plcae를 좋아요한 사람이 like에 좋아요값이 있어서 일치한다면
                    if like['username'] == payload['id']: #좋아요의 id값과 user db에서 username 값이 같다면
                        place['like'] = 1 #좋아요 버튼을 꽉찬 하트로 세팅, 꽉찬하트 = 1, 빈 하트 = 0

        return render_template('index.html', user_info=user_info, places=places, likes=likes, heartbyme=place['heart_by_me'])

<div class="cards">
    {% for place in places %} # 진자문법의 for문으로 places db에서 place값으로 돌면서 시작
        {% if place.like == 1 %} #장소 좋아요값이 있다면, mypage에 아래 카드가 나타나게 한다. 현재 시트는 mypage.html
            <div class="card" style="width: 300px; height:400px;" id="{{ place._id }}">
            <img class="card-img-top" src="{{ place.imageurl }}" style="width:300px; height:200px;" alt="여행지사진">
            <div class="card-body">
                <h5 class="card-title">{{ place.title }}</h5>
                <p class="card-text">{{ place.description }}</p>
                <p class="rate">평점: {{ place.rate }}</p>
                {% if place.like == 1 %} # 장소의 좋아요 값이 1이라면(꽉찬하트) 눌렀을때 토글함수로 fa fa-heart 보이게 함
                <a class="level-item is-sparta" aria-label="heart" onclick="toggle_like('{{ place._id }}', 'heart')">
                    <i class="fa fa-heart" aria-hidden="true"></i>
                </a>
                {% else %} #만약 아니라면(진자문법 if문 사용) 토글함수로 빈 하트 fa fa-heart-o 나타나게 하기
                <a class="level-item is-sparta" aria-label="heart" onclick="toggle_like('{{ place._id }}', 'heart')">
                    <i class="fa fa-heart-o" aria-hidden="true"></i>
                </a>
                {% endif %}
            </div>
        </div>
        {% endif %}
    {% endfor %}
</div>

  #AJAX(제이쿼리)

#좋아요 값이 0일때(빈하트, 좋아요 안눌렀을 때), ajax post 요청 // togle_like안에 있음 // 윗부분 생략 

$.ajax({
     type: "POST",
     url: "/update_like",
     data: {
     	post_id_give: post_id,
     	type_give: type,
     	action_give: "unlike"
     },
     success: function (response) {
		console.log("unlike")
		$i_like.addClass("fa-heart-o").removeClass("fa-heart") # 빈하트를 add. 꽉찬하트를 remove
		$a_like.find("span.like-num").text(response["count"])
      }
})

 #오류해결

 

 이 부분은 아예 오류 해결 게시판에 정리해서 쓸 예정

 

 #구글링

 

 다 나온다...구글은 최고다. 외쳐 갓구글!!!!!!!!!! 

 

 

---

2. 느낀점
 지식은 없어도 구글에서 찾아서 따라 하면 똑같이 구현은 된다.
 코딩은 달달달 외우는 것이 아니다. 손에 익히는 것이다. 
 시간날 때 IT 관련 서적을 좀 읽고 시장이나 기술 변화에 대한 관심을 갖자.

 너무 오래 혼자하지 말자. 2시간 넘게도 모르면 힌트나 조언을 구한다. 내가 놓친것을 남들은 보자마자 발견해 줄 수 있다.  

 

---

3. 아쉬웠던 점
 1) 조장으로서 프로젝트 초반 갈피를 잘 못잡고 목표,역할분담을 명확하게 하지 못한 점

 

다음 프로젝트에서는 똑같은 것 여러명이 하지말고, 효율을 위해 각자 파트를 쪼개자! 어차피 그 사람이 하면 나도 할 줄 안다. 이것도 저것도 해보려는 욕심이 결국 시간 부족으로 구현할 수 있는 추가 기능을 구현하지 못한다

 

2) 알고리즘 스스로 못풀어서 답안 보고 겨우 푼 것

 

알고리즘을 못 푼 가장 첫번째 이유! -> 파이썬 문법에 익숙지 않음 int, str 형변환부터 리스트 [] 의 개념도 모르는 상태에서 무작정 for문 돌리려고 하니깐 막혔다.  알고리즘 답을 먼저 보고, 답에 있는 함수를 찾아보고, 내것이 될 때까지 안보고 맞출 때까지 반복했다. 이해가 안되면 일단 외우고 이해하려 했다. 8개중에 지금 5개정도는 안보고 할 수 있다. 나머지 3개도 안보고 할 수 있을때까지 연습해야지

3) EC2 서버 사서 연결해야하는데 localhost를 EC2 ip 바꾸는거 몰라서 결국 팀원 서버로 연결하고, 나중에 발견한 것

 

이것도 오류 해결에 쓸 예정. 오류는 아니지만.. 내가 겪었던 어리석음을 또 범하지 않기 위해서ㅠㅠ