나의 앵귤러관련 포스트의 중점은 내가 이해한 것을 바탕으로 내가 어려웠던 점들을 기술하는데 있다.
실제로 프로젝트를 진행하면서 Angular에서 javascript 라이브러리를 가져다 쓰려고 하는데
그 방법을 알 수가 없어서 고생을 많이 했었다. 그 방법을 공유 하고자 한다.
두가지만 알면 된다.
라이브러리에서 쓰고자하는 함수나 변수를 가져오는 것.
타입스크립트로 사용하고자 하는 DOM객체에 접근 하는 법.
현재 진행중인 프로젝트는 Medium Editor라는 것을 기반으로 하고 있다.
이 라이브러리의 특징은 다음과 같다.
https://github.com/yabwe/medium-editor (해당 라이브러리의 깃헙 주소)
마지막 줄을 보면 vanilla Js를 이용해 작성되었으며 별다른 프레임워크를 도입하지 않았다고 한다.
vanilla Js 는 쌩 자바스크립트이다.
2017년 현재를 기준으로 프론트에서 프레임워크는 춘추전국시대마냥 수많은 프레임워크들이 쏟아져 나오고 경쟁하고 있다. 이러한 기조에 반발해서 나온 것이 바닐라 자바스크립트인데, 순수 자바스크립트로만 개발을 하자는 취지의 운동이다.
필자는 이 에디터를 꼭 쓰고싶었는데 타입스크립트 안에 어떻게 적용해야 할지 막막했다.
타입스크립트는 자바스크립트를 확장한 언어이다. 다시 말하면 타입스크립트는 자바스크립트를 알아 볼 수 있으나 자바스크립트는 타입스크립트를 알아볼 수가 없다... 라고 하면 이해가 될려나?
쨌든 타입스크립트에 안에 자바스크립트를 쓸수 있는 방법은 여러가지가 있는 듯 한데, 가장 무난하게 쓸 수 있는 방법을 소개 한다.
6번째 줄을 먼저 보자.
declare 라는 키워드를 통해서 우리는 역참조라는 것을 할 수가 있다.
결국엔 타입스크립트는 자바스크립트로 변환되어서 우리가 작성하고자 하는 html 문서에 기록이 된다.
말이 타입스크립트이지 실제로는 자바스크립트를 작성하고 있는 것과 다를 바 없다는 것이다.
index.html 문서의 일부분인데 14번째 줄을 보면 에디터 자바스크립트 문서를 읽어들이고 있다.
(npm 으로 다운 받은 뒤에 따로 디렉토리를 앱 디렉토리 내부에 만들어두었다)
그리고 33번째 줄부터 앱 루트 태그가 보이고 있다.
declare 키워드는 문서 전체에 선언된 자바스크립트 관련 내용을 참조하겠다는 뜻이다.
다시 실제 사용방법을 살펴보자.
에디터 라이브러리 사용설명서는 다음과 같다.
자바스크립트 문법으로 보면 editable이라는 클래스를 지니고 있는 DOM 엘리먼트를
new MediumEditor()에 매개변수로 넣어두면 해당 라이브러리 내용을 적용 받을 수 있다는 것이다.
타입스크립트도 역참조를 이용해 가져오기만 하면 자바스크립트와 동일하게 적용시켜 줄 수 있다.
강조해서 말하지만 타입스크립트는 결국엔 자바스크립트이다. (정확하게는 ECMA script라고 해야하나)
19번째 생성자를 보면 멤버 변수로 ElementRef 타입을 가진 el 변수를 선언하고 있다.
여기서의 el은 컴포넌트 메타데이터 속성중 seletor를 가리킨다.
알고 있겠지만 컴포넌트 selector의 이름은 커스텀 엘리먼트이다. <editor> 태그가 된다는 것인데 이것은 달리말하면 DOM객체라고 볼 수 있다. renderer를 통해 DOM 객체를 한번 지지고 볶은 후에,
위 자바스크립트의 사용설명서와 동일하게 역참조한 MediumEditor를 사용한다.
이게 끝이다.
필자가 사용하고자 했던 <editor> 는 이미 자바스크립트 라이브러리의 적용을 받은 상태로 화면에 표시되어 진다.
이러한 방법으로 Jquery는 물론 그외 다양한 자바스크립트 라이브러리를 간편하게 이용할 수 있다.
우리가 해줄 것은 declare 키워드로 이용해서, 타입스크립트 내부로 사용하고자 하는 내용을 불러오는 것과 document.querySelector 대신에 타입스크립트로 DOM 객체를 가져오는 것
이 두가지만 해주면 된다.
DOM 객체에 접근하는 방법을 하나 더 알아보자.
위 방법에서는 컴포넌트 전체를 엘리먼트로 가져왔는데, 컴포넌트에 포함된 다른 일단 DOM에는 어떻게 접근 할 수 있을까?
가장 쉬운 방법으로는 @ViewChild를 이용 하면 된다.
급하게 예시를 만드느라 빨간줄이 생겼는데 무시한다.
뷰차일드는 말그대로 자식객체를 본다는 이야기이다. 가장 간편한 방법으로 아이디를 지정해준다.
template 부분에 div 태그가 하나 적혀있다. #xxx 로 아이디를 지정해주면 컴포넌트의 클래스 부분에서 저 DOM을 가져올 수가 있다. 타입은 ElementRef로 지정해주면 된다.
그 다음은 위에서 했던 것처럼 라이브러리에서 요구하는 대로 처리해준다.
DOM객체를 가져오는 방법은 VeiwChilde 말고도, ContentChild도 있고 하나만 가져오는게 아니라 여러 DOM들을 리스트로 들고 오는 방법도 있다. 나머지는 더킹갓제너럴프잘알구글신께 여쭤보면 된다.
! 그런데 문제점이 하나 있다. 위와 같은 형태로 역참조를 하게되면 타입이 any인 상태이다. 그리고 매번 npm으로 다운받은 라이브러리를 관리하기도 버겁다. 좀더 편한 방법은 없을까?
있다.
https://blogs.msdn.microsoft.com/typescript/2016/06/15/the-future-of-declaration-files/#
예제를 통해 확인해보자.
우리가 쓰고 있는 angular2 용 라이브러리들(npm으로 다운받는)은 기본적으로 *.d.ts 형식의 파일을 가지고 있다. 이른바 선언 파일이라는 것인데, 현재는 일부 에디터들만 인식할수 있는 것으로 보인다.
선언 파일이 있으면 에디터 안에서 이 파일안에 규정된 타입들을 읽어내릴 수가 있다.
즉 위에서 했던 declare 작업 없이도 에디터 내부에서 편리하게 가져다 쓸 수 있다는 것이다.
npm 설치를 할때 앞에다가 @types/ 를 붙여주고 설치를 하게 되면 자동으로 node_modules 안에 @types 디렉토리가 생성되면서 그곳에 설치가 된다. 이를 타입설치라고 하자.
타입설치는 그냥 설치되는 것이 아니라 자바스크립트 라이브러리를 해석해서 타입으로 선언할 수 있는 것들을 모아 선언파일로 만들어 준다. (index.d.ts)
단순 선언 파일이기때문에 내용이 없다. 그래서 필수적으로 기본 설치와 타입설치를 둘다 실행시켜주어야 사용 할 수가 있다.
그 다음 사용하는 것은 위에서 봤던 내용과 동일하다. 라이브러리에서 사용하라는 대로 사용하면 되는데
필자가 사용했던 미디엄에디터의 경우 이런 식으로 사용한다.
4번째 줄과 18번째 줄의 MediumEditor 변수는 동일하게 사용이 된다.
주의할점은 저런식으로 임포트를 해주지 않으면 사용할 수 없는 것들도 있고, 전역적으로 사용하도록 해주는 것도 있는데 좀더 공부가 필요하다.
댓글
댓글 쓰기