데이터 종류에 따른 Flask 서버 & 클라이언트측 코드

이번 글에서는 Flask 서버로부터 데이터를 받아와서 클라이언트에서 처리하는 예시들을 하나의 HTML 코드로 감싸서 보여드리겠습니다. 각각 HTML, JSON, XML 데이터를 처리하는 방법에 대한 설명도 함께 제공하도록 하겠습니다.

1. 플라스크 서버 측 코드

1-1. Flask에서 클라이언트로 HTML 태그 반환
1-2. Flask에서 클라이언트로 JSON 반환
1-3. Flask에서 클라이언트로 XML 반환
1-4. Flask에서 클라이언트로 HTML Template 반환

2. 클라이언트 측 자바스크립트 & HTML 코드

2-1. HTML 데이터 처리 (클라이언트측 HTML)
2-2. JSON 데이터 처리 (클라이언트측 HTML)
2-3. XML 데이터 처리 (클라이언트측 HTML)

웹 페이지는 로딩될 때 클라이언트(웹 브라우저)에서 JavaScript를 사용하여 서버(Flask)에 데이터를 요청하는 형식으로 되어 있습니다. 페이지 로딩 시 자동으로 실행되는 JavaScript의 fetch 함수가 서버에 대한 비동기 HTTP 요청을 발생시키고, 서버로부터의 응답에 따라 클라이언트 측에서 데이터를 처리하여 웹 페이지에 표시하는 것이 일반적인 방식입니다.

이 과정은 아래의 세부적인 단계로 이루어집니다:

페이지 로딩: 사용자가 웹 브라우저에서 특정 URL을 요청하여 페이지를 로드합니다.
데이터 요청: 페이지 로딩 완료 후, 페이지에 포함된 JavaScript($(document).ready 내부의 코드)가 실행되며, 이 코드가 Flask 서버의 특정 엔드포인트(/get-html, /get-json, /get-xml)에 데이터 요청을 보냅니다.
서버 처리: Flask 서버는 이러한 요청을 받고, 요청된 데이터 형식에 맞는 데이터를 처리하여 응답으로 반환합니다. 예를 들어 HTML, JSON, XML 형태의 데이터를 클라이언트에 전송할 수 있습니다.
클라이언트에서의 데이터 처리 및 표시: 클라이언트 측 JavaScript는 서버로부터 받은 응답 데이터를 적절히 처리(예: HTML로 바로 삽입, JSON 파싱 후 DOM 조작, XML 파싱 후 데이터 추출 및 표시)하여 사용자에게 보여주는 웹 페이지의 내용을 동적으로 업데이트합니다.

이전 글에서는 클라이언트측에서 플라스크 서버측으로 데이터를 요청하고 받는 방식에 대해 설명을 드렸었으니

우선 플라스크 서버측 코드부터 정리를 해 보도록 하겠습니다.

1. 플라스크 서버 측 코드

# 파이썬(플라스크) 코드 선언부

from flask import Flask, jsonify, Response, render_template

app = Flask(__name__)

@app.route('/get-html')
def get_html():
    html_content = '<div><p>Hello, this is HTML from Flask!</p></div>'
    return html_content

@app.route('/get-json')
def get_json():
    data = {'message': 'Hello, this is JSON from Flask!'}
    return jsonify(data)

@app.route('/get-xml')
def get_xml():
    xml_content = '<data><message>Hello, this is XML from Flask!</message></data>'
    return Response(xml_content, mimetype='application/xml')

@app.route('/render-template')
def render_hello():
    # `render_template` 함수를 사용하여 `hello.html` 템플릿 파일을 렌더링합니다.
    # `message` 변수에 값을 할당하여 템플릿에 전달합니다.
    return render_template('hello.html', message="Hello, this is from Flask Template!")

위의 코드는 4가지 타입의 자료형태를 반환하는 코드로 이루어져 있으며 세부사항별로 아래와 같이 구분하여 사용하 수 있습니다.

1-1. Flask에서 클라이언트로 HTML 태그 반환

@app.route('/get-html')
def get_html():
    html_content = '<div><p>Hello, this is HTML from Flask!</p></div>'
    return html_content

