TIL/React

FTP 기반 php 서버에 React 점진적 마이그레이션하기(1)

시럽이 2025. 5. 21. 20:37

우리 회사는 매우매우 레거시 코드를 사용하고 있고

FTP 방식으로 실서버에 적용하고 있어, 마이그레이션은 내 마음 속 숙제였다.

입사 이후부터 줄곧 마이그레이션을 주장하고 있지만

최소 15년간 누적된 스파게티 코드로 인해 사이트의 복잡도가 높아 그 누구도 선뜻 내 제안을 받아들이지 못했다.

입사한 지 2년이 지난 최근에야 부분적 마이그레이션을 적용해서 점차 확대해가는 방식을 승인해주셨는데,

이전에 시도했을 땐 '이렇게 복잡하면 안하느니만 못한데...?' 수준이라 포기했었다.

그리고 최근 다시 찾아봤는데, vite로 엄청 쉽고 간단하게 할 수 있는 것이었다.!

 

 

1. 먼저 로컬에서 vite로 React 프로젝트를 생성한다.

pnpm create vite@latest php-to-react --template react
cd php-to-react
pnpm install

 

 

2. 그리고 원래 react 프로젝트 하듯 작업~~~

 

/src/App.jsx

import React from "react";
import { createRoot } from "react-dom/client";

function App() {
  return (
    <div>
      <h2>여기다 마이그레이션할거에용</h2>
      <p>우헤헹</p>
    </div>
  );
}

const container = document.getElementById("root");
if (container) {
  const root = createRoot(container);
  root.render(<App />);
}

 

/src/main.jsx

import { StrictMode } from 'react'                  
import { createRoot } from 'react-dom/client'       // React 18 이상에서는 createRoot 사용
import './index.css';                               
import App from './App.jsx'                         

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

!! 주의할 점 !!

createRoot는 React 18 이상에서만 사용하는 API이다.

React 17 이하는 ReactDOM.render() 사용.

 

 

3. vite config 설정해준다.

vite.config.js

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  build: {
    outDir: 'dist',
    emptyOutDir: true,
    rollupOptions: {
      input: './src/main.jsx',
      output: {
        entryFileNames: 'react-widget.js'
      }
    }
  }
})

 

 

4. 기존 php서버가 있는 페이지에 #root를 넣어서 react를 마운트시킨다.

/index.php

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>React 포함된 PHP 페이지</title>
</head>
<body>
  <h1>PHP로 구성된 기존 페이지</h1>

  <!-- React가 마운트될 위치 -->
  <div id="root"></div>

  <!-- React 스크립트 불러오기 -->
  <script type="module" src="/dist/react-widget.js"></script>
</body>
</html>

 

 

5. 다시 리액트 작업하던 로컬로 돌아와 빌드시켜준다.

 

pnpm run build

 

 

6. 그러면 /dist/react-widget.js 폴더와 파일이 뿅 생성된다.

 

7. React 빌드 결과물 /dist 폴더 전체를 PHP 서버의 웹 루트(public) 아래로 업로드한다.

 

 

 

여기까지 하면 #root가 있는 /index.php에 리액트가 올라가있는 것을 확인할 수 있다!!

처음엔 혼란스러웠다...리액트 전체 폴더를 올리지 않고 js 파일만 올렸는데 리액트가 된다고? 이게 나온다고?

 

 

 

 

그 이유는

React (Vite, Webpack 등)는 개발용 프로젝트 구조와 운영용 파일을 분리하기 때문

src/, node_modules/, vite.config.js 등 🔧 개발용 파일 (로컬에서만 필요)
dist/ ✅ 빌드된 정적 파일들
실제 서버에서 사용
dist/react-widget.js, dist/assets/... 브라우저가 실행 가능한 순수 HTML/JS/CSS

 

  • 전체 프로젝트 폴더 = 설계도 + 재료 + 공장
  • dist/ 폴더 = 완성된 제품

서버는 “설계도”가 아니라 “완성된 제품”만 있으면 되기 때문이다.

 

 

 

마운트까진 성공했으니 다음엔 css와 typescript를 적용해보도록 하겠다!