Rails에서 Vue에 데이터 전달하기

레일즈에서 Vue로 데이터를 전달해야 할 순간이 있습니다.
그런데 레일즈의 뷰 템플릿 엔진으로는 Vue를 바로 다룰 수가 없기 때문에(제가 모르는 걸 수도 있어요..ㅜㅜ), 값을 전해주기가 조금 힘듭니다.

이럴 때 Vue에게 값을 전달하는 방법을 몇 가지 적어보려고 합니다.

HTML의 data속성을 사용해 전달

HTML에는 data라는 속성이 있습니다.
간단한 데이터를 넘길 때 편리합니다. 그치만 위의 링크에도 언급이 되어 있듯 성능이 그다지 좋은 편은 아니라고 하니, 다량의 데이터를 넣는 것은 좋지 않아 보이네요.
아직 Vue가 익숙하지 않아 생각보다 구현에 좀 애를 먹었는데요ㅜㅜ 이렇게 하면 됩니다.

# controller
def index
  @user_name = current_user.name
end

# view
<div id="vue" data-user-name=<%= @user_name %>></div>

// vue를 관리하는 코드
const userName = document.getElementById('vue').dataset['userName'];
new Vue({
  render: h => h(SomethingVue, { props: { userName: userName } }),
}).$mount('#vue');

// vue
export default {
  props: { 'userName': String },
...

Vue dev tool에서 보면 정상적으로 값이 들어 있는 것을 확인할 수 있습니다.

다만 이렇게 보내는 방법은 문자형 데이터밖에 보낼 수 없는 문제(꼼수를 써서 JSON.parse등으로 JSON을 전달할 수도 있기는 합니다)가 있습니다.

Javascript 전역 변수로 값을 전달

전역 변수를 사용하기 때문에 그다지 추천하는 방법은 아니지만 위와 달리 객체를 온전히 전달할 수 있다는 게 장점인 방법입니다. (물론 서버사이드에서 어느 정도의 객체 형 변환은 필요합니다)

<!-- view -->
<script>
userName = '사람 이름';
</script>

javascript, vue 코드는 첫 번째와 동일합니다.

Vue dev tool에서 같은 결과값을 볼 수 있습니다.

전역 변수가 아닌 전역 객체를 사용하고 있다면 객체에 넣는 것도 좋을 것 같아요.

로그를 찍어 보니 전역 변수라고 해도 이 페이지가 불리기 전까지는 스크립트가 실행되지 않기 때문에, 다른 페이지에서 접근이 가능한 것은 아닙니다(Asset pipeline에 대해 자세히 몰라서 100% 확신은 못 하겠습니다ㅜㅜ..).
그러나 어찌됐든 전역 변수를 사용하기 때문에, 메모리 누수가 발생할 수 있습니다.

---

이외에도 AJAX를 통해 데이터를 받는다던가 하는 방법도 있지만, 비동기로 데이터를 받는 건 이 글의 취지와는 좀 거리가 있다고 생각해 적지 않았습니다.
혹시 더 좋은 방법이 있으면 공유해주세요! 😄