JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="ko">

  <head>
    <meta charset="UTF-8">
    <title>이름으로 보는 2019년 운세 (Ver 0.1)</title>
    <script src="//cdnjs.cloudflare.com/ajax/libs/blueimp-md5/2.10.0/js/md5.min.js"></script>
  </head>

  <body>
    <h2>이름으로 보는 2019년 운세</h2>
    <div id="app">
      <input v-model="message" type=text placeholder="이름을 입력하세요" v-on:keyup.enter="hashing">
      <button v-on:click="hashing" id=searchBtn>검색</button>
      <pre>{{text}}</pre>
    </div>


  </body>

</html>

JavaScript

var app = new Vue({
  el: '#app',
  data: {
    message: '',
    md5: '',
    text: '',
    sentences: null
  },
  methods: {
    hashing: function(e) {
      // 이름을 입력하면 md5 해시값을 생성
      var hashed = md5(this.message).replace(/a/g, 0)
        .replace(/b/g, 1).replace(/c/g, 2).replace(/d/g, 3).replace(/e/g, 4).replace(/f/g, 5)
      this.md5 = hashed

      // 이름에 따라 생성한 해시값을 3등분해 금전, 사업, 생명 수치로 환산
      var wealth = hashed.substring(0, 2)
      var biz = hashed.substring(2, 4)
      var life = hashed.substring(4, 6)

      console.log(wealth, biz, life)

      // makeSentence 에서의 참조를 위해 self 변수를 생성
      var self = this

      function makeSentence(category, num) {
        num = parseInt(num)
        var outputSentence = "";

        // 20점 간격으로 문장 배열의 0, 1, 2, 3, 4 번 원소를 불러온다.
        if (num >= 0 && num <= 80) {
          outputSentence = self.sentences[category][Math.ceil(num / 20) - 1]
        } else {
          outputSentence = self.sentences[category][4]
        }
        return outputSentence;
      }

      // 최종 텍스트를 생성해 이 인스턴스의 this.text로 값을 전송
      this.text = "금전운: " + wealth + " | " + makeSentence("wealth", wealth) +
        "\n사업운: " + biz + " | " + makeSentence("biz", biz) +
        "\n생명운: " + life + " | " + makeSentence("life", life)
    }
  },
  created: function() {

    var sentences = {
      wealth: ["매우 안좋습니다. 거지가 될거에요", "약간 안좋네요", "그냥 그렇습니다", 
      	"올해엔 좀 돈맛좀 볼지도?", "당신은 부자가 됩니다."],
      biz: ["매우 안좋습니다. 가만히 있으세요", "약간 안좋네요", "그냥 그렇습니다", 
      	"부루마블 좀 하셨나봐요?", "당신은 이재용이 됩니다."],
      life: ["매우 안좋습니다. 내일 죽을수도..", "약간 안좋네요", "그냥 그렇습니다",
      	"욕 좀 드셨나봐요?", "당신은 200살까지 삽니다."]
    }

    // 이 인스턴스 data 내에 있는 senetence 변수에 데이터를 할당
    this.sentences = sentences
  }
})