「WebPack 개발」 5 의존성 중복해결 & 함수형 적용
웹팩으로 하위 모듈(폴더)을 빌드하는 경우, 하위 모듈끼리 충돌하는 경우가 발생할 수 있다. 이번 포스팅에서는 하위 모듈간 충돌을 해결하는 방법과 container에서 하위 모듈로 데이터를 전달하는 방식에 관해 알아보자.
1] 하위(모듈)폴더/ webpack.config.js
현재 cart, product는 'faker'모듈을 사용하고 있다. 이로써 container의 8080포트는 faker모듈을 2번 불러온다.(중복 발생)
하위 폴더에서 모듈 중복을 제거하기 위해서 위와 같이 'shared'키 값으로 해당 모듈을 설정한다.(cart, product 모두 적용) 그리고 다시 8080포트를 실행해보면 아래와 같이 faker모듈이 1회만 실행되는 것을 볼 수 있다.
2] 하위(모듈)폴더/ bootstrap.js 생성
container의 webpack.config.js에서 중복된 하위 폴더의 모듈을 'shared'처리 이후 「8081(product), 8082(cart)」 포트를 실행해보면 아래와 같은 에러가 발생한다. 그 이유는 container의 bootstrap.js는 마지막에 'shared'로 처리한 (중복)모듈을 처리하기 때문에 (먼저 실행된)하위 폴더의 웹서버는 'faker'를 찾을 수 없기 때문이다.
중복 모듈을 제거하기 위한 비동기적 에러를 해결하려면, 하위 폴더의 index.js 역시 container의 경우처럼 bootstrap.js를 사용하면 된다.
위와 같이 하위폴더의 src/ 역시 container와 같은 방식으로 bootstrap.js를 생성해주면 더 이상 에러가 발생하지 않는다.
3] 모듈 버전 충돌
cart, product 폴더에 설치한 'faker'의 버전이 다르면 중복이 발생한다.
가령, product에 설치한 faker는 6.xx버전인 반면, cart의 faker모듈이 7.xx이라면 모듈이 container웹 서버에서 faker모듈이 2회 실행된다.(각 버전별) 이때 아래와 같이 shared 객체 내부에 'singleton: true'를 설정해보자.
container에서 버전 충돌이 발생하지 않고, 아래와 같은 경고문 한줄로 넘어갈 수 있다.
개발자모드에서 network속성창을 실행해보자.
faker버전이 1회 실행된 것을 볼 수 있다.
4] Prop방식, 함수형 변환
리액트와 같은 프레임워크에서 사용하는 Prop전달 방식을 웹팩으로도 구현할 수 있다. 가령, container의 index.html에서 id 요소값을 임의로 설정했다고 가정해보자. 이와 같은 상황에서 에러를 해결하는 방법은 함수형 프로그래밍이다.
product의 bootstrap.js를 아래와 같이 수정한다.
bootstrap.js가 받는 인자값을 함수형 프로그래밍 방식으로 설정한다. (cart 동일) 만일, product팀이 리액트를 사용한다면 아래와 같이 jsx 결과값을 내보낼 수도 있다.
5] 마운트
하위팀에서 마운트를 설정한다면, container는 자유롭게 id 요소를 정할 수 있다. 이로써, 아래와 같이 유연한 구조가 만들어진다.
위의 코드에서 "process.env.NODE_ENV"는 webpack.config.js의 'mode: 'development'를 의미한다. 즉, container팀에서 임의 id요소를 사용하더라도 전체 시스템은 에러를 내지 않고 'dev-products' ID를 마운트에 전달한다. 따라서 product부분에 문제가 발생하더라도 빈 공백으로 나타난다.(아래 사진)
cart의 마운트 역시 product와 같은 방식이다. container팀과 cart팀이 서로 다른 id요소를 사용하는 상황임에도 시스템은 다운되지 않는다.
container의 bootstrap.js는 cart, product를 각각 다른 모듈명으로 import한다.(위의 우측 사진)
8080포트에서 최종결과를 실행해보자.
아래와 같이 정상적으로 런타임이 실행된다면 마운트 성공이다.
