10.12. 미니캠프_웹개발종합반(4-1~4주차 끝)

• 서버란?
  컴퓨터에 돌아가고 있는 엑셀, 워드 같은 하나의 프로그램

• static : css 나 img 파일 담아둘 때 쓰는 파일
• templates : html 파일 담아둘 때 쓰는 파일

• 프레임워크
  • 남이 만들어 놓은 것을 가져다 쓰는 것
  • 남이 짜둔 규칙이나 틀 안에서 자유롭게 코딩을 자유롭게 하는 것
  • 하나의 프레임워크 안에서 짜게 됨
• 라이브러리
  • 내가 내 마음대로 짜는데 남이 만들어 놓은 것을 중간에 자유롭게 갖다 쓰는 것
  • 백개든 천개든 갖다 쓸 수 있음

---

Flask

• Flask 시작 코드

from flask import Flask
app = Flask(__name__)

@app.route('/')
def home():
   return 'This is Home!'

if __name__ == '__main__':  
   app.run('0.0.0.0',port=5000,debug=True)

1. render_template
   templates 폴더 안에 있는 index.html 파일을 갖다 클라이언트에게 주는 flask 함수

API코드 에디터에 적은 후 콘솔창에서 Ajax코드로 확인
▼

2. GET요청

• 데이터 조회 요청할 때
• GET요청 API코드

@app.route('/test', methods=['GET'])
def test_get():
   title_receive = request.args.get('title_give')
   print(title_receive)
   return jsonify({'result':'success', 'msg': '이 요청은 GET!'})

• GET요청 확인 Ajax코드
  콘솔창에서 확인

$.ajax({
    type: "GET",
    url: "/test?title_give=봄날은간다",
    data: {},
    success: function(response){
       console.log(response)
    }
  })

3. POST요청
   데이서 생성, 변경, 삭제 요청할 때

• POST요청 API코드

@app.route('/test', methods=['POST'])
def test_post():
   title_receive = request.form['title_give']
   print(title_receive)
   return jsonify({'result':'success', 'msg': '이 요청은 POST!'})

• POST요청 확인 Ajax코드
  콘솔창에서 확인

$.ajax({
    type: "POST",
    url: "/test",
    data: { title_give:'봄날은간다' },
    success: function(response){
       console.log(response)
    }
  })

모두의 책리뷰

1. 클라이언트, 서버 확인
2. 서버 만들기
3. 클라이언트 만들기
4. 동작테스트

---

window.location.reload();
→ 자동 새로고침

$(document).ready(function () {
함수명();
});
→ 매개변수로 넣은 콜백 함수 실행

1. POST - 리뷰 저장하기

1. 클라이언트, 서버 각각 어디에 뭐가 있는지 확인

2. 서버 만들기
   1) 제목, 저자, 리뷰 각각 sample_give 이름만 바꾸어 데이터 받을 수 있게 추가
   2) insert 이용하여 db에 저장 및 msg 변경

   @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) 적절한 메시지로 변경

3. 클라이언트 만들기
   1) jQuery로 값 가져오기

   # id는 글씨를 넣는 input의 각각 id 찾아서 적기
   function makeReview() {
     let title = $('#title').val()
     let author = $('#author').val()
     let review = $('#bookReview').val()
   }

   2) Ajax에 실어서 보내기

   # 서버에서 받기로 한 이름 (title_give) → key
   # jQuery로 값 가져온 변수명(title) → value
   
   data: {title_give : title, author_give : author, review_give : review},

4. 동작 테스트
   1) 브라우저에 제목, 저자, 리뷰 등 적고 저장버튼 누르면 alert 뜨는지 확인
   2) alert 뜨면 robo 3T 가서 DB 저장되었는지 확인

★서버에서 데이터 받는 이름 적은 후, 클라이언트에서 데이터 키:벨류 적은 후 콤마 잊지말기★

1. GET - 리뷰 보여주기

get은 ?로 데이터 가져간다.
가져갈 데이터가 없으면 ?부터 이후 값 안적어도 됨

1. 클라이언트, 서버 각각 어디에 뭐가 있는지 확인

2. 서버 만들기
   1) DB에서 리뷰 가져오기 (클라이언트에서 받을 데이터 없음)
   2) 리뷰는 여러개 맞기 : find 이용하여 찾기

    same_ages = list(db.users.find({'age':21},{'_id':False}))

   3) 변수명 변경
   4) 메시지 내려줄 필요 없으므로 key 아무이름으로 변경 후 value에 바꾼 변수명 넣기

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

