ackage-lock.json은 npm을 사용하여package.json 파일을 또는 node_modules 트리를 수정하면 자동으로 생성되는 파일이다. 한마디로 파일이 생성되는 시점의 의존성 트리에 대한 정보를 가지고 있다. 그렇다면 package-lock.json 파일이 꼭 필요한 이유는 무엇인지 아래에서 더 살펴보자. package.json 파일의 의존성 선언에는 version range가 사용되는데, 이는 특정 버전이 아니라 버전의 범위를 의미한다. 예를들어 보자면, npm i express를 실행하게 되면 package.json 파일에는 “^4.16.3”(Caret Ranges)로 버전 범위가 추가된다. 이 package.json 를 기반으로 npm i을 실행하면 현재는 4.16.3 버전이 설치 되지만 새로이express의 마이너 패치가 이루어진 버전이 퍼블리시 되어있다면 동일한package.json파일로 npm i을 실행해도 4.16.4, 이나 4.17.1 같은 다른 버전이 설치될 수 있는 것이다. 간혹 업데이트된 버전이 오류를 발생시키는 경우가 있기 때문에 안정성을 위해package-lock.json은 매우 중요하다.

항상 npm install 로 생성

한 폴더지만 알아두고 생성하는게 좋을 것 같아서 글 공유를 해본다.

저작자표시 비영리 동일조건

'Vue' 카테고리의 다른 글

이벤트 전파와 버블링  (0) 2020.04.08
Vue 이벤트 수식어  (0) 2020.04.08
Vue Router !  (0) 2020.04.06
Vue lifecycle 이란 ?  (0) 2020.04.02
Vue.js 시작하기  (0) 2020.04.02
개발야 기하하자안녕하세요 :) 천천히 공부하면서 글을 쓰는 개발자 갸갸라고 합니다. 잘부탁드립니다 :) 궁금하신점이나 문의사항은 99geometry@gmail.com 으로 주시고 하루에 1개를 올리려는 목적으로 글을 써가고 있습니다. 감사합니다 !

오늘은 뷰 라우팅에 대해 알아볼 것 이다 !

        

  <router-link to="/main"> Main 이동 </router-link> <br />
  <router-link to="/login">Login 이동 </router-link>​
URL 값을 변경하는 태그
    
<router-view></router-view>

 

URL 값에 따라 갱신되는 화면 영역

 

<script src="https://unpkg.com/vue-router@3.0.1/dist/vue-router.js"></script>

라우터 CDN 추가

 

    var Main = {
            template: '<div> Main </div>'
        };
        var Login = {
            template: '<div> Login </div>'
        };

Main, Login 컴포넌트 정의

 

       var routes = [{
            path: '/Main',
            component: Main
        }, {
            path: '/Login',
            component: Login
        }];

 각 URL 에 맞춰 표시 할 컴포넌트 지정

 

        var router = new VueRouter({
            router
        });

Vue 라우터 정의

        var app = new Vue({
            router
        }).$mount('#app');

뷰 인스턴스에 라우터 추가

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title> Vue Router Sample </title>
</head>

<body>
    <div id="app">
        <h1>뷰 라우터 예제</h1>
        <p>
            <router-link to="/main"> Main 이동 </router-link> <br />
            <router-link to="/login">Login 이동 </router-link>
        </p>
        <router-view></router-view>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router@3.0.1/dist/vue-router.js"></script>
    <script>
        var Main = {
            template: '<div> Main </div>'
        };
        var Login = {
            template: '<div> Login </div>'
        };

        var routes = [{
            path: '/Main',
            component: Main
        }, {
            path: '/Login',
            component: Login
        }];

        var router = new VueRouter({
            routes
        });

        var app = new Vue({
            router
        }).$mount('#app');
    </script>
</body>

</html>

결과물이다

Main을 눌렀을 때 

Url 값이 바뀐다

 

Login을 눌렀을 때

라우터 URL의 해시값 # 없애는 방법

var router = new VueRouter ({
	mode: 'history',
    routes
})

로 변경해주면 URL에 #이 없어진다. ( 히스토리 모드 )

 

Vue.js 입문이라는 책을보고 복습 겸 연습을 하고 있다. 

 

저작자표시 비영리 동일조건

'Vue' 카테고리의 다른 글

