폴리필(Polyfill)은 새로운 기능을 지원하지 않는 오래된 브라우저에서 JavaScript 코드가 원활하게 실행될 수 있도록 기능을 추가하는 코드 조각입니다. 즉, 폴리필은 브라우저가 기본적으로 지원하지 않는 JavaScript 기능을 구현하여 해당 기능을 지원하지 않는 브라우저에서도 코드가 올바르게 작동하도록 합니다.
바벨(Babel)은 JavaScript 컴파일러로, 최신 JavaScript 문법을 지원하지 않는 브라우저에서도 실행 가능한 JavaScript 코드로 변환해줍니다. 주로 ES6+ 문법을 구형 브라우저에서도 호환 가능한 ES5 코드로 변환하는 데 사용됩니다. 바벨은 주로 프로젝트 빌드 단계에서 사용되며, 트랜스파일러(Transpiler)로도 알려져 있습니다.
바벨 폴리필(Babel polyfill)은 바벨과 함께 사용되는 폴리필입니다. 바벨을 사용하여 ES6+ 문법을 ES5로 변환하는 동시에, 브라우저에서 지원하지 않는 기능을 구현하는 폴리필도 제공합니다. 따라서 바벨 폴리필은 코드를 변환하는 동안 필요한 폴리필을 자동으로 추가하여 코드가 구형 브라우저에서도 정상적으로 동작하도록 보장합니다.
리액트(React)와 넥스트(Next.js) 모두 바벨(Babel)을 내장하고있어서 바벨설정은 필요가 없따.
- 리액트(React): 리액트는 JavaScript 라이브러리로, 기본적으로 바벨을 사용하여 ES6+ 문법을 구형 브라우저에서도 실행 가능한 ES5 코드로 변환합니다. 따라서 리액트를 사용하여 개발할 때에는 바벨을 따로 설정할 필요가 없습니다.
- 넥스트(Next.js): 넥스트는 리액트 기반의 웹 애플리케이션을 빌드하기 위한 프레임워크로, 바벨을 내장하고 있습니다. 넥스트는 기본적으로 ES6+ 문법을 지원하며, 바벨을 사용하여 코드를 변환하여 서버 측 렌더링 및 클라이언트 측 렌더링에서 모두 호환 가능한 형태로 만듭니다. 개발자는 넥스트 프로젝트를 생성할 때 바벨 구성을 따로 설정할 필요가 없습니다.
😀😀😀😀😀😀😀😀😀😀😀😀😀😀😀😀😀😀😀😀