mysql 에는 데이터를 암호화, 복호화하는 AES_ENCRYPT, AES_DECRYPT 함수가 있습니다. 이 암호화는 128비트 길이로 인코딩되어 저장됩니다. 그러나 소스를 수정해서 256비트까지 확장시킬수 있다고 합니다.

 

AES_ENCRYPT 는 문자열을 암호화하고, 바이너리 문자열을 반환하지만, AES_DECRYPT 는 암호화된 문자열을 복호화합니다. AES_DECRYPT 는 유효하지 않은 데이터는 padding을 감지하고, NULL을 반환합니다.

 

 

 # "암호화 키"는 임의의 값이 올 수 있으며, "문자열"은 암호화하고자 하는 값이 됩니다.



 # AES_ENCRYPT 암호화

  INSERT INTO 테이블명 VALUES (HEX(AES_ENCRYPT('문자열', '암호화 키')));



 # AES_DECRYPT 복호화

  SELECT AES_DECRYPT(UNHEX(필드명), '암호화 키') FROM 테이블명;

예제 (ex #1

 

 # AES_ENCRYPT 암호화

 INSERT INTO tbname VALUE (HEX(AES_ENCRYPT('123456','가나다라')));

 // 결과: 5A33E11DC0B638E4E5E74EBD52F55E3D



 # AES_DECRYPT 복호화

 SELECT AES_DECRYPT(UNHEX(필드명), '가나다라') FROM tbname;

출처: <https://blog.habonyphp.com/213>

 

 

 

DB 속도 + 검색 문제로 상기기능 실제적용 실패

Posted by 철냄비짱
,

MySQL 기간검색

DataBase/Mysql 2020. 4. 11. 19:12
select * from music 

where

 (type='song' or type='album')

 and 

created_date > DATE_ADD(now(), INTERVAL -1 hour);


 


 

music 테이블에서 type이 song 또는 album 인 데이터가 지난 1시간 동안 얼마나 들어왔는지 검색


 

-1~ -24 까지 하면 최근 한 시간 부터 24시간까지 검색이 가능


 

이런 식으로 끝에

-1 hour  최근 한 시간

-1 day 최근 하루

-1 month 최근 한달


 


 

 select * from music

 where 

created_date between '2013-10-10' and '2013-10-14';

 

10일부터 14일까지 검색

Posted by 철냄비짱
,

VO 별로 컨트롤을 위해

vo 구조대로

 

class 도 만들어보고 

class TestVO {
    this.idx = 0;
    this.pidx = 0;
    this.name = "TEST";
}

vat testVO = new this.TestVO()

 

Object로만 만들어보고

var testVO = {
    idx : 0
    pidx: 0,
    name: 'TEST'
}

 

function 으로도 만들어 봤더니

TestVO: function() {
    this.idx = 0
    this.pidx = 0
    this.name = "TEST"
}
var testVO = new this.TestVO()

 

 

function이 제일 낫더라

 

vo 객체 모은 내용만 js로 따로 뺄까 고민중

Posted by 철냄비짱
,

 

Apache

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

#nginx

location / {
 
try_files $uri $uri/ /index.html;
}

#Native Node.js

const http = require("http")
const fs = require("fs")
const httpPort = 80

http.createServer((req, res) => {
  fs.
readFile("index.htm", "utf-8", (err, content) => {
   
if (err) {
      console.
log('We cannot open "index.htm" file.')
    }

res.writeHead(200, {
     
"Content-Type": "text/html; charset=utf-8"
    })

res.end(content)
  })
}).
listen(httpPort, () => {
  console.
log("Server listening on: http://localhost:%s", httpPort)
})

#Express와 Node.js

Node.js/Express의 경우 connect-history-api-fallback 미들웨어를 고려해보세요.

#Internet Information Services (IIS)

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
 <system.webServer>
   <rewrite>
     <rules>
       <rule name="Handle History Mode and custom 404/500" stopProcessing="true">
         <match url="(.*)" />
         <conditions logicalGrouping="MatchAll">
           <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
           <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
         </conditions>
         <action type="Rewrite" url="index.html" />
       </rule>
     </rules>
   </rewrite>
     <httpErrors>    
         <remove statusCode="404" subStatusCode="-1" />               
         <remove statusCode="500" subStatusCode="-1" />
         <error statusCode="404" path="/survey/notfound" responseMode="ExecuteURL" />               
         <error statusCode="500" path="/survey/error" responseMode="ExecuteURL" />
     </httpErrors>
     <modules runAllManagedModulesForAllRequests="true"/>
 </system.webServer>
</configuration>

#주의 사항

주의 사항이 있습니다. 여러분의 서버는 404 에러를 보고하지 않을 것입니다. 왜냐하면 모든 발견되지 않은 경로가 이제 index.html 파일을 제공하기 때문입니다. 이 문제를 해결하려면 Vue 앱에서 catch-all 라우트를 구현하여 404 페이지를 표시해야합니다.

const router = new VueRouter({
  mode:
'history',
  routes: [
    { path:
'*', component: NotFoundComponent }
  ]
})

또는 Node.js 서버를 사용하는 경우 서버 측의 라우터를 사용하여 들어오는 URL을 일치시키고 라우트가 일치하지 않으면 404로 응답하여 폴백을 구현할 수 있습니다. 더 자세한 설명은 Vue 서버사이드 렌더링 문서을 읽어보세요

 

출처: <https://router.vuejs.org/kr/guide/essentials/history-mode.html#%EC%84%9C%EB%B2%84-%EC%84%A4%EC%A0%95-%EC%98%88%EC%A0%9C>

 

Posted by 철냄비짱
,

Introduction

Icon

1장과 3장에서 Vue의 특징중 컴포넌트 기반 프레임워크라는 내용과 인스턴스의 유효 범위에 대해서 설명하였습니다. 결국 인스턴스를 생성하여 컴포넌트로 사용하기 때문에 결국 컴포넌트가 유효 범위가 있다고 할 수 있습니다.

따라서 Vue의 컴포넌트는 유효 범위가 있기 때문에 서로 다른 컴포넌트 끼리 값을 직접적으로 참조할 수 없습니다. 그렇다면 서로 다른 컴포넌트 끼리 데이터 공유가 필요할 경우 어떻게 해야할까요?

 

이번장에서는 서로 다른 컴포넌트간의 통신에 대해서 설명하겠습니다.

 

 

1. 컴포넌트 간 통신과 유효 범위

 

컴포넌트는 각각 자체적으로 고유한 유효 범위(Scope)를 갖고있습니다. 각 컴포넌트의 유효 범위는 독립적이기 때문에 다른 컴포넌트의 값을 직접적으로 참조할 수 없습니다.

컴포넌트 유효 범위 테스트

1

2

3

4

<div id="app">

    <my-component1></my-component1>

    <my-component2></my-component2>

</div>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

// 첫 번째 컴포넌트 내용

var cmp1 = {

    template: '<div>첫 번째 지역 컴포넌트 : {{ cmp1Data }}</div>',

    data: function() {

        return {

        cmp1Data : 100

        }

    }

};

// 두 번째 컴포넌트 내용

var cmp2 = {

    template: '<div>두 번째 지역 컴포넌트 : {{ cmp2Data }}</div>',

    data: function() {

        return {

        cmp2Data : cmp1.data.cmp1Data

        }

    }

};

new Vue({

    el: '#app',

    // 지역 컴포넌트 등록

    components: {

        'my-component1': cmp1,

        'my-component2': cmp2

    }

});

 

2개의 지역 컴포넌트를 등록하고, 한 컴포넌트에서 다른 컴포넌트의 값을 참조하는 코드입니다.

my-component2 컴포넌트 내용에서 {{ cmp2Data }} my-component1 컴포넌트의 data.cmp1Data를 참조하고있습니다. 일반 Javascript 를 생각해보면 해당 컴포넌트 영역에 "100"이 출력 되야 합니다.

하지만 코드를 실행해보면 데이터가 출력되지 않습니다.

 

위 처럼 출력되는 이유는 같은 레벨에 있는 컴포넌트끼리는 값을 참조할 수 없기 때문입니다

 

 

 

2. 상위 하위 컴포넌트 관계

 

위 내용처럼 Vue에서는 자체적으로 정의한 컴포넌트 데이터 전달 방법을 따라야 합니다. 가장 기본적인 방법은 상위(부모) -> 하위(자식) 컴포넌트 간의 데이터 전달 방법입니다.

3장에서 설명한 전역 컴포넌트와 지역 컴포넌트 내용처럼 인스턴스에 컴포넌트를 등록하면 인스턴스는 상위 컴포넌트, components 속성에 등록한 컴포넌트는 하위 컴포넌트가 됩니다.

상위에서 하위로는 props라는 속성을 사용하여 데이터를 전달할 수 있고, 하위에서 상위로는 $emit을 사용하여 이벤트를 발생시킬 수 있습니다.

Vue에서는 이렇게 미리 정의해 놓은 데이터 전달 방식에 따라 일관된 구조로 애플리케이션을 작성하게 됩니다. 그러므로 개발자 개개인의 스타일대로 구성되지 않고, 애플리케이션이 모두 동일한 데이터 흐름을 갖습니다.

 

 

3. 상위에서 하위 컴포넌트로 데이터 전달하기

 

상위에 있는 데이터를 하위에서 사용하기 위해서 props라는 속성을 이용한다 설명했습니다. props 속성은 하위 컴포넌트에서 사용합니다.

*props의 속성이름은 꼭 소문자로 입력해야합니다.

1

2

3

Vue.component('child-component', {

    props: ['속성이름']

});

 

하위 컴포넌트에서 등록한 props 속성을 Vue component Tag에서 v-bind라는 속성으로 상위 컴포넌트의 data 속성명을 입력합니다.

1

<child-component v-bind:속성이름="상위컴포넌트 data 속성명"></child-component>

 

앞서 보았던 같은 레벨의 컴포넌트 끼리 data 속성을 공유할 수 없었던 예제로 하위 컴포넌트로 등록후 props를 속성을 사용해보겠습니다.

1

2

3

4

<div id="app">

    <my-component1 v-bind:propsdata="parentData"></my-component1>

    <my-component2></my-component2>

</div>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

var cmp1 = {

    template: '<div>첫 번째 지역 컴포넌트 : {{ cmp1Data }}, 부모 데이터 : {{ propsdata }}</div>',

    data: function() {

        return {

        cmp1Data : 'cmp1'

        }

    },

    props: ['propsdata']

};

     

var cmp2 = {

    template: '<div>두 번째 지역 컴포넌트 : {{ cmp2Data }}, 부모 데이터 : {{ parentData }}</div>',

    data: function() {

        return {

        cmp2Data : 'cmp2'

        }

    }

};

new Vue({

    el: '#app',

    components: {

        'my-component1': cmp1,

        'my-component2': cmp2

    },

    data: {

        parentData: 'new Vue()'

    }

});

 

이렇게 상위 인스턴스의 parentData를 하위 컴포넌트에서 props 속성으로 사용할 수 있습니다.

 

 

4. 하위에서 상위 컴포넌트로 이벤트 전달하기

 

앞서 설명한 내용처럼 하위 컴포넌트는 상위 컴포넌트로 이벤트 발생하여 상위 컴포넌트의 method를 호출할 수 있습니다.

이벤트 발생과 수신은 $emit v-on 속성을 사용합니다.

1

this.$emit('이벤트명');

하위 컴포넌트 method에서 $emit을 사용하여 이벤트를 발생시킵니다.

 

1

<child-component v-on:이벤트명="상위컴포넌트 method"></child-component>

하위 컴포넌트에서 발생시킨 이벤트명으로 상위 컴포넌트 method를 실행합니다.

 

1

2

3

<div id="app">

    <child-component v-on:show-log="printText"></child-component>

</div>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

Vue.component('child-component', {

    template: '<button v-on:click="showLog">show</button>',

    methods: {

        showLog: function() {

        this.$emit('show-log');

        }

    }

});

new Vue({

    el: '#app',

    data: {

        message: 'Hello Vue! passed from Parent Component'

    },

    methods: {

        printText: function() {

        console.log("message : " + this.message);

        }

    }

});

child-component에서 template에 있는 v-on속성과 click이벤트를 연결하였습니다. click 이벤트는 child-component showLog라는 method를 실행합니다.

Vue Tag 속성에는 v-on에 연결된 show-log 이벤트를 부모 인스턴스의 printText 메소드를 호출하게 됩니다.

show 버튼을 클릭하면 Vue 인스턴스에 정의된 methods 속성에 printText function 을 실행하게되고 message를 출력하게 됩니다.

 

 

5. 관계 없는 컴포넌트 간 통신 - 이벤트 버스

 

앞서 설명된 내용을 종합해보면 컴포넌트 간의 통신은 상하위 관계가 없으면 통신이 불가능 한 구조로 설명되었습니다.

하지만 서로 다른 컴포넌트 간의 통신이 불가능한 것은 아닙니다

하위 컴포넌트 D에서 A로의 통신을 하기 위해선 위 그림처럼 [상위 컴포넌트 B > 최상위 컴포넌트 > 상위 컴포넌트 A ] 와 같은 경로로 할 수는 있습니다.

하지만 특정 컴포넌트끼리의 관계가 없지만 서로 데이터를 주고받거나 서로의 기능을 호출하기 위해선 위 구조로는 필요없는 상위 컴포넌트가 필요합니다

이런 불편함을 해소할 수 있는 방법이 이벤트 버스 입니다. 위 그림처럼 특정 컴포넌트끼리 통신이 가능하게 해주는 이벤트 버스에 대해서 알아보겠습니다.

1

var eventBus = new Vue();

이벤트 버스를 위한 Vue 인스턴스를 생성해줍니다. 이 인스턴스를 이용해서 컴포넌트간 통신 매개체로쓸 수 있습니다.

 

1

2

3

4

5

methods: {

    메소드명function() {

        eventBus.$emit('이벤트명', 데이터, ...);

    }

}

하나의 컴포넌트에서 eventBus 인스턴스를 이용해 $emit을 사용합니다. 작성된 이벤트명에 대한 이벤트를 발생하고 데이터를 전달할 수도 있습니다

 

1

2

3

4

5

6

7

methods: {

    메소드명2: function() {

        eventBus.$on('이벤트명', function(value, ...){

            ...

        });

    }

}

eventBus.$on을 이용하여 이벤트명에 대한 이벤트 발생을 감지합니다. 전달된 데이터를 function에서 사용할 수 있습니다.

 

1

2

3

4

<div id="app">

    <child-component1></child-component1>

    <child-component2></child-component2>

</div>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

var eventBus = new Vue();

 

Vue.component('child-component1', {

    template: '<div>하위 컴포넌트1 영역입니다.<button v-on:click="showLog">show</button></div>',

    methods: {

        showLog: function() {

        eventBus.$emit('triggerEventBus', 100);

        }

    }

});

 

Vue.component('child-component2', {

    template: '<div>하위 컴포넌트2 영역입니다. 전달받은 값 : {{ number }}</div>',

    created: function() {

        var self = this;

        eventBus.$on('triggerEventBus', function(value){

        self.number += value;

        });

    },

    data: function() {

        return {

        number : 0

        }

    }

});

 

var app = new Vue({

    el: '#app'

});

 

 

하위 컴포넌트 1에서 하위 컴포넌트 2 created 에 작성된 function을 통해 data.str의 값을 조작할 수 있습니다.

이렇게 서로 상하관계가 아닌 컴포넌트끼리 통신을 가능하게 해주는 것을 Vue에서는 이벤트 버스라 부릅니다. 이런 방식은 프로그래밍 패러다임 Event-driven Programming이나 Event-driven Architecture에서 보았을 수 있습니다. 해당내용에 대해서는 이번장 설명 상단에 링크를 참조하시길 바랍니다.

 

 

 

Conclusions

 

Vue의 컴포넌트 간의 통신에 대해 알아보았습니다. Vue에서 지향하고있는 단방향 데이터 흐름이 적합한곳에서는 상하관계로 완전히 분리된 컴포넌트간의 통신은 이벤트 버스를 적절히 사용하면 Vue의 컴포넌트를 완벽하게 사용할 수 있겠습니다.

다음장에서는 Front-end Framework 의 발전에 원동력인 SPA를 가능하게 해주는 Vue 라우터와 HTTP 통신에 대해 설명하도록 하겠습니다.

 

 

References

Icon

https://kr.vuejs.org/v2/guide/components.html

Related Information

Icon

Event-driven Architectrue - http://www.2e.co.kr/hp/pages/share/ShareView.php?modsrl=5913&docsrl=181888&datatype=sms

Event-driven Programming - https://en.wikipedia.org/wiki/Event-driven_programming

 

출처: <http://wiki.sys4u.co.kr/pages/viewpage.action?pageId=8553499>

 

Posted by 철냄비짱
,

Introduction

Icon

Vue로 화면을 개발하기 위해 필수적으로 생성해야 하는 기본 단위는 인스턴스(Instance)입니다.

2장에서 'Hello Vue.js!' 가 출력될 수 있었던 것은 인스턴스가 생성되었기 때문입니다. 그리고 1장에서 Vue의 특징 중 하나를 컴포넌트(Component)기반 이라고 설명하였습니다.

컴포넌트란 화면을 블록처럼 조합하여 화면을 구성할 수 있도록 하는 단위입니다.

 

이 글에서는 인스턴스와 컴포넌트에 대해서 설명하겠습니다.

Prerequisite

Icon

생성자 - https://ko.wikipedia.org/wiki/%EC%83%9D%EC%84%B1%EC%9E%90

인스턴스 - https://ko.wikipedia.org/wiki/%EC%9D%B8%EC%8A%A4%ED%84%B4%EC%8A%A4

컴포넌트 - https://en.wikipedia.org/wiki/Component

라이프 사이클 - https://en.wikipedia.org/wiki/Program_lifecycle_phase

 

 

1. 인스턴스 생성

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

<html>

  <head>

    <title>Vue Sample</title>

  </head>

  <body>

    <div id="app">

      {{ message }}

    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>

    <script>

      new Vue({

        el: '#app',

        data: {

          message: 'Hello Vue.js!'

        }

      });

    </script>

  </body>

</html>

앞장에서 다루었던 'Hello Vue.js!' 예제 입니다.

인스턴스를 생성하기 위해선 new Vue 라는 생성자를 호출해야 합니다. 생성자란 객체를 새로 생성할 때 자주 사용하는 옵션과 기능들을 미리 특정 객체에 저장해 놓고, 새로운 객체를 생성할 때 기존에 포함된 기능과 더불어 기존 기능을 쉽게 확장하여 사용하는 기법입니다

위 예제에는 생성자의 속성에 el, data와 같이 2개만 사용되었지만, template, methods, created 등 여러 가지 속성이 있습니다. 나머지 속성들은 뒷장에서 각각 설명하겠습니다.

 

 

2. 인스턴스의 유효 범위

 

Vue 인스턴스는 생성 후 HTML의 범위 내에서만 옵션 속성들이 적용됩니다. 이를 인스턴스의 유효 범위라 합니다. 컴포넌트 설명 부분에서 지역 컴포넌트와 전역 컴포넌트의 차이점을 이해하기 위해서도 꼭 알아야 하는 개념이며, 인스턴스의 유효 범위는 el 속성에 의해 정해집니다.

인스턴스가 생성된 후 화면에 적용되는 순서는 아래와 같습니다.

      1. Vue 라이브러리 로딩
      2. 인스턴스 객체 생성
      3. 특정 화면 element에 인스턴스를 연결
      4. 인스턴스의 내용이 element에 적용
      5. 적용된 화면이 사용자에게 노출

만약 'Hello Vue.js!' 예제를 아래처럼 수정한다면 어떻게 될까요

1

2

3

4

<div id="app">

 

</div>

{{ message }}

 

인스턴스 유효 범위를 벗어났기 때문에 message는 출력되지 않습니다.

 

 

 

3. 인스턴스 라이프 사이클

 

앞에 있는 인스턴스 생성 설명 부분에서 인스턴스의 속성 중 created라는 속성이 있습니다. 이처럼 Vue 인스턴스는 인스턴스 생성 중 인스턴스의 상태에 따라 호출할 수 있는 속성들인 라이프 사이클 속성들이 있습니다.

라이프 사이클과 해당 속성의 종류를 알아보겠습니다.

 

단계

설명

beforeCreate 

인스턴스가 생성되고 최초로 실행되는 단계. 이 단계에서는 data 속성과 methods 속성이 아직 인스턴스에 정의되어 잇지 않고, 화면 요소에도 접근할 수 없습니다.

created 

data, methods 속성의 정의된 단계. this.data 와 같이 사용할 수 있고 methods를 사용하여 로직을 실행할 수 있습니다. 하지만 아직 화면요소가 적용되기 전이기 때문에 template 속성에 정의된 요소에는 접근할 수 없습니다. 

그리고 data, methods 속성에 접근 할 수 있는 첫 단계이기 때문에 서버에 데이터를 요청하여 받아오는 로직을 수행하기 좋습니다. 서버에 데이터를 요청하는 방법은 이후 장에서 설명되겠습니다.

beforeMount 

template 속성에 지정한 마크업 속성을 render() 함수로 변환한 후 el 속성에 지정한 화면 요소에 인스턴스를 연결하기 전에 호출되는 단계. 

mounted 

 el 속성에서 지정한 화면 요소에 인스턴스가 연결되고 호출되는 단계. template 속성에 정의된 요소에 접근할 수 있어 화면 요소를 제어하는 로직을 수행하기 좋은 단계입니다.

beforeUpdate 

Vue의 특징 중 반응성(Reactivity)이 있습니다. 반응성이란 코드로 인한 데이터의 변화에 따라 화면이 즉각 반응하여 갱신되는 것을 의미합니다. 관찰되고 있는 데이터가 변화되어 화면으로 그려지기 직전에 호출되는 단계입니다. 

변경 예정된 데이터의 값에 대한 로직을 수행하기 좋은 단계입니다. 주의할 점은 이 단계에서 값을 변경하는 로직을 넣더라도 화면이 반응하지 않습니다.

update 

데이터가 변경된 후 화면에 반영된 후 실행되는 단계. 데이터 변경 후 화면 요소에 대한 제어 로직을 추가하기 좋습니다. 

beforeDestroy 

Vue 인스턴스가 소멸하기 직전에 단계. 아직 인스턴스에 접근할 수 있기 때문에 Vue 인스턴스의 데이터를 삭제하기 좋은 단계입니다.

destroyed 

Vue 인스턴스가 소멸하고 나서 호출되는 단계. 인스턴스에 정의한 모든 속성이 제거되고 하위로 선언한 인스턴스까지 모두 소멸합니다.

 

 

'Hello Vue.js!' 예제에서 라이프 사이클 속성 몇 가지를 추가해 보았습니다.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

<html>

  <head>

    <title>Vue Instance Lifecycle</title>

  </head>

  <body>

    <div id="app">

      {{ message }}

    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>

    <script>

      new Vue({

        el: '#app',

        data: {

          message: 'Hello Vue.js!'

        },

        beforeCreate: function() {

          console.log("beforeCreate");

        },

        created: function() {

          console.log("created");

        },

        mounted: function() {

          console.log("mounted");

        },

        updated: function() {

          console.log("updated");

        }

      });

    </script>

  </body>

</html>

 

각 로그를 확인해보면 아래와 같습니다.

 

 

beforeCreate, created, mounted가 출력되었지만, updated 속성의 function은 호출되지 않았습니다. 인스턴스의 data 값이 변경된 적이 없기 때문에 실행되지 않았습니다. data 속성값을 변경해보겠습니다.

 

1

2

3

4

mounted: function() {

  console.log("mounted");

  this.message = 'Hello Vue!';

}

 

화면요소가 연결된 후 호출되는 단계인 mounted 에서 message 값을 수정해 보았습니다.

 

 

mounted 단계에서 message 값을 수정되었기 때문에 데이터 수정에 의한 반응으로 화면의 값이 바뀌고 updated 가 실행됨을 확인할 수 있습니다.

 

위와 같이 Vue 인스턴스의 라이프 사이클 단계에 따라 적절한 처리를 이용하면 화면 개발 시 유용하게 처리할 수 있습니다.

 

 

4. 컴포넌트 등록

 

컴포넌트 등록의 방법은 두 가지가 있습니다. 전역 컴포넌트, 지역 컴포넌트 두 가지로 용도에 따라 사용할 수 있습니다.

지역(Local) 컴포넌트는 정해진 특정 구역에서만 사용할 수 있는 컴포넌트이고, 전역(Global) 컴포넌트는 모든 인스턴스에서 공통으로 사용할 수 있는 컴포넌트입니다.

 

전역 컴포넌트 등록

1

2

3

Vue.component('컴포넌트 명', {

  //컴포넌트 속성

});

 

Vue 라이브러리를 로딩하고 나면 Vue라는 전역 변수가 생성됩니다. 해당 변수에 전역 컴포넌트를 등록 할 수 있습니다.

모든 Vue 인스턴스에서는 해당 컴포넌트에 접근하여 사용할 수 있습니다.

예제를 살펴보겠습니다.

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

<html>

  <head>

    <title>Vue Component Registration</title>

  </head>

  <body>

    <div id="app">

      <button>컴포넌트 등록</button>

      <my-component></my-component>

    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>

    <script>

      Vue.component('my-component', {

        template: '<div>전역 컴포넌트가 등록되었습니다!</div>'

      });

      new Vue({

        el: '#app'

      });

    </script>

  </body>

</html>

 

 

등록한 my-component가 등록되었고 template이라는 속성을 가지고 있습니다.

(template에 대한 자세한 설명은 6장에서 설명되겠습니다)

id app인 요소에 my-component를 사용하도록 선언하였고 전역에 등록되어있는 my-component template이 사용되었습니다.

크롬 브라우저에서 해당 화면에서 마우스 우클릭 후 소스 보기를 하면 아래와 같습니다.

 

 

하지만 브라우저에서 요소검사를 하면 아래와 같습니다.

 

 

소스 상에서는 <my-component></my-component> 으로 확인되지만, 동적으로 변한 최종화면에서는 <div>전역 컴포넌트가 등록되었습니다!</div> 로 확인됩니다.

 

지역 컴포넌트 등록

1

2

3

4

5

new Vue({

  components: {

    '컴포넌트 명': 컴포넌트 내용

  }

});

 

전역 컴포넌트와 마찬가지로 컴포넌트 명은 HTML에 작성할 사용자 정의 태그를 의미하고 컴포넌트 내용은 해당 컴포넌트의 속성을 정의합니다.

예제를 살펴보겠습니다.

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

<html>

  <head>

    <title>Vue Component Registration</title>

  </head>

  <body>

    <div id="app">

      <button>컴포넌트 등록</button>

      <my-local-component></my-local-component>

    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>

    <script>

      var cmp = {

        // 컴포넌트 내용

        template: '<div>지역 컴포넌트가 등록되었습니다!</div>'

      };

      new Vue({

        el: '#app',

        components: {

          'my-local-component': cmp

        }

      });

    </script>

  </body>

</html>

 

 

이렇게 본다면 전역 컴포넌트와 지역 컴포넌트가 사용방법만 다를 뿐 어떤 차이가 있는지 잘 와닿지 않습니다. 다른 예제로 살펴보겠습니다.

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

<html>

  <head>

    <title>Vue Local and Global Components</title>

  </head>

  <body>

    <div id="app">

      <h3>첫 번째 인스턴스 영역</h3>

      <my-global-component></my-global-component>

      <my-local-component></my-local-component>

    </div>

    <hr>

    <div id="app2">

      <h3>두 번째 인스턴스 영역</h3>

      <my-global-component></my-global-component>

      <my-local-component></my-local-component>

    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>

    <script>

      // 전역 컴포넌트 등록

      Vue.component('my-global-component', {

        template: '<div>전역 컴포넌트 입니다.</div>'

      });

      // 지역 컴포넌트 내용

      var cmp = {

        template: '<div>지역 컴포넌트 입니다.</div>'

      };

      new Vue({

        el: '#app',

        // 지역 컴포넌트 등록

        components: {

          'my-local-component': cmp

        }

      });

      // 두 번째 인스턴스

      new Vue({

        el: '#app2'

      });

    </script>

  </body>

</html>

 

이번에는 인스턴스를 2개를 생성했습니다.

app, app2 두 인스턴스 모두 my-global-component, my-local-component를 인스턴스 유효 범위에서 사용하려 하고 있습니다.

하지만 app에서는 components에서 cmp를 등록하였고 app2에서는 등록하지 않았습니다. 모두 예상하는 대로 결과는 아래와 같습니다.

 

 

지역 컴포넌트는 인스턴스 속성의 components에 등록하지 않으면 사용할 수 없지만, 전역 컴포넌트는 모든 인스턴스에서 사용할 수 있습니다.

 

 

Conclusions

 

Vue의 인스턴스와 컴포넌트에 대해서 알아보았습니다.

인스턴스는 라이프 사이클을 유용하게 써야 하며, 컴포넌트는 전역, 지역 컴포넌트를 잘 구분하여 작성한다면 공통된 기능의 분리와 각각 업무나 기능별 컴포넌트를 분리하여 사용할 수 있겠습니다.

다음 장에서는 컴포넌트 간의 통신 관계에 대해서 알아보겠습니다.

 

 

References

Icon

https://kr.vuejs.org/v2/guide/

 

 

 

 

출처: <http://wiki.sys4u.co.kr/pages/viewpage.action?pageId=8553372>

 

Posted by 철냄비짱
,

Introduction

Icon

Vue.js 의 초기 개발환경은 그다지 어려운 설정이 없습니다.

Angular 상위 버전(2 이상)에서는 Node.js 가 필수이지만 Vue.js는 일반 Javascript 라이브러리처럼 사용할 수 있고, Node.js로 프로젝트를 구성할 수도 있습니다.

간단한 개발 프로젝트에서는 텍스트 에디터와 대부분 사용하는 브라우저 Chrome에서 개발자 도구 설치만 하면 개발 할 수 있습니다.

 

Prerequisite

Icon

Text Editor - Notepad, Atom, Sublime Text, VSCode ...

Browser - Chrome

 

 

1. Hello Vue.js!

 

모든 프로그래밍 언어나 프레임워크에서 등장하는 'Hello Vue.js!' 를 출력하는 예제를 만들어보겠습니다.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

<html>

  <head>

    <title>Vue Sample</title>

  </head>

  <body>

    <div id="app">

      {{ message }}

    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>

    <script>

      new Vue({

        el: '#app',

        data: {

          message: 'Hello Vue.js!'

        }

      });

    </script>

  </body>

</html>

Javascript의 기초지식이 있고 jQuery 정도 사용해 보았다면 해당 코드는 해석하기 쉽습니다.

new Vue 구문에서 무언가 인스턴스를 생성하고 el : '#app' 에서 element ID app이며, 데이터로는 message라는 key 'Hellow Vue.js!' 라는 값을 가지고 있는 것 같습니다.

그 위에는 app이라는 ID를 가진 div가 있고 그 태그 안에 {{ message }} 와 같이 작성되어있습니다.

index.html 파일명으로 해당 소스를 저장 후 Chrome Browser 에서 실행해 보겠습니다.

 

결과는 예상대로 Hello Vue.js!가 출력되었습니다.

하지만 콘솔을 확인해 보면 Vue 확장도구를 다운받으라는 메시지와 개발자 모드에서 Vue를 실행하고있으니 상용화 모드로 전환? 하라는 메시지가 있습니다.

위 메시지가 나오지 않도록 아래 장에서 Vue 개발자 도구를 설치해 보겠습니다.

 

 

2. Vue 개발자 도구 설치 및 사용방법

Chrome 웹 스토어 에서 vue를 검색합니다.

해당 확장프로그램을 설치하면 위 이미지 아이콘으로 확장프로그램을 실행할 수 있습니다.

위에서 사용한 Hellow Vue.js! 예제에서 확장프로그램을 실행해봅니다.

Vue.js를 사용하고 있지만 찾을 수 없다고 하네요. 이 이유는 해당 예제는 서버에서 띄운 것이 아니라 파일 시스템에서 접근하여 브라우저로 실행했기 때문입니다.

브라우저 주소창에 http:// file:/// 구분할 수 있습니다.

확장 프로그램 관리에서 파일 URL에 대한 액세스 허용을 허용으로 상태변경 합니다.

 

 

3. Vue 개발자 도구 사용 방법

 

2장 까지 잘 따라오셨다면 이제 Vue 확장 프로그램을 실행할 수 있습니다.

<Root> 는 최상위 컴포넌트를 나타내며 클릭 하게되면 그 아래로 존재하는 속성들을 확인할 수 있습니다.

그 이외에 'Vuex', 'Events', 'Refresh' 탭을 사용하여 각 내용들을 확인할 수 있습니다.

 

아직 컴포넌트의 내용을 다루진 않았지만 다른 코드를 살펴보겠습니다.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

<html>

  <head>

    <title>Vue Component Scope</title>

  </head>

  <body>

    <div id="app">

      <my-component1></my-component1>

      <my-component2></my-component2>

    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>

    <script>

      // 첫 번째 컴포넌트 내용

      var cmp1 = {

        template: '<div>첫 번째 지역 컴포넌트 : {{ cmp1Data }}</div>',

        data: function() {

          return {

            cmp1Data : 100

          }

        }

      };

      // 두 번째 컴포넌트 내용

      var cmp2 = {

        template: '<div>두 번째 지역 컴포넌트 : {{ cmp2Data }}</div>',

        data: function() {

          return {

            cmp2Data : cmp1.data.cmp1Data

          }

        }

      };

      new Vue({

        el: '#app',

        // 지역 컴포넌트 등록

        components: {

          'my-component1': cmp1,

          'my-component2': cmp2

        }

      });

    </script>

  </body>

</html>

 

컴포넌트를 선언해 사용하면 위와같이 컴포넌트 목록과 그 안의 속성을 볼 수 있습니다.

 

 

Conclusions

이제 Vue를 개발하기 위한 기본 환경을 갖추었습니다.

다음 장에서는 Vue를 이용한 화면을 개발하기 위한 필수 단위 인스턴스 & 컴포넌트에 대해서 알아보겠습니다.

 

 

 

 

 

출처: <http://wiki.sys4u.co.kr/pages/viewpage.action?pageId=8553261>

 

Posted by 철냄비짱
,

Vue.js 란?

Front-End/Vue.js 2019. 12. 30. 08:07

 

 

Introduction

Icon

Vue.js 는 웹 페이지 화면을 개발하기 위한 Front-end Framework 입니다.

기존 웹 개발자뿐만 아니라 HTML, CSS, Javascript 기초만 아는 웹 개발 입문자 및 컴퓨터 비전공자들도 배우기 쉽게 만들어졌습니다.

뷰는 화면단 라이브러리이자 프레임워크라고도 볼 수 있습니다. 어떤 의미인지 다음 그림으로 알아보겠습니다.

(점진적인 Framework로서의 Vue의 의미)

 

위 그림은 Vue의 창시자인 에반 유가 2017 Vue.js 컨퍼런스에서 발표한 내용 중에 있는 그림입니다. Vue 코어 라이브러리는 화면단 데이터 표현에 관한 기능들을 중점적으로 지원하지만 프레임워크의 기능인 라우터, 상태 관리, 테스팅 등을 쉽게 결합할 수 있는 형태로도 제공됩니다. , 라이브러리 역할뿐만 아니라 프레임워크 역할도 할 수 있다는 의미입니다. 그래서 Vue를 점진적인 프레임워크라고 표현합니다.

Prerequisite

Icon

      • Front-end
      • Framework
      • TypeScript
      • ES6, ES7

 

 

1. Vue 의 장점

 

빠르게 변화하는 Front-end 시장에서 Vue는 해결사 같은 존재입니다

 

첫째, 배우기가 쉽습니다.

HTML, CSS, Javascript 의 기초만 아는 입문자라도 하루 안에 배울 수 있고, 익숙한 실무 개발자라면 몇 시간 이내에 배울 수 있습니다

가장 간단한 예를 보겠습니다.

html

1

2

3

<div id="app">

  {{ message }}

</div>

cdn

1

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>

javascript

1

2

3

4

5

6

new Vue({

  el: '#app',

  data: {

    message: 'Hello Vue.js!'

  }

});

view

1

Hello Vue.js!

Icon

Vue가 여타 Front-end Framework보다 배우기 쉬운 이유

 

Angular1 Framework로서 완전한 기능을 제공하는 MVC 구조로 출발하여 컴포넌트 기반의 Angular2로 진화하였습니다. 이 과정에서 TypeScript, ES6 등 기타 어느 Framework보다 더 많은 학습이 필요하게 됩니다. React 또한 ES6, JSX라는 장벽이 존재하며, 신기술이 끝없이 등장하는 상황에서 웹 개발자에게 주어지는 짐은 점점 더 무거워집니다. 따라서 쉽게 배울 수 있는 Vue의 등장으로 소규모 혹은 신규 프로젝트가 진행되는 곳에서는 Vue의 사용이 많아지고 있습니다.

 

둘째, React Angular에 비해 성능이 우수하고 빠릅니다. 

Vue 제작팀에서 React Angular를 가지고 같은 테스트 케이스에서 성능을 비교한 결과 뷰가 가장 빠른 것으로 나타났습니다.

 

셋째, React Angular의 장점을 모두 갖고있습니다.

Vue는 구글에서 일하던 직원이 Angular를 더 가볍게 쓰고 싶어서 만든 Framework입니다. Angular의 데이터 바인딩 특성과 React의 가상 돔 기반 랜더링 특징을 모두 가지고 있습니다.

 

이처럼 다른 Front-end Framework 에 비해 성능이 우수할 뿐만 아니라 가볍고 빠르며, 배우기 쉽다는 점이 앞으로 더 많은 개발자들에 사랑을 받을 것 이라 전망됩니다. 사용자가 많아지면 생성되는 거대한 커뮤니티는 훌륭한 Framework로 이어지는 결과를 볼 수 있습니다

 

 

 

2. Vue 의 특징

 

1. UI 화면단 라이브러리

Vue UI  화면 개발 방법 중 하나인 MVVM 패턴의 뷰 모델(ViewModel)에 해당하는 화면단 라이브러리입니다.

 

(MVVM 구조에서의 Vue.js의 위치)

 

MVVM 패턴이란 화면을 모델 - - 뷰모델 로 구조화하여 개발하는 방식을 말합니다. 이러한 방식으로 개발하는 이유는 화면의 요소들을 제어하는 코드와 데이터 제어 로직을 분리하여 코드를 더 직관적이고 유지보수가 편하게 하기 위함입니다.

 

용어

설명

뷰(View)

사용자에게 보이는 화면

돔(DOM) *Document Object Model

HTML 문서에 들어가는 요소(태그, 클래스, 속성 등)의 정보를 담고 있는 데이터 트리

돔 리스너(DOM Listener)

돔의 변경 내역에 대해 즉각적으로 반응하여 특정 로직을 수행하는 장치

모델(Model)

데이터를 담는 용기, 보통은 서버에서 가져온 데이터를 자바스크립트 객체 형태로 저장

데이터 바인딩(Data Binding)

뷰(View)에 표시되는 내용과 모델의 데이터를 동기화

뷰 모델(ViewModel)

뷰와 모델의 중간 영역, 돔 리스너와 데이터 바인딩을 제공하는 영역

 

 

Icon

위키피디아에서는 MVVM 패턴을 아래와 같이 정의 합니다.

 

"마크업 언어나 GUI 코드를 비즈니스 로직 또는 백엔드 로직과 분리하여 개발하는 소프트웨어 디자인 패턴"

 

이말을 바꿔 해석해보면 "화면 앞단(Front-end)의 화면 동작과 관련된 로직과 화면 뒷단(Back-end)의 데이터베이스 처리 로직을 분리하여 더 깔끔하게 코드를 구성한다." 라고 할 수 있겠습니다.

웹 초창기에는 이런 Front,Back -end 라는 구분이 없었지만 화면요소에 대한 코드와 데이터베이스에서의 데이터에 대한 조작 등 한파일에 HTML, CSS, Javascript, Java 등 여러 코드가 섞이며 가동성이 현저히 떨어지기 때문에 이러한 문제점을 해결하기 위한 방법으로 MVVM 패턴이 사용되기 시작했습니다. Vue 뿐만아니라 React에서도 해당 패턴을 사용하고있습니다.

 

2. 컴포넌트 기반 프레임워크

 

Vue가 가지는 또 하나의 큰 특징은 컴포넌트(Component)기반 프레임워크라는 점입니다.

컴포넌트란 마치 레고 블럭과 같습니다. 레고 블럭을 잘 조합하면 여러가지 원하는 모형을 만들 수 있고 필요할 때 마다 만들어 놓은 레고 블럭들 끼리 조합 할 수 있습니다.

이와 같이 각 영역을 구분지어 관계를 형성해 놓으면 코드를 재사용하기 쉽게 됩니다. 따라서 프레임워크 자체에서 컴포넌트 방식을 추구하면 모두가 정해진 방식대로 컴포넌트를 활용할 수 있으므로 빠르게 개발할 수 있을 뿐만 아니라 남이 작성한 코드를 볼 때도 수월합니다.

 

 

 

3. Conclusions

 

Vue란 무엇인가에 대해 알아보았습니다.

Vue의 장점, 특징을 알아본 결과 개발자의 의도대로 Front-end Framework 는 매우 필요하지만 진입장벽의 문제로 안그래도 배울것이 많은 개발자들에게 좀더 쉽고 빠르게 사용할 수 있고, 그렇다고 해서 여타 다른 Framework에 뒤쳐지지 않을 Vue 가 과연 거대한 두 산맥(Angular, React)을 상대로 Front-end Framework 시장에서 살아남을 수 있을까요?

다음 장부터 실제 개발환경 구성과 기본예제를 통해 얼마나 강력하고 쉬운지에 대해 직접 체험해 보겠습니다.

 

 

References

Icon

참고서적 - http://book.naver.com/bookdb/book_detail.nhn?bid=13256615

MVVM - https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93viewmodel

Related Information

Icon

JSX - http://blog.sonim1.com/175

MVC, MVP, MVVM 비교 - https://magi82.github.io/android-mvc-mvp-mvvm/

 

출처: <http://wiki.sys4u.co.kr/pages/viewpage.action?pageId=8552708>

 

Posted by 철냄비짱
,

이름에서 알 수 있듯이 vue-router가 제공하는 네비게이션 가드는 주로 리디렉션하거나 취소하여 네비게이션을 보호하는 데 사용됩니다. 라우트 탐색 프로세스에 연결하는 방법에는 전역, 라우트별 또는 컴포넌트가 있습니다.

Params 또는 쿼리를 변경하면 네비게이션 가드가 실행되지 않습니다. 단순히 $route 객체를 감시하고 그 변화에 반응하십시오. 또는 컴포넌트 가드의 beforeRouteUpdate를 사용하십시오

#전역 가드

router.beforeEach를 사용하여 보호하기 이전에 전역 등록을 할 수 있습니다.

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
  // ...
})

