[Vue.js] Instagram 프로젝트 생성하기 및 데이터바인딩하기

💡 실습 포인트!

• 오늘은 Instagram 프로젝트를 생성하여 Instagram 과 유사하게 레이아웃을 만들고 데이터바인딩까지 해보았다.
• 레이아웃은 사실상 강사님이 다 만들어 오신 거라... 내가 한 거라고는 데이터파일 만들고 데이터바인딩한 것 외에는 없다.
• 나중에 레이아웃 만드는 것도 혼자서 진행해보면 시간은 좀 오래 걸리겠지만 재미있지 않을까 생각해본다.

---

💜 Vue 로 Instagram 프로젝트 생성하기

• Vue 설치, 프로젝트 생성 및 개발환경 셋팅하는 방법은 이전에 포스팅해둔 게 있어서 자세한 설명은 생략했다.
  (혹시 vue 설치하는 방법 및 개발환경 셋팅하는 방법이 궁금하다면 여기를 클릭!)

---

💜 Instagram 처럼 레이아웃 만들기 및 데이터바인딩하기

🤍 데이터를 담은 posts.js 파일 만들기

export default [
    {
      name: "Kim Hyun",
      userImage: "https://placeimg.com/100/100/arch",
      postImage: "https://placeimg.com/640/480/arch",
      likes: 36,
      date: "May 15",
      liked: false,
      content: "오늘 무엇을 했냐면요 아무것도 안했어요",
      filter: "perpetua"
    },
    {
      name: "John Doe",
      userImage: "https://placeimg.com/200/200/people",
      postImage: "https://placeimg.com/640/480/people",
      likes: 20,
      date: "Apr 20",
      liked: false,
      content: "흔한 자랑스타그램",
      filter: "clarendon"
    },
    {
      name: "Minny",
      userImage: "https://placeimg.com/100/100/animals",
      postImage: "https://placeimg.com/640/480/animals",
      likes: 49,
      date: "Apr 4",
      liked: false,
      content: "우리집 개는 화장실 물도 내림",
      filter: "lofi"
    }
  ]

• post.js 파일을 만든 다음, 강사님이 제공해주신 데이터를 담아 export default 문법을 사용하여 다른 파일에서 import 할 수 있게 만들어주었다.

---

🤍 App.vue

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

<template>
  <div class="header">
    <ul class="header-button-left">
      <li>Cancel</li>
    </ul>
    <ul class="header-button-right">
      <li>Next</li>
    </ul>
    <img src="./assets/logo.png" class="logo" />
  </div>

  <Container :posts="posts" />

  <div class="footer">
    <ul class="footer-button-plus">
      <input 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";
export default {
  name: "App",
  data() {
    return {
      posts: posts,
    };
  },
  components: {
    Container: Container,
  },
};
</script>

<style>
</style>

• posts.js 에서 데이터들을 posts 라는 이름으로 import 해와서 data 보관함에 등록해주었다.
• 그리고 App.vue 안에 Container.vue 가 있고, 또 그 안에 Post.vue 를 보여줄 것이므로 일단 App.vue 에 Container.vue 를 import 하고 components 에 등록해준 다음 <template></template> 안의 원하는 위치에 Container Component 를 넣어주었다.
• 그리고 posts 라는 데이터는 최종적으로 Post.vue 까지 전송되어야 하므로, posts 라는 이름으로 data 보관함의 posts 를 전송해주었다.

---

🤍 Container.vue

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

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

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

<style>
</style>

• Container.vue 안에는 Post.vue 가 들어가야 하므로, 먼저 Post.vue 를 import 해준 후에 components 에 등록해주었다.
• 그 다음 <template></template> 안의 원하는 위치에 Post Component 를 넣어주었다.
• 그리고, App.vue 에서 받아온 posts 를 props 에 등록한 후 반복문을 통해 posts 에 담긴 데이터 하나하나를 post 라는 이름으로 다시 Post.vue 로 전송해주었다. 
  (여기는 아직 헷갈려서, 반복문 만드는 연습을 한 후에 하나씩 코드를 수정해나갔다.)

 

---

🤍 Post.vue

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

<template>
  <div class="post">
    <div class="post-header">
      <div
        class="profile"
        :style="{ backgroundImage: `url(${post.userImage})` }"
      ></div>
      <span class="profile-name">{{ post.name }}</span>
    </div>
    <div
      class="post-body"
      :style="{
        backgroundImage: `url(${post.postImage})`,
      }"
    ></div>
    <div class="post-content">
      <p>{{ post.likes }} Likes</p>
      <p>
        <strong>{{ post.name }}</strong> {{ post.content }}
      </p>
      <p class="date">{{ post.date }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: {
    post: Object,
  },
  components: {},
};
</script>

<style>
</style>

• 이제 Container.vue 에서 props 로 받은 post 를 props 에 등록한 뒤 하나씩 데이터바인딩을 해주면 된다.
• 다만, style 속성에 데이터바인딩하는 게 처음에는 조금 어려웠다.
  • 먼저, style 속성에 데이터바인딩을 하기 위한 밑작업으로 style 앞에 콜론( : )을 붙여주었다.
  • 작성할 때에는 객체 구문을 활용하여 :style="{ backgroundImage: `url(${post.userImage})` }" 와 같이 작성해도 되고, 일반적인 인라인 스타일 속성 작성하듯이 :style="`background-image: url(${post.userImage})`" 와 같이 작성해도 된다.
  • 단, 객체 구문을 활용할 때에는 속성명은 camelCase 와 kebab-case 로 작성해야 한다.