PHP + HTML에서 React + Express로 갈아탄 이유와 과정
마이그레이션 이야기
#PHP #HTML #React #Express
초반에 웹 프로젝트를 만들 때는 PHP랑 HTML로 전체를 구성했었다. 서버에서 데이터를 넘기고, 그걸 HTML로 바로 그려주는 방식. 관리자 페이지도, 사용자 화면도 그냥 .php 파일에 include로 묶고, 필요하면 jQuery로 동작 붙여서 처리하면 그만이었다. 그렇게 하나씩 기능을 붙이다 보니, 서비스는 점점 커지고 페이지도 많아졌다. 그리고 어느 순간부터… 점점 불편해지기 시작했다. 기존 PHP + HTML 구조의 한계 처음엔 빠르고 편했지만, 프로젝트가 커지면서 다음과 같은 한계가 보이기 시작했다. 1. 상태 관리가 안 된다 페이지 이동할 때마다 새로고침이 일어나서, 사용자 상태나 UI의 선택 상태 같은 걸 유지하려면 매번 session이나 localStorage를 건드려야 했다. 2. 컴포넌트 재사용이 불가능하다 버튼이나 카드 같은 UI를 재사용하려면 복붙하거나 include로 처리했는데, 이게 쌓이다 보니 관리가 너무 힘들어졌다. 3. 비동기 UI 구현이 점점 고통스러워졌다 처음엔 jQuery로 간단한 Ajax 처리나 modal 띄우는 정도만 했는데, 기능이 늘어나니까 UI 상태가 꼬이고, 디버깅도 어려워졌다. 예를 들어 무한스크롤, 조건 필터링, 정렬 같은 기능은 스크립트 간 충돌이나 반복된 DOM 조작으로 금방 지저분해졌다. 4. 백엔드와 프론트의 경계가 없다 PHP는 템플릿과 로직이 뒤섞여 있어서, 디자인만 바꾸려고 해도 PHP 코드를 봐야 했다. 역할이 섞이니까 유지보수도 어렵고, 협업도 비효율적이었다. React + Express로 전환하게 된 계기 그래서 이 구조로는 더 이상 유지보수가 어렵겠다고 판단했고, React + Express 기반으로 전체 구조를 마이그레이션하기로 했다. React로 프론트 전체를 컴포넌트 기반으로 재구성하고 Express로 API 서버를 따로 분리해서 RESTful하게 관리하는 방식 그렇게 하면 프론트와 백엔드가 깔끔하게 나뉘고, 역할 분리도 명확해져서 확장성도 좋아진다. React를 도입한 이유 1. 컴포넌트 기반 구조가 유지보수에 좋다 버튼, 모달, 리스트 같은 걸 다 분리해서 재사용할 수 있고, 수정해도 다른 데에 영향 없이 관리 가능하다. 2. 상태 관리가 강력하다 useState, useEffect, useQuery, zustand 등으로 UI 상태, 서버 상태, 사용자 상태를 유연하게 다룰 수 있다. 3. 전체 새로고침 없이 부드럽게 동작한다 CSR 방식이라서 페이지 이동할 때도 깜빡임 없이 부드럽게 넘어가고, 사용자 경험 자체가 훨씬 좋아졌다. 그리고 백엔드는 왜 Express인가? 솔직히 말하면, 기술적인 이유보다 현실적인 이유가 더 컸다. 빠르게 개발할 수 있다 Express는 몇 줄만으로 API를 만들 수 있다. app.get('/api/users', (req, res) = { res.json([{ id: 1, name: '홍길동' }]); }); 회사 규모도 작고, 빠르게 MVP를 돌려야 하는 상황이었기 때문에 빠르게 만들고 빠르게 배포할 수 있는 구조 가 필요했다. 자바스크립트로 구현되어 있다. Express가 자바스크립트 기반이라서 쉽게 이해하고 빠르게 구현할 수 있었다. 확장도 생각보다 어렵지 않다 npm만 있으면 cors, jwt, multer 같은 기능도 쉽게 붙일 수 있고 라우팅, 미들웨어 설계도 자유도 높아서 실제 운영에서도 무리 없이 쓸 수 있었다. 마무리 지금도 PHP로 빠르게 프로젝트를 시작할 수 있다. 하지만 프로젝트가 커지고, UI가 복잡해지고, 협업이나 유지보수가 중요해지는 순간에는 구조를 재정비하는 게 훨씬 이득이다. React + Express는 내가 경험한 바로는 “가장 빠르게 만들면서도 유지보수 가능한 구조”였다. 초기엔 코드를 잘 짜는 것보다, 일단 동작하는 걸 만드는 게 더 중요한 타이밍 이었다. 그런 상황에서 Express는 딱 맞는 선택이었고, React는 그 위에 올라갈 수 있는 좋은 UI 프레임워크였다. 만약 지금 비슷한 고민을 하고 있다면, "처음부터 잘" 하려고 하기보단 지금 필요한 걸 빠르게 해낼 수 있는 구조 를 먼저 고민해보는 걸 추천한다.