-
[React 기초] Webpack 설치 및 실행 : 8탄 - Babel preset-env 환경 설정컴퓨터 알아가기/React 2024. 1. 11. 19:30728x90반응형
지금까지 공부해 온 웹팩으로 기본적인 설치 및 실행은 가능합니다만 가능한 다양한 소스를 통하여 설정하는 법을 정리해 놓으면 향후 발생될 수 있는 에러에 대한 대처능력도 향상될 수 있다고 봅니다. 오늘은 일반 자바스크립트가 아닌 React에서 사용되는 Babel에 대한 플러그인 설정을 확인할 예정입니다.
이런 설정들을 한번 해 놓으면 향후 사용하는 프로그램에 복사하여 좀 더 쉽게 사용할 수 있을겁니다. 이 내용은 제로초 TV의 React강좌를 기본으로 현 시점 현 환경에 맞게 공부하면서 정리한 내용입니다.
▒ Babel / preset-env 설정
1. Babel / preset-env 란
React내 JSX문서를 읽을 수 있는 환경설정을 해주는 역할이 Babel인데 웹에서 표시되는 결과물이 크롬이나 익스플로러 등 다양한 브라우저들에 대한 호환설정을 해 주는 곳입니다.
2. 환경설정
webpaack.config.js에서 module안에 기존에 설정된 preset/env에서browser를 추가해 줍니다.
상기 코드에 뜻은 한국에서 사용되는 브라우저 상위 5%이상에서 호환되는 설정입니다.
이제 build를 해보면 Terminal 창에서 다음과 같이 한국에서 사용되는 브라우저 상위 5%를 확인할 수 있습니다.
참고로 ios는 애플기기, samsung은 삼성기기를 나타냅니다.
반응형'컴퓨터 알아가기 > React' 카테고리의 다른 글
[React 기초] 끝말잇기 게임 (JS복습) : 클릭하면 게임이 시작됩니다! (0) 2024.01.15 [React 기초] Webpack 설치 및 실행 : 9탄 - Hot Reloading (0) 2024.01.12 [React 기초] 구구단게임 웹팩으로 실행하기 (0) 2024.01.10 [React 기초] Webpack 설치 및 실행 : 6탄 - CSS Loader 설치하기 (0) 2023.12.31 [React 기초] Webpack 설치 및 실행 : 5탄 - 웹팩 개발 서버 (devServer) 설치 (0) 2023.12.31