@babel/plugin-proposal-decorators의 legacy: true 옵션

Mobx를 공부하려고 하는데 다른 예제에서 @babel/plugin-proposal-decorators의 legacy: true옵션을 사용하길래 이 옵션은 왜 사용하는건지 히스토리를 알고 싶어 정리했습니다.

 

아래 글은 바벨 7.1.0 버전이 출시되면서 변경된 내용을 정리한 바벨의 공식 문서입니다.

 

https://babeljs.io/blog/2018/09/17/decorators

TC39 Standards Track Decorators in Babel · Babel

약간의 히스토리

데코레이터 문법은 약 3년전에 처음 제안 되었습니다. 타입스크립트는 2015년 1.5버전에서부터 많은 ES6문법들과 함께 데코레이터를 지원하기 시작했습니다. 앵귤러나 MobX와 같은 프레임워크들이 개발자 경험을 향상시키기 위해 데코레이터를 쓰기 시작하면서 이 문법은 인기가 많아졌습니다.

 

바벨5에서 처음 데코레이터를 구현했지만 바벨6에서 제거되었습니다. 하지만 여전히 데코레이터 문법을 쓰고 싶었던 개발자가 바벨5의 데코레이터를 복제해서 플러그인을 만들었습니다. (babel-plugin-transform-decorators-legacy)

 

곧 이 플러그인은 바벨7 알파버전에 공식적으로 포함되었습니다. 그리고 이 플러그인은 바벨5에서 사용하던 문법을 그대로 사용합니다. (레거시)

 

바벨7.0.0 정식 버전이 출시되고 이 플러그인은 @babel/plugin-proposal-decorators로 좀 더 깔끔하게 개편되었습니다.

 

하지만 이 플러그인은 기존 레거시 플러그인과 breaking change가 있었기 떄문에 예전 버전의 플러그인을 써야 하는 니즈를 충족시키기 위해 legacy: true라는 옵션을 추가한것입니다. 이 옵션을 추가함으로써 데코레이터의 stage1 제안 스펙에서 현재 버전으로 자연스럽게 리팩토링할 수 있게 되었습니다.

 

바벨 7.1.0 버전에서 우리는 새로운 제안 스펙들을 지원할 수 있게 되었습니다. 이제 private 필드와 메소드에 데코레이터를 적용할 수 있습니다.

 

정확히 어떤 내용들이 변경되었는지는 위 공식문서에서 확인하시기 바랍니다.

 

그래서 왜 이 옵션을 써야 하는가?(2019년 7월 기준)

아직 바벨의 데코레이터 문법 지원이 완벽하지 않습니다. 이 데코레이터 문법이 완벽해지면 legacy 옵션을 false로 줄 수 있게 변경할건데 지금 당장은 legacy 옵션에 true만 줄 수 있습니다. true인 경우 현재까지 구현된 데코레이터 문법을 모두 사용할 수 있습니다. 최종 스펙에서는 breaking change가 있을수도 없을수도 있지만 현재까지는 없습니다.

 

legacy: true 옵션은 3년전(2016년)에 제안되었습니다.

legacy: false 옵션은 2018년말에 제안되었습니다.

현재 작업이 완료 되지 않아 계속 작업하고 있습니다.