네비게이션이 트리거될 때마다 가드가 작성 순서에 따라 호출되기 전의 모든 경우에 발생합니다. 가드는 비동기식으로 실행 될 수 있으며 네비게이션은 모든 훅이 해결되기 전까지 보류 중 으로 간주됩니다.

모든 가드 기능은 세 가지 전달인자를 받습니다.

      • to: 라우트: 대상 Route 객체 로 이동합니다.
      • from: 라우트: 현재 라우트로 오기전 라우트 입니다.
      • next: 함수: 이 함수는 훅을 해결하기 위해 호출 되어야 합니다. 액션은 next에 제공된 전달인자에 달려 있습니다.
        • next(): 파이프라인의 다음 훅으로 이동하십시오. 훅이 없는 경우 네비게이션은 승인됩니다.
        • next(false): 현재 네비게이션을 중단합니다. 브라우저 URL이 변경되면(사용자 또는 뒤로 버튼을 통해 수동으로 변경됨) from경로의 URL로 재설정됩니다.
        • next('/') 또는 next({ path: '/' }): 다른 위치로 리디렉션합니다. 현재 네비게이션이 중단되고 새 네비게이션이 시작됩니다.
        • next(error): (2.4.0 이후 추가) next에 전달된 인자가 Error 의 인스턴스이면 탐색이 중단되고 router.onError()를 이용해 등록 된 콜백에 에러가 전달됩니다.

