AngularDart 5용 IDE 도구 발표 — 템플릿 안에서도 타입 안전성

AngularDart를 쓰다 보면 템플릿 안에서 발생하는 타입 오류 때문에 사람이 직접 맞춤법 검사기를 하듯 확인해야 할 때가 있어요. 이 글에서 소개하는 새 IDE 도구는 템플릿 안에서도 타입 안전성을 지켜 주는 분석 플러그인이에요. 오류 검사부터 자동 완성, 네비게이션까지 어떤 기능이 있는지 살펴보고, 직접 설정하는 방법도 알려드릴게요.

출처: Announcing IDE tooling for AngularDart 5

본문

Dart는 우리가 알고 사랑하는 정적 타입 언어인데, Dart 2는 더 엄격하게 타입이 지정될 거예요. 그래서 Dart는 컴포넌트가 주로 템플릿 안에서 정적으로 연결되어 성능 좋은 UI를 만드는 Angular 프레임워크에 아주 훌륭한 플랫폼이 돼요.

이런 생산적이고 안전한 개발자 경험을 더 개선하기 위해, 우리는 템플릿 안에서도 그 타입 안전성을 지켜 주는 새로운 IDE 도구를 발표해요! AngularDart 5를 지원하며 IntelliJ/WebStorm에서 바로 동작해요. VSCode나 vim 등에서도 설정해서 쓸 수 있어요.

이미 확신이 생겼다면 설정 방법으로 바로 건너뛰어도 돼요. 또는 아래로 따라와서 새 IDE 통합이 제공하는 기능을 둘러봐도 좋아요.

오류 검사

새 분석 플러그인은 템플릿 안에서 많은 타입 오류를 찾아줘요. 표현식은 사용하는 디렉티브, 디렉티브가 가진 input, 그리고 바인딩하는 참조(#foo, let item of, …)에 대해 검증돼요.

여기 철자가 잘못된 멤버가 있어요. 이제 사람이 직접 맞춤법 검사기를 할 필요가 없어요!

컴포넌트 input의 타입이 맞지 않는 문제도 더 이상 문제가 아니에요.

$event 변수 타입과 관련된 오류도 알려줘요.

디렉티브 안에 transclude하는 콘텐츠도 검사해요. 여기서 우리가 타입 오류뿐 아니라 죽은 코드(dead code)도 잡아 내는 예시를 볼 수 있어요.

그리고 더 있어요! 템플릿과 컴포넌트 정의 안에서도 다른 여러 종류의 오류를 잡아 줘요.

에디터에 표시되는 것 외에도 전체 오류 목록은 Dart Analysis 패널에 나타나요.

자동 완성

우리는 검증만 하고 멈추지 않았어요! 많은 노력이 우리 분석을 컴파일러 관점에서 성능 좋고 완전히 잘 동작하게 만드는 데 들어갔지만, 그 가치의 상당 부분은 해석된 템플릿 상태를 이용해 템플릿 안에서도 일반 Dart 자동 완성의 이점을 그대로 제공하는 데서 나와요.

그리고 일반 Dart 멤버보다 더 많은 것도 완성할 수 있어요. input, output, HTML 태그는 어떨까요?

태그? 가능해요. 속성(attribute)? 가능해요. 별표(*)? 가능해요. 별표 안의 속성? 가능해요.

보너스: 컴포넌트 transclusion 안에서 속성과 함께 태그까지 제안해요!

transclusion은 Angular에서 유명하게도 고급 주제예요. 그래서 우리가 정확히 무엇을 제안하는지 안다면, AngularDart를 아주 잘 알고 있다고 스스로 칭찬해도 좋아요.

말할 것도 없이, 우리 플러그인을 쓰면 컴포넌트 API를 훨씬 쉽게 따라갈 수 있어요!

네비게이션

여기서 지원 범위는 에디터에 따라 훨씬 많이 달라져요. 하지만 IntelliJ 안에서는 Dart 표현식의 일부를 클릭해서 이동할 수 있어요. 다른 에디터에서는 태그나 input/output 같은 더 많은 엔티티로 네비게이션할 수 있을 수도 있어요.

사용 방법

사용 중인 AngularDart 5 베타 릴리스와 Dart 2.0.0-dev.31 이상이 필요해요.

간단하게 analysis_options.yaml 파일에 이렇게 추가해요:

analyzer:
  plugins:
    - angular

그리고 IDE를 다시 시작하면 돼요. 플러그인이 뜨는 데 몇 초 걸릴 수 있다는 점 참고하세요. 처음에는 소스와 의존성을 다운로드해야 하기 때문에 첫 분석이 이후 분석보다 느릴 거예요.

우리 분석기 플러그인 데모 프로젝트에서도 직접 사용해 볼 수 있어요.

IntelliJ를 쓴다면 이게 전부면 충분해요. 다른 에디터는 추가 작업 없이는 HTML에서 우리 플러그인을 실행하지 못할 수도 있어요. 예를 들어 VSCode는 플래그가 필요해요.

피드백 & 더 알아보기

우리 플러그인의 소스 코드는 Github에 있어요. 어떤 것이 지원되는지에 대한 더 자세한 정보와, 질문이나 버그가 있을 때 이슈를 제출할 수 있는 곳도 확인할 수 있어요.

새 IDE 도구는 AngularDart(v5)의 다음 안정 릴리스에 포함될 거예요. Angular 웹 앱을 작성할 때 더 나은 생산성을 제공하게 되어 정말 기대돼요!