Vue를 이용한 여러 기능 구현

 

AJAX 요청

 

App.vue

<template>
  <PostContainer :data="data" :step="step" />
  <button @click="more">더보기</button>
</template>

<script>
import data from "./assets/dummydata.js";

import PostContainer from "./components/PostContainer.vue";

import axios from "axios";

export default {
  name: "App",
  data() {
    return {
      data: data,
    };
  },
  components: {
    PostContainer: PostContainer,
  },
  methods: {
    more() {
      // 여기
      axios
        .get('URL')
        .then((result) => {
          this.data.push(result.data);
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
};
</script>

 

서버와의 통신은 크게 다르지 않습니다. 약속된 URL의 요청을 보내고 응답의 데이터를 저장하면 됩니다. fetch도 사용할 수 있지만 호환성 때문에 axios를 쓰는 게 더 좋습니다.

 

 

탭 구현

 

PostContainer.vue

<template>
  <div>
    <!--Post-->
    <div v-if="step == 0">
      <OnePost v-for="(item, index) in data" :key="index" :data="item" />
    </div>

    <!--Filter-->
    <div v-if="step == 1">
      <... />
    </div>

    <!--Write-->
    <div v-if="step == 2">
      <... />
    </div>
  </div>
</template>

<script>
import OnePost from "./OnePost.vue";

export default {
  name: "PostContainer",
  components: {
    OnePost: OnePost,
  },
  props: {
    data: Array,
    step: Number,
  },
};
</script>

 

다음과 같이 변수를 만들고 그에 맞게 적용될 태그를 나눠 탭을 구현할 수 있습니다.

 

 

이미지 업로드

 

App.vue

<template>
  <PostContainer :data="data" :step="step" :imageURL="imageURL"/>
  <button @click="more">더보기</button>

  <!--footer-->
  <div class="footer">
    <ul class="footer-button-plus">
      <!--1-->
      <input @change="upload" type="file" id="file" class="inputfile" />
      <label for="file" class="input-plus">+</label>
    </ul>
  </div>
</template>

<script>
import data from "./assets/dummydata.js";

import PostContainer from "./components/PostContainer.vue";

import axios from "axios";

export default {
  name: "App",
  data() {
    return {
      data: data,
      step: 0,
      pageIndex: 0,
      imageURL: ''
    };
  },
  components: {
    PostContainer: PostContainer,
  },
  methods: {
    upload(event) {
      let uploadedImage = event.target.files; // 2
      this.imageURL = URL.createObjectURL(uploadedImage[0]); // 3
      this.step = 1;
    }
  },
};
</script>

 

1.  파일을 받을 인풋 태그를 만듭니다. 속성에 multiple을 추가하여 여러 파일을 받을 수 있으며 accept="image/*" 속성을 추가하여 이미지 파일만 먼저 보이게 할 수 있습니다.(완벽한 규제가 아니기에 type을 따로 조건을 짜서 검증하는 게 좋습니다.) 
2. 업로드한 파일을 event.target.files로 먼저 잡아봅시다.
3. 객체 형태로 들어오기에 첫 번째 값을 설정하고 URL.createdOjectURL을 이용하여 가상의 URL을 만듭니다.

 

uploadedImage

 

imageURL

 

 

색감 보정 필터

 

index.html

    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/cssgram/0.1.12/cssgram.min.css"
      integrity="sha512-kr3JaEexN5V5Br47Lbg4B548Db46ulHRGGwvyZMVjnghW1BKmqIjgEgVHV8D7V+Cbqm/VBgo3Rcbtv+mGLoWXA=="
      crossorigin="anonymous"
    />

 

cssgram을 추가해 줍니다.

 

PostContainer.vue

<template>
    <!--Filter-->
    <div v-if="step == 1">
      <div
        class="upload-image"
        :style="{ backgroundImage: `url(${imageURL})` }"
      ></div>
      <div class="filters">
        <!--2-->
        <FilterBox :imageURL="imageURL" v-for="item in filterList" :key="item" :filterName="item"></FilterBox>
      </div>
    </div>
</template>

<script>
import OnePost from "./OnePost.vue";
import FilterBox from "./FilterBox.vue";

export default {
  name: "PostContainer",
  data() {
    return {
      // 1
      filterList: [
        "aden",
        "_1977",
        "brannan",
        "brooklyn",
        "clarendon",
        "earlybird",
        "gingham",
        "hudson",
        "inkwell",
        "kelvin",
        "lark",
        "lofi",
        "maven",
        "mayfair",
        "moon",
        "nashville",
        "perpetua",
        "reyes",
        "rise",
        "slumber",
        "stinson",
        "toaster",
        "valencia",
        "walden",
        "willow",
        "xpro2",
      ],
    };
  },
  components: {
    OnePost: OnePost,
    FilterBox: FilterBox,
  },
  props: {
    data: Array,
    step: Number,
    imageURL: String,
  },
};
</script>

 

1. 필터 이름들을 나열한 배열을 데이터로 추가합니다.
2. 필터 수만큼 반복하고 이미지 URL과 필터 항목들을 내려줍니다.

 

FilterBox.vue

<template>
  <!--여기-->
  <div class="filter-item" :class="filterName" :style="`background-image:url(${imageURL})`"></div>
</template>

<script>
export default {
  name: "FilterBox",
  props: {
    imageURL: String,
    filterName: String
  },
};
</script>

 

cssgram은 class에 필터명만 추가해 주면 자동으로 해주고 style 속성에 물려받은 imageURL을 넣어줍니다.