이 라우트는 클라이언트에게 직접 HTML 문자열을 반환합니다.
html_content 변수에 HTML 내용을 문자열로 저장하고, 이를 return 문을 사용하여 응답으로 전송합니다.
클라이언트는 이 HTML 문자열을 받아 웹 페이지에 직접 렌더링할 수 있습니다.

1-2. Flask에서 클라이언트로 JSON 반환

@app.route('/get-json')
def get_json():
    data = {'message': 'Hello, this is JSON from Flask!'}
    return jsonify(data)

이 라우트는 클라이언트에게 JSON 형식의 데이터를 반환합니다.
Python 사전 객체 data를 jsonify 함수에 전달하여, JSON 형태의 응답을 생성합니다.
jsonify 함수는 Python 사전을 JSON 문자열로 변환하고, 적절한 Content-Type: application/json 헤더와 함께 응답을 클라이언트에 전송합니다.

1-3. Flask에서 클라이언트로 XML 반환

@app.route('/get-xml')
def get_xml():
    xml_content = '<data><message>Hello, this is XML from Flask!</message></data>'
    return Response(xml_content, mimetype='application/xml')

이 라우트는 클라이언트에게 XML 형식의 데이터를 반환합니다.
XML 데이터는 문자열 xml_content에 직접 작성되며, Response 객체를 사용하여 이 문자열을 응답 본문으로 설정합니다.
mimetype='application/xml'을 지정하여, 반환되는 데이터가 XML임을 명시합니다.

1-4. Flask에서 클라이언트로 HTML Template 반환

@app.route('/render-template')
def render_hello():
    return render_template('hello.html', message="Hello, this is from Flask Template!")

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Flask Template Example - hello.html</title>
</head>
<body>
    <h1>{{ message }}</h1>
</body>
</html>

이 라우트는 Flask의 템플릿 엔진(Jinja2)을 사용하여 HTML 템플릿 파일(hello.html)을 렌더링하고, 그 결과를 클라이언트에 반환합니다.
render_template 함수는 첫 번째 인자로 템플릿 파일명(hello.html)을 받고, 추가적인 인자로 템플릿에 전달할 변수들을 지정합니다.
여기서는 message 변수에 문자열 값을 할당하고, 이를 템플릿 파일 내에서 사용할 수 있습니다. 템플릿 파일은 templates 디렉토리 내에 위치해야 합니다.

이처럼 Flask에서 클라이언트 측으로 전달하는 데이터타입 4가지 방식을 정리하였으며

이에 대응하여 클라이언트 측에서는 어떻게 데이터를 받아서 보여주는지를 예시 코드와 함께 설명을 드리도록 하겠습니다.

2. 클라이언트 측 자바스크립트 & HTML 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Flask 데이터 바인딩 예시</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<div id="html-container">HTML 데이터 로딩...</div>
<div id="json-container">JSON 데이터 로딩...</div>
<div id="xml-container">XML 데이터 로딩...</div>

<script>
    // HTML 데이터 처리
    fetch('/get-html')
        .then(response => response.text())
        .then(html => {
            document.getElementById('html-container').innerHTML = html;
        });

    // JSON 데이터 처리
    fetch('/get-json')
        .then(response => response.json())
        .then(data => {
            const message = data.message;
            document.getElementById('json-container').innerHTML = `<p>${message}</p>`;
        });

    // XML 데이터 처리
    fetch('/get-xml')
        .then(response => response.text())
        .then(str => (new window.DOMParser()).parseFromString(str, "text/xml"))
        .then(data => {
            const message = data.getElementsByTagName('message')[0].textContent;
            document.getElementById('xml-container').innerHTML = `<p>${message}</p>`;
        });
</script>

</body>
</html>

클라이언트 측에서 각각의 데이터 처리 방식에 대한 요약 설명은 다음과 같습니다

2-1. HTML 데이터 처리 (클라이언트측 HTML)

목적: 서버로부터 HTML 형식의 데이터를 받아와 웹 페이지의 특정 부분을 동적으로 업데이트합니다.

방법: fetch 함수를 사용해 서버의 /get-html 엔드포인트로부터 HTML 문자열을 요청합니다.
응답으로 받은 HTML 문자열은 .then(response => response.text())을 통해 텍스트로 변환되고,
innerHTML 속성을 사용하여 id="html-container"를 가진 div 요소 내에 삽입됩니다.

