오늘은 이전에 만들었던 서버 파일에
다른데서 가져와 활용만 했던 API를 직접 만들어볼 것이다.
그럼 그 전에 API가 무엇인지부터 이해를 하고 넘어가자.
API (Application Programming Interface)란?
네이버 [컴퓨터인터넷 IT 용어대사전] 검색 결과ㅣ
위시켓이란 곳에서는 우리가 레스토랑에 있다고 가정하고 API 예시를 들었다.
점원이 가져다준 메뉴판을 보고 점원에게 주문을 한다.
그러면 점원은 요리사에게 요청을 하고, 다 된 요리를 점원이 우리에게 가져다 준다.
그러면 여기서 점원의 역할을 보면 손님에게 메뉴를 알려주고,
주방에 주문받은 요리를 요청하는 역할을 한다.
그것이 바로 API의 역할이다.
간결하게 말하면 API는 프로그램들이 서로 상호작용하는 것을
도와주는 '매개체'라고 볼 수 있다.
API (Application Programming Interface)의 역할은?
1. API는 서버와 데이터베이스에 대한 '출입구 역할을 한다.
: 데이터베이스에는 수많은 정보들이 저장이 되는데,
데이터베이스에는 모든 사람이 아닌 허용된 사람들만 들어올 수 있도록 해야 한다.
은행의 창구라고 생각하면 좋다. 개인고객, 기업고객, VIP고객인지에 따라
메뉴얼들이 정해져 있는 것처럼
서버와 데이터베이스에 요청하는 클라이언트의 요구를 받기 위한 창구라고 보면 된다.
2. API는 모든 접속을 표준화한다.
API는 모든 접속을 표준화하여 사용하는 운영체제나
기기에 상관없이 누구나 동일한 엑세스를 가질 수 있다.
3. API는 애플리케이션과 기기의 원활한 통신을 돕는다.
API는 애플리케이션과 기기가 데이터를 원할하게 주고받을 수 있도록 돕는다.
우선 오늘 다룰 GET 요청과 POST 요청 방식에 대해 간단히 집고 넘어가자.
GET 요청은
GET은 통상적으로 데이터를 조회(Read)를 요청할 때 사용한다.
조회한 데이터 전달은 url 뒤에 물음표를 붙여 key=value로 전달한다.
예시로 아래에서 다룰 url: "/test?title_give=봄날은간다"
ex) 쇼핑몰에 어제 들어온 주문을 가져오는 것, 영화 목록 조회 등
POST 요청은
POST는 통상적으로 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청할 때 사용한다.
데이터 전달은 바로 보이지 않는 HTML body에서 key : value 형태로 전달한다.
ex) 사이트의 회원가입, 회원탈퇴, 비밀번호 변경
GET 요청 먼저 다뤄보자
API를 직접 만들어보고 이전에 다룬 Ajax로 API를 콜해보기
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!'})
이전에 서버를 만들 때 사용했던 코드가 없다면 아래 참고해서 가져오기 ▼
내 컴퓨터를 서버로 만들고 접속하기/ 웹서버 Flask 프레임워크로 구동하기/ 파이썬으로 웹 서버 만들기
아래 코드는 app.py에 작성된 코드이다.
추가하라고 한 코드까지 추가한 모습이다.
app.py 파일
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)여기서 맨 위 코드 from flask 부분에
request, jsonify를 추가해주어야 한다.
이유는 새롭게 request와 jsonify 라이브러리를 사용할 것이기 때문에
상단에 임포트를 해주어야 한다.
주의해야할 것은 이전에 다뤘던 requests 하고는 다르다.
requests는
pip로 설치한 내부 라이브러리이다.
request는
Flask 프레임워크에서 있는 라이브러리이다.
아래 코드는 index.html 파일에 작성된 html 코드이다.
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>HwanE</title>
</head>
<body>
<h1>서버가 잘 작동되고 있는지 확인하는 페이지</h1>
</body>
</html>index.html 파일이 위와 같이 작성되어 있고,
app.py 파일을 통해 서버를 구동시켰다면
크롬을 켜서 'localhost:5000'에 접속했을 때
아래와 같은 화면이 나와야 한다.
아래와 같은 화면이 나왔다면 정상적으로 작동이 된 것이다.
그렇다면 위에서 추가한 @app.route('/test', methods=['GET']) 부분, API를 만든 부분이
잘 동작하는지 확인을 해보자.
localhost:5000에 접속한 브라우저에 오른쪽 마우스로 클릭해,
[검사]를 누른다.
그럼 개발자 도구 창이 뜨는데, Elements로 되어 있는 부분을
'Console'로 바꿔준다.
그러고는 아래에 첨부한 코드를 복사 붙여넣기 하고 엔터를 누른다.
첨부한 코드는 서버에 요청을 하는 Ajax로 작성한 코드이다.
Ajax가 뭔지 모른다면 아래를 참고하자 ▼
Ajax란? / Ajax를 이용한 미세먼지 API 이용해보기 / Ajax 동작방식
GET 요청 확인 Ajax 코드
$.ajax({
type: "GET",
url: "/test?title_give=봄날은간다",
data: {},
success: function(response){
console.log(response)
}
})조회한 데이터 전달은 url 뒤에 물음표를 붙여 key 값 =value 값으로 전달
엔터를 눌렀을 때 아래와 같이 결과가 나올 것이다.
아래와 같은 결과가 나온 것은
ajax 코드를 보면 console.log(response) 콘솔에 출력하라는 명령어가 있다.
response 변수를 출력한 것이다.
그럼 response 변수는 무엇인가?
function 함수를 통해 success 했을 때 서버에서 가져온 값이다.
출력된 값을 보면 msg : "이 요청은 GET !" 어디서 본 것 같지 않은가?
서버에 적혀 있는 코드를 확인해보자.
맞다.
아까 위에서 app.py (서버) 파일에 추가해준 코드에 return jsonify( )에 적혀있다.
jsonify( )에 적혀있는 것을 서버에서 가져온다는걸 유추해볼 수 있다.
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_receive = request.args.get('title_give')
해당 코드에서 requests.args.get(' ')는 키(key) 값을 알고 있을 때 사용한다.
윗 코드는 title_give가 키(key) 값인 데이터를 조회해서 title_receive 변수에 담는 코드이다.
다시 ajax 코드를 보게 되면 type은 데이터를 조회하는 GET 방식이다.
URL 부분을 보게 되면 url: "/test?title_give=봄날은간다" 라고 적혀있다.
이는 API 주소를 뜻하는데, 우리가 app.py 파일에 작성한 API 코드에서 찾을 수 있다.
@app.route('/test', methods=['GET'])
우선 /text 를 찾았고, ? (물음표) 뒤에는
request.args.get('title_give') 코드로 가져온 것이다.
title_give 키(key) 값으로 가지고 온 데이터가 '봄날은간다'인 셈이다.
title_receive = request.args.get('title_give')
그렇다면 title_receive라는 변수에는 '봄날은간다'가 들어가 있는 것이다.
브라우저 콘솔창에 ajax 코드를 입력하고, 파이참 콘솔에서 보게 되면
맨 아래 '봄날은간다'라고 출력된 것을 볼 수 있다.
이는 위에 코드 print(title_receive)가 실행되어 title_receive 변수 안에 있는 값이 실행된 것이다.
지금까지 했던 것을 사진 하나로 요약해볼 수 있다.
※ 요약 ※
우리는 서버에 GET 요청(request)을 'Ajax' 코드로 한 것이고 Ajax 코드를 통해
서버로부터 받아온 데이터를 API 코드에서 무언가 처리를 해서
응답(response)을 주고, Ajax에 response 변수에 담아,
우리가 console.log로 출력하라는 요청(request)을 한 것이다.
다음으로 POST 요청을 다뤄보자.
POST도 생김새와 다르지 GET과 원리는 같다.
아래 코드를 app.py 파일에 GET 요청한 코드 밑에 복사 붙여넣기 해보자.
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!'})그럼 app.py 파일에 아래와 같은 코드가 작성될 것이다.
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!'})
@app.route('/test', methods=['POST'])
def test_post():
title_receive = request.form['title_give']
print(title_receive)
return jsonify({'result':'success', 'msg': '이 요청은 POST!'})
if __name__ == '__main__':
app.run('0.0.0.0',port=5000,debug=True)
@app.route('/test') 로 동일하게 들어오는데, methods 방식이 'POST' 타입의 형태이다.
GET과 다른 점은
title_receive = request.args.get('title_give')
↑
↓
title_receive = request.form['title_give']
이것은 외워줘야 한다.
methods 파라미터가 GET일 때는 request.args 로 데이터를 전송하고
methods 파라미터가 POST일 때는 request.form 로 데이터를 전송해야 한다.
그 이유에 대해 조금 말하자면
GET은 쿼리스트링으로 URL 데이터를 직접 입력해서 데이터 전송이 가능하지만
POST는 HTTP Body에 들어가기 때문에 form에서 데이터를 전송할 수 있다.
이 부분은 외워주자...
바로 위에서 API를 생성했으니, API를 요청하는 코드가 있어야 한다.
바로 아래 Ajax 코드이다.
POST 요청 확인 Ajax 코드
$.ajax({
type: "POST",
url: "/test",
data: { title_give:'봄날은간다' },
success: function(response){
console.log(response)
}
})마찬가지로 브라우저 콘솔창에 복사해서 입력을 해주면 아래와 같이 나온다.
type은 POST의 형태로 URL인 "/test"로 간다.
그럼 POST API 코드에서
@app.route('/test', methods=['POST']) 부분의 코드가 실행이 된다.
그런데 GET 방식과는 다르게 data 부분이 있는데,
data: { title_give:'봄날은간다' }
title_give가 key 값이고, '봄날은간다'가 value 값이다.
그러면 request.form[ 'title_give' ] 코드에서 key 값을 조회해 '봄날은간다'라는 데이터를 가져와
title_receive 변수에 '봄날은간다' 값이 들어가게 된다.
@app.route('/test', methods=['POST'])
def test_post():
title_receive = request.form['title_give']
print(title_receive)
return jsonify({'result':'success', 'msg': '이 요청은 POST!'})만약에 Ajax 에서 title_give가 아닌 title_receive라고 작성하고 엔터를 눌러보자.
그러면 에러가 발생한다.
에러를 자세히 보게 되면 'Internal Sever Error'라고 적혀있다.
이는 내부 서버에서 에러가 발생했다는 것이다.
파이참을 열어보게 되면 파이참에도 에러가 발생해 있다.
해당 에러는 app.py라는 서버 파일에 작성된 API에서
'title_give' 값을 통해 무언가를 찾으려고 했는데 없다는 뜻이다.
이는, 내 이름으로 회원정보를 찾았는데 등록된 회원정보가 없는 것과 같은 원리이다.
다시 제대로 작성해보면 정상적으로 작동하는 것을 확인할 수 있다.
그렇기 때문에 서버에 요청하는 ajax 코드와 API 코드의 키(key) 값을 맞춰 주어야 정상 작동이 된다.
댓글