[애플코딩] 인스타그램을 만들며 배워보는 Vue.js 3 완벽 가이드 (3)

인스타그램을 만들며 배워보는 Vue.js 3 완벽 가이드

인스타그램을 만들며 배워보는 Vue.js 3 완벽 가이드 - 코딩애플 온라인 강좌

 

Vue 16강 : bootstrap

작업용 폴더를 에디터에서 오픈하여 blog 프로젝트 생성 후, 에디터로 bolg 폴더 오픈.

 

이제 UI를 만들어야 하는데, Bootstrap을 사용하면 CSS를 작성하지 않아도 UI를 만들 수 있다.

Bootstrap은 사이트에서도 다운 가능하고, npm으로도 설치가 가능하다. npm 설치 시 다음 코드를 입력한다.

 

npm install bootstrap@5

 

설치 후 main.js 세 번째 줄 즈음에 다음 코드를 추가해 준다.

 

main.js

import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'

 

설치가 완료됐으면 해당 사이트에서 원하는 UI를 검색해 코드를 복사해 오면 된다.

Bootstrap

 

Vue 17강 : blog data binding

router는 페이지를 나눌 때 사용한다. router를 학습하기 위해 components 폴더 안에 List.vue 페이지를 만들어 준다.

 

List.vue

<template>
  <div>
    <h5>블로그 글 제목</h5>
    <p>블로그 글 날짜</p>
  </div>
  <div>
    <h5>블로그 글 제목</h5>
    <p>블로그 글 날짜</p>
  </div>
  <div>
    <h5>블로그 글 제목</h5>
    <p>블로그 글 날짜</p>
  </div>
</template>

<script>

export default {
  name: 'LIST',
}
</script>

<style>

</style>

 

컴포넌트 등록도 해 준다.

 

List.vue

<template>
  <List />
</template>

<script>
import List from './components/List.vue';

export default {
  name: 'App',
  components: {
    List : List,
  }
}
</script>

<style>

</style>

 

데이터 보관을 위해 assets 폴더에 blog.js 폴더를 만들어 주고 연결해 준다.

 

blog.js

export default[{ 
  title : '첫 째 프로젝트 : 허위매물 전문 부동산 앱',
  content : 'Vue를 이용하면 비누같이 매끈한 앱을 만들 수 있습니다',
  date : 'September 24, 2021',
  number : 0
},{ 
  title : '둘 째 프로젝트 : 오마카세 배달 앱',
  content : '음식이 아니라 셰프를 직접 배달해드립니다',
  date : 'October 20, 2020',
  number : 1
},{ 
  title : '셋 째 프로젝트 : 현피 앱',
  content : '거리를 설정하면 가장 가까운 파이터를 소개해드려요! 서로 싸워보세요',
  date : 'April 24, 2019',
  number : 2
}]

 

App.vue

//script
import data from './assets/blog.js';

//script-default
data(){
  return {
    data : data,
  }
},

 

가져온 데이터 List.vue로 전송해 데이터바인딩해 준다.

 

App.vue

//template
<List :data="data"/>

 

List.vue

//template
<div>
  <h5>{{ data[0].title }}</h5>
  <p>{{ data[0].date }}</p>
</div>
<div>
  <h5>{{ data[1].title }}</h5>
  <p>{{ data[1].date }}</p>
</div>
<div>
  <h5>{{ data[2].title }}</h5>
  <p>{{ data[2].date }}</p>
</div>

//script-defalt
props : {
  data : Array,
}

 

Vue 18강 : vue-router

페이지를 나누기 위해 router 라이브러리를 터미널로 설치한다.

 

npm install vue-router@4

 

src 폴더에 router.js 파일을 만들고 코드를 복사해 넣는다.

 

router.js

import { createWebHistory, createRouter } from "vue-router";
import List from './components/List.vue'

const routes = [
  {
    path: "/list",
    component: List,
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

 

main.js와 App.vue에서 라우터 사용 셋팅을 한다.

 

main.js

import Router from './router.js'

createApp(App).use.apply(Router).mount('#app')

 

App.vue

<template>
  <!-- 라우터 -->
  <router-view></router-view>

</template>

<script>
import data from './assets/blog.js';

export default {
  name: 'App',
  data(){
    return {
      data : data,
    }
  },
  components: {
  }
}
</script>

<style>

</style>



이거 코드 안 됨

 

componets에 Home.vue 페이지를 만든다.

 

Home.vue

<template>
  <div class="container mt-4">
    <h5>React 개발자의 블로그입니다</h5>
    <p>- Vue로 만들었음 -</p>
  </div>
</template>

<script>
export default {
   name : 'HOME', 
}
</script>

<style>

</style>
</script>

<style>

</style>

 

router.js

import Home from './components/Home.vue'

//routes
{
  path: "/home",
  component: Home,
},

 

페이지 이동 링크를 만들고 싶으면 해당 코드를 작성하면 된다.

 

App.vue

//template
<router-link to="/list">홈페이지</router-link>
<router-link to="/list">리스트페이지</router-link>

 

※ 부트스트랩에서 네비 코드 가져옴

 

App.vue

//template
<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

 

과제

Detail.vue 만들기

---

Detail.vue

<template>
  <div>
    <h4>상세페이지</h4>
    <h5>글제목</h5>
    <p>글설명</p>
  </div>
</template>

<script>
export default {
  name: 'DETAIL'
}
</script>

<style>

</style>

 

router.js

import Detail from './components/Detail.vue';

//routes
{
  path: "/detail",
  component: Detail,
},

 

 

 

Vue 19강 : route params

 

 

 

 

 

 

 

 

Vue 20강 : nested routes / push

 

 

 

 

 

 

 

 

 

Vue 기능들

 

 

 

 

 

 

 

Vue 사이트 build & Github Pages 배포