공부를 하던중 create-react-app를 이용해 리액트를 생성하는것 이 아닌 다른 방법이 있다고 해서 알아보다 알게된 것이 웹팩과 바벨이다.
일단 쉽게 생각하면 create-react-app은 웹팩 및 바벨과 같은 도구들을 설정을 대신해줘서 react를 쉽게 시작할 수 있도록 해주는 도구라고 할 수 있다.
1.웹팩(WebPack)
웹팩은 오픈 소스 자바스크립트 모듈 번들러이다.
주로 JavaScript 파일을 포함한 다양한 웹 리소스들을 처리하고, 이들을 하나 또는 여러개의 번들로 묶어줍니다.
즉 애플리케이션을 구성하는 자원들을 합치고 압축 해주는 역할을 한다.
웹팩의 주요 기능
- 모듈 번들링(Module Bundling): 웹팩은 자바스크립트 모듈 뿐만 아니라 CSS, 이미지, 폰트 등과 같은 리소스들도 모듈로 간주하여 처리할 수 있습니다. 이들을 의존성에 따라 하나의 번들로 묶어줍니다.
// 모듈과 번들을 쉽게 생각하면 모듈은 부품
// 그 부품들을 모아놓은 것이 번들이라고 생각할 수 도있다-
로더(Loader): 웹팩은 다양한 유형의 파일을 처리하기 위해 로더를 사용합니다. 예를 들어, Babel을 사용하여 ECMAScript 최신 문법을 구형 브라우저에서도 동작할 수 있는 자바스크립트로 변환하거나, CSS나 이미지 파일을 애플리케이션에서 사용할 수 있는 형태로 변환할 수 있습니다.
-
플러그인(Plugin): 플러그인은 번들된 결과물에 대한 추가적인 처리를 수행할 수 있습니다. 예를 들어, 번들 사이즈 최소화를 위한 코드 압축, 환경 변수 주입, HTML 파일 생성 등 다양한 작업을 처리할 수 있습니다.
-
개발 서버(Development Server): 개발 중에 실시간으로 변경 사항을 확인할 수 있는 개발 서버를 제공합니다. 이를 통해 개발 과정에서의 빠른 피드백을 받을 수 있습니다.
-
코드 스플리팅(Code Splitting): 웹팩은 애플리케이션의 코드를 여러 청크로 나누어 로딩 시간을 최적화할 수 있습니다. 이를 통해 초기 로딩 시간을 줄이고 필요한 경우에만 추가 리소스를 동적으로 로드할 수 있습니다.
2. 바벨(Babel)
바벨(Babel)은 주로 최신 자바스크립트 코드를 구형 브라우저에서도 동작할 수 있는 호환성 있는 버전으로 변환해주는 도구입니다. 즉, 최신의 ECMAScript 표준을 사용하여 작성된 코드를 이전 버전의 JavaScript 코드로 변환하여 다양한 환경에서 실행할 수 있도록 해줍니다.
바벨은 통역사(?)같은 느낌이라고 할 수 있다. 통역이라는게 원래는 A라는 언어에서 B라는 언어로 바꿔주지만 바벨은 A라는 언어를 A라는 언어 그대로 바꿔준다.
예를 들면 방언을 표준어로 바꿔주는?
아니면 표준어를 방언으로 바꿔주는 느낌? 이라고 할 수 있다.
왜냐하면 최신 ECMAScript 로 작성된 코드들은 구형 브라우저에서는 그 문법을 읽지 못해 작동이 안되는 경우가 있는데 이를 위해 최신 자바스크립트 코드를 이전 버전의 자바스크립트 코드로 바꿔 줘야 하기 때문.
바벨의 주요 기능
-
최신 JavaScript 문법 변환: 바벨은 최신의 ECMAScript 표준을 준수하는 코드를 이전 버전의 JavaScript 코드로 변환해줍니다. 이를 통해 최신 문법을 사용하여 코드를 작성하고, 이를 구형 브라우저에서도 동작할 수 있도록 변환할 수 있습니다.
-
환경 대응 플러그인 지원: 바벨은 환경에 따라 다양한 플러그인을 지원하여, 특정 환경에서의 동작을 최적화할 수 있습니다. 예를 들어, 특정 브라우저에서의 동작을 보장하기 위해 필요한 변환 작업을 수행할 수 있습니다.
-
리액트 및 JSX 변환: 바벨은 JSX와 같은 리액트의 확장 문법을 일반 JavaScript로 변환해주어 브라우저가 이해할 수 있도록 도와줍니다. JSX는 리액트 애플리케이션에서 UI를 구성하는 데 자주 사용되는 문법입니다.
바벨은 모던 웹 개발에서 필수적인 도구로, 최신 자바스크립트 기능을 사용하면서도 다양한 환경에서 호환성을 확보할 수 있도록 도와줍니다. 주로 웹팩과 함께 사용되어, 모듈 번들링과 코드 변환을 통합하여 웹 애플리케이션의 개발과 배포를 효율적으로 관리할 수 있도록 합니다.
바벨의 동작 단계
- 파싱(Parsing): 바벨은 먼저 입력된 코드를 파싱하여 추상 구문 트리(Abstract Syntax Tree, AST)로 변환합니다. 이 단계에서 바벨은 코드의 구문을 분석하여 추상적인 구문 트리를 생성합니다.
프로그래밍에서 파싱이란
문자열을 구문 구조로 분석하는 과정을 가리킨다. 소스 코드를 읽고, 문법 규칙에 따라 추상 구문 트리나 토큰 으로 변환하는 작업이다. 간단하게 말하면 파싱은 문자열을 의미 있는 구성요소로 나누는 작업이다.
추상 구문트리(Abstract Syntax Tree, AST)란
추상 구문 트리는 프로그래밍 언어의 구문을 트리 구조로 표현한 것입니다. 이는 프로그램의 구조를 추상화하여 표현하며, 각각의 노드는 토큰과 연산자를 나타내며, 코드의 구문적 의미와 구조를 나타냅니다. AST는 파서에 의해 생성되며, 프로그램의 의미를 이해하고 분석하는 데 사용된다.
비유하자면 도면같은 느낌이다. 복잡한 구조를 간단하게 표현해 이해하기 쉽게 만들어준다.
토큰(Token) 이란
토큰은 소스 코드 내에서 의미 있는 최소 단위의 요소를 나타냅니다. 이는 예를 들어 변수, 함수, 키워드, 연산자, 구두점 등을 포함합니다. 토큰은 파싱 과정에서 추출되어, 이후의 구문 분석 과정을 위해 사용됩니다.
비유하자면 도면상의 각각의 구성요소들의 집합이다.
-
변환(Transformation): 변환 단계에서는 바벨은 생성된 AST를 특정한 규칙에 따라 변형시킵니다. 예를 들어, 최신의 자바스크립트 문법을 구형 브라우저에서 호환 가능한 예전 버전의 자바스크립트로 변환할 수 있습니다. 또한, JSX를 일반 JavaScript로 변환하는 작업도 여기서 수행됩니다.
(주로 최신 문법을 이전 버전의 호환 가능한 자바스크립트 코드로 변환한다.) -
출력(Printing): 마지막으로, 바벨은 변경된 AST를 원하는 형식의 코드로 다시 생성합니다. 이 과정에서 변환된 코드가 최종적으로 생성됩니다.
바벨의 동작단계를 요약하자면
1.코드를 분석하여 도면처럼 이해하기 쉽게 만들고
2.코드를 변환(주로 최신->구형)하고
3.출력(생성) 해준다.
