21. mylog 홈페이지

사용자가 마이로그에 접속을 하면 홈페이지가 열리고 홈페이지는 등록된 마이로그 리스트를 나타냅니다. 홈페이지는 등록된 모든 마이로그를 리스트로 보여주고, 이 리스트 중에서 마이로그를 선택하면 마이로그 보기 화면으로 이동한 후 마이로그의 내용을 보여줍니다.

1. 마이로그 홈

src/views/HomeView.vue

<!-- src/views/HomeView.vue -->
<template>
  <v-container>
    <v-alert v-if="error" type="error" dismissible>{{ error.message }}</v-alert>
    <v-progress-circular v-if="loading" indeterminate></v-progress-circular>
    <v-row justify="center">
      <v-col cols="12" md="12">
        <v-list>
          <v-list-item v-for="mylog in mylogs" :key="mylog.id" @click="viewMylog(mylog.id)">
            <v-list-item-content>
              <v-list-item-title>{{ mylog.title }}</v-list-item-title>
              <v-list-item-subtitle>{{ mylog.userName }} {{ mylog.createdAt.toDate().toLocaleString() }}</v-list-item-subtitle>
              <v-list-item-subtitle>{{ mylog.content }}</v-list-item-subtitle>
            </v-list-item-content>
          </v-list-item>
        </v-list>
        <v-alert v-if="!loading && !mylogs.length" type="info">마이로그가 없습니다.</v-alert>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  data() {
    return {      
    };
  },
  computed: {
    ...mapGetters('mylogs',['mylogs', 'error', 'loading'])
  },
  async created() {   
  },
  methods: {
    viewMylog(mylogId) {
      this.$router.push({ name: "MyLogView", params: { id: mylogId } });
    },
  },
};
</script>

 

...mapGetters('mylogs',['mylogs', 'error', 'loading'])

getter 중 mylogs에 등록된 모든 마이로그가 로드되어 있습니다. 이것을 template 에 바로 사용할 수 있습니다.

viewMylog(mylogId)

홈페이지 마이로그 리스트에서 마이로그를 클릭하면 이 함수를 호출합니다. 이 함수를 통해 아미로그의 아이디 mylogId를 id를 가지고 MyLogView페이지로 이동합니다. MyLogView 페이지는 마이로그 전체를 볼 수 있습니다.

viewMylog(mylogId) {
  this.$router.push({ name: "MyLogView", params: { id: mylogId } });
},

 

2. 마이로그 상세 보기

src/views/MyLogView.vue

<!-- src/views/MyLogView.vue -->
<template>
  <v-container>
    <v-row justify="center">
      <v-col cols="12" md="8">
        <v-card v-if="mylog">
          <v-card-title>{{ mylog.title }}</v-card-title>
          <v-card-subtitle>
            {{ mylog.userName }} Posted on: {{ mylog.createdAt.toDate().toLocaleString() }}
          </v-card-subtitle>
          <v-card-text>
            <!-- eslint-disable -->
            <v-card-text v-html="content"></v-card-text>
            <!-- eslint-enable -->
          </v-card-text>
        </v-card>
        <v-alert v-else type="error" dismissible @input="resetErrorMsg" class="my-alert">
          Mylog not found. Please check the link and try again.
        </v-alert>
        <!-- <v-alert v-if="error" type="error" dismissible @input="resetErrorMsg" class="my-alert">{{ error }}</v-alert> -->
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
import { mapActions, mapGetters } from "vuex";
import sanitizeHtml from 'sanitize-html';

export default {
  data() {
    return {
      content: '',
    };
  },
  // 페이지가 열릴 때 실행된다.
  async created() {
    const mylogId = this.$route.params.id; // Get the article ID from the route parameters
    await this.fetchMylog(mylogId);            // 마이로그 아이디로 마이로그를 가져온다.
    this.content = this.sanitizeContent(this.mylog.content);  // 내용에 포함된 html을 안전한 html로 변경한다.
  },  
  computed: {
    ...mapGetters('mylogs',['mylog'])   // 'mylog' mylogs store의 getter, 현재 선택된 마이로그이다. 
  },
  methods: {    
    ...mapActions('mylogs', ['fetchMylog', 'resetError']),  
    // 'fetchMylog' mylogs의 action 함수, firestore에서 마이로그를 가져온다.
    // content를 안전한 html로 바꿔준다.
    sanitizeContent(content) {
      return sanitizeHtml(content.replace(/\n/g, '<br>'), {
        allowedTags: ['b', 'i', 'em', 'strong', 'p', 'br'],
        allowedAttributes: {}
      });
    },
    resetErrorMsg() {
      this.resetError();
    }
  }
};
</script>

 

MyLogView 마이로그 상세보기 페이지가 열릴 때 매개변수로 받은 mylogId로 firestore에서 마이로그를 가져옵니다. 그런데 굳이 firestore에서 마이로그를 가져와야 할까요? 마이로그에 접속할 때 모든 마이로그를 메모리에 로드하여 가지고 있으므로 이것에서 가져올 수도 있습니다. 그럼에도 여기서는 firestore에서 가져오도록 합니다. 마이로그에 html이 포함되어 있으므로 sanitizeContent()로 안전한 html로 변경한 후 화면에 나타냅니다.

async created() {
  // Get the article ID from the route parameters
  const mylogId = this.$route.params.id; 
  // 마이로그 아이디로 마이로그를 가져온다.
  await this.fetchMylog(mylogId); 
  // 내용에 포함된 html을 안전한 html로 변경한다.
  this.content = this.sanitizeContent(this.mylog.content);  
},