저도 예전에는 자바 기반으로 개발을 했던 사람이라, 요즘 환경이 낯설게 느껴지더라고요. 그래서 과거 자바 환경과 지금의 Node.js + React + Vite 환경을 비교하면서 정리해봤습니다.
실행 환경의 차이
예전에는 JDK를 설치하고 javac로 컴파일한 뒤 .class 파일을 .war나 .ear로 묶어서 Tomcat 같은 WAS에 배포했죠. 결국 JVM 위에서 애플리케이션이 실행되는 구조였습니다.
지금은 Node.js가 런타임이자 서버 역할까지 합니다. 자바스크립트는 따로 컴파일이 필요 없고, npm run dev 같은 명령으로 바로 개발 서버를 띄울 수 있습니다. 예전의 JVM + Tomcat 조합을 Node.js가 한 번에 해결해준다고 보면 이해하기 쉽습니다.
빌드와 번들링
자바 시절에는 Ant, Maven, Gradle 같은 빌드 툴이 필수였습니다. 소스코드를 컴파일하고, 의존성을 관리하고, 최종 배포 패키지를 만드는 역할을 했죠.
지금은 Vite가 그 자리를 대신합니다. 자바스크립트는 컴파일 대신 번들링(build) 과정이 필요하기 때문에 Vite가 코드를 묶어주고, 개발 중에는 코드 수정 즉시 반영되는 핫 리로드도 제공합니다. Maven + HotSwap 기능을 합쳐놓은 셈입니다.
라이브러리와 패키지 관리
예전에는 pom.xml이나 build.gradle에 의존성을 적고 Maven Central에서 jar 파일을 가져왔습니다.
지금은 package.json에 라이브러리를 기록하고 npm install 명령으로 npm registry에서 내려받습니다. 구조는 비슷하지만, 훨씬 가볍게 돌아갑니다.
프론트엔드와 백엔드
과거에는 JSP/Servlet으로 화면과 로직을 같이 개발했습니다. Spring MVC를 쓰면 Controller가 데이터를 준비하고 JSP가 화면을 그렸죠.
지금은 역할이 확실히 나뉩니다. React는 오로지 UI 전용이고, 브라우저 안에서 실행됩니다. 백엔드는 Node.js/Express 같은 환경에서 API만 제공하는 식입니다. 즉 JSP가 React로, Controller가 Express로 분리된 구조라고 보면 됩니다.
실행과 배포
예전에는 mvn package로 war 파일을 만든 후 WAS에 배포하고, 서버를 재기동해야 서비스가 올라갔습니다.
지금은 npm run build로 정적 파일(js, css, html)을 만들고, 그걸 Nginx 같은 서버에 올리면 끝입니다. 서버 자체도 Node.js 기반으로 띄울 수 있고, Vercel이나 Netlify 같은 정적 배포 서비스를 이용하면 훨씬 간단하게 배포할 수도 있습니다.
역할 대응표
| 과거 Java 환경 | 지금 Node.js + React 환경 | 설명 |
|---|---|---|
| JVM (Java Virtual Machine) | Node.js 런타임 | 실행 환경 |
| Tomcat / WAS | Vite 개발 서버 (또는 Express) | 요청 처리와 개발 서버 |
| Maven / Gradle | npm (package.json) | 의존성 관리 |
| JSP / Servlet | React 컴포넌트(App.jsx 등) | UI 처리 |
| Controller (Spring MVC) | Express (선택 사항) | API 계층 |
| WAR/EAR 배포 | npm run build → 정적 파일 | 배포 방식 |
| HotSwap, WAS 재기동 | Hot Reload (Vite dev server) | 개발 편의성 |
JSP와 React의 큰 차이
JSP는 서버에서 실행되어 HTML을 완성해 내려주는 방식이었습니다. 즉, 화면 코드가 백엔드에 있던 셈이죠.
반면 React는 브라우저에서 실행됩니다. 서버는 React 코드를 내려줄 뿐, 실제 렌더링은 클라이언트가 직접 합니다.
- JSP: 서버 사이드 렌더링 (HTML 완성본 전달)
- React: 클라이언트 사이드 렌더링 (데이터 요청 → 브라우저에서 화면 구성)
정리
과거에는 서버에서 화면까지 다 만들어서 내려줬지만, 지금은 프런트 코드가 필요한 데이터를 백엔드에 요청하고 받아서 화면을 그립니다. 그래서 요즘 백엔드의 주 역할은 화면 구성보다는 API 제공이고, 프런트는 그 데이터를 이용해 동적으로 UI를 만드는 구조가 된 거죠.
자바 개발하던 시절과 비교해보면 익숙한 부분도 있지만, 구조적으로는 확실히 “백엔드는 API, 프런트는 UI”로 역할이 나뉜 게 가장 큰 차이인 것 같습니다.