바벨(Babel)
-
주요 역할:
최신 자바스크립트 문법을 구형 브라우저에서도 동작할 수 있도록 변환(트랜스파일)하는 도구이다. -
리액트와의 연관성:
리액트는 JSX라는 확장된 자바스크립트 문법을 사용한다. JSX는 브라우저가 직접 이해할 수 없기 때문에, 이를 일반 자바스크립트로 변환해야 한다. 바벨이 이 작업을 담당한다.
또한, 최신 자바스크립트 기능(예: ES6+)을 사용하기 위해 바벨이 이를 ES5 등의 구형 자바스크립트로 변환해준다.
웹팩(Webpack)
-
주요 역할:
여러 개의 자바스크립트 파일을 하나의 번들(bundle)로 묶어주는 모듈 번들러이다. 또한, 다양한 파일 형식(CSS, 이미지 등)을 처리할 수 있도록 도와준다. -
리액트와의 연관성:
리액트 프로젝트는 보통 여러 개의 파일로 구성된다.
웹팩은 이러한 파일들을 효율적으로 관리하고, 하나의 번들로 묶어 최적화된 형태로 배포할 수 있게 해준다. 웹팩을 통해 개발 환경을 설정하고, 핫 리로딩(hot reloading)과 같은 개발 편의 기능도 사용할 수 있다.
리액트와의 연관성 요약
1. JSX 변환:
리액트의 JSX 문법을 바벨이 변환하여 브라우저에서 이해할 수 있도록 한다.
2. 최신 자바스크립트 사용:
바벨을 통해 최신 자바스크립트 기능을 구형 브라우저에서도 사용할 수 있게 한다.
3. 모듈 관리 및 번들링:
웹팩은 여러 파일을 하나로 묶어주고, 다양한 파일 형식을 처리하며, 개발과 배포 과정을 효율적으로 관리한다.
4. 개발 환경 설정:
웹팩은 핫 리로딩, 코드 분할, 파일 압축 등 다양한 기능을 통해 리액트 개발을 더 편리하고 효율적으로 만들어준다.
따라서, 웹팩과 바벨은 리액트 프로젝트를 설정하고 관리하는 데 필수적인 도구들이다.
이 둘을 이해하고 사용하는 방법을 알고 있으면, 면접에서 리액트 프로젝트를 효과적으로 개발하고 관리할 수 있는 능력을 보여줄 수 있다.
