[웹개발 종합반] 4주차 개발일지 - (1)

zzzzsb·2022년 2월 24일

Sparta

목록 보기

8/15

4주차

수업 목표

Flask 프레임워크를 활용해 API 생성하기
'모두의책리뷰' API 만들고 클라이언트에 연결하기
'나홀로메모장' API 만들고 클라이언트와 연결하기

01. 4주차 배울 것

HTML과 mongoDB 연동해서 서버 만들어보기

클라이언트 = 서버: 로컬 개발환경

02. 폴더 세팅

백엔드-프론트엔드 연결 실습
연습 -> 모두의책리뷰 -> 나홀로메모장 -> 마이페이보릿무비스타 반복실습

03. Flask 시작하기 - 서버 만들기

🔥 projects/prac 폴더에서 시작

Pycharm 좌상단 > File > New project
Location 경로 맨끝에 /venv 확인
Base interpreter 버전 3.8 확인

Pycharm에서 패키지 설치

좌상단 Pycharm -> Preference -> Python Interpreter
flask 검색후 패키지 설치

Flask 기초: 기본 실행

Flask 프레임워크

서버를 구동시켜주는 편한 코드모음이라고 생각하자.
통상적으로 flask서버를 돌리는 파일명은 app.py라고 이름짓는다.

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)

마우스 우클릭 > Run app > 터미널에 위 메시지 뜨면 실행 성공
크롬에서 http://localhost:5000/ 으로 접속해보기 > 화면에 This is Home! 메시지 보이면 성공
종료시에는 터미널창 클릭 후 ctrl+c 입력

Flask 기초: URL 나눠보기

@app.route('/') 부분 수정해서 URL 나눌수 있음
단, url 별로 함수명이 같거나, route('/')내의 주소가 같으면 안됨❌

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)

http://localhost:5000/mypage 접속하면 This is My Page 메시지 보임.

04. Flask 시작하기 - HTML 파일 주기

Flask 기초: 기본 폴더구조

👉 Flask 서버 만들때 기본 폴더구조

프로젝트 폴더 안에
ㄴ static 폴더 (이미지,css 파일)
ㄴ templates 폴더 (html 파일)
ㄴ app.py 파일

Flask 기초: HTML 파일 불러오기

template 폴더는 html파일을 저장하고, 불러오는 역할

prac/templates/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <title>Document</title>
</head>
<body>
    <h1>서버를 만들었다!</h1>
</body>
</html>

flask 내장함수 render_template 사용해 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=5000, debug=True)

render_template 임포트
render_template 함수에 불러올 html파일명 입력

실행결과

index.html 바로 실행
단순히 파일을 연것

app.py로 실행
서버에 요청->서버에서 받아와서 실행

05. Flase 시작하기 - 본격 API 만들기

API: 클라이언트의 요청을 받기위해 서버에서 만들어놓은 창구라고 생각하자.

GET, POST 요청타입

클라이언트가 요청할때에도 "방식"이 존재함.
클라이언트는 요청할때 HTTP request method를 통해, 어떤 종류의 요청인지 응답하는 서버쪽에 정보를 알려줌.
HTTP request method 링크
가장 많이 쓰이는 GET, POST

GET

통상적으로, 데이터 조회(Read)를 요청할 때
ex) 영화목록 조회

데이터 전달: URL 뒤에 물음표 붙여 key=value 형태로 전달
ex) google.com?q=북극곰

POST

통상적으로, 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청할 때

ex) 회원가입, 회원탈퇴, 비밀번호 수정

데이터 전달: 바로 보이지 않는 HTML body에 key:value 형태로 전달

GET, POST 요청에서 클라이언트 데이터 받는 방법

예를들어, 클라이언트에서 서버에 title_give란 키 값으로 데이터 들고왔을때(ex. 주민등록번호라는 키 값으로 990418-... 가져온 것)
내가 받은 값을 확인할때 보통 print로 출력해보는데, 실전에서는 어떻게할까?
클라이언트가 서버에 요청할 때: Ajax 콜

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

추가적으로 request, jsonify 도 임포트
app.py에 위 코드 추가

GET 요청 Ajax 코드

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

localhost:5000 에서 콘솔창에 위 ajax 코드 입력
{msg: '이 요청은 GET!, result: 'success'} 출력됨
콘솔에서 response(서버에서 내려주는 값) 출력했기 때문

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

localhost:5000 에서 콘솔창에 위 ajax 코드 입력
{msg: '이 요청은 POST!', result: 'success'} 출력됨

💡 API에서 받아올 요청이름(title_give)과 Ajax에서 요청할 이름(title_give) 같아야함!

zzzzsb

성장하는 developer

이전 포스트

[웹개발 종합반] 3주차 개발일지 - (2)

다음 포스트