웹팩과 바벨 무엇이 다른가?
👉 웹팩 : https://webpack.js.org/
👉 바벨 : https://babeljs.io/
리액트(React)를 처음 시작하게 되면 일단 용어에서부터 장벽이 생길 수 있습니다.
복잡하고 알 수 없는 용어들이 머릿속에 정리되지 않은 채 필수(?) 라이브러리라고 하는 것들을 설치하다보면 지금 뭘하고 있나 하는 생각이 들게됩니다. 이 글은 리액트로 개발을 할 때 거의 필수로 설치하게 되는 웹팩(Webpack)이나 바벨(Babel), 그리고 설치 라이브러리를 간단히 살펴보고 쉽게 설명하여 대략적인 개념을 잡는데 도움을 주기 위해 쓰는 글 입니다.
(논란이나 추가 설명의 여지가 있는 부분도 조금은 단정적인 문장의 마무리를 사용했습니다.)
처음 리액트를 접하게 되면 웹팩과 바벨이라는 용어를 만나게 됩니다. 결론부터 말하면 이 둘은 하는 역할이 다릅니다. 그러니 어느게 좋고, 무엇을 써야할지 고민할 필요가 없습니다.
웹팩(Webpack)은 의존성을 분석해 모듈을 번들(여러 개를 하나로 묶어주는)시켜주는 역할을 합니다. 프로젝트를 개발하다보면 수 많은 라이브러리들을 사용하게 되는데 빌드(build)라는 과정을 통해 하나의 파일로 짠!하고 만들어 줍니다.
바벨(Babel)은 코드 변환기입니다. 세상 사람들은 정말 다양한 종류의 버전의 브라우저를 사용하고 있습니다. 이건 누가 일괄 업데이트한다고 해결되는 문제도 아니라서 어떤 특정 버전을 딱 맞추기 어렵습니다. 대부분의 업체에서 최신 버전의 브라우저를 권장하지만 생각보다 이런 일에 관심없는 사람도 많고, 일례로 쇼핑몰과 같이 사람들이 온라인에서 돈을 쓰면서 매출을 올리는 회사들은 구형 브라우저를 쓰는 사람들을 그냥 무시하고 서비스 개발을 진행할 수가 없습니다. 최대한 그 사람들이 불편없이 돈을 쓰고 가도록 만들어 줘야 합니다.
이런 이유로 개발자들은 수 십년 지난 브라우저에서만 도는 기능을 위해 지저분한 코드를 작성해야 하거나 최신 기능을 포기해야 하는 일까지 생깁니다. 코드가 복잡해지니 당연히 유지보수는 어려워집니다. 최신의 코드를 쓰면서 최대한 많은 사람들이 사용하는데 불편하지 않도록 만들어주는게 바벨입니다. 바벨은 최신 자바스크립트 문법을 구형 브라우저에서도 돌 수 있도록 코드 자체를 변환시킵니다.
리액트(React)
👉 리액트 : https://reactjs.org/
리액트는 컴포넌트 단위로 개발해 재사용할 수 있게 하면서 자바스크립트의 장점을 잘 살린 프론트엔드 개발 라이브러리입니다. 페이스북을 주축으로 유지보수 되고 있고 웹(리액트, 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’와 같이 순식간이 리액트로 된 페이지를 띄울 수 있는 구조가 만들어집니다.
라이브러리(Library)
리액트를 하다보면 설치하는게 한 두개가 아닙니다. 의존성 때문에 자동으로 설치되는 것을 빼더라도 처음 리액트를 하려는 사람에겐 여간 부담이 아닙니다. 아래는 처음 필수적으로 설치하게 되는 라이브러리를 왜 설치하는 건지 한 두줄로 간단히 알아봅니다.
- react: 리액트를 사용하려면 당연히 리액트 라이브러리가 필요합니다.
- react-dom: 원래는 react에 함께 있었으나 이렇게 따로 떨어져 나왔습니다. react와 DOM 사이에 연결해주는 역할을 합니다.
- react-scripts: 리액트 프로젝트 초기 셋업을 보다 쉽고 간편하게 해줍니다.
- babel-cli: 바벨을 터미널에서 사용하기 위해 필요합니다.
- babel-preset-env: 바벨은 babel-preset-es2017과 같이 여러 버전이 있습니다. 이 라이브러리를 설치 알아서 해줍니다.
- babel-preset-react: 바벨을 리액트에서 사용하게 해줍니다. 리액트를 사용하려면 이게 필요합니다. 달리 말하면 바벨과 리액트는 별개 프로젝트입니다.
- webpack: 웹팩을 쓰기 위해 필요합니다.
- babel-core: 웹팩용 바벨(?)입니다. 터미널에서 쓸 때 babel-cli를 썼는데 이걸 웹팩에서 사용하는 용도입니다.
- babel-loader: 웹팩에서 바벨을 로드할 때 이 로더를 씁니다.
