[VueJS] 프로젝트 시작

먼저 Vue를 설치 해줘야한다.

npm i vue

다음 cli를 사용하기 위한 준비

vue의 환경설정을 자동으로 해준다.

npm i @vue/cli-init

 

프로젝트 생성

 

vue init webpack 프로젝트이름

 해당 명령어를 통하여  프로젝트를 생성할 수 있다.

 

 

Vue에서 Bootstrap 사용

 

npm install vue bootstrap bootstrap-vue

 

app.js 또는 main.js에 임포트 추가

import Vue from 'vue'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'

// Import Bootstrap an BootstrapVue CSS files (order is important)
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

// Make BootstrapVue available throughout your project
Vue.use(BootstrapVue)
// Optionally install the BootstrapVue icon components plugin
Vue.use(IconsPlugin)

 

자세한 내용은 부트스트랩 홈페이지

BootstrapVue

 

 

---

main.js

필요한 기능을 이쪽에다가 선언해준다.

 

예시로 부트스트랩을 사용하기 위한 파일 import를 main.js에디가 해줬다.

 

그밖의 필요한 기능 또한 이 main.js에서 import를 해주면 된다.

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

//-------  부트스트랩 사용
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'

// Import Bootstrap an BootstrapVue CSS files (order is important)
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

// Make BootstrapVue available throughout your project
Vue.use(BootstrapVue)
// Optionally install the BootstrapVue icon components plugin
Vue.use(IconsPlugin)



Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

 

 

App.vue

메인 화면단인거 같다.. 아직 잘 몰라서

상단 메뉴바의 Header, 하단 Footer 그리고 메인 화면 등

공통으로 사용될 화면을 이쪽에다가 꾸미는거 같다.

 

<template>
  <div id="app">
    <Header></Header>
    <router-view/>
  </div>
</template>

<script>
//Header 사용하기 위한
import Header from '@/components/flagment/Header';

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

이러한 형태로 components를 선언해서 사용

 

 

router 디렉토리의 index.js

화면 전환에 필요한 라우터 기능을 정의 해준다.

프로젝트를 생성할때 vue-router 모듈을 다운받았기 때문에 라우터 기능을 사용할 수 있는것!!

import Vue from 'vue'
import Router from 'vue-router'
import MainHome from '@/components/MainHome'
import BoardMain from '@/components/board/BoardMain'
import BoardWrite from '@/components/board/BoardWrite'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'MainHome',
      component: MainHome
    },
    {
      path:'/board',
      name: 'BoardMain',
      component: BoardMain
    },
    {
      path:'/board/write',
      name: 'BoardWrite',
      component: BoardWrite
    },
  ]
})

 

여기서 name의 역할은 뭘까.. 지워도 화면은 작동하는데

 

라우터를 보면 /board URL을 받게 되면 게시판 화면으로 이동하게 되어있다.( 메인 게시판 컴포넌트를 사용 )

이때 네비게이션 바에서 해당 URL을 사용하려면 href="" 말고 to=""를 사용해야 라우터에 URL을 보낼 수 있다.

 

Header nav 중..

 <b-nav-item to="/board">게시판</b-nav-item>

 

게시판 메인 컴포넌트

부트스트랩이 vue전용으로 기능이 추가된것이 있다.

<b-table striped hover :items="items" :fields="fields" @row-clicked="rowClick"></b-table>

:items="items" :fields="fields"

items는 데이터를 의미하고 fields는 items를 가지고 표현하고자 하는 이름을 정의할 때 사용된다.

 

@row-clicked => 해당 row가 클릭되었을 때 정의해둔 함수를 호출한다.

 

Vue연습용 프로젝트를 진행하면서..자바스크립트 문법이 약하다는걸 이번에 한번더 깨닿게 되었다....

//게시글 정렬
let items = data.Content.sort((a,b) => {return b.content_id - a.content_id});
//게시글의 작성자 뽑아내기
items = items.map(contentItem => {
     return {
       ...contentItem, user_name: data.User.filter(userItem => userItem.user_id === contentItem.user_id)[0].name
      };
});

이번 포스팅을 하며 부족한 부분을 정리해보려고한다.

 

첫번째로 사용된 sort()함수

 

arrayobj.sort(sortFunction)

---

arrayobj는 임의의 Array 개체이다. sortFunction는 요소 순서를 결정하는 데 사용되는 함수의 이름이다. 생략하면 오름차순, ASCII 문자 순서로 정렬된다.

sortFunction 인수에 함수를 지정하면 아래의 값 중 하나가 반환된다.

• 첫 번째 인수가 두 번째 인수보다 작을 경우 - 값
• 두 인수가 같을 경우 0
• 첫 번째 인수가 두 번째 인수보다 클 경우 + 값

숫자 정렬

var score = [4, 11, 2, 10, 3, 1]; 

/* 오류 */
score.sort(); // 1, 10, 11, 2, 3, 4 
              // ASCII 문자 순서로 정렬되어 숫자의 크기대로 나오지 않음

/* 정상 동작 */
score.sort(function(a, b) { // 오름차순
    return a - b;
    // 1, 2, 3, 4, 10, 11
});

score.sort(function(a, b) { // 내림차순
    return b - a;
    // 11, 10, 4, 3, 2, 1
});

 

Object 정렬

var student = [
    { name : "재석", age : 21},
    { name : "광희", age : 25},
    { name : "형돈", age : 13},
    { name : "명수", age : 44}
]

/* 이름순으로 정렬 */
student.sort(function(a, b) { // 오름차순
    return a.name < b.name ? -1 : a.name > b.name ? 1 : 0;
    // 광희, 명수, 재석, 형돈
});

student.sort(function(a, b) { // 내림차순
    return a.name > b.name ? -1 : a.name < b.name ? 1 : 0;
    // 형돈, 재석, 명수, 광희
});

/* 나이순으로 정렬 */
var sortingField = "age";

student.sort(function(a, b) { // 오름차순
    return a[sortingField] - b[sortingField];
    // 13, 21, 25, 44
});

student.sort(function(a, b) { // 내림차순
    return b[sortingField] - a[sortingField];
    // 44, 25, 21, 13
});

 

map은 모던 자바스크립트를 다시 한번 읽어보자.

https://ko.javascript.info/map-set

맵과 셋

 

 

filter()

---

filter 함수는 명칭과 같이 callbackFunction의 조건에 해당하는 모든 요소가 있는 배열을 새로 생성하는 기능

var newArray = arr.filter(callbackFunction(element, index, array), thisArg);

filter 함수의 매개변수는 callbackFunction 과 thisArg

callbackFunction에는 3개의 매개변수를 사용할 수 있다.

element : 요소값

index : 요소의 인덱스

array : 사용되는 배열 객체

 

그리고 thisArg 는 filter에서 사용될 this 값입니다. 선택적으로 사용되며 사용하지 않을 경우

undefined 전달 된다.

 

...contentItem, user_name: data.User.filter(userItem => userItem.user_id === contentItem.user_id)[0].name

이번예제에서 사용된 filter함수 이다. 

 

... 문법

---

 ...contentItem, ~~

... 문법이 사용되었는데 자바스크립트를 제대로 접한게 이번이 처음이다 보니까 생소하였다.

 

쉽게 생각하면 ...객체명 , 즉 전달 받을 객체의 값만 가져오는것!!

 

객체 = 객체2로 선언하게 되면 이는 값을 가져오는것이 아닌, 주소값을 가져와 객체2를 변경하게 되면 객체까지 변경되기 때문에 필요한 값만 가져오려면 ... 을 사용하면 된다.