웹 개발 기초 4(API)

김범준·2022년 10월 16일
APIJavaScriptajax항해99
0

웹 개발 기초(항해99)

목록 보기
4/4
post-thumbnail

이전 포스팅에서는 데이터를 수집하고 저장하는 방법을 배워봤다. 그렇다면 이제 데이터를 주고 받을 수 있는 인터페이스를 구현해야한다. 우리는 이를 API(Application Programing Interface)라고 한다.

API

Application Programing InterFace의 약자이다.
정의에 따르면 응용 프로그램에서 사용할 수 있도록, 운영 체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스라고 한다. 그렇다면 인터페이스는 뭘까?

인터페이스(Interface)

인터페이스는 다른 시스템, 장치간의 신호를 주고받는 접점을 의미한다. 예를 들어 본체 뒤에는 여러 코드를 꽂을 수 있는 구멍이 있다. 그렇다면 아무 선이나 아무 구멍에 꽂아도 괜찮을까? 각 구멍에는 해당 데이터를 받기 위해 정의된 규격에따라 모양이 맞춰져 있고 케이블도 해당 규격에 따라 모양이 맞춰저 있어 해당 인터페이스가 같은 경우에야만 케이블이 들어가고 동작한다.
이를 신호 차원에서 이야기하자면 우리는 리모콘을 가지고 TV, 에어컨, 선풍기 등을 조작한다. 이때 TV리모콘은 다른 기기들을 안키고 TV만 킬 수 있을까?
이는 당연하게 생각할 수 있지만 신호차원에서 생각하면 TV는 TV리모콘끼리만 정의된 규격에 맞춰 신호를 주고 받기 때문이다.

API

API는 응용프로그램에서 데이터를 주고 받기 위한 인터페이스이다. 즉, 프로그램끼리 아무 데이터를 아무곳으로 보낸다고 해서 해당 페이지가 동작하는게 아닌, 어떤 데이터를 보낼 것인지, 어떤 방식으로 요청할것인지 등에 대한 규격이 필요한데 이를 API라고 한다.
이런 API에는 전송 요청 방식이 나뉘는데 GET, POST, PUT, DELETE, CONNECT, OPTIONS, TRACE, PATCH 등이 있다. 여기서는 가장 많이 쓰이는 GET과 POST를 다룬다.
여기서는 이를 Python의 Flask라는 웹 애플리케이션 프레임워크를 이용하여 실습하다.

Flask

Python에서 웹 애플리케이션 개발시 사용되는 프레임워크로 Flask이외에 Django 등이 있다.
Python 라이브러리로 이를 사용하려면 이전처럼 설치를 통해 import하여 사용한다.

설치

파이썬은 아래의 명령어를 통해 설치후 사용한다.

pip install flask

파이참은 

파일 → 설정 → 프로젝트:프로젝트명 → Python 인터프리터 → + → flask입력 → 패키지설치

기본틀

설치를 마쳤으면 flask의 기본 틀을 작성하자
먼저 app.py 파일을 프로젝트 내에 만들고(이 파일의 이름은 바뀌어도 괜찮다) 아래와 같이 기본틀을 작성한다. 

from flask import Flask
app = Flask(__name__)

@app.route('/')
def home():
   return 'Hello World!'

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

이후 실행시키고 웹 브라우저에 http://localhost:5000/로 접속하면 'Hello World!'가 화면에 뜬걸 볼 수 있으것이다. 여기서 개발자도구로 확인하면 아래와 같이 나온다.
코드를 보면 @app.route('/')라는 부분이 보인다. 이는 url에 /를 가리키는건데, 따라서 이를 다른 주소로 변경하면 해당 주소를 켰을때만 해당 함수가 실행된다.

뭔가 인숙한 친구가 보일것이다. 보면 Hello World가 Body안에 text태그안에 담겨 있다.
따라서, 해당 리턴에 보내주는 문자열을 Html태그로 만들어서 보내면 그대로 적용이 된다는 말이다.

from flask import Flask
app = Flask(__name__)

@app.route('/')
def home():
   return '<button>누르지마</button>'

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

자 그러면 이제 저기 리턴에 기이이이일다랗게 모든 태그들을 다 넣고 body를 꾸미면 된다. 라고 하면 이게 말이 되나 하고 의문을 가져야 한다.
이전 포스트에서 쓴 내용들이 파이썬에 고작 리턴하나로 들어가고 안에 있는 변수 하나하나를 고쳐야 한다니