항상 next 함수를 호출하십시오. 그렇지 않으면 훅이 절대 불러지지 않습니다.

#Global Resolve Guards

2.5.0에서 추가됨

2.5.0 이후로 router.beforeResolve를 사용하여 글로벌 가드를 등록 할 수 있습니다. 이는 router.beforeEach와 유사합니다. 모든 컴포넌트 가드와 비동기 라우트 컴포넌트를 불러온 후 네비게이션 가드를 확인하기 전에 호출된다는 차이가 있습니다

#Global After Hooks

전역 훅을 등록 할 수도 있지만, 가드와 달리 이 훅은 next 함수를 얻지 못하며 네비게이션에 영향을 줄 수 없습니다.

router.afterEach((to, from) => {
  // ...
})

#라우트 별 가드

beforeEnter 가드를 라우트의 설정 객체에 직접 정의 할 수 있습니다.

const router = new VueRouter({
  routes: [
    {
      path:
'/foo',
      component: Foo,
      beforeEnter: (to,
from, next) => {
        // ...
      }
    }
  ]
})

이러한 가드는 전역 이전 가드와 동일한 서명을 가집니다.

#컴포넌트 내부 가드

마지막으로 beforeRouteEnter  beforeRouteLeave를 사용하여 라우트 컴포넌트(라우터 설정으로 전달되는 컴포넌트) 안에 라우트 네비게이션 가드를 직접 정의 할 수 있습니다.

      • beforeRouteEnter
      • beforeRouteUpdate (2.2 버전에 추가)
      • beforeRouteLeave

