특정브랜치만 clone
git clone -b {branch_name} --single-branch {저장소 URL}
ex) git clone -b feature/users --single-branch https://github.com/Jeongjiw00/node_hotsixBabel
개발자들이 실행 환경에 구애받지 않고 항상 최신 문법의 자바스크립트로 코딩할 수 있도록 도와주는 유용한 도구! 바벨(Babel)
자바스크립트 개발자의 딜레마
자바스크립트 언어의 문법은 빠르게 진화하고 있지만 정작 자바스크립트 코드를 실행해주는 환경은 이를 받쳐주지 못하는 경우가 많습니다. 예를 들어, 브라우저의 경우 종류가 워낙 다양해서 어떤 브라우저가 어떤 문법을 지원하는지 일일이 파악하기가 힘들 정도이고, 노드(NodeJS)의 경우에도 버젼별로 지원하는 언어 문법이 다르기 때문에 브라우저만큼은 아니지만 비슷한 문제를 겪게 됩니다.
이러한 상황에서 자바스크립트 개발자들은 재밌는 딜레마에 빠지게 됩니다. 자바스크립트로 코딩을 할 때 ES6 이상의 최신 문법을 쓰자니 작성한 코드가 일부 실행 환경에서 작동하지 않는 이슈가 생길 것이고, 그렇다고 모든 환경에서 돌아가도록 보수적으로 코딩을 하지니 원튼 원치 않든 예전의 ES5 이하 방식으로 코드를 작성해야 하기 때문입니다.
Babel?
개발자의 딜레마를 해결하기 위해 등장한 것이 바로 자바스크립트 트랜스파일러(transpiler)인 바벨(Babel)입니다. 많은 개발자들은 Babel을 좀 더 편하게 자바스크립트 컴파일러(compiler)라고도 부르기도 하는데요. 엄밀히 얘기하면 컴파일(compile)은 인간이 작성한 소스 코드를 컴퓨터가 이해할 수 있도록 머신 코드로 바꿔주는 과정을 의미하지만, 트랜스파일(transpile)은 다른 실행 환경에서도 돌아갈 수 있도록 같은 언어를 유지한체 소스 코드의 형태만 바꾸는 과정을 의미합니다. 따라서 인터프리터 언어인 자바스크립트는 C나 Java와 같은 컴파일 언어가 아니기 때문에 컴파일 과정이 필요가 없습니다. 하지만 실제 자바스크립트 커뮤니티에서는 이 두 용어가 혼용되어 사용되고 있기 때문에 뭐라고 부르든 크게 신경쓸 필요는 없을 것 같습니다.
Babel을 이용하면 ES6 이상의 최신 문법으로 작성한 자바스크립트 코드를 ES5 이하의 예전 문법으로 작성한 것 처럼 소스 코드 내의 문법의 형태를 변경할 수 있습니다. 이렇게 Babel을 통해 문법 형태가 바뀐 소스 코드는 최신 문법을 지원하는 실행 환경 뿐만 아니라 아직 최신 문법들이 적용되지 않은 실행 환경에서도 문제없이 작동하게 됩니다.
Babel 설치
npm i @babel/cli @babel/node @babel/core @babel/preset-env -D
@babel/core는 어떤 방식으로 Babel을 사용하든 항상 필요한 패키지.@babel/cli는 터미널에서 커맨드를 입력해서 Babel을 사용할 때 필요한 패키지.- 바벨의 CLI 도구 중 하나인
@babel/node을 (를 )@babel/core보다 먼저 설치해야 합니다. @babel/preset-env는 바벨의 preset 중 하나로 es6+ 이상의 자바스크립트를 각 브라우저/ 노드 환경에 맞는 코드로 변환시켜준다.개발의존성(-D)으로 설치하는 이유는 Babel은 애플리케이션이 실행 시에 필요한 것이 아니라 빌드 시에만 필요하기 때문.
