Lithe를 사용하여 PHP와 React 통합

이 게시물에서는 Lithe 프레임워크를 React 라이브러리와 통합하는 방법을 알아보고 Lithe가 프런트엔드 라이브러리와 완벽하게 통합되는 방법을 강조합니다. API 구축에 탁월할 뿐만 아니라 Lithe를 사용하면 애플리케이션 리소스에 쉽게 액세스할 수 있으며 CORS(Cross-Origin Resource Sharing)를 효율적으로 구성하여 애플리케이션이 안전하고 효과적으로 통신할 수 있도록 합니다.

1단계: 환경 구성

1. 유연한 설치

먼저 Lithe를 아직 설치하지 않았다면 설치하세요. 터미널에서 다음 명령을 실행하세요:

composer create-project lithephp/lithephp nome-do-projeto
cd nome-do-projeto

2. 리액트 설치

그런 다음 Lithe 프로젝트 내에서 새 React 프로젝트를 만듭니다. 실행:

npx create-react-app frontend
cd frontend

2단계: CORS 설치 및 구성

1. CORS 모듈 설치

Lithe 프로젝트에서 CORS 미들웨어를 사용하려면 lithemod/cors 패키지를 설치해야 합니다. 다음 명령을 실행하세요:

composer require lithemod/cors

2. CORS 미들웨어 사용

설치 후 Lithe 애플리케이션에서 CORS 미들웨어를 구성해야 합니다. 메인 파일 src/App.php를 열고 다음 코드를 추가하세요:

여러 소스가 API에 액세스하도록 허용하려면 다음과 같이 CORS를 구성하세요.

use Lithe\Middleware\Configuration\cors;

$app = new \Lithe\App;

$app->use(cors(['origins' => '*']));

$app->listen();

반면, React 애플리케이션만 API를 사용하도록 하려면 다음 구성을 사용하세요.

$app->use(cors(['origins' => 'http://localhost:3000']));

3단계: Lithe로 백엔드 구성

1. API 경로 생성

Lithe 프로젝트에서 React에 데이터를 제공할 새 라우터를 만듭니다. src/routes/api.php와 같은 경로 파일을 생성합니다:

use Lithe\Http\{Request, Response};
use function Lithe\Orbis\Http\Router\{get};

get('/data', function(Request $req, Response $res) {
    $data = [
        'message' => 'Hello from Lithe!',
        'items' => [1, 2, 3, 4, 5],
    ];
    return $res->json($data);
});

경로 파일을 정의한 후 Lithe 애플리케이션에 라우터를 추가해야 합니다. 기본 src/App.php 파일을 다시 열고 Listen 메서드를 호출하기 전에 다음 코드를 추가하세요.

// ...

use function Lithe\Orbis\Http\Router\router;

$apiRouter = router(__DIR__ . '/routes/api');

$app->use('/api', $apiRouter);

// ...

src/App.php 파일은 다음과 같습니다:

use Lithe\Middleware\Configuration\cors;
use function Lithe\Orbis\Http\Router\router;

$app = new \Lithe\App;

$app->use(cors(['origins' => '*']));

$apiRouter = router(__DIR__ . '/routes/api');

$app->use('/api', $apiRouter);

$app->listen();

2. 경로 테스트

다음 명령을 사용하여 Lithe 서버를 시작합니다.

php line serve

JSON이 올바르게 반환되는지 확인하려면 http://localhost:8000/api/data를 방문하세요.

4단계: React로 프런트엔드 구성

1. React에서 API 사용하기

React 프로젝트에서 src/App.js 파일을 열고 콘텐츠를 다음으로 바꿉니다.

import React, { useEffect, useState } from 'react';

function App() {
    const [data, setData] = useState(null);

    useEffect(() => {
        fetch('http://localhost:8000/api/data')
            .then(response => response.json())
            .then(data => setData(data))
            .catch(error => console.error('Error fetching data:', error));
    }, []);

    return (
        <div>
            <h1>Integrando o PHP com React usando Lithe</h1>
            {data ? (
                <div>
                    <p>{data.message}</p>
                    <ul>
                        {data.items.map((item, index) => (
                            <li key={index}>{item}</li>
                        ))}
                    </ul>
                </div>
            ) : (
                <p>Carregando...</p>
            )}
        </div>
    );
}

export default App;

2. React 서버 시작하기

React 개발 서버를 시작하려면 다음을 실행하세요.

composer create-project lithephp/lithephp nome-do-projeto
cd nome-do-projeto

5단계: 통합 확인

브라우저에서 http://localhost:3000으로 이동하세요. "Hello from Lithe!"라는 메시지가 표시됩니다. API에서 반환된 항목 목록입니다.

최종 고려 사항

이를 통해 Lithe를 React와 성공적으로 통합하고 React 애플리케이션만 백엔드 리소스에 액세스하거나 필요에 따라 여러 소스를 허용하도록 CORS를 구성했습니다. 이제 원하는 대로 애플리케이션을 확장할 수 있습니다.

댓글로 여러분의 경험과 질문을 자유롭게 공유해주세요!

위 내용은 Lithe를 사용하여 PHP와 React 통합의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!