바벨로 JS 최신문법 사용해보기

hide서론/hide

공부하다 보면 유용한 내장 함수나 기능을 많이 배우게 되는데, ES2020에서 제공하는 옵셔널 체이닝이나, 널 병합 연산자 등등을 우리 프로젝트에 적용하면 온통 문제가 발생했습니다.

진정해...

모르면 모를까 알고도 못 쓰는 건 너무 불편했습니다. 그리고 null 체크를 제대로 하지 않고 API 리턴값을 다루다 보니 `null.split(…)` 같은 호출로 오류가 자주 났습니다.

이런 걸 발견할 때마다 ` if (값 == null)`이나 `값 === null ? null : 값.split("-")[1]`처럼 일일이 처리하는 방식은 마음에 들지 않았습니다.

 

그렇다고 Node 모듈이나 Vue 버전을 올리자니 대규모 공사가 필요하고, 회사에서도 허락해줄 리 없는 비현실적인 선택지였습니다. (사실 이런 논의와 시도는 여러번 있었지만..)

 

유틸함수를 만들어 해결하려고 해도, 결국 ` this.함수명(대상)`처럼 쓰게 되면 로직이 길어지고 팀원들이 잘 안 쓰게 될 것이 분명했습니다.

그런데 이것저것 살펴보면서, 우리 프로그램의 Node 버전이나 Vue 2.0 자체에는 최신 문법을 못 쓰는 문제가 없다는 것을 알게 되었습니다. 뭐지????

 

외않되..?

현재 상황을분석해보면, 다음과 같습니다.

 

1. 크롬 브라우저에서는 옵셔널 체이닝 등등이 잘 사용됩니다.

2. vue2.x 사용 → 자바스크립트 버전을 제한하지 않고, 실제 문법은 런타임이나 빌드 환경이 지원하는 ECMAScript에 의해 결정됩니다.
3. node14.x.x사용 → V8 엔진 기반으로 ES2020은 기본적으로 지원합니다.

 

그렇다면 도대체 무엇이 문제였을까요? 그리고 최종적으로 저는 이 불편함을 어떻게 해결했을까요?

 

덤벨은 아는데, 바벨은 뭐야?

사실 바벨을 처음 들어본 건 아니었습니다. 항해99 플러스 프론트엔드에서나 React 프로젝트를 새로 생성할 때 등등, 모든 곳에서 바벨 설정을 하고 넘어가는 것을 보았는데 정확하게 뭘 하는지는 모르고 “최신 문법으로 작성한 코드를 옛날 브라우저에서도 작동할 수 있게 컴파일해 주는 도구”라고만 알고 있었습니다.

What is Babel? · Babel

 

그래서 BTB, 그중에서도 고객층이 극히 한정적인 솔루션이라 최신 버전의 크롬 브라우저를 사용하도록 세팅을 다 해 드리는 우리 팀에서는 크게 신경 쓰지 않아도 되는 내용이라고 생각했습니다. 하지만 바벨이 그런 것만 하는게 아니었습니다.

 

바벨은… 이런 것도 해 줍니다

1. 최신 자바스크립트 문법으로 작성된 코드를 구형 환경에서도 실행 가능한 자바스크립트로 변환해줍니다. (이게 여태 알던 역할)
2. JSX 문법을 일반 자바스크립트로 변환해줍니다.
3. 타입스크립트나 Flow의 타입 어노테이션을 제거해서 순수 자바스크립트로 만들어줍니다.(타입 체크는 개발 시 필요한거고 사용자에게 중요한건 아니니까요!)

여기에 추가적인 기능이 더 있던 셈입니다.

 

Vue 2.x 프로젝트에서 함께 주로 쓰이는 webpack4는 최신 문법으로 쓴 코드를 이해하지 못합니다. (바보) Webpack 4는 Acorn 파서를 사용했는데, 이 툴들이 최신 문법을 모르기 때문입니다. 그래서 해당 문법을 오래된 자바스크립트 구문으로 변환한 뒤 Webpack이 처리하게 해야 합니다. 이걸 @babel/plugin-proposal-optional-chaining 같은 바벨 플러그인을 babel-loader로 끼워 넣어 해결할 수 있었습니다.

 

바벨 설정해주기

설치는 되어 있지만, 아무 설정도 없던 바벨..! 

이제 원하는 최신 문법을 쓰기 위해, 비어있는 babel.config.js를 플러그인으로 채워보겠습니다.

 

// 정말 깔끔한 기존의 babel.config.js 
module.exports = {
  presets: [
    '@vue/app'
  ]
}

 

추가할 플러그인 이름은 충직한 조수이자 절친인 챗 GPT가 알려줍니다.

저장하고 다시 npm 빌드, 혹은 run을 해보면 감동스럽게도 더 이상 컴파일 오류 없이 옵셔널 체이닝을 쓸 수 있었습니다. 감동이네요.

 

 

친절한 지피티씨는 순간 단어가 생각이 안난 저에게 “네가 원하는것은 널 병합 연산자다”라고도 알려줍니다. 화내지 않네요.

 

// 플러그인 추가한 babel.config.js 
module.exports = {
  presets: [
    '@vue/app'
  ],
  plugins: [
    '@babel/plugin-proposal-optional-chaining', // 옵셔널 체이닝 ?. 추가
    '@babel/plugin-proposal-nullish-coalescing-operator' // null 병합 연산자 ?? 추가
  ]
}

 

이제 우선적으로 가장 쓰고싶던 기능은 다 사용할 수 있었습니다. 감동이네요. 이 사실을 널리 알려 앞으로 (null) ? null : “” ; 같은 못생긴 코드를 쓰지 않도록 합니다.

---

마치며..

이렇게 앞으로는 프로젝트에서 원하던 문법을 쓸 수 있고, 또 필요한게 있으면 추가할 수 있게 되었습니다.

뿌듯한 마음으로 오늘의 포스팅을 마칩니다 ^__^