const Foo = {
  template:
`...`,
 
beforeRouteEnter (to, from, next) {
    // 이 컴포넌트를 렌더링하는 라우트 앞에 호출됩니다.
    // 이 가드가 호출 될 때 아직 생성되지 않았기 때문에
    // `this` 컴포넌트 인스턴스에 접근 할 수 없습니다!
  },
 
beforeRouteLeave (to, from, next) {
    // 이 컴포넌트를 렌더링하는 라우트가 이전으로 네비게이션 될 때 호출됩니다.
    // `this` 컴포넌트 인스턴스에 접근 할 수 있습니다.
  }
}

beforeRouteEnter 가드는 네비게이션이 확인되기 전에 가드가 호출되어서 새로운 엔트리 컴포넌트가 아직 생성되지 않았기 때문에 this에 접근하지 못합니다.

그러나 콜백을 next에 전달하여 인스턴스에 액세스 할 수 있습니다. 네비게이션이 확인되고 컴포넌트 인스턴스가 콜백에 전달인자로 전달 될 때 콜백이 호출됩니다.

beforeRouteEnter (to, from, next) {
 
next(vm => {
    // `vm`을 통한 컴포넌트 인스턴스 접근
  })
}

beforeRouteLeave 안에서 this에 직접 접근 할 수 있습니다. leave 가드는 일반적으로 사용자가 저장하지 않은 편집 내용을 두고 실수로 라우트를 떠나는 것을 방지하는데 사용됩니다. 탐색은 next(false)를 호출하여 취소할 수 있습니다.

