[python] 웹 페이지에서 스크립트 업데이트 처리하기

21 Nov 2023

python

웹 페이지에서 동적으로 스크립트를 업데이트하는 것은 많은 웹 애플리케이션에서 필요한 기능 중 하나입니다. 사용자 상호작용에 따라 스크립트를 업데이트하고 서버로부터 데이터를 가져와야 할 때가 있는데, 이를 위해 JavaScript를 사용합니다.

본 문서에서는 Python과 JavaScript를 사용하여 웹 페이지에서 스크립트 업데이트를 처리하는 방법에 대해 알아보겠습니다.

1. Python으로 서버 구성하기

먼저, Python을 사용하여 간단한 웹 서버를 구성해야 합니다. 이를 위해 http.server 모듈을 사용합니다.

from http.server import BaseHTTPRequestHandler, HTTPServer

# 서버 클래스 정의
class MyServer(BaseHTTPRequestHandler):
    
    # GET 요청 처리 메서드
    def do_GET(self):
        if self.path == '/get_data':
            self.send_response(200)
            self.send_header('Content-type', 'text/plain; charset=utf-8')
            self.end_headers()
            
            # 스크립트에 전달할 데이터
            data = {
                'name': 'John Doe',
                'age': 30,
                'location': 'Seoul'
            }
            
            # 데이터를 JSON 형식으로 변환하여 응답으로 전송
            self.wfile.write(bytes(json.dumps(data), 'utf-8'))
        else:
            self.send_response(404)
    
# 서버 시작
def start_server():
    server_address = ('', 8000)
    httpd = HTTPServer(server_address, MyServer)
    print('서버 실행 중...')
    httpd.serve_forever()

# 서버 실행
start_server()

위 코드는 /get_data 경로로 오는 GET 요청에 대해서 JSON 형식의 데이터를 응답으로 보내는 간단한 웹 서버입니다.

2. JavaScript로 스크립트 업데이트 처리하기

Python 서버가 준비되었으니, 이제 웹 페이지에서 요청을 보내고 응답을 받아서 스크립트를 업데이트하는 JavaScript 코드를 작성해보겠습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>스크립트 업데이트</title>
</head>
<body>
    <h1 id="name"></h1>
    <p id="age"></p>
    <p id="location"></p>
    
    <script>
        function updateScript() {
            fetch('/get_data')
                .then(response => response.json())
                .then(data => {
                    // 받은 데이터로 스크립트 업데이트
                    document.getElementById('name').textContent = data.name;
                    document.getElementById('age').textContent = data.age;
                    document.getElementById('location').textContent = data.location;
                })
                .catch(error => console.error(error));
        }

        // 페이지가 로드될 때 스크립트 업데이트 함수 호출
        updateScript();
    </script>
</body>
</html>

위 코드는 /get_data 경로로 GET 요청을 보내서 데이터를 받아와서 페이지의 요소에 업데이트하는 JavaScript 코드입니다. 이를 위해 fetch 함수를 사용하여 비동기적으로 서버에 요청을 보내고 응답을 처리합니다.

결론

Python으로 간단한 웹 서버를 구성하고 JavaScript로 스크립트 업데이트를 처리하는 방법을 알아보았습니다. 이를 통해 웹 애플리케이션에서 동적인 스크립트 업데이트를 구현할 수 있습니다.

더 자세한 내용은 다음 참고 자료를 확인해주세요.