스파르타 웹 수업 4주차 기록이다.
이번 주차에서는 웹 개발에 서버에 관한걸 많이 배웠다.
Flask로 개인 서버를 열고 localhost를 이용해 웹에서 열어서 내가 만든 웹이 어떻게 작동하는지 볼 수 있었다.(아직은 나만 이용할 수 있는 웹이지만)
파이썬의 Flask라는 라이브러리를 이용해서 쉽게 서버를 만들 수 있었고 Flask이용방법으로 Post와 Get에 대해 배울 수 있었다.
-Flask
일단 처음 파이썬 파일을 만들고 코딩을 시작할 때 가상환경을 만들고 라이브러리를 설치해 서버를 실행시키는 걸 많이 반복했다.
파이썬 원하는 위치에 폴더 열기 -> app.py 만들기-> ctrl + `(백틱) 으로 터미널 열기-> 맥 기준 python3 -m venv venv로 venv폴더를 만들고(가상환경)-> source venv/bin/activate로 가상환경 활성화 -> 라이브러리 설치 (pip install 설치할라이브러리 이름)flask, pymongo, dnspython, certifi를 설치 -> templates라는 새폴더를 만든다 -> templates폴더 내부에 index.html이라는 새파일 만들기
pip ugrade오류가 나온다면 python -m pip install --upgrade pip로 업그레이드 해주자
여기까지가 프로젝트 기본준비 과정이었다.
중간에 templates폴더이름은 오타가 나선 안된다. flask라이브러리에서 지정된 이름이기 때문에 templates폴더내부에 html파일을 포함해 줘야한다.
from flask import Flask, render_template
app = Flask(__name__)
## URL 별로 함수명이 같거나,
## route('/') 등의 주소가 같으면 안됩니다.
@app.route('/')
def home():
return render_template('index.html')
if __name__ == '__main__':
app.run('0.0.0.0', port=5001, debug=True)app.py에서 html을 불러오기위해 Flask의 기본 뼈대이다. route/뒤에 다른 이름을 연결하는 것으로 url을 나눌 수 있다.
위 render_template라는걸 이용해서 templates폴더에 넣어주었던 html파일을 가져온다.
아래 port번호는 맥은 5000번 포트가 사용되고 있다고 들었다. 그래서 5001번포트를 이용했다.
Jquery임포트
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>-GET, POST
Get과 Post는 http의 요청메서드이다. http통신규약에따라 요청메서드를 서버로 전달해줘야하기 때문에 사용한다.
Get : Get은 통상적으로 데이터를 "조회"할때 사용된다.
Post : Post는 통상적으로 데이터를 "생성(Create)", "변경(Update)", "삭제(Delete)" 할때 사용된다.
- 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 요청 확인 기본Fetch 코드
fetch("/test").then(res => res.json()).then(data => {
console.log(data)
})- 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 요청 확인 기본Fetch코드
let formData = new FormData();
formData.append("title_give", "블랙팬서");
fetch("/test", { method: "POST", body: formData }).then(res => res.json()).then(data => {
console.log(data)
})
- 조각기능??
조각기능은 테스트가 필요한 Flask서버가 필요없는 코드의 경우 Flask서버가 있는 app.py위에서 테스트 해보지 않고 다른 파이썬 파일을 만들어서 거기서 테스트 해보고 완성된 코드를 복사해서 가져오는 방법이다. 테스트해볼 코드가 있을 때 유용한 방법이다.
이번 과제는 내 웹에서 등록한 자료의 정보를 웹스크래핑으로 웹에서 가져와서 가져온 정보를 db에 저장하고 저장한 정보를 웹에 출력해보는 작업이었다. 시간이나면 몇번 더 해봐야 할것 같다.
