React 기반 프로젝트만을 다루다가, JSP + JQuery로된 프로젝트를 맡게되었을 때는 막막함과 불편함 그 자체였습니다. 특히 여러 사람의 손을 타며 일관성없이 성장해온 프로젝트인지라 제약사항도 많고, $('tag').append와 $('tag').on을 통해서 뷰와 액션을 추가해주다보니, 파일의 크기가 커지고 간혹 하나의 js 파일에 2만줄이 넘어가는 파일도 존재해 최악의 개발경험을 주었습니다.

JSP + React

새로운 Repository에 작업을 한다면 React를 사용하는데 문제가 없겠지만, 기존 프로젝트에서 사용하던 Layout의 코드들과 보안 관련 코드들이 너무나도 방대한데 프로젝트 자체에 대한 이해도가 높지 않은 상태에서 이를 진행하는데 시간적, 기술적 여유가 부족한 상태였습니다.

따라서 기존 프로젝트에서 제공하는 Layout등 코드들은 그대로 사용하되, 페이지 컨텐츠만 React로 작성하고자 했습니다.

기존 프로젝트의 빌드 방식

기존의 방식의 경우 glup을 통해 아래와 같이 빌드되었습니다.

const compile = () => {
  return src(path, { sourcemaps: true })
    .pipe(babel()) // ES6를 ES5로 변경 : 환경설정은 .babelrc
    .pipe( // release/js에 기존 파일 경로와 동일하게 생성됩니다.
      dest(`${dest}/release/js`, {
        **sourcemaps**: '.',
      }),
    );
};
...
exports.default = series(..., compile, ...);

<main>
	<%@ include file="/WEB-INF/views/.../header.jsp"%>
	<%@ include file="/WEB-INF/views/.../resources.jsp" %>
	...
	// webpack을 통해 bundling된 js
	<ver:script src="/resources/.../release/js/.../recruit.js"></ver:script>
</main>

JSP에선 .js 파일을 가져와 호출한다는 점에서 착안해, 번들링된 React 파일을 동일하게 가져온다면 JSP를 통해서 React를 사용할 수 있다는 생각이 들었습니다.

빌드된 index.js 파일 만들기

script 태그를 통해 가져올 index.js파일을 만드는 작업이 우선적으로 필요했습니다. 이를 위해서 webpack + babel을 통해서 React 파일을 glup에서 했던 경로와 동일하게 적용 후 번들링 해주었습니다.

const path = require('path');

exports.option = function() {
    return {
        mode: 'production',
				path: path.join(__dirname, './src/main/webapp', path),
        filename: 'index.js'
        module: {
            rules: [
                {
                    test: /\\.(ts|js)x?$/i,
                    exclude: /node_modules/,
                    use: {
                        loader: 'babel-loader',
                        options: {
                            presets: [
																'@babel/preset-env',
                                ['@babel/preset-react', {"runtime": "automatic"}], 
																'@babel/preset-typescript'
														],
                            plugins: [...]
                        }
                    }
                },
                {
                    test: /\\.scss$/,
                    use: [
                        {
                            loader: 'style-loader'
                        },
												...
                    ],
                },
						...
            ]
        },
    };
};

이후 번들링 된 index.js를 jsp에서 호출해주어 JSP에서 React 코드를 적용하는데 성공했습니다.

<main>
	<%@ include file="/WEB-INF/views/.../header.jsp"%>
	<%@ include file="/WEB-INF/views/.../resources.jsp" %>
	...
	// webpack을 통해 bundling된 js
	<ver:script src="/resources/.../release/js/.../index.js"></ver:script>
</main>

한계점

CRA를 통해 프로젝트를 생성해보신 분이라면, React의 코드를 수정했을 때 수정사항이 바로 브라우저에 적용되는 것을 알 수 있습니다. 이를 react-hot-loader와 같은 라이브러리들이 처리해주는데, JSP의 경우 가지고있는 지식으로는 구현이 불가능했습니다.