리액트를 활용하여 프로젝트 빌드를 하고나면 웹팩과 바벨이 자동으로 설정됩니다. 이전 포스팅을 통해 웹팩에 대해 살펴보았으므로 이번에는 바벨에 대해 알아보겠습니다. 대충 자바스크립트 컴파일러로 이해하고 넘어갔었는데 왜 필요한 지, 어떻게 사용하는지 등에 대해 작성하겠습니다. 바벨 바벨은 자바스크립트 컴파일러입니다. ES6+ 문법이 등장한 시점에 브라우저는 이 문법을 이해하지 못했습니다. 따라서 이런 크로스 브라우징 문제를 해결하기 위해 생겨난 도구로써 ES6+버전의 자바스크립트, 타입스크립트, JSX 등 다양한 언어를 모든 브라우저에서 호환될 수 있도록 도와줍니다. 바벨의 동작 원리 파싱(Parsing) 바벨은 소스 코드를 분석하여 추상구문트리/AST(Abstract Syntax Tree)로 변환합니다. ..