Tomcat(톰캣) = “Java 버전의 Node.js 서버”
1. 비유로 이해하기
나는 평소 리액트를 개발할 때 터미널에 npm run start(또는 yarn start)를 치면 Node.js가 로컬에 웹 서버를 하나 띄워주고, 브라우저로 접속할 수 있게 해주는 그 흐름에 익숙했다.
- Node.js: 자바스크립트 파일을 실행시켜 주는 녀석
- Tomcat: JSP(Java) 파일을 실행시켜 주는 녀석
처음엔 JSP가 낯설었는데, 결국 JSP 파일 자체는 그냥 텍스트 파일일 뿐이었다. 이걸 브라우저가 이해할 수 있는 HTML로 변환해서 내려주는 “엔진(서버 프로그램)”이 필요한데, 그 역할을 하는 게 바로 Tomcat이다.
2. 동작 방식의 차이
이 차이를 알고 나니 본질이 좀 더 선명해졌다.
- React
- 브라우저가 텅 빈 HTML과 JS 파일을 다운로드 받는다.
- 브라우저 안에서 JS가 돌면서 화면을 그린다. (Client Side Rendering)
- 서버는 그냥 파일만 던져주면 끝이다.
- JSP + Tomcat (옛날 방식)
- 브라우저가 “메인 페이지 줘!”라고 요청하면,
- Tomcat이 서버 컴퓨터 안에서 JSP 파일(Java 코드 + HTML 섞인 것)을 읽어서 HTML을 완성시킨다. (Server Side Rendering)
- 완성된 HTML을 브라우저한테 툭 던져준다.
리액트에 익숙한 입장에서 보면, “서버가 HTML을 다 만들어서 내려준다”는 발상 자체가 처음엔 어색했다. 그런데 돌이켜보면 웹의 원래 동작 방식이 이쪽이었던 셈이다.
3. React 내부 iframe 구조를 예시로 들어서 생각해보기
실무에서 마주한 구조가 딱 이랬다. React 프로젝트 내부에 JSP 페이지를 불러오는 상황인데, iframe 구조로 비유하면 다음과 같은 흐름으로 동작한다.
- 사용자 브라우저에는 React 앱이 떠있다.
- 그 안에 네모난 박스(
iframe)가 하나 있다. - 그 박스는 “야, Tomcat아! JSP 페이지 좀 HTML로 만들어서 보내줘!” 라고 요청한다.
- 뒤에 숨어있는 Tomcat이 코드를 돌려서 HTML을 만들고, 그걸
iframe안에 쏴준다.
처음 이 구조를 봤을 때는 솔직히 왜 이렇게 되어 있는지 의아했다. 하지만 레거시 시스템을 한꺼번에 걷어낼 수 없는 현실에서, 이런 하이브리드 구조는 나름 합리적인 과도기적 선택이었다고 생각한다.
요약
- Tomcat은 Java/JSP 코드를 돌려서 웹페이지로 보여주는 서버 프로그램이다.
- 리액트의
npm start(Node.js 서버)와 비슷한 역할을 한다고 보면 된다.