5.x부터 사용하던 Laravel이 어느새 10대가 되었다.
이제는 PHP 버전도 8.1 이상이 필요해졌다.
서버에 웹서버와 8.1이상의 PHP, 그리고 npmjs가 설치되어 있다고 가정하고 시작해보자.
먼저 프로젝트 디렉토리로 이동하여 프로젝트를 생성해보자.
이어서 npm 초기화를 진행 후, react와 더불어 vite 등 필요한 요소들도 설치해준다.
$ composer create-project laravel/laravel myapp
$ cd myapp
$ npm init
$ npm i react react-dom react-router-dom vite laravel-vite-plugin @vitejs/plugin-react
permission 관련 설정과 .env 설정등을 마치고(과정 생략),
routes/web.php 파일에서 리액트로의 접근을 위한 통합 라우트를 설정한다.
// routes/web.php
<?php
use Illuminate\Support\Facades\Route;
Route::get('{reactRoutes}', function () {
return view('index'); // your start view
})
->where('reactRoutes', '^((?!(api|user|password|checkPassword)).)*$');이제 모든 라우트는 resources/views/index.php 로 향하게 되고,
접근한 경로에 따라 react-router가 동작하여 해당하는 jsx를 로드하게 된다.
Laravel 9 버전 이후로는 laravel-mix 번들러가 vite로 교체되었다.
듣기로는 Vue 제작자가 만든 번들러라고 한다.
경험해본 결과 laravel-mix에 비해 굉장히 빠른 속도로 빌드가 진행되었다.
간단하게 vite.config.js 파일을 프로젝트 루트에 작성해본다.
//vite.config.js
import {defineConfig} from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react';
import {fileURLToPath, URL} from 'url';
export default defineConfig( {
server: {
watch: {
usePolling: true
}
},
build: {
minify: false
},
plugins: [
laravel( {
input: ['resources/sass/app.scss', 'resources/js/app.jsx'],
refresh: true
} ),
react()
],
resolve: {
alias: {
"@": fileURLToPath( new URL( "./src", import.meta.url ) )
}
}
} );app.jsx는 React의 render() 함수가 들어있는 이 앱의 진입점이다.
그냥 index라고 부르면 바로 눈치챌텐데, 굳이 진입점(entry point)라는 용어가 사용되었다.
그냥 index라고 생각하면 얼추 의미는 맞을듯 하다.
CLI에서 npm run build 커맨드를 사용하여 정상적으로 번들링이 되는지 확인한다.
앱이 작동하려면 라라벨의 routes/web.php에 react 통합 라우트로 설정 된 index.php 파일을 작성해둬야 한다.
blade template의 layout 기능을 통해 다양화를 해도 좋지만, SPA를 사용할 예정이라면 굳이 그러지 않아도 좋다.
// resources/views/index.blade.php
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Head butting to raw ground</title>
@yield('styles')
</head>
<body>
<div id="app">
</div>
</body>
<footer>
@vite('resources/js/app.jsx')
</footer>
</html>설정한 호스트로 접속하여 작동하는지 확인 해 본다.
continue;
'내가 자꾸 까먹어서 쓰는 개발 이야기 > React' 카테고리의 다른 글
| 맨땅에 헤딩하는 Laravel 10 + React 18 (2) (0) | 2023.12.12 |
|---|
최근댓글