Render_remplate

그래서 사용하는것이 flask 내장 함수인 render_template이다.
그전에 먼저 세팅해야 할것이 있는데 해당 프로젝트 내에 templates, static이름을 가진 폴더를 하나씩 만들어줘야 한다.

간단히 설명하자면 render_template는 파라미터로 html파일의 이름을 받아 해당 프로젝트 내에 templates폴더 내부에서 찾아 이를 반환한다.
따라서 우리가 이제 만들 html파일들은 templates폴더 안에 들어가야 하며 이를 기준으로 찾아서 사용할 것이다.

templates 폴더 안에 index.html을 만들고 작성하자

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  이거 되는거야??
</body>
</html>

이후 app.py를 수정한다.

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

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

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

GET

API의 요청 방식중 하나인 GET은 보통 데이터조회시 사용한다.
특징으로는 전송되는 데이터가 URL뒤에 붙는 방식으로 전송된다.

http://localhost:5000/test?name=김범준&age=27&email=faulty337@gmail.com

이렇게 되면 사실 "이 데이터 지금 옮기고 있어요!!" 하는 꼴이다. 만약 비밀번호 등의 데이터가 있으면 기본적으로는 GET요청을 안쓰는 방향으로 하자
그렇다면 단점밖에 없을까?
GET은 이외에 캐시가 가능하다는 점, 브라우저 히스토리에 남는다는점, 북마크 될수 있다는점 등의 특징이 있으니 상황에 따라 쓰는것이 좋다.

app.py

from flask import Flask, render_template, request, jsonify

app = Flask(__name__)

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

@app.route('/requestTest', methods=['GET'])
def test_get():
   text = request.args.get('text')
   print(text)
   return jsonify({'result':'success', 'msg': 'Get요청 보냄~'})

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

index.html

<!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 get_Request(){
            $.ajax({
                type: "GET",
                url: "/requestTest",
                data: {text:"테스트테스트~"},
                success: function (response) {
                    alert(response['msg'])
                }
            })
        }
    </script>
</head>
<body>
  <button id="getButton" onclick="get_Request()">나 GET요청 보낸다?</button>
</body>
</html>

화면에 버튼을 누르면 아래의 과정이 실행된다.

Get요청의 구조이다.

POST

API의 요청 방식중 하나인 POST은 보통 리소스를 생성/변경할 때 사용한다.
특징으로는 전송되는 데이터가 Body에 담기기때문에 길이의 제한이 없다. 때문에 대용량 데이터를 전송할 수 있다.
GET요청과는 다르게 따로 캐시가 안된다는점, GET보다는 그래도 데이터를 숨기기는 한다는점이 있다.
그렇다고 완전히 감춰지는게 아닌 특정 툴로 데이터를 확인 가능하기 때문에 보안이 필요한 데이터는 암호화를 해줘야 한다.

app.py

from flask import Flask, render_template, request, jsonify

app = Flask(__name__)

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

@app.route('/requestTest', methods=['POST'])
def test_post():
   text = request.form['text']
   print(text)
   return jsonify({'result':'success', 'msg': 'Post요청 보냄~'})

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

index.html

<!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 post_Request(){
            $.ajax({
                type: "POST",
                url: "/requestTest",
                data: { text:'post로 보낸다~' },
                success: function(response){
                   alert(response['msg'])
                }
              })
        }
    </script>
</head>
<body>
    <button id="postButton" onclick="post_Request()">나 POST요청 보낸다?</button>
</body>
</html>

전체적인 구조는 GET요청과 비슷하지만 app.py에서 text를 받는 구조가 GET과는 다르게 받는다.
이는 GET과 POST의 데이터 전송시 차이점 때문인데 위에서 언급했듯이 GET은 데이터를 URL에, POST는 body에 담아서 보내기 때문에 이를 꺼내는 방법도 달라야하기 때문이다.

이렇게 API방식중 GET과 POST방식을 써봤는데 이를통해서 감을 잡았으면 한다. 각자 서로 다른 규칙이 아닌 보내는 곳, 받는 곳, 보내는 데이터, 받는 데이터 등 서로 일치해야만 이를 정상적으로 실행한다.

profile
김범준
그럴싸한 계획을 가지고 있는
이전 포스트

웹 개발 기초 3(Python, 크롤링, MongoDB)

0개의 댓글