#전체 네비게이션 시나리오

      1. 네비게이션이 트리거됨.
      2. 비활성화될 컴포넌트에서 가드를 호출.
      3. 전역 beforeEach 가드 호출.
      4. 재사용되는 컴포넌트에서 beforeRouteUpdate 가드 호출. (2.2 이상)
      5. 라우트 설정에서 beforeEnter 호출.
      6. 비동기 라우트 컴포넌트 해결.
      7. 활성화된 컴포넌트에서 beforeRouteEnter 호출.
      8. 전역 beforeResolve 가드 호출. (2.5이상)
      9. 네비게이션 완료.
      10. 전역 afterEach 훅 호출.
      11. DOM 갱신 트리거 됨.
      12. 인스턴스화 된 인스턴스들의 beforeRouteEnter가드에서 next에 전달 된 콜백을 호출합니다.

 

출처: <https://router.vuejs.org/kr/guide/advanced/navigation-guards.html>

 

 

Posted by 철냄비짱
,

 

주어진 패턴을 가진 라우트를 동일한 컴포넌트에 매핑해야하는 경우가 자주 있습니다. 예를 들어 모든 사용자에 대해 동일한 레이아웃을 가지지만 하지만 다른 사용자 ID로 렌더링되어야하는 User 컴포넌트가 있을 수 있습니다. vue-router에서 우리는 경로에서 동적 세그먼트를 사용하여 다음을 할 수 있습니다.