Vue 이벤트 수식어  (0) 2020.04.08
package-lock.json VS package.json ?  (0) 2020.04.07
Vue lifecycle 이란 ?  (0) 2020.04.02
Vue.js 시작하기  (0) 2020.04.02
Vue 첫 걸음  (0) 2020.04.01
개발야 기하하자안녕하세요 :) 천천히 공부하면서 글을 쓰는 개발자 갸갸라고 합니다. 잘부탁드립니다 :) 궁금하신점이나 문의사항은 99geometry@gmail.com 으로 주시고 하루에 1개를 올리려는 목적으로 글을 써가고 있습니다. 감사합니다 !

Vue.js의 라이프 사이클은 크게 Creation, Mounting, Updating, Destruction 으로 나눌 수 있다.

 

1. Creation : 컴포넌트 초기화 단계

Creation 단계에서 실행되는 훅(hook)들이 라이프사이클 중에서 가장 처음 실행된다. 이 단계는 컴포넌트가 돔에 추가되기 전이다. 서버 렌더링에서도 지원되는 훅이다.

따라서 클라이언트 단과 서버단 렌더링 모두에서 처리해야할일이 있다면 이단계에서 하면된다. 아직 컴포넌트가 돔에 추가되기 전이기 때문에 돔에 접근하거나 this.$el를 사용할 수 없다.

이 단계에서는 beforeCreate 훅과 Created 훅이 있다.

beforeCreate

모든 훅 중에 가장 먼저 실행되는 훅이다. 아직 data와 events(vm.$on, vm.$once, vm.$off, vm.$emit)가 세팅되지 않은 시점이므로 접근하려고 하면 에러를 뿜어낼 것이다.

created

created 훅에서는 이제 data와 events가 활성화되어 접근할 수 있다. 여전히 템플릿과 가상돔은 마운트 및 렌더링되지 않은 상태이다.

 

2. Mounting : 돔(DOM) 삽입 단계

Mounting 단계는 초기 렌더링 직전에 컴포넌트에 직접 접근할 수 있다. 서버렌더링에서는 지원하지 않는다.

초기 랜더링 직전에 돔을 변경하고자 한다면 이 단계를 활용할 수 있다. 그러나 컴포넌트 초기에 세팅되어야할 데이터 페치는 created 단계를 사용하는것이 낫다.

beforeMount

beforeMount 훅은 템플릿과 렌더 함수들이 컴파일된 후에 첫 렌더링이 일어나기 직전에 실행된다. 대부분의 경우에 사용하지 않는 것이 좋다. 그리고 서버사이드 렌더링시에는 호출되지 않는다.

mounted

mounted 훅에서는 컴포넌트, 템플릿, 렌더링된 돔에 접근할 수 있다. 모든 하위 컴포넌트가 마운트된 상태를 보장하지는 않는다. 서버렌더링에서는 호출되지 않는다. mounted 훅에서 유의할 점은, 부모와 자식 관계의 컴포넌트에서 우리가 생각한 순서로 mounted가 발생하지 않는다는 점이다. 즉 부모의 mounted훅이 자식의 mounted훅보다 먼저 실행되지 않는다. 오히려 그 반대이다. 위 그림처럼 Created훅은 부모->자식의 순서로 실행되지만 mounted는 그렇지 않다는 것을 알 수 있다. 다른 식으로 말하면 부모는 mounted훅을 실행하기 전에 자식의 mounted훅이 끝나기를 기다린다. (참고 Vue Parent and Child lifecycle hooks)

3. Updating : Diff 및 재 렌더링 단계

컴포넌트에서 사용되는 반응형 속성들이 변경되거나 어떤 이유로 재 렌더링이 발생되면 실행된다. 디버깅이나 프로파일링 등을 위해 컴포넌트 재 렌더링 시점을 알고 싶을때 사용하면 된다. 조심스럽지만, 꽤 유용하게 활용될 수 있는 단계이다. 서버렌더링에서는 호출되지 않는다.

beforeUpdate

이 훅은 컴포넌트의 데이터가 변하여 업데이트 사이클이 시작될때 실행된다. 정확히는 돔이 재 렌더링되고 패치되기 직전에 실행된다. 재 렌더링 전의 새 상태의 데이터를 얻을 수 있고 더 많은 변경이 가능하다. 이 변경으로 이한 재 렌더링은 트리거되지 않는다.

updated

이 훅은 컴포넌트의 데이터가 변하여 재 렌더링이 일어나 후에 실행된다. 돔이 업데이트 완료된 상태이므로 돔 종속적인 연산을 할 수 있다. 그러나 여기서 상태를 변경하면 무한루프에 빠질 수 있다. 모든 자식 컴포넌트의 재 렌더링 상태를 보장하지는 않는다.

 

