WebPack
리액트에선 컴포넌트를 여러파일로 분리해서 저장합니다. 이 컴포넌트 들은 일반 자바스크립트가 아닌 JSX문법을 이용합니다. 이컴포넌트들을 각각 실행할경우, 굉장히 성능상으로 느려질것이기 때문에, WebPack을 사용하여 하나로 묶어 줍니다. 간단히 말해 webpack은 모듈 번들러 입니다.
JSX란?
HTML 과 비슷한 문법으로 작성을 하면 이를 React.createElement 를 사용하는 자바스크립트 형태로 변환 해주는것 입니다.
Babel 이란?
쉽게 말하자면 바벨이란 건 자바스크립트 컴파일러라고 표현할수 있습니다. 자바스크립트는 굉장히 발전이 많이되고 문법도 자주 바뀝니다. 여러브라우저에서 호환성이 좋게끔 하기위해 바벨을 사용합니다.바벨은 새로운 문법이나 타입스크립트 혹은 JSX 같이 다른 언어로 분류되는 언어들에 대해서도 모든 브라우저에서 동작할 수 있도록 호환성을 지켜줍니다. 즉, 위와 같은 기술들이 모든 브라우저에서 작동되는 하위버전의 자바스크립트 언어로 변환된다는 거겠죠.
바벨의 단계
파싱 (parsing) : 코드를 읽고 추상 구문 트리(AST)로 변환하는 단계
변환 (Transsforming) : 추상 구문 트리를 변경하는 단계
출력 (Printing) : 변경된 결과물을 출력하는 단계
추상구문트리란?
추상 구문 트리란 프로그램 내에서 발생하는 기능을 나타내기 위해 만들어진 구문 구조입니다. 이는 고수준의 언어를 기계어로 변환하는 과정에서 꼭 필요합니다. 코드를 트리 구조의 데이터 스트럭쳐로 만들어냅니다. 이렇게 구조화시키면 프로그래머도, 컴퓨터도, 훨씬 파악하기 쉬워진다고 생각합니다.
