코딩하는 둥둥

[ Vue.js 시작하기 ] 01. Vue.js 소개 본문

Frontend/Vue.js 시작하기 - Age of Vue.js

[ Vue.js 시작하기 ] 01. Vue.js 소개

둥둥 2022. 9. 15. 12:44
728x90
inflearn에서 수강 한 장기효(캡틴판교)님의 강의🔗정리입니다.

MVVM 모델에서의 Vue

MVVM 패턴?

 

Vue는 무엇인가?

MVVM 패턴의 뷰모델(ViewModel) 레이어에 해당하는 화면(View) 단 라이브러리

뷰 모델을 통해서 양방향 데이터 바인딩이 가능하게 해 주며, 뷰 계층을 좀 더 간단하고 유연하게 디자인하게 해 줘 모델과 뷰의 동기화 역할을 한다.

  • view : 화면에 나타내는 요소들. html. DOM을 이용해 javascript로 조작이 가능
  • DOM Listeners : 화면에서 사용자가 입력을 발생시켰을 경우 그러한 이벤트를 DOM Listeners를 이용해 중간에서 청취
  • Data Bindings : JavaScript의 데이터가 변했을때 사용. 바뀐 내용들을 화면에 반영
  • Model : plain JavaScript Objects

기존 웹 개발 방식(HTML, Javascript)

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   <!-- html 기본 코드 생성 단축키 : !+tab | 패널 접기 : ctrl + \-->
    <div id="app"> <!-- div#app : 자동완성단축키 --></div>
 
    <script> // script+tap : 자동완성단축키
 
        // var div = document.querySelector("#app"); // 제이쿼리 선택자인 $('#app');와 같은 역할 
        // console.log(div); // div태그의 정보 출력
        // div.innerHTML = 'Hello world!!!'; // innerhtml사용해 div안에 데이터넣기
 
        // html은 화면에 나타나는 도메인 정보를 넣는것이고 javascript는 해당 태그나 도메인 내용을 조작하는것.
 
        var div = document.querySelector("#app"); // 제이쿼리 선택자인 $('#app');와 같은 역할 
        var str = "hello world" // 대부분의 값들은 변수에 담겨있고 변수를 연결해서 코딩하기때문
        div.innerHTML = str;
 
        str = "Hello world!!!"
        div.innerHTML = str; // 바뀐 값을 다시 대입을 해야만 화면에 마지막으로 입력된 값으로 출력
 
    </script>
    
</body>
</html>
 cs
VSCode 단축키
  • 패널 접기 : ctrl+\\
  • 주석 단축키 : ctrl+shift → shift만땐 상태에서 +/ (언어 설정이 한국어로 되어있기 때문에 shift사용 필요)
  • html 기본 코드 생성 : !+tab (auto close tag를 사용해도 타자가 많기 때문에 !tab을 사용해 html기본 코드를 생성해서 사용)
  • div 자동완성 : div#ID명+enter
  • script 자동완성 : script+tap

 

Reactivity(반응성) 구현

Reactivity란 데이터의 변화를 라이브러리에서 감지해서 알아서 화면을 자동으로 그려주는 것을 말한다. (데이터의 변화에 따라 화면이 자동으로 그려지는 것)

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
 
    <script>
        // viewModel 사용
        var div = document.querySelector('#app');
        var viewModel = {};
 
        Object.defineProperty(viewModel, 'str', {     
                        // 속성에 접근했을때의 동작을 정의
            get: function(){
                console.log('접근');
            },
            // 속성에 값을 할당했을때의 동작을 정의
            set: function(newValue){
                console.log('할당', newValue);
                div.innerHTML = newValue;
            }
        })
    </script> 
</body>
</html>
 cs

Object.defineProperty( )

특정 변수의 동작, 객체의 특정 동작을 재 정의하는 API

개체에 직접 새 속성을 정의하거나 개체의 기존 속성을 수정하고 개체를 반환한다.

1
2
3
Object.defineProperty(대상 객체, 객체의 속성, { 
     // 정의할 내용
})
 cs
  • 대상객체(obj) : 속성을 정의할 개체
  • 객체의 속성(prop) : 심벌의 이름 또는 수정할 속성의 이름
  • 정의할 내용(descriptor) : getter-setter 쌍으로 이루어짐

◆ References : link

 

Object.defineProperty() - JavaScript | MDN

