vue Project 구조

위 그림을 보자 정말 어렵게 생각했다...

우리가 javascript를 사용했을 때 필요한 부분 다 <script src='....js'> 이렇게 js파일 또는 lib파일들 import 하며 코딩을 했을 거다 하지만 이 Vue는 알고 있어야 할 게 있다 SPA(Single Page Applcation) <---- 이거다 한 페이지 안에서 모든 걸 다 할 거라고 목표를 세워 만든 프레임워크다.

그렇다 한 page에 다 설정해서 에 페이지를 나가지 않는 이상 다 이페이지에서 처리한다 그래서 그림을 보면 2번 의 main.js에 우리가 사용할 lib, module, js. css 등등 여기다 다 import 하면 된다. 난 javascript만 하던 이라서 그런지 처음에 componet에 하나하나 import 할 생각밖에 안 났다 ㅡ.ㅡ 왜냐 SPA를 이해를 못했기 때문이다

그러니 처음 접해본 사람들은 저 그림을 잘 보고 참고 하길 바란다.

그리고 여기서 router이건 대부분 사람들이 기능알 알 거다. 그래 이거 그냥 이 녀석이 path의 페턴을 보고 component들을 보여주는 역할을 하는 거다. 요 router의 기능은 많다, 라우터마다 ID를 줄 수도 있고, 라우터의 자식 라우터를 만들 수도 있고 알죠? 궁금하면 구글링이다 ㅋㅋ router.vuejs.org/kr/

소개 | Vue Router

 

다음엔 진짜 내가 이해하기 힘들었던 개념 ㅡ.ㅡ 값 전달 되시겠다 아 ... 진짜 하루 동안 고심이 많았다 ㅋㅋㅋ

<template>

    <div>

        <h1>Wellocom to {{ title2 }}</h1>

        <input type="text" v-model="input1"/> <!-- values -> v-model은 양방향이다.-->

        <button type="button" @click="getData">Get</button>

        <button type="button" @click="setData">Set</button>

 

        <select class="form-control" v-model="region" @change="onChange">

            <option :key="i" :value="d.v" v-for="(d,i) in options">{{ d.t }}</option>

            <!-- html에 :를 사용하면 데이터에 접근, html밖에선 {{ }} 이걸로 접근 -->

        </select>

        <table class="table table-bordered" v-if="tableShow">

            <!-- v-if는 조건이 안맞으면 화면에 렌더링 자체를 하지 않음 렌더링행위 자체를 계속적으로 리소스가 소모된다. ex : 특정조건-->

            <!-- v-show는 조건이 안맞아도 화면에 렌더링을 한다. style일로만 보여주고 안보여주고 하기 때문에 리소스 소모가 적다. ex : TAB-->

            <tr v-for="(d, i) in options" :key="i">

                <td>{{ d.v }}</td>

                <td>{{ d.t }}</td>

            </tr>

        </table>

        <canvas style="border:1px solid red;" ref="canvas"></canvas>

    </div>

</template>

 

<script>

export default {

    name: 'home',

    data() {

        return {

            title: "테스트",

            title2: "Seoul",

            input1: "abcd",

            options: [

                {v:"S", t:"Seoul"},

                {v:"J", t:"Jeju"},

                {v:"B", t:"Busan"},

            ],

            region : "J",

            tableShow : false,

            myImage: "https://konvajs.org/assets/yoda.jpg",

        }

    },

    methods: {

        getData() {

            alert(this.input1)

        },

        setData() {

            this.input1 = "12345"

        },

        onChange() {

            alert(this.region)

            this.tableShow = true

        },

        func(){

            let cvn = this.$refs.canvas;

            let ctx = cvn.getContext("2d");  

            let bg = new Image();

            bg.src = this.myImage;

            bg.onload = function() {

                    ctx.drawImage(bg, 0 ,0);

            };

        }

    },

    mounted(){

        this.func();

    },

    watch: {

        // 특정 data가 변경을 감지한다. data의 변수 명과 똑같아야 한다.

        // input1 data가 변경 되면 호출된다.

        input1() {

            console.log("==================", this.input1)

        }

    },

}

</script>

정말 기본적이 소스다. 근데 이게 난 정말 변수 설정하고 가져오고 가공하고 다시 넣고 정말 많은 도움을 줬다. 이건 해당 component에서만 사용한다.

일단 data () 이걸 보자 처음엔 이게 뭘까....라는 생각을 했다. 왜냐 좀 찾아봐도 변수다.... 지정한다... 등등 말이 많았는데 ㅡ.ㅡ 난?????????이었다 이게 뭔데 ㅡ.ㅡ라고 쉽게 생각하자 이건 전역 변수다!!! 아닐 수도 있다 하지만 javascript를 자주 사용하던 사람이라면 뭔 말인지 알 것이다 저 data에 선언된 변수들은 해당 Component에서 어디서든 어느 함수든 뭐든 간에 다 접근이 가능하다는 이야기다. 하.... 이 엄청난 편안함.... 이건 <script></script> 안에서만 접근이 다 되는 게 아니다 그냥 해당. vue화면에서 다 접근이 가능하다. 이게 중요했다. Vue화면에서 그냥 다 접근이 가능하다

이런 생각을 가지고 소스를 한번 살살 살펴보면 어떻게 해야 할지 감이 올 것이다.

다음엔 Vue에서 <canvas>태그에 대해 끄적여 봐야겠다.