리액트(React) 기반 애플리케이션을 구동할 때 터미널(Terminal) 콘솔에 바벨(Babel) 관련 의존성 경고 메시지가 출력되는 경우가 있다. 이 글은 `babel-preset-react-app`에서 발생하는 `@babel/plugin-proposal-private-property-in-object` 패키지 누락 경고의 원인을 파악하고 이를 해결하는 방법을 다룬다. 프로젝트의 개발 의존성(DevDependencies) 설정을 수정하여 경고 메시지를 제거하고 안정적인 개발 환경을 유지하는 방법을 설명한다.
터미널 경고 메시지 확인
터미널 창에 아래와 같은 메시지가 뜰때
One of your dependencies, babel-preset-react-app, is importing the
"@babel/plugin-proposal-private-property-in-object" package without
declaring it in its dependencies. This is currently working because
"@babel/plugin-proposal-private-property-in-object" is already in y
node_modules folder for unrelated reasons, but it may break at any
babel-preset-react-app is part of the create-react-app project, whi
is not maintianed anymore. It is thus unlikely that this bug will
ever be fixed. Add "@babel/plugin-proposal-private-property-in-obje
your devDependencies to work around this error. This will make this
go away.
위 이미지는 개발 서버를 실행하는 과정에서 터미널 화면에 노란색 경고 문구가 출력된 상태를 보여준다. 애플리케이션 실행이 즉각 멈추지는 않지만, 라이브러리 간의 의존 관계가 불안정한 상태임을 나타낸다.
경고 원인 분석
원인
babel-preset-react-app이 @babel/plugin-proposal-private-property-in-object 패키지를 사용하고 있지만, 이를 자신의 의존성에서 선언하지 않았다는 경고
바벨(Babel)은 최신 자바스크립트 문법을 구형 브라우저에서도 호환되는 코드로 변환해 주는 트랜스파일러(Transpiler, 번역 도구)이다. 번역 과정에서 특정한 최신 문법 규칙을 처리하려면 이에 대응하는 플러그인(Plugin, 보조 기능 부품) 패키지(Package)가 필요하다.
해당 경고는 `babel-preset-react-app` 패키지가 내부적으로 `@babel/plugin-proposal-private-property-in-object` 플러그인을 불러와 사용하면서도, 자체 설정 파일의 의존성(Dependency) 목록에 해당 패키지를 명시하지 않아 발생한다. 다른 라이브러리의 설치 과정에서 `node_modules` 디렉터리에 우연히 포함되어 임시로 동작하지만, 프로젝트 구성이나 패키지 버전이 변경될 경우 언제든 빌드 오류가 발생할 수 있다.
문제 해결 방법
해결
@babel/plugin-proposal-private-property-in-object를 개발 의존성에 추가
이 문제를 해결하기 위해서는 누락된 플러그인 패키지를 프로젝트의 개발 의존성 목록에 직접 추가해야 한다. 엔피엠(npm, 노드 패키지 매니저)을 사용하여 터미널에서 다음 명령어를 실행한다.
npm install --save-dev @babel/plugin-proposal-private-property-in-object
위 명령어의 `–save-dev` 옵션은 해당 패키지를 실제 서비스 배포 환경이 아닌 개발 환경 전용 의존성(`devDependencies`)으로 등록하도록 지정한다. 패키지를 명시적으로 설치하면 바벨 프리셋의 의존성 누락 문제가 보완되어 해당 경고가 더 이상 출력되지 않는다.
명령어를 실행할 때는 반드시 프로젝트 루트 디렉터리(`package.json` 파일이 위치한 경로)에서 실행해야 한다. 설치가 완료된 후 개발 서버를 재시작하면 경고가 해소된 것을 확인할 수 있다.