스파르타 웹개발종합반 4주차-1

thermal·2022년 9월 24일

API Flask ajax 스파르타 웹개발종합반

스파르타 웹개발종합반

목록 보기

9/12

로컬 개발 환경

자신의 컴퓨터에서 서버를 만들고 돌린다

flask 프레임워크

python 인터프리터에서 flask 패키지 다운받아 사용
서버 구동시켜주는 편한 코드 모음

flask 시작

flask 시작 코드 (app.py)

from flask import Flask
app = Flask(__name__)

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

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

아래 주소로 가보면 해당 텍스트가 적힌 것을 볼 수 있다
localhost:5000/ (혹은 localhost:5000) -> This is Home!
localhost:5000/mypage -> This is Mypage!

어떻게 돌아가는가 :

  1. flask import

  2. 변수 app에 Flask를 담아 인스턴스 생성

     이때 매직 메소드인 __name__ 변수는 현재 사용하는 모듈 상태 나타냄

  3. @(데코레이터)로 app 인스턴스의 route 함수의 기능을 밑의 home() 함수에 붙여 꾸밈

     '/'라는 매개변수를 통해 HTTP에 요청을 처리

  4. app.run()을 통해 app 객체 실행

참고 : https://mld42.tistory.com/m/12

보충 설명 :

  route('/') : 웹표현 메소드

  @app.route('/') : 장식자. 함수 장식자는 함수 코드 바꾸지 않고도, 장식자 안의 내용만 바꿈으로 함수 동작 조절 가능

  여기서 URL '/'는 다음 행에 정의된 함수와 연결됨


  route 장식자는 Flask 서버로 '/'URL 요청이 들어왔을 때 어떤 함수를 호출할 것인지 조정

  장식된 함수에서 결과 반환 때까지 기다리다 결과 반환되면 대기중인 웹 브라우저로 반환

  장식자를 사용하면 다음 행의 함수부터 장식자 적용됨


  localhost:5000/ 주소에서 맨 뒤에 route에서 설정한 /가 붙는 걸 볼 수 있다

  @app.route('/mypage')의 경우 주소는 localhost:5000/mypage


  app.run('0.0.0.0',port=5000,debug=True) 에서 

  - '0.0.0.0'은 host='0.0.0.0' : 모든 호스트로 접속이 가능하다. 
   			         host 설정 기본값은 localhost(=127.0.0.1)

  - port=5000 : 5000번 포트로 실행. 기본 app.run()이 포트 5000으로 실행된다

참고 : https://m.blog.naver.com/21ahn/221830372908

flask 기본 폴더 구조

static 폴더 : 이미지, css 파일 보관
templates 폴더 : html 파일 보관
app.py 파일
(static, templates 폴더는 '새로 만들기 > 경로'로 만듦)

예시 이미지 factorio thumbnail

GET 요청, POST 요청

GET 방식 : 데이터 조회(read) 요청 시 사용
POST 방식 : 데이터 생성(create), 변경(update), 삭제(delete) 요청 시 사용

GET 요청 확인 Ajax 코드

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

(웹사이트 크롤링에 쓰던 ajax.. 해당 url에서 데이터 갖고 온다)

url : /text라는 창구에 가는데 - title_give라는 이름으로 - '봄날은 간다' 라는 데이터를 내가 갖고 갈게
success 하면 : 네가 주는 데이터(response)를 파이참 콘솔에다 찍어볼게
사용하려면 Jquery 임포트 필요 ↓
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

사용 예

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>        
	<script>
        function hey() {
            $.ajax({
                type: "GET",
                url: "/test?title_give=봄날은간다",
                data: {},
                success: function (response) {
                    console.log(response)
                }
            })
        }
    </script>
</head>
<body>
    <h1>나의 첫 웹페이지</h1>
    <button onclick="hey()">버튼을 만들자</button>
</body>
</html>

(hey() 함수에 넣어 사용)

이 /test 창구는 어떻게 만드나? -> GET 요청 API 코드 사용

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!'})

'/test' 창구에서 받고 있다
title_give라는 이름으로 '봄날은간다'를 받아와서 title_receieve 변수에 저장
return 내용은 사이트 페이지에 출력됨(+검사창 콘솔에도)

localhost:5000/test에 들어가보면 이렇다 factorio thumbnail

전체 코드

from flask import Flask, render_template, request, jsonify
app = Flask(__name__)

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

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

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

모듈 설명

flask 패키지에서 Flask, render_template, request, jsonify 모듈 가져옴
Flask : 웹 개발 시 사용
render_template : templates에 저장된 html을 불러올 때 사용
request : http, https 웹사이트에 요청 시 사용
jsonify : json 형식의 데이터를 다룰 때 사용

factorio thumbnail 버튼을 누르면 콘솔에 이렇게 나온다. (좌측 상단 파이참 콘솔에 '봄날은간다' 찍힘)

POST 요청 확인 Ajax 코드

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

URL '/test'에 title_give: '봄날은간다' 데이터를 가져간다

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!'})

/test라는 창구를 만들었다. 이 창구에서 POST 받는 건 이쪽 코드로.
'title_give' 받아와서 title_recieve에 저장, 출력

과정
1. hey() 실행
2. /test 창구에 POST 요청으로 Ajax 요청 (Ajax)
3. title_give 받아서 title_receive 변수에 저장, (파이참 콘솔에)출력 (API)
4. 일 끝나서 json 형식의 데이터 반환 (API)
5. 반환받은 값이 response에 들어옴, 콘솔에 출력 (Ajax)

Ajax에서 console.log(response['msg'])로 코드를 바꾸면 콘솔에 '이 요청은 POST!'라는 메시지만 찍힌다

window.location.reload() : 창 새로고침

로딩이 되자마자 함수를 부름

$(document).ready(function () {
            함수();
});

thermal

이전 포스트

스파르타 웹개발종합반 3주차-2

다음 포스트

스파르타 웹개발종합반 4주차-1