진보된 자바스크립트 환경 설정에 대하여

리액트 베이스의 웹앱을 개발하고 있는 도중 typescript를 도입하려 했다.

문제는 기존에 설정되어 있는 webpack, babel, eslint 들을 typescript을 마이그레이션 해야 한다는 것이다.

가장 큰 궁금중은 3가지 중 eslint에서 발생했다. 궁금증은 typescript를 위한 tslint가 별도로 있었고 이것을 사용해야만 하는가 였다. 구글링을 통해서 기존에 사용하던 eslint를 통해서도 typescript를 사용할 수 있다는 것을 확인했지만 eslint의 parser 부분에서 다시 의문이 들었다.

 

기존에는 bable-eslint를 사용했지만 typescript를 위해서 @typescript-eslint/parser 로 교체하였고 이것들은 도대체 무엇을 하는가라는 가장 근본적인 질문에 도달한다. 이 질문은 parser를 변환해서 사용해도 프로젝트에 지장이 없는가란 질문이기도 하다.

 

eslint와 typescript는 모두 AST(구문 분석)을 하는 역할을 맡는다. 하지만 서로 다른 AST를 사용하는 차이를 보이는데 @typescript-eslint/parser 파서가 그 차이를 메꾸는 역할을 맡는다. (eslint는 기본적으로 espree 파서를 사용하며 이외에도 acorn, esprima 등 여러 자바스크립트 AST가 있다는 것을 알게되었다.) 구문 분석 라이브러리를 통한 문법 체크를 eslint에서 하고 있었던 것이다.

 

꼭 읽어봐야할 자바스크립트 작동 메커니즘

 

babel과 typescript에 관하여

기존에는 babel과 typescript를 동시에 사용하는 경우를 종종 볼 수 있었다. 복잡함에 복잡함을 더하는 설정은 꽤나 골치아팠다. 하지만 babel에서 typescript preset을 출시하며 설정이 한층 간단해졌다. 참고

babel설정을 base로 typescript를 도입할 수 있게 되었다. webpack의 ts-loader를 사용해서 실시간 type 체크도 가능하다.