적용 예: 서버로부터 완성된 HTML 조각(예: 사용자 목록, 댓글)을 받아와 페이지에 바로 적용할 때 사용합니다.

2-2. JSON 데이터 처리 (클라이언트측 HTML)

목적: 서버로부터 JSON 형식의 데이터를 받아와 클라이언트 측에서 처리한 후, 이를 바탕으로 웹 페이지를 동적으로 업데이트합니다.

방법: fetch 함수로 /get-json 엔드포인트로부터 JSON 데이터를 요청합니다.
응답으로 받은 데이터는 .then(response => response.json())을 통해 JavaScript 객체로 파싱됩니다.
파싱된 데이터(예: data.message)를 사용하여 HTML 요소를 생성하고, 이를 id="json-container"를 가진 div에 삽입합니다.

적용 예: 서버로부터 받은 JSON 데이터를 바탕으로 사용자 인터페이스를 구성하거나 업데이트할 때 사용합니다.

2-3. XML 데이터 처리 (클라이언트측 HTML)

목적: 서버로부터 XML 형식의 데이터를 받아와 클라이언트 측에서 파싱한 후, 웹 페이지를 동적으로 업데이트하는 데 사용합니다.

방법: fetch 함수를 사용해 /get-xml 엔드포인트로부터 XML 데이터를 요청합니다.
받은 응답을 텍스트로 변환한 후, DOMParser를 사용해 XML 문서로 파싱합니다.
파싱된 XML 문서에서 필요한 데이터(예: 태그의 내용)를 추출하여 id="xml-container"를 가진 div에 HTML 형태로 삽입합니다.

적용 예: 서버로부터 XML 형식의 데이터를 받아 이를 웹 페이지에서 사용해야 할 때 사용합니다.
XML 형식은 설정 파일이나 복잡한 데이터 구조 표현에 자주 사용됩니다.

이러한 방식은 웹 애플리케이션에서 동적인 컨텐츠를 제공하거나, 사용자의 인터랙션에 따라 실시간으로 데이터를 업데이트해야 할 때 자주 사용됨에 따라 Flask와 같은 백엔드 프레임워크와 JavaScript를 결합하여, 사용자 경험을 향상시키고 풍부한 웹 애플리케이션을 구현할 수 있을 것으로 생각합니다.

오늘도 제 글을 읽어주신 모든 분들께 감사의 말씀을 드립니다.

※ 아래의 글은 클라이언트 & Flask 서버측 코드에 대한 세부 설명이 있는 글입니다. 참고 바랍니다.

AJAX를 사용하여 서버(Flask)에 데이터를 요청하는 두 가지 방법

클라이언트에서는 데이터를 표시하기 위해 일반적인 2가지 방식을 제공합니다. 사용자가 URL로 접속하여 일반적으로 페이지가 로딩이 될 때 특별한 행동을 하지 않아도 페이지가 로드되는 것처

quant.i-whale.com

저작자표시 비영리 변경금지

'Web Application' 카테고리의 다른 글

data-* : HTML5에서 도입된 사용자 정의 데이터 속성 (0)	2024.05.12
웹 스크래핑을 통한 비동기 프로그래밍 필요성의 이해 (0)	2024.04.05
클라이언트 요청에 응답하는 Flask 서버 코드 (0)	2024.02.18
AJAX를 사용하여 서버(Flask)에 데이터를 요청하는 두 가지 방법 (0)	2024.02.18
Flask + JavaScript 데이터 전송 방향에 따른 구분(파이썬을 이용한 웹 서비스 만들기) (2)	2024.02.18

데이터 종류에 따른 Flask 서버 & 클라이언트측 코드

1. 플라스크 서버 측 코드

1-1. Flask에서 클라이언트로 HTML 태그 반환

1-2. Flask에서 클라이언트로 JSON 반환

1-3. Flask에서 클라이언트로 XML 반환

1-4. Flask에서 클라이언트로 HTML Template 반환

2. 클라이언트 측 자바스크립트 & HTML 코드

2-1. HTML 데이터 처리 (클라이언트측 HTML)

2-2. JSON 데이터 처리 (클라이언트측 HTML)

2-3. XML 데이터 처리 (클라이언트측 HTML)

'Web Application' 카테고리의 다른 글

댓글

티스토리툴바