The static method Object.defineProperty() defines a new property directly on an object, or modifies an existing property on an object, and returns the object.

developer.mozilla.org

📌 MDN
javasrcipt나 기본적인 웹 기술에 관한 스펙, 자세한 설명이 나와있는 공식 사이트
api문법과 설명을 확인하고 예제까지 확인해 공부하는 것을 추천한다.

Reactivity 코드 라이브러리화 하기

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
41
42
43
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
 
    <script>
        // viewModel 사용
        var div = document.querySelector('#app');
        var viewModel = {};
 
        // 라이브러리화 : 5. 즉시 실행 함수 -> https://developer.mozilla.org/ko/docs/Glossary/IIFE
        (function(){
 
            function init() {    // 라이브러리화 : 1. 특정 기능 쪼개기
                Object.defineProperty(viewModel, 'str', {
                    // 속성에 접근했을때의 동작을 정의
                    get: function () {
                        console.log('접근');
                    },
                    // 속성에 값을 할당했을때의 동작을 정의
                    set: function (newValue) {
                        console.log('할당', newValue);
                        render(newValue);   // 라이브러리화 : 2. 새로운값이 할당되었을때 그 값을 render로 넘겨줌
                    }
                });
            }
 
            function render(value) {    // 라이브러리화 : 3. newValue를 value로 받아서 div의 값을 수정
                div.innerHTML = value;
            }
 
            init(); // 라이브러리화 : 4. 호출
        })();
 
    </script> 
</body>
</html>
 cs
  1. 특정 기능 쪼개기 : init함수와 render함수를 이용해 기능을 쪼갠다.
  2. Object.defineProperty의 set에서 render(newValue)를 이용해 새로운 값이 할당되었을 때 그 값을 render로 넘겨준다.
  3. render함수로 넘어온 newValue를 value로 받아 innerHTML을 이용해 div의 값을 수정한다.
  4. init();을 이용해 init함수를 호출한다.
  5. 작성된 코드를 즉시 실행함수인 (function(){})();안에 넣는다.
즉시 실행 함수 (Immediately Invoked Function Expression; IIFE)

정의되자마자 즉시 실행되는 javascript 함수

기본적으로 init과 render가 애플리케이션 로직에 노출되지 않도록 실행되는 부분을 또 다른 유효 범위(scope)에 넣어주는 함수

일반적으로 오픈소스라이브러리들의 변수의 유효 범위를 이러한 방식으로 관리한다.

익명 함수
 
 
 
 
 
  
  • : 1. 전역 스코프에 불필요한 변수를 추가해서 오염시키는 것을 방지 / 2. IIFE 내부 안으로 다른 변수들이 접근하는 것을 막을 수 있음
  • 실행 함수 : 실행 함수를 통해 자바스크립트 엔진이 함수를 즉시 해석하여 실행
  • IIFE 내부에서 정의된 변수는 외부 범위에서 접근이 불가능하다.
1
2
3
4
5
6
7
8
var result = (function () {
    var name = "Barry"; // IIFE는 저장되지 않음
    return name;
})();
 
// 즉시 결과를 생성한다.
 
result; // 저장 : "Barry"
 cs

IIFE를 변수에 할당할 경우 IIFE 자체는 저장되지 않고, 함수가 실행된 결과만 저장된다.

◆ References : link

 

IIFE - 용어 사전 | MDN

**즉시 실행 함수 표현(IIFE, Immediately Invoked Function Expression)**은 정의되자마자 즉시 실행되는 Javascript Function 를 말한다.

developer.mozilla.org

Hello Vue.js와 뷰 개발자 도구

윈도우 기준 Vue 개발자 도구

F12 or ctrl+shift+i

728x90

'Frontend > Vue.js 시작하기 - Age of Vue.js' 카테고리의 다른 글

[ Vue.js 시작하기 ] 05. 컴포넌트 통신 방법 - 응용  (0) 2022.09.26
[ Vue.js 시작하기 ] 04. 컴포넌트 통신 방법 - 기본  (0) 2022.09.26
[ Vue.js 시작하기 ] 03. 컴포넌트  (0) 2022.09.26
[ Vue.js 시작하기 ] 02. 인스턴스  (0) 2022.09.15
[ Vue.js 시작하기 ] 00. 개발 환경 설정  (0) 2022.09.15
'Frontend/Vue.js 시작하기 - Age of Vue.js' Related Articles more