114호. Vue v-pre 디렉티브 free

2020-01-14

라라벨과 Vue를 함께 쓰시는 분이 많이 계실거라 생각합니다. 최근에 Vue 관련 문제가 있었는데 비교적 간단한 내용이지만 공식 메뉴얼에는 설명이 없는 것 같아서 정리해봤습니다.


얼마전에 한 구독자께서 xLY에 버그가 있다고 제보해주셨습니다.



문제의 글을 조회해보니 정말로 글이 안보이더군요. 원인은 본문 속 예제 코드에 다음과 같은 내용이 있었는데


 <link href="{{ asset('css/app.css') }}" rel="stylesheet">

{{ }}를 Vue가 보간(interpolate)하려다가 에러가 발생한 것이었습니다.


TypeError: asset is not a function
at Proxy.eval (eval at createFunction (app.js:129143), <anonymous>:3:2338)
at Vue._render (app.js:121045)
at Vue.updateComponent (app.js:121561)
at Watcher.get (app.js:121972)
at new Watcher (app.js:121961)
at mountComponent (app.js:121568)
at Vue../node_modules/vue/dist/vue.common.dev.js.Vue.$mount (app.js:126538)
at Vue../node_modules/vue/dist/vue.common.dev.js.Vue.$mount (app.js:129438)
at Vue._init (app.js:122506)
at new Vue (app.js:122572)

텍스트 그대로 화면에 표시해야할 내용을 Vue가 컴파일해서 발생한 문제인 것이지요. 이리저리 찾아보다가 결정적으로 이 이슈의 제목에서 해결 방법을 찾았습니다. 제목은 vue/mustache-interpolation-spacing still running if v-pre is set on node 였는데요. 대략 v-pre를 설정했는데도 mustache-interpolation-spacing 에러가 자꾸 난다는 정도로 해석하면 될 것 같아요. 여기서 v-pre 디렉티브라는게 있다는 걸 발견하게 된거죠.


찾아보니 v-pre 디렉티브에 대한 설명이 Vue 메뉴얼에는 없고 API에는 있더군요. 다음은 API에 있는 v-pre에 대한 설명입니다.



이 엘리먼트와 모든 자식 엘리먼트에 대한 컴파일을 건너 뜁니다. 원시 mustache 태그를 표시하는데 사용할 수 있습니다. 디렉티브가 없는 많은 수의 노드를 뛰어 넘으면 컴파일 속도가 빨라집니다.


예제:


<span v-pre>{{ 이 부분은 컴파일 되지 않습니다 }}</span>


v-pre를 원시 mustache 태그를 표시하는데 쓸 수 있다고 명시되어 있습니다. 딱 제게 필요했던 것이네요. 아래와 같이 컨텐트를 v-pre 디렉티브로 감싸서 간단하게 문제를 해결했습니다.


<div v-pre>
{!! nl2br($post->content) !!}
</div>

사용자가 컨텐트를 직접 생성할 수 있는 애플리케이션을 만들고 있다면 사용자가 생성한 컨텐트를 출력하는 부분은 v-pre 디렉티브를 적용하는게 안전해보입니다. 사용자는 항상 우리가 예상한대로만 움직여주지 않으니까요.


그리고 해당 영역을 컴파일에서 제외 시킴으로써 속도도 빨라진다고 하니 1석 2조가 아닌가 싶네요.


1일 1식 라라벨 114호

2020년 1월 14일


이현석

메쉬 코리아 개발자. 바쁜 팀장님 대신 알려주는 신입 PHP 개발자 안내서를 쓰고, 클린 아키텍처 인 PHP를 번역했습니다. 2020년에 출간될 Laravel Up & Running 2nd Edition을 번역하고 있습니다.