3주차에 크롤링에 대해서 배웠다. 왜 가장 인기있는 주차인지 알 것 같았다.
그러나 저작권문제 등으로 인해 크롤링은 가능한 사이트와 불가능한 사이트가 있다는 것을 알게 되었다. 수업에서는 크롤링할 페이지가 제공되어서 전혀 생각해보지 못했던 문제였다. 연습하고 싶으면 미리 알아보고 조심해야겠다.

🔸프레임워크 VS 라이브러리

• 프레임워크는 남이 만들어 놓은 규칙이나 틀 안에서 내가 자유롭게 코딩하는 것
• 라이브러리는 내가 자유롭게 짜는데 남이 만들어 놓은 것을 몇 개든지 가져다가 쓰는 것
• 즉, 하나의 프레임워크 안에서 코딩을 하면서 라이브러리에서 필요한 것을 갖다가 쓴다고 생각하면 된다.

🔸flask패키지로 서버 만들기

• static폴더 : CSS나 이미지 담아두는 폴더
• templates폴더 : html파일을 담아두는 폴더

🔸“모두의책리뷰” 만들기

💡 만들어져 있는 API 정보
→ 요청 정보 : 요청 URL /review , 요청 방식 = GET
→ 서버가 제공할 기능 : 클라이언트에게 정해진 메시지를 보냄
→ 응답 데이터 : JSON 형식) {'msg': '이 요청은 GET!'}

• API 만들고 사용하기 - 제목, 저자, 리뷰 정보 저장하기(Create → POST)

  1. 클라이언트와 서버 확인하기

  2. 서버부터 만들기
     제목, 저자, 리뷰 정보 받아와서 DB 저장하기 (app.py)

     ## API 역할을 하는 부분
     @app.route('/review', methods=['POST'])
     def write_review():
     	title_receive = request.form['title_give']
     	author_receive = request.form['author_give']
     	review_receive = request.form['review_give']
     	doc = {
     	     'title':title_receive,
     	     'author':author_receive,
     	     'review':review_receive
     	}
     	db.bookreview.insert_one(doc)
     	return jsonify({'msg': '저장 완료!!'})

  3. 클라이언트 만들기
     받은 정보를 서버로 주기 (index.html)

     function makeReview() {
          let title = $('#title').val()
          let author = $('#author').val()
          let review = $('#bookReview').val()
          $.ajax({
               type: "POST",
               url: "/review",
               data: {title_give:title,author_give:author,review_give:review},
               success: function (response) {
                   alert(response["msg"]);
                   window.location.reload();
               }
           })

  4. 완성 확인하기

• API 만들고 사용하기 - 저장된 리뷰를 화면에 보여주기(Read → GET)

  1. 클라이언트, 서버 확인하기

  2. 서버부터 만들기
     DB에서 리뷰 가져와서 보내기

     @app.route('/review', methods=['GET'])
     def read_reviews():
         reviews = list(db.bookreview.find({}, {'_id': False}))
         return jsonify({'all_reviews': reviews})

  3. 클라이언트 만들기
     서버에서 받은 all_reviews를 for문으로 돌면서 리뷰 붙여주기

     function showReview() {
            $.ajax({
                type: "GET",
                url: "/review",
                data: {},
                success: function (response) {
                    let reviews = response['all_reviews']
                    for (let i = 0; i < reviews.length; i++) {
                        let title = reviews[i]['title']
                        let author = reviews[i]['author']
                        let review = reviews[i]['review']
                        let temp_html = `<tr>
                                            <td>${title}</td>
                                            <td>${author}</td>
                                            <td>${review}</td>
                                          </tr>`
                        $('#reviews-box').append(temp_html)
                    }
                }
            })
        }

  4. 완성 확인하기

  
  

🔸나홀로 메모장 만들기

• API설계하기 = 프로젝트 설계
  1. 포스팅API - 카드만들기(creat)
     → 요청정보 : url을 뭘로 할 것인지, 방식은?post 요청데이터는?
     → 서버가 제공할 기능 : 스크래핑한 정보를 DB에 저장
     → 응답 데이터 : API가 정상작동될 때 성공 메시지 보내기
  2. 리스팅API - 저장된 카드 보여주기(read)
     → 요청방식? GET, 요청데이터는 없음
     → 서버 할일 : DB저장된 정보 가져오기
     → 응답 데이터 : 가져온 정보로 카드 만들어서 붙이기
• 프로젝트 준비 - URL 에서 페이지 정보 가져오기(meta태그 스크래핑)
  • meta태그란? 부분에 들어가는, 눈으로 보이는 것(body) 외에 사이트의 속성을 설명해주는 태그들 ex) 구글 검색 시 표시 될 설명문, 사이트 제목, 카톡 공유 시 표시 될 이미지 등
  • API가 잘 설계되었는지 따로 테스트해보고 넣으면 더 좋다!!
• 뼈대 준비하기 (app.py, index.html)
• POST연습 = 메모하기 / GET연습 = 보여주기

🔸4주차 숙제하기 : 원페이지쇼핑몰 완성

• 1,2주차에 했던 원페이지 쇼핑몰에 주문정보를 받고 받은 정보를 DB에 저장하고 DB의 정보를 쇼핑몰 페이지에 보여주기
• 4주차에 배웠던 API를 적용하기
• 모두의 책리뷰와 비슷한 형식이라 강의 자료를 복습하면서 따라해 보았다.
• 꾸준히 숙제를 했으므로 내가 만들었던 쇼핑몰페이지를 이용해서 만들어 보았다.
• 강의 자료와 답지를 보면서 떠듬떠듬 흉내내고 고치느라 몇시간동안 매달린 것 같다. 그래도 답지랑 비교했을 때 거의 똑같았고 구동도 잘 되어서 뿌듯했다.

진도가 나갈수록 점점 어려워지는 것 같다. 숙제하는데도 시간이 점점 더 걸리고... 5주차까지 1회독 끝나면 복습을 해야하는데 어떤식으로 복습을 해야할지 고민이 된다.