4. Destruction : 해체 단계

beforeDestroy

이 훅은 해체(뷰 인스턴스 제거)되기 직전에 호출된다. 컴포넌트는 원래 모습과 모든 기능들을 그대로 가지고 있다. 이벤트 리스너를 제거하거나 reactive subscription을 제거하고자 한다면 이 훅이 제격이다. 서버 렌더링시 호출되지 않는다.

destroyed

이 훅은 해체(뷰 인스턴스 제거)된 후에 호출된다. Vue 인스턴스의 모든 디렉티브가 바인딩 해제 되고 모든 이벤트 리스너가 제거되며 모든 하위 Vue 인스턴스도 삭제된다. 서버 렌더링시 호출되지 않는다.

 

출처: https://medium.com/witinweb/vue-js-%EB%9D%BC%EC%9D%B4%ED%94%84%EC%82%AC%EC%9D%B4%ED%81%B4-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-7780cdd97dd4

vue lifecycle

 

 

저작자표시 비영리 동일조건

'Vue' 카테고리의 다른 글

Vue 이벤트 수식어  (0) 2020.04.08
package-lock.json VS package.json ?  (0) 2020.04.07
Vue Router !  (0) 2020.04.06
Vue.js 시작하기  (0) 2020.04.02
Vue 첫 걸음  (0) 2020.04.01
개발야 기하하자안녕하세요 :) 천천히 공부하면서 글을 쓰는 개발자 갸갸라고 합니다. 잘부탁드립니다 :) 궁금하신점이나 문의사항은 99geometry@gmail.com 으로 주시고 하루에 1개를 올리려는 목적으로 글을 써가고 있습니다. 감사합니다 !

Vue.js 

https://kr.vuejs.org/v2/guide/index.html#%EC%84%A0%EC%96%B8%EC%A0%81-%EB%A0%8C%EB%8D%94%EB%A7%81

 

시작하기 — Vue.js

Vue.js - 프로그레시브 자바스크립트 프레임워크

kr.vuejs.org

여기에 예제를 보고 커스터마이징을 해봤다.

일단 코드는

<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <title>Document</title>
</head>

<body>
    <div id="app-5">
        <p v-if="hidden">{{ message }}</p>
        <button v-on:click="hiddenMessage">클릭</button>
    </div>
</body>
<script>
    var app5 = new Vue({
        el: '#app-5',
        data: {
            hidden: true,
            message: '안녕하세요! Vue.js!'
        },
        methods: {
            hiddenMessage: function() {
                this.hidden = !this.hidden
            }
        }
    })
</script>

</html>

 

이렇게 구현을 해봤다 간단하게 클릭했을때 message문구가 있으면 없얘고 없으면 보여주는 버튼이다

일단 v-if 로 hidden값을 체크한 뒤 true false 값으로 숨김, 보여줌을 판단합니다.

그리고 클릭이라는 버튼에 메서드를 호출하는 이벤트 리스너를 추가한 뒤 핸들링으로 hiddenMessage를 추가한다.

이 방법은 직접적으로 DOM을 건드리지 않고 앱의 상태만을 업데이트한다. 모든 DOM 조작은 Vue에 의해 처리되며 작성한 코드는 기본 로직에만 초점을 맞춘다.

Vue는 또한 양식에 대한 입력과 앱 상태를 양방향으로 바인딩하는 v-model 디렉티브를 제공한다.

 

결과물은

 

처음 화면

클릭했을때 화면

 

이렇게 출력된다.

조금 더 심화과정을 연습해보자 ~!~!

저작자표시 비영리 동일조건

'Vue' 카테고리의 다른 글

Vue 이벤트 수식어  (0) 2020.04.08
package-lock.json VS package.json ?  (0) 2020.04.07
Vue Router !  (0) 2020.04.06
Vue lifecycle 이란 ?  (0) 2020.04.02
Vue 첫 걸음  (0) 2020.04.01
개발야 기하하자안녕하세요 :) 천천히 공부하면서 글을 쓰는 개발자 갸갸라고 합니다. 잘부탁드립니다 :) 궁금하신점이나 문의사항은 99geometry@gmail.com 으로 주시고 하루에 1개를 올리려는 목적으로 글을 써가고 있습니다. 감사합니다 !

+ Recent posts

티스토리툴바