[Vue.js] 글발행 기능 만들기

💡 실습 포인트!

---

💜 "발행" 버튼 누르면 글발행되는 기능 만들기

// 전체 코드 미리보기
// 전체 코드의 내용이 길어 css 부분은 제외했다.

<template>
  <div class="header">
    <ul class="header-button-left">
      <li v-if="step === 1 || step === 2" @click="step = 0">Cancel</li>
    </ul>
    <ul class="header-button-right">
      <li @click="step++" v-if="step === 1">Next</li>
      <li @click="publish" v-if="step === 2">발행</li>
    </ul>
    <img src="./assets/logo.png" class="logo" />
  </div>

  <Container
    :posts="posts"
    :step="step"
    :imgUrl="imgUrl"
    @content="content = $event"
  />

  <button class="btn" @click="more" v-if="step === 0">더보기</button>

  <div class="footer" v-if="step === 0">
    <ul class="footer-button-plus">
      <input @change="uploadImg" type="file" id="file" class="inputfile" />
      <label for="file" class="input-plus">+</label>
    </ul>
  </div>
</template>

<script>
import Container from "./components/Container.vue";
import posts from "./assets/posts";
import axios from "axios";
export default {
  name: "App",
  data() {
    return {
      posts: posts,
      moreCnt: 0,
      step: 0,
      imgUrl: "",
      content: "",
    };
  },
  methods: {
    more() {
      axios
        .get(`https://codingapple1.github.io/vue/more${this.moreCnt}.json`)
        .then((result) => {
          this.posts.push(result.data);
          this.moreCnt++;
        })
        .catch(() => {
          console.log("GET 요청을 실패했습니다.");
        });
    },
    uploadImg(e) {
      let file = e.target.files;
      let url = URL.createObjectURL(file[0]);
      this.imgUrl = url;
      this.step++;
    },
    publish() {
      let myPost = {
        name: "Bak Seoyun",
        userImage: "https://placeimg.com/100/100/arch",
        postImage: this.imgUrl,
        likes: 28,
        date: "Jun 1",
        liked: false,
        content: this.content,
        filter: "perpetua",
      };
      this.posts.unshift(myPost);
      this.step = 0;
    },
  },
  components: {
    Container: Container,
  },
};
</script>

<style>
</style>

• "발행" 버튼을 누르면 사용자가 업로드한 이미지와 작성한 글이 메인페이지 맨 위의 포스트로 떠야 한다.
• 즉, "발행" 버튼을 눌렀을 때 posts 데이터의 맨 앞에 사용자가 업로드한 이미지와 작성한 글이 object 형식으로 들어가야 하는 것이다.
• 그러면 업데이트된 posts 데이터가 반복문을 돌면서 각각의 데이터를 Post component 에 데이터바인딩되어 메인 페이지에 보여진다.

 

<li @click="publish" v-if="step === 2">발행</li>

• 먼저, "발행" 버튼을 클릭하면 publish() 라는 함수가 동작하도록 해주었다.

 

publish() {
  let myPost = {
    name: "Bak Seoyun",
    userImage: "https://placeimg.com/100/100/arch",
    postImage: this.imgUrl,
    likes: 28,
    date: "Jun 1",
    liked: false,
    content: this.content,
    filter: "perpetua",
  };
  this.posts.unshift(myPost);
  this.step = 0;
},

• posts 라는 데이터에 사용자가 작성한 post 를 추가하려면, 위와 같이 기존의 posts 내의 object 데이터와 똑같은 형식으로 object 를 하나 만든 다음, posts 에 unshift() 함수를 사용하여 추가해주면 된다.
• 이번에 push() 대신 unshift() 를 사용한 이유는 브라우저에서 보여지는 포스트들 중 맨 위에 있는 포스트가 새로 추가한 포스트여야 하기 때문이다.
• 그리고 "발행" 버튼을 통해 발행이 되고 나면 그대로 글작성 페이지에 머무는 게 아니라 메인 페이지로 돌아오는 것이 자연스러우므로 step 을 0 으로 바꾸어주면 된다.
• 여기서 업로드한 이미지는 imgUrl 을 가져오면 되므로 문제가 되지 않는데, 사용자가 작성한 글 내용은 어떻게 가져오면 될까?
• 바로 data 보관함에 content 라는 항목을 만들어서, 하위 Component 인 Container.vue 에서 <textarea/> 에 입력된 값을 custom event 로 받아오면 된다.

 

// 전체 코드 미리보기
// 전체 코드의 내용이 길어 css 부분은 제외했다.

<template>
  <div>
    <div v-if="step === 0">
      <Post :post="post" v-for="(post, i) in posts" :key="i" />
    </div>

    <!-- 필터선택페이지 -->
    <div v-if="step === 1">
      <div
        class="upload-image"
        :style="{ backgroundImage: `url(${imgUrl})` }"
      ></div>
      <div class="filters">
        <div class="filter-1"></div>
        <div class="filter-1"></div>
        <div class="filter-1"></div>
        <div class="filter-1"></div>
        <div class="filter-1"></div>
      </div>
    </div>

    <!-- 글작성페이지 -->
    <div v-if="step === 2">
      <div
        class="upload-image"
        :style="{ backgroundImage: `url(${imgUrl})` }"
      ></div>
      <div class="write">
        <textarea
          class="write-box"
          @input="$emit('content', $event.target.value)"
          placeholder="내용을 입력하세요!"
        ></textarea>
      </div>
    </div>
  </div>
</template>

<script>
import Post from "./Post.vue";
export default {
  name: "Container",
  data() {
    return {};
  },
  components: {
    Post: Post,
  },
  props: {
    posts: Array,
    step: Number,
    imgUrl: String,
  },
};
</script>

<style>
</style>

• 위 코드와 같이 사용자가 <textarea /> 에 입력한 값인 $event.target.value 를 @input 을 통해 content 라는 이름과 함께 App.vue 로 전송해주었다.

 

  <Container
    :posts="posts"
    :step="step"
    :imgUrl="imgUrl"
    @content="content = $event"
  />

• App.vue 에는 이미 data 보관함에 content 라는 항목을 만들어두었으니, 위 코드처럼 custom event 를 @content 로 받아서 content 에 $event 를 저장해주었다.
• 이제 <textarea /> 가 수정될 때마다 content 에 데이터가 저장되고, "발행" 버튼을 누르면 최종적으로 저장된 데이터가 publish() 내에 this.content 에 할당되는 것이다.