React.js에서 Python 스크립트를 실행하는 방법

Python과 React.js의 잠재력을 발휘하여 고성능 웹 애플리케이션을 구축해 보자.

Python과 React.js의 만남

웹 개발은 일반적으로 프론트엔드와 백엔드 언어 간의 괴리감을 겪게된다. Python과 React.js는 종종 먼 세상에 머물고 있다. 오늘은 이 둘을 하나로 결합하여 웹 앱 성능을 더욱 향상시키는 코드를 만들어 본다.

환경 설정: 첫 번째 단계

시작하기 위해 우리는 Node.js와 Python이 필요하다. 설치되어 있지 않다면 여기에서 Node.js를 다운로드하고 여기에서 Python을 다운로드할 수 있다. 설정이 완료되면 새로운 Node.js 프로젝트를 초기화하고 npm을 사용하여 React.js를 설치해보자.

bash
mkdir python-react
cd python-react
npm init -y
npm install --save react react-dom

Python 브릿지

백엔드 기능을 수행하는 Python 파일인 my_script.py를 만들어 보자.

python
# my_script.py
def main():
    print("Python and React.js in harmony!")
if __name__ == "__main__":
    main()

이 Python 스크립트는 호출될 때 한 줄을 출력하는 간단한 기능이다. 이 기능을 React.js 앱에 통합하겠다.

Node.js child_process

JavaScript 기반의 React 앱에서 Python 스크립트를 실행할 방법이 필요하다. Node.js는 자식 프로세스를 생성하기 위한 child_process 모듈을 제공한다. 우리는 runPython.js에서 runPython 함수를 만들기 위해 이를 사용할 것이다.

javascript
const { spawn } = require('child_process');

const runPython = () => {
  const process = spawn('python', ['./my_script.py']);
  process.stdout.on('data', (data) => {
    console.log(`Python: ${data}`);
  });
};

module.exports = runPython;

Express.js

React 프론트엔드와 Python 백엔드를 연결하기 위해 Express.js를 사용한다. server.js에 Express.js 라우트를 정의하여 runPython 함수를 실행하고 결과를 반환한다.

javascript
const express = require('express');
const runPython = require('./runPython');
const app = express();
const port = 3000;

app.get('/run-python', (req, res) => {
  runPython();
  res.send('Python Script Executed');
});

app.listen(port, () => {
  console.log(`Server listening at http://localhost:${port}`);
});

React.js에서 Python 호출하기

React 앱에서는 Express.js 라우트에 GET 요청을 보내 Python 스크립트를 실행한다. HTTP 요청을 처리하기 위해 axios 패키지를 사용할 것이다.

jsx
import React, { useEffect } from 'react';
import axios from 'axios';

function App() {
  useEffect(() => {
    axios.get('http://localhost:3000/run-python')
      .then((res) => console.log(res.data))
      .catch((error) => console.log(error));
  }, []);

  return (
    <div className="App">
      Check the console!
    </div>
  );
}

export default App;

결론

우리는 React.js 애플리케이션에서 Python 스크립트를 성공적으로 실행했다. Python과 React.js를 조화롭게 사용하면 우수한 성능을 가진 웹 애플리케이션을 만들 수 있을 것이다.

자주 묻는 질문

  1. Python 함수의 반환 값을 React 앱에서 가져올 수 있을까요? 가능하다. runPython 함수에서 console.log 대신 Python에서 받은 데이터를 반환할 수 있다. 그런 다음 Express 라우트를 수정하여 이 데이터를 React.js 앱으로 반환할 수 있다.
  2. React 앱에서 Python 스크립트 오류를 처리하는 방법은 무엇인가? child_process의 stderr 이벤트를 활용하여 오류를 처리할 수 있다. runPython 함수 내부에 stderr에 대한 이벤트 리스너를 추가하여 오류를 로그로 기록하거나 프론트엔드로 전송하여 처리할 수 있다.
  3. React Native 앱에서 Python 스크립트를 실행할 수 있을까요? React Native 앱에서 직접 Python 스크립트를 실행하는 것은 간단하지 않다. React Native는 JavaScript 환경에서 실행되기 때문이다. 그러나 Python 스크립트를 서버에서 실행하고 HTTP 요청을 통해 React Native 앱과 통신할 수 있다.
  4. 이 방법은 대규모 애플리케이션에 효율적일까? 이 방법은 가벼운 작업에 적합한다. 대규모 애플리케이션이나 복잡한 작업의 경우 Django나 Flask와 같은 전용 Python 웹 프레임워크를 사용하고 API를 통해 통신하는 것이 좋다.
© Copyright 2023 CLONE CODING