angularjs 의 controller 내부에서 jquery를 사용할 때 주의할 점

angularjs를 사용하다보니 jquery를 거의 사용할 일이 없다는 것을 알았다. 일단 모든 dom관련 코드가 template으로 처리되고 사용자 액션에 대한 반응도 ng- 속성으로 처리가 되니 jquery를 사용해서 dom을 조작할 일이 거의 없다. 그러나 거의 없는 것이지 완전히 없애기는 힘들다. 이유는 수많은 jquery의 플러그인들 때문이다. angularjs 용으로도 만들어진 것이 있으면 감사히 쓰면 되겠지만 그런게 없을 경우가 문제다

지금 서비스의 댓글 관련 기능을 만들고 있는 중인데 누군가가 만든 에디터를 참고하면서 만들다보니 결국 jquery로 만들게 됐다. $.fn.editor(...) 이런식인데 당연히 안에선 jquery를 사용한 코드가 어마무지하게 들어가 있다. 에디터를 제일 먼저 만들고 리스트를 angularjs를 공부해가며 만들다보니 angularjs controller 내부에서 이 에디터를 사용해야했다. 그리고 좌절했다.

angularjs는 html 코드에 controller와 액션, template을 정의한다. 따라서 angularjs가 template을 통해 그리기 전엔 dom을 조작하는 행위를 해선 안된다. controller를 init할때 template은 아직 처리되기 전이다. 따라서 내가 jquery를 통해서 만들고자 하는 editor는 init이 아닌 다른 곳, template 처리가 모두 끝난 뒤 수행되는 어느 곳에서 만들어져야한다. 문제는 일반적은 controller에는 그런 곳이 없다는 거다.

어쩔 수 없이 화면에 항상 보이는 댓글 입력 editor는 바로 초기화하고, 동적으로 만들 editor는 이벤트가 발생할때 초기화하는 방법을 사용했다. 일단은 해결이 된 것 같지만 변경이 가해지면 어떻게 될 지 모르겠다. directive를 사용해서 view를 그리면 이런 일을 잘 처리할 수 있을지는 잘 모르겠다. directive를 사용하는 방법은 좀 복잡해보여서 사실 좀 피하고 있다.

angularjs를 더 연구해봐야겠다.

반응형