3. 클라이언트 만들기
   1) all_reviews 값 가져오기

   success: function (response) {
   	let reviews = response['all_reviews']
     console.log(reviews)
   }

   2) 값 잘 가져오는지 콘솔에서 확인
   3) 반복문 돌리기 (콘솔 확인 후 key값 가져오기)

   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']
   
           console.log(title,author,review)
       }
   }

   4) 값 잘 가져오는지 콘솔에서 확인
   5) html 붙히기

   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. 동작 테스트
   1) 브라우저에 제목, 저자, 리뷰 등 적으면 보이는지 확인
   2) 보이면 robo 3T 가서 DB 저장되었는지 확인

조각 기능 구현

- API 설계 후 필요한 기술을 프로젝트 시작 전에 미리 만들어서 테스트

1. meta태그 스크래핑
   1) og:image / og:title / og:description 크롤링
   2) 개발자도구에서 og:image / og:title / og:description copy selector 후 붙혀넣기
2. print했는데 안나와오는 경우
   1) 브라우저에서 나오는 meta태그 순서와 파이썬 코드가 접속했을 때 meta태그 순서가 다르기 때문
3. 해결 방법
   1) 원래 붙혀 넣은 자리에 'meta[property="og:image / title / description"]' 넣기 (대괄호 안은 meta태그 뒤에 있는 속성과 값)

나홀로 메모장

1. URL, COMMENT 서버에 보낸 후 서버에서 그 데이터 저장
2. 데이터 보여주기 
 1) 이미지 2) 제목 3) 요약 4) 코멘트 5) 링크 → 저장되어야 할 것들

1. POST - 메모하기

1. 클라이언트, 서버 연결 확인

2. 서버 만들기
   1) url / comment_give로 데이터 받을 수 있게

   url_receive = request.form['url_give']
   comment_receive = request.form['comment_give']

   2) meta태그 크롤링
   3) url 부분 지우고, headers 안에 url을 url_receive로 변경

   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(url_receive, headers=headers)
   
   soup = BeautifulSoup(data.text, 'html.parser')
   
   ogtitle = soup.select_one('meta[property="og:title"]')['content']
   ogimage = soup.select_one('meta[property="og:image"]')['content']
   ogdesc = soup.select_one('meta[property="og:description"]')['content']

   4) insert 사용
   5) msg 변경

3. 클라이언트 만들기
   1) jQuery로 값 가져오기

   let url = $('#post-url').val()
   let comment = $('#post-comment').val()

   2) 데이터 값 넣기 (Ajax에 실어서 보내기)

   data: {url_give:url, comment_give:comment}

4. 동작 테스트
   1) 브라우저에 alert 뜨는지 확인
   2) alert 뜨면 robo 3T 가서 DB 저장되었는지 확인

1. GET - 보여주기

1. 클라이언트, 서버 연결 확인
2. 서버 만들기
   1) 받을 데이터 없음
   2) 받을 데이터가 없으므로 다 지우고 find 사용
   3) 변수명 변경
   4) key(기억할 수 있는 이름):value(바꾼 변수명) 넣기

   articles = list(db.articles.find({},{'_id':False}))

3. 클라이언트 만들기
   1) key(기억할 수 있는 이름) 값 가져오기

   let articles = response['all_articles']

   2) 값 잘 가져오는지 콘솔에서 확인
   3) 반복문 돌리기 (콘솔 확인 후 key값 가져오기)

   for (let i = 0; i < articles.length; i++) {
       let comment = articles[i]['comment']
       let desc = articles[i]['desc']
       let image = articles[i]['image']
       let title = articles[i]['title']
       let url = articles[i]['url']
   }

   4) 값 잘 가져오는지 콘솔에서 확인
   5) html 붙히기

   let temp_html = `<div class="card">
                       <img class="card-img-top" src= ${image} alt="Card image cap">
                       <div class="card-body">
                       <a target="_blank" href="${url}" class="card-title">${title}</a>
                       <p class="card-text">${desc}</p>
                       <p class="card-text comment">${comment}</p>
                   </div>`
   $('#cards-box').append(temp_html);

4. 동작 테스트
   1) 브라우저에 모두 잘 보이는지 확인
   2) 보이면 robo 3T 가서 DB 저장되었는지 확인

table tag

• table / tr / tr / th

1. tr : 테이블의 행
   
   
2. tr : 테이블의 열 (데이터를 표현)
   1) 보통 굵기 글씨
   2) 왼쪽 정렬(left-aligned)
   
   
3. th : 테이블의 타이틀
   1) 굵은 글씨(bold)
   2) 가운데 정렬(center)

• th 태그의 scope 속성

1. 셀의 종류 명시
   
   
2. 속성 값
   1) col : 해당 셀이 열(column)을 위한 헤더 셀임을 명시
   2) row : 해당 셀이 행(row)을 위한 헤더 셀임을 명시
   3) colgroup : 해당 셀이 열의 그룹을 위한 헤더 셀임을 명시
   4) rowgroup : 해당 셀이 행의 그룹을 위한 헤더 셀임을 명시