4주차 스파르타 코딩 (220218~220228) (강의 들으면서 메모)

4주차 스파르타 코딩

1. 서버를 직접 만들 예정

서버 = 컴퓨터에 돌아가고 있는 하나의 프로그램

로컬개발환경 = 같은 컴퓨터에 서버도 만들고 요청도 만듬. 클라이언트랑 서버랑 같은 것

3. 서버를 만들 때 프레임워크라는 것을 가져다 쓰는 데 보통 flask라는 프레임워크를 쓴다
   flask 서버를 돌리는 파일은 app.py라고 이름 짓는다.
   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)

#http://localhost:5000/했을 때 this is home!나오면 잘된 것.
http://localhost:5000/으로 내가 지금 내 컴퓨터에서 서버를 돌리고 있는 것
그리고 내가 지금 내 컴퓨터에서 다른 브라우저를 열어가지고 들어간것
5000은 포트

4. #html파일 주기
   html 다쓰기에는 피곤
   정해진 폴더 구조를 이용
   static, templates 파일을 추가로 만듬
   static은 css나 이미지 파일들을 담아둘 때 쓰는 것
   templates는 html을 담아두는 곳 #중요

from flask import Flask, render_template
app = Flask(name)

@app.route('/')
def home():
return render_template('index.html')

if name == 'main':
app.run('0.0.0.0',port=5000,debug=True)

5. API = 서버도 클라이언트 요청을 받기 위해서 만들어놓은 창구
   API에는 종류가 여러가지인데 그중 get과 post쓸 예정
   서버에 요청할 때 ajax로 call함
   api에서 클라이언트가 ajax call
   get 요청은 물음표로 뭔가를 들고감

from flask import Flask, render_template, request, jsonify #request, jsonify추가
app = Flask(name)

@app.route('/test', methods=['GET'])
def test_get():
title_receive = request.args.get('title_give') #title_give로 갖고온 거 값 가져와봐
print(title_receive) #파이썬창에서 보여줌
return jsonify({'result':'success', 'msg': '이 요청은 GET!'}) #콘솔창에서 보여줌

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

@app.route('/test', methods=['POST'])
def test_post():
title_receive = request.form['title_give'] #title_give로 갖고온 거 값 가져와봐
print(title_receive) #파이썬창에서 보여줌
return jsonify({'result':'success', 'msg': '이 요청은 POST!'}) #콘솔창에서 보여줌

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

6. 프로젝트 세팅 [모두의책리뷰]
   # flask 폴더 구조 생성
   file - newproject - 주소를 미리 만들어둔 파일로 해둔 다음 주소확인과 venv, 파이썬3.8확인
   bookreview 오른쪽클릭 - new - app.py생성 # flask 서버 돌리는 파일 생성
   bookreview 오른쪽클릭 - new - static과 templates 폴더 생성 #static은 css나 이미지 파일들을 담아둘 때 쓰는 것, templates는 html을 담아두는 곳
   templates 오른쪽클릭 new - index.html생성
   file - setting - project: 어쩌구저쩌구 - python interpreter - +클릭 - flask다운, pymongo다운 # 리뷰를 저장을 하는 기능이 있음. 그러므로 데이터베이스와 일을 함.

7. 뼈대 만들기
   app.py와 index.html 준비

8. 크롤링을 위한 requests 깔기
   bs4 깔기

9. API를 설계하는 일이 가장 처음해야 할 일
   우리 서비스에 어떤 기능들이 필요하고 그 기능을 어떤 순서로 구현을 할 건지 계획하는 것을 설계라고 한다.

나홀로 메모장

요청 URL = /memo

기능1
url과 코멘트를 서버로 보내줘서 서버에서 그 데이터를 저장하는 것.

db에 있는 데이터를 새로 생기는 거니까 요청방식 post
요청데이터 url, 코멘트

URL의 meta태그 정보를 바탕으로 제목, 설명, 이미지URL 스크래핑
(제목, 설명, URL, 이미지URL, 코멘트) 정보를 모두 DB에 저장

API가 정상적으로 작동하는지 클라이언트에게 알려주기 위해서 성공 메시지 보내기
(JSON 형식) 'result'= 'success'

기능2
데이터를 보여주는 것 (리스팅API)
db에 이미지 제목 요약 코멘트 링크 저장

요청 방식 = GET

DB에 저장돼있는 모든 (제목, 설명, URL, 이미지URL, 코멘트) 정보를 가져오기
아티클(기사)들의 정보(제목, 설명, URL, 이미지URL, 코멘트) → 카드 만들어서 붙이기

(JSON 형식) 'articles': 아티클 정보

로딩이 끝나면 바로 호출되는 것

12. 조각 기능을 구현하는 것
    미리 테스트 하는 것
    메타 태그는, 부분에 들어가는, 눈으로 보이는 것(body) 외에 사이트의 속성을 설명해주는 태그들
    예) 구글 검색 시 표시 될 설명문, 사이트 제목, 카톡 공유 시 표시 될 이미지 등
    그 중 og:image / og:title / og:description 을 크롤링 할 예정

브라우저에서 사이트를 들어가서 설정에서 나오는 메타태그 순서와
파이썬으로 접속했을 때 나오는 메타태그 순서가 다름.

soup.select_one('meta[property="og:title"]') 이렇게 쓰기

print(title['content']) #확인하기

title = soup.select_one('meta[property="og:title"]')['content']
print(title)

이렇게도 가능

14. window.location.reload() #새로고침

숙제
필요한 기능
1) 주문하기(POST):정보 입력 후 '주문하기' 버튼클릭시 주문목록에 추가
2) 주문내역보기(GET):페이지 로딩 후 하단 주문 목록이 자동으로 보이기

개인적으로 제일 어려웠다.
이해가 잘 안되기도 했고 하다보니 이게 이것과 연결되고 이게 이것과 연결되는구나하고 어렴풋이 알게 되었던 것같다.
처음에 조금 하다가 며칠 후가 좀 길기는 하지만 어쨌든 시간이 걸려서 하게 되었다.
그 전에 여러 사건들이 있어서 빠르게 하지 못한 것이 아쉽지만 그래도 했다는 것에 뿌듯하기도 하다.
API설계하는 부분에서 헷갈려서 4주차 수업을 다시 복습하는 것이 좋을 것같다.
사실 어차피 기능 여러번 쓰면 알 것같기도 하고....
공부하다가 메모하려고 해도 메모하기도 애매해서 연습용 프로젝트에서 조금씩 메모하는 것도 나쁘지않을 듯하다.

<열었는 데 계속 다른 HTML을 불러오고 있을 때>

terminal 을 열고 아래 명령어를 입력합니다.

netstat -aon | find "5000"

그러면 아래 형태로 보일거에요

TCP    xxx.xx.xx.xx:5000      xx.xx.xx.xxx:443      ESTABLISHED     3333

맨 마지막에 있는 것이 프로세스 아이디(pid) 입니다. 이걸 종료시켜주시면 됩니다. 위에는 pid 가 3333 입니다. 아래 명령어의 3333 에 실제로 여러분의 pid 를 적어주면 되겠죠?

taskkill /F /PID 3333