이모지 출력

이모지를 사용할 일이 생겼는데, 이모지대로 따서 사용하면 저작권에 문제가 있다고 하여 그대로 사용하려고 한다. 또한, 이모지는 브라우저, os마다 다르게 보이기 때문에 그걸 의도한다면 아래와 같은 방법으로 사용할 수 있다.

이모지 사이트

위의 이모지(커플 가운데 하트) 링크에 들어가면 가운데 Codepoints 라는 곳에서 U+1F491코드 값이 나오는데 이걸 그대로 사용하면 안나왔다.

<p>U+1F491</p>

위의 방식으로 사용하면 화면에 정상적으로 출력되지만, 나는 Vue.js에서 get function으로 사용하고 싶었다.

<p>{{emoji}}

emojiClasses  = [
  { id: 1, title: '대왕고래', emoji:  '\u{1F433}' },
  { id: 2, title: '베이비 고래', emoji:  '\u{1F42C}' },
  { id: 3, title: '헌터', emoji:  '\u{1F3AF}' },
  { id: 4, title: '갈대', emoji:  '\u{1F33E}' },
  { id: 5, title: '썸타는 중', emoji:  '\u{1F491}' }
]

get emoji() {
  const id = this.id
  return this.emojiClasses[+id].emoji
}

링크에 나와 있는 코드값을 그대로 사용하지 않고, 맨 처음 2개의 문자열을 \u(유니코드)로 바꿔서 사용해주면 화면에 정상 출력된다.(U+ -> \u)

참고

stack-overflow