홍준혁

Vue.js-톺아보기 본문

Vue.js

Vue.js-톺아보기

홍준혁 [Hong-JunHyeok] 2020. 9. 11. 12:25

※※이 글은 joshua1988.github.io/vue-camp/vue의 참고하여 작성되었습니다※※

※※이 글은 배운 것을 바로 써가는 형식이므로 틀린 내용이 있을 수 있습니다.※※

학교 동아리 바인드에서 소프트웨어 나르샤 프로젝트를 진행하게 되었다.

나는 웹을 맡기로 했는데 Vue나 React를 사용해서 해보려고 한다. 하지만 React는 지금 하기에는 어려운 느낌이 있는 거 같아서 상대적으로 쉽다는 Vue를 한번 해볼려고 한다. 

 

 

먼저 Vue는 자바스크립트 기반의 라이브러리이기 때문에 자바스크립트의 기초를 알아야 한다. 

-(출처 joshua1988.github.io/vue-camp/js/array.html#% EB% B0% B0% EC%97% B4-%EC% A1% B0% EC% 9E%91% ED%95%98% EA% B8% B0)

 

Array | Cracking Vue.js

배열(Array) 배열(Array)은 객체와 더불어 실제로 웹 애플리케이션을 구현할 때 가장 많이 쓰이는 변수 타입입니다. 배열을 선언하는 방식은 객체와 유사합니다. 여기서 []를 배열 리터럴이라고 하��

joshua1988.github.io

위 사이트에서 자바스크립트를 공부하고 Vue에 입문하는 게 가장 베스트이다.

 

*this개념을 잘 집고 넘어가도록 하자.!!!!

 

이제 Vue 설치법을 알아보도록 하자 

1-npm install vue

2-yarn global add @vue/cli

3-vue init webpack 프로젝트 이름 

이런 식으로 하면 vue에서 몇몇 가지 프로젝트 설정에 관한 질문을 할 건데 default값으로 해도 무방하다.

 

이제 프로젝트가 생성되었으니 cd 프로젝트 이름을 한 다음에 yanr or npm start dev 명령어로 시작한다. 

 

--혹은 스크립트 주소로 Vue를 사용하는 방법이 있다.--

(학습의 용도로 쓴다면 CDN방식을 추천한다.)

 

이 사진은 Vue의 인스턴스 라이프사이클이라는 것인데, 인스턴스 라이프사이클이라는 것은 뷰의 인스턴스가 생성되고 소멸되기까지 거치는 과정을 의미한다.

라이프 사이클을 알아야 하는 이유는 라이프 사이클 훅 때문인데 특정 시점에 원하는 로직을 구현하기 위해 알아야 할 필요가 있다는 것이다. (개념 정도만 알고 넘어가자)

자주 사용되는 라이프 사이클 훅 목록

먼저 뷰 인스턴스를 생성한 다음에 변수를 사용하는 방법을 알아보도록 하자 

<!DOCTYPE html>
<html>
    <head>
        <title>Vue.js Sample</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">{{ message }}</div>
        <script>
            new Vue({
                el: "#app",
                data: {
                    message: "Hello World",
                },
            });
        </script>
    </body>
</html>

 

코드의 설명을 하자면 new Vue()라는 구문으로 인스턴스를 생성한 다음에 el이라는 객체에 #app이라는 값을 넣어주게 되면 app이라는 아이디 값을 가지는 엘리먼트를 의미하게 된다. 다음 data라는 객체에 message라는 속성을 넣어주었는데 message의 내용을 Hello World라고 지정한 다음에 div태그의 app이라는 이름의 태그 안에 {{ message }}라는 값을 넣어주게 되면 Vue인스턴스 안에 있는 값인 message가 들어가게 된다. 

*설명이 정확하지 않을 수 있습니다.

이것이 Vue인스턴스에서 data를 사용하는 방법이다.

 

그다음 methods라는 것을 알아볼 것인데 이것은 메서드를 담는 곳이다. 

<!DOCTYPE html>
<html>
    <head>
        <title>Vue.js Sample</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">{{ nextYear() }}</div>
        <script>
            new Vue({
                el: "#app",
                data: {
                    person: {
                        name: "홍준혁",
                        age: 17,
                    },
                },
                methods: {
                    nextYear: function () {
                        return (
                            this.person.name +
                            "은 내년에 " +
                            (this.person.age + 1) +
                            "살 입니다."
                        );
                    },
                },
            });
        </script>
    </body>
</html>

 

이런 식으로 사용하면 된다.

메서드 내부에서 this 키워드를 사용하면 객체에 접근할 수 있다.

즉 data의 값을 접근할 수 있게 되는 것이다.

 

하지만 뭔가 생략된 거 같은 느낌이 들것이다. 왜 this.data.person.name 이런 식으로 사용하지 않고

this.person.name 이렇게 쓰냐면 Vue.js에서 this에 data를 묶어서 표현해주기 때문에 생략 가능하다.

 

※이때 꼭 함수를 사용할 때는 ()를 포함시켜줘야 한다.

또한 다른 함수에서 nextYear함수를 쓰기 위해서는 this를 사용하면 된다.

 

이제 함수의 인자 값을 전달하는 코드를 작성해 보겠습니다.

<!DOCTYPE html>
<html>
    <head>
        <title>Vue.js Sample</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">{{ nextYear("반갑습니다") }}</div>
        <script>
            new Vue({
                el: "#app",
                data: {
                    person: {
                        name: "홍준혁",
                        age: 17,
                    },
                },
                methods: {
                    nextYear: function (greeting) {
                        return (
                            greeting +
                            "! " +
                            this.person.name +
                            "은 내년에 " +
                            (this.person.age + 1) +
                            "살 입니다."
                        );
                    },
                },
            });
        </script>
    </body>
</html>

 

nextYear함수를 만드는 과정에서 greeting이라는 인자를 받겠다고 선언을 한다. 그다음 이 함수를 호출할 때 () 안에 값을 넣어주면 함수에서 그 값을 변수처럼 사용할 수 있게 된다.

즉 nextYear함수를 사용할 때 "반갑습니다"라는 내용이 함수에 전달되게 된다.

 

함수의 코드를 줄일 수 있는 방법이 있는데 바로 function을 생략하는 방법이다.

nextYear(greeting) {
    return ();
}

 

 

오늘은 여기까지 하도록 하겠습니다. 다음에 배워볼 것은 Vue의 데이터 바인딩입니다.

'Vue.js' 카테고리의 다른 글

Vue.js-watch속성  (1) 2020.09.14
Vue.js-computed  (1) 2020.09.14
Vue.js-폼 입력 바인딩  (1) 2020.09.14
Vue.js-이벤트  (0) 2020.09.14
Vue.js-데이터 바인딩  (0) 2020.09.13
'Vue.js' Related Articles more
Comments