📌 JSX가 뭐길래?

JSX는 리액트 컴포넌트 사용을 HTML 처럼 사용하기 위해 생겨났다. JSX는 XML 처럼 생긴 문법 표현식이다.

const name = "loco";

const element = <h1>안녕하세요~! {name}</h1>;

// rendered
<h1>안녕하세요~! loco</h1>;

하지만 우리는 이렇게 편리한 JSX를 바로 사용할 수 없다. 왜냐하면 브라우저는 HTML, CSS, Javascript 파일만 읽을 수 있으므로 JSX 문법은 읽을 수 없다.

하지만 이렇게 편리한데 사용하고 싶으니 babel이라는 컴파일러를 사용한다.

🌈 babel이 뭐길래?

Babel은 자바스크립트 컴파일러로 아래의 역할을 하여 브라우저 호환 문제를 해결한다.

구문 변환
대상 환경에 누락된 폴리필 기능
소스 코드 변환

babel을 사용하면 최신 문법으로 작성한 코드를 원하는 브라우저 환경에 잘 동작하도록 알아서 코드를 변환한 새로운 파일을 생성해준다.

또한, 애플리케이션이 방대해짐에 따라 한곳에서 파일을 관리하기가 어려워 모듈로써 파일을 구분하기 시작했다.

그렇게 파일을 구분을 하긴 했는데 그 많은 파일을 선후 관계를 따져가면서 HTML 파일에 등록시키고 최적화 하는 작업은 매우 번거로운 작업이다.

이러한 배경이 있기에 webpack이라는 모듈 번들러가 등장하였다.

🌏 webpack이 뭐길래?

앞서 설명했듯이 webpack은 모듈 번들러이다. 웹 브라우저 환경은 CBD, Module 프로그래밍에 적합하지 않다.

왜냐하면 브라우저 호환성때문이다. 모던 브라우저가 모듈을 사용할 수 있긴 하지만 모든 브라우저에서 가능한 것은 아니다. 또한, 브라우저는 애플리케이션을 build하는 환경을 기본적으로 제공하지 않기에 애플리케이션을 build하기 위한 환경을 개발자가 직접 설정해줘야 한다.

☄️ webpack을 사용하는 이유

1. 모듈 번들링

애플리케이션이 방대해짐에 따라 복잡성이 증가하여 코드가 혼란스러워지고 뒤섞이게 되어 개발이 어려워지는 문제가 발생하였다.

이를 해결하기 위해 코드 베이스를 모듈로 관리하고 번들링 해줘야한다.

2. 트리 쉐이킹(Tree Shaking)

애플리케이션에서 사용되지 않는 코드는 최적화 과정을 통해 제거되어 꼭 필요한 코드만 번들에 포함되도록 한다.

3. 코드 분할 (Code Spliting)

번들링으로 한곳에 묶기는 하였는데 이게 또 너무 크다보니 로드시간이 길어지는 문제가 발생하였다. 이를 해결하기 위해 코드 분할을 하여 런타임 중에 나눠진 파일들을 동적으로 불러오도록 하였다.

4. 코드 최적화와 소스맵(Source Map)

주석, 공백, 긴 함수명 등을 모두 축소 또는 제거하여 파일의 크기를 크게 줄일 수 있다. 이렇게 최적화된 코드는 사람이 읽기 힘들기에 디버깅하기가 어렵다.

이를 위해 코드를 추적하는 소스맵(Source Map)을 사용하여 버그를 추적하기가 용이하게 되었다.

결과적으로 편리한 JSX를 사용하기 위해서는 babel이라는 컴파일러로 변환은 하여 브라우저가 읽을 수 있는 파일로 변환해주어야 하며, 브라우저는 애플리케이션을 build 해주는 환경을 기본 제공해주지 않고 수많은 모듈 파일들을 번들링해주는 도구로서 webpack을 사용한다.

🏓 소감

수업을 하면서 개발을 하기 위한 Tool이 왜 이렇게나 많은지, 하나를 배우는 데에도 시간이 오래걸려 쉽게 접근하지 못한 부분이었다.

그동안 CRA(Create React App)이라는 명령어를 통해 리액트를 쉽게 사용할 수 있는데, 이는 기본적인 설정을 지원하고 프로젝트에 맞게 설정을 변경할 수가 없다. 그렇기 때문에 config 파일들의 설정이 필요하다는 것을 알게되었다.

앞으로 더 훌륭한 개발자가 되기 위해서는 기본 설정에만 의존하지 않고 내가 진행하려는 목적에 맞는 세팅을 알아둘 필요가 있어 열심히 배워보려고한다.

JSX를 쓰기 위한 프론트 개발자의 향연 1탄