const User = {
  template:
'<div>User</div>'
}

const router = new VueRouter({
  routes: [
    // 동적 세그먼트는 콜론으로 시작합니다.
    { path:
'/user/:id', component: User }
  ]
})

이제 /user/foo /user/bar 같은 URL은 모두 같은 경로에 매핑됩니다.

동적 세그먼트는 콜론 :으로 표시됩니다. 라우트가 일치하면 동적 세그먼트의 값은 모든 컴포넌트에서 this.$route.params로 표시됩니다. 그러므로 User의 템플릿을 다음과 같이 갱신하여 현재 사용자 ID를 표현할 수 있습니다 :

const User = {
  template:
'<div>User {{ $route.params.id }}</div>'
}

실제 예제는 여기에 있습니다.

동일한 라우트에 여러 동적 세그먼트를 가질 수 있으며, $route.params의 해당 필드에 매핑됩니다.

예:

패턴

일치하는 패스

$route.params

/user/:username

/user/evan

{ username: 'evan' }

/user/:username/post/:post_id

/user/evan/post/123

{ username: 'evan', post_id: '123' }

$route.params 외에도 $route 객체는 $route.query (URL에 쿼리가 있는 경우), $route.hash 등의 유용한 정보를 제공합니다. API 레퍼런스에서 전체 세부 정보를 확인할 수 있습니다.

