웹팩과 바벨 무엇이 다른가. 리액트에서는 뭘 써야 할까?

리액트(React)를 처음 시작하게 되면 웹 개발을 많이 또는 최근에 안해본 사람들은 용어에서 부터 일단 장벽이 생긴다. 복잡하고 알 수 없는 용어들이 머릿속에 정리되지 않은 채 필수(?) 라이브러리라고 하는 것들을 설치하다보면 지금 뭘하고 있나 하는 생각도 든다. 이 글은 리액트로 개발을 할 때 거의 필수로 설치하게 되는 웹팩(Webpack)이나 바벨(Babel), 그리고 설치 라이브러리를 간단히 살펴보고 쉽게 설명하여 대략적인 개념을 잡는데 도움을 주기 위해 쓰는 글이다. 그래서 논란이나 추가 설명의 여지가 있는 부분도 조금은 단정적인 문장의 마무리를 사용했다.

웹팩(Webpack) vs 바벨(Babel)

처음 리액트를 첨하고 웹팩과 바벨이란 용어를 만나면서 비슷한 것 같은데 웹팩하고 바벨 중에 뭘 써야 할까? 어떤게 더 좋은 건가 하는 생각을 했었다. 결론부터 말하면 이 둘은 하는 역할이 다르다. 그러니 어느게 좋고, 무엇을 써야 할지 고민할 필요가 없다.

웹팩(Webpack)은 의존성을 분석해 모듈을 번들(여러 개를 하나로 묶어주는)시켜주는 역할을 한다. 프로젝트를 개발하다보면 수 많은 라이브러리들을 사용하게 되는데 빌드(build)라는 과정을 통해 하나의 파일로 짠!하고 만들어 준다. 바벨(Babel)은 코드 변환기다. 세상 사람들은 정말 다양한 종류의 버전의 브라우저를 사용하고 있다. 이건 누가 일괄 업데이트한다고 해결되는 문제도 아니라서 어떤 특정 버전을 딱 맞추기 어렵다. 대부분의 업체에서 최신 버전의 브라우저를 권장하지만 생각보다 이런 일에 관심없는 사람도 많고, 일례로 쇼핑몰과 같이 사람들이 온라인에서 돈을 쓰면서 매출을 올리는 회사들은 구형 브라우저를 쓰는 사람들을 그냥 무시하고 서비스 개발을 진행할수가 없다. 최대한 그 사람들이 불편없이 돈을 쓰고 가도록 만들어 줘야 한다. 하지만 개발자들은 어떤가. 수 십년 지난 브라우저에서만 도는 기능을 위해 지저분한 코드를 작성해야 하거나 최신 기능을 포기해야 하는 일까지 생긴다. 코드가 복잡해지니 당연히 유지보수는 어려워진다. 이런 이유로 개발자들은 최신의 코드를 쓰면서 최대한 많은 사람들이 사용하는데 불편함없이 만들어 주는게 바벨이다. 바벨은 최신 자바스크립트 문법을 구형 브라우저에서도 돌 수 있도록 코드 자체를 변환시킨다.

리액트(React)

리액트는 컴포넌트 단위로 개발해 재사용할 수 있게 하면서 자바스크립트의 장점을 잘 살린 프론트엔드 개발 라이브러리다. 페이스북을 주축으로 유지보수 되고 있고 웹(리액트, React) 개발이나 앱(리액트 네이티브, React Native) 개발에 사용된다. 이 리액트를 개발할 때 위의 웹팩과 바벨없이도 가능하긴 하지만 그렇게 하는 사람은 별로 많지 않다. 리액트로 간단한 Hello, world 서비스라도 만들어 볼려면 상당한 초기 설정이 필요한데 여간 번거롭고 시간잡아 먹는 일이 아닐 수 없다. 또 이게 영원한가? 그렇지도 않아 하도 빠르게 휙 휙 바뀌니 계속 레퍼런스 문서를 참조해야 해서 하다보면 외워지는 것이지 처음부터 외워서 보일러 플레이트 코드와 설정을 맞추는 건 그리 권장할만한 일이 아니다. 그래서 페이스북은 쉽게 리액트 프로젝트를 셋업하고 바로 개발에만 집중할 수 있도록 도구를 만들었는데 그게 create-react-app이다. npm install create-react-app으로 설치할 수 있다. (yarn을 쓰는 사람들은 yarn을 써도 된다. yarn은 npm과 같이 자바스크립트 패키지 매니저다. npm이 가진 이슈들을 해결하기 위해 페이스북, 구글 등이 힘을 합쳐 만든 새로운 자바스크립트 패키지 매니저다.) create-react-app을 사용하면 ‘create-react-app my_project’와 같이 순식간이 리액트로 된 페이지를 띄울 수 있는 구조가 만들어진다.

이것 저것 설치하는 라이브러리, 넌 뭐냐

리액트를 하다보면 설치하는게 한 두개가 아니다. 의존성 때문에 자동으로 설치되는 것을 빼더라도 처음 리액트를 하려는 사람에겐 여간 부담이 아니다. 아래는 처음 필수적으로 설치하게 되는 라이브러리를 왜 설치하는 건지 한 두줄로 간단히 알아본다.

1. react: 리액트를 사용하려면 당연히 리액트 라이브러리가 필요하지 않겠는가?
2. react-dom: 원래는 react에 함께 있었으나 이렇게 따로 떨어져 나왔다. react와 DOM 사이에 연결해주는 역할을 한다.
3. react-scripts: 리액트 프로젝트 초기 셋업을 하는 것은 힘든 일이다. 그걸 보다 쉽고 간편하게 해준다.
4. babel-cli: 바벨을 터미널에서 사용하기 위해 필요하다. 바벨을 왜 쓰는지는 위에서 설명했다.
5. babel-preset-env: 바벨은 babel-preset-es2017과 같이 여러 버전이 있다. 딴거 말고 이거 깔면 알아서 해준다.
6. babel-preset-react: 바벨을 리액트에서 사용하게 해준다. 우리는 리액트를 쓸거니까 이게 필요하다. 달리 말하면 바벨과 리액트는 별개 프로젝트다.
7. webpack: 웹팩을 쓰기 위해 필요하다.
8. babel-core: 웹팩용 바벨(?)이다. 터미널에서 쓸 때 babel-cli를 썼는데 이걸 웹팩에서 사용하는 용도다.
9. babel-loader: 웹팩에서 바벨을 로드할 때 이 로더를 쓴다.