4주차(1~5)-Flask 사용법

로컬 개발환경이란?

우리는 컴퓨터가 한 대 이다. 그래서 같은 컴퓨터에다 서버도 만들고, 요청도 해야한다. 즉, 클라이언트 = 서버가 되는 것이다. 이것을 바로 "로컬 개발환경"이라고 한다. 그림으로 보면, 대략 이러하다.

---

Flask 시작하기 - 서버만들기

Flask 프레임워크란 서버를 구동시켜주는 편한 코드 모음이다. 이 Flask란 프레임워크를 이용한다면 서버를 구동하기위해 필요한 복잡한 일들을 쉽게 가져다 쓸 수 있다. 서버를 직접 만드는 개발자는 드물정도로 힘든 일이기에 서버를 구동하려면 보통 이러한 프레임워크를 이용한다.

 

Flask 기초: URL 나눠보기 -> @app.route('/) 부분을 수정해서 URL을 나눌 수 있다. -> /mypage

http://localhost:5000과 http://localhost:5000/은 같은 주소이다.

터미널 창을 클릭하고, ctrl + c 을 누르면 서버를 종료할 수 있다.

 

 

from flask import Flask
app = Flask(__name__)

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

@app.route('/mypage')
def mypage():  
   return 'This is My Page!'

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

---

Flask 시작하기 - HTML파일 주기

1. Flask의 기본 폴더구조

Flask 서버를 만들 때, 항상, 프로젝트 폴더 안에 다음과 같은 폴더와 파일이 위치해야 한다.

ㄴstatic 폴더 (이미지, css파일을 넣어둔다.) 

ㄴtemplates 폴더(html파일을 넣어둔다.) 

ㄴapp.py 파일 

(venv도)

 

2. app.py에서 html파일을 불러오는 방법

# render_template를 작성해주고

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

@app.route('/')
def home():

#여기도 return render_template('index.html')를 작성해주면 된다.
   return render_template('index.html')

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

   #localhost:5000이란 내가 만든 서버에서 나에게 준 웹페이지이다.

---

Flask시작하기 - 본격 API 만들기 (1)

1. 들어가기 전에: GET, POST 요청타입 - 리마인드

 

1) API는 은행의 창구와 같다.

같은 예금 창구에서도 개인 고객이냐 기업 고객이냐에 따라 처리하는 것이 다른 것처럼, 클라이언트가 요청 할 때에도, "방식"이 존재한다. HTTP 라는 통신 규약을 따른다는 거 잊지 않으셨죠? 클라이언트는 요청할 때 HTTP request method(요청 메소드)를 통해, 어떤 요청 종류인지 응답하는 서버 쪽에 정보를 알려주는 거에요.

 

2) GET, POST 방식

여러 방식(링크)이 존재하지만 가장 많이 쓰이는 GET, POST 방식에 대해 다루겠다.

• GET → 통상적으로! 데이터 조회(Read)를 요청할 때 쓰는 방식이다.
  예) 영화 목록 조회 →  데이터 전달 : URL 뒤에 물음표를 붙여 key=value로 전달 → 예: google.com?q=북극곰
• POST → 통상적으로! 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 할 때 쓰는 방식이다.
  예) 회원가입, 회원탈퇴, 비밀번호 수정 →  데이터 전달 : 바로 보이지 않는 HTML body에 key:value 형태로 전달

 

2. API만들기 시작

1) Jquery 임포트 (Jquery를 임포트해야 Ajax로 서버에 요청이 가능하기때문에)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

#html코드 head부분에 삽입한다.

 

2) Get 요청 확인 Ajax 코드 삽입

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

#html코드 head -> <script>내에 삽입한다.

#/test라는 창구에 가는데, title_give(주민번호)라는 이름으로 불리는 봄날은간다 값을 가져갈게
#(주민등록번호 라는 키 값으로 900120- .. 을 가져온 것과 같은 의미)

#데이터를 가져오는데 성공한다면 다음과 같은 function을 실행할게

 

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

#'title_give'라는 이름으로 무언가를 받아와서 변수 title_receive에 입력하겠다.
#추가적으로 해야할 것!!
#맨윗줄 from flask import Flask, render_template, reqeust, jsonify 이렇게 request랑 jsonify 추가해줄것

---

Flask시작하기 - 본격 API 만들기 (2)

1) POST 요청 확인 Ajax 코드 삽입

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

#/test라는 창구에 Ajax요청을 POST방식으로 함 title_give:'봄날은간다'를 가져간다는 의미

 

2) 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라는 창구를 만들고, 그곳에서 GET말고 POST값을 받아오겠다.