#Params 변경 사항에 반응하기

매개 변수와 함께 라우트를 사용할 때 주의 해야할 점은 사용자가 /user/foo에서 /user/bar로 이동할 때 동일한 컴포넌트 인스턴스가 재사용된다는 것입니다. 두 라우트 모두 동일한 컴포넌트를 렌더링하므로 이전 인스턴스를 삭제 한 다음 새 인스턴스를 만드는 것보다 효율적입니다. 그러나 이는 또한 컴포넌트의 라이프 사이클 훅이 호출되지 않음을 의미합니다.

동일한 컴포넌트의 params 변경 사항에 반응하려면 $route 객체를 보면됩니다.

const User = {
  template:
'...',
  watch: {
   
'$route' (to, from) {
      // 경로 변경에 반응하여...
    }
  }
}

또는 2.2에서 소개된 beforeRouteUpdate 가드를 사용하십시오.

const User = {
  template:
'...',
 
beforeRouteUpdate (to, from, next) {
    // react to route changes...
    // don't forget to call next()
  }
}

#고급 매칭 패턴

vue-router는 라우트 매칭 엔진으로 path-to-regexp를 사용하기 때문에 선택적 동적 세그먼트, 0개 이상/하나 이상의 요구 사항, 심지어 커스텀 정규식 패턴과 같은 많은 고급 매칭 패턴을 지원합니다. 이 고급 패턴들과 vue-router에서 사용하는 예제에 대한 문서를 확인하십시오.

#매칭 우선순위

동일한 URL이 여러 라우트와 일치하는 경우가 있습니다. 이 경우 일치하는 우선 순위는 라우트 정의의 순서에 따라 결정됩니다. 즉, 경로가 더 먼저 정의 될수록 우선 순위가 높아집니다.

 

출처: <https://router.vuejs.org/kr/guide/essentials/dynamic-matching.html>

 

 

Posted by 철냄비짱
,