FrontEnd/Vue.js 3

Chapter 03. Vue.js 사용 전 JavaScript 기본 지식

계란💕 2023. 3. 7. 16:50

Vue 의  다양한  사용 방식

  • Standalone script
  • Embedded Web Components
  • Single Page Application
  • fullstack / SSR
  • JAMStack /  SSG
  • Beyond the web

Vue 2.xx => Vue  3.xx 변한 부분

  • Composition API: Vue2에서 쓰던 방식과 호환된다. 기존에 쓰던 Options API를 대체한다. 혹은 두 개를 같이 쓸 수도 있지만 강사님은 둘 중 하나 선택하는 것을 권장하신다. 
  • SFC(Single File Component)
  • 위 두 가지가 등장했다. 다양해지고 체계가 생겼다. 
  • Global API:
    • 애플리케이션을 만들 때  new Vue() 를 이용했던 부분이 createapp() 이라는 정적 메소드를 이용해서 만들 수 있도록 바뀌었다. 

 

MVC 프로그래밍 이해를 위한 DOM 계산기 HTML 준비하기

 

  Ex) 

  • (Git 세팅)
  • Live server 플러그인 설치
    • 로컬 서버가 하나 만들어진다. 
    • open with live server로 열면 다음과 같이 창이 뜬다. 
    • 5501이 기본 포트이다. 
    • html 을 저장하고 아래 창 그대로 새로고침하면 변경 내용이 바로 적용된다. 

  • 오른쪽 들여쓰기
<input dir = "rtl" value="0">

 

  • section
    • calc-app 이라는 이름을 붙여준다. 
<hide/>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=
    
    , initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <section id = "calc-app">
        <h1>덧셈 계산기</h1>
        <form action="">
            <fieldset>
                <legend>계산기 입력폼</legend>
                <div>
                    <label>x:</label>
                    <input dir = "rtl" value="0">
                    <label>y:</label>
                    <input  dir = "rtl" value="0">
                    <span>=</span>
                    <span>0</span>

                </div>
                <hr>
                <div>
                    <input type = "submit" value="초기화">
                    <input type = "submit" value="계산하기">
                    
                </div>
            </fieldset>
        </form>
    </section>
</body>
</html>

 

Vue를 이용한 계산기 프로그래밍 - DOM  방식

 

  • Vue2.xx 버전에서는 다음과 같이 객체를 만든다 .
    • Vue 객체 안에 {} 안에 있는 인터페이스 부분을  Options API 라고 한다. 
    • Model을 준비해서 바인딩할 수 있도록 한다. 내용이 수정되면 View도 자동으로 바뀐다. 
    • View에서 event가 발생하면 Controller가 Model을 바꾼다.

 

 

  • 위코드를 복사해서 documetn 객체를 쓰지 않고 계산기 프로그램을 쓸 수 있다 . 
<hide/>
<!-- production version, optimized for size and speed -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

 

 

 

  Ex) DOM 안에 있는 Element 객체를 이용해서 직접 이용해서 계산기 만들기

  • html
<hide/>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=
    , initial-scale=1.0">
    <title>Document</title>
<script src="calc.js"></script>
</head>
<body>
    <section id = "calc-app">
        <h1>덧셈 계산기</h1>
        <form action="">
            <fieldset>
                <legend>계산기 입력폼</legend>
                <div>
                    <label>x:</label>
                    <input dir = "rtl" value="0">
                    <label>y:</label>
                    <input  dir = "rtl" value="0">
                    <span>=</span>
                    <span>0</span>
                </div>
                <hr>
                <div>
                    <input type = "submit" value="초기화">
                    <input type = "submit" value="계산하기">
                </div>
            </fieldset>
        </form>
    </section>
</body>
</html>

 

 

  • <script> 내용이 위에 있으면 객체화된 것(?)을 써야하는데  애플리케이션을 실행할 때에는 객체가 생성되지 않은 상태일 수도 있다.
    • window의 loadevent ()를 이용해서 로드된 다음에 쓸 수 있도록 작업한다. 
  • 아까 작성한 html 페이지에서 만든 input을 모두 한번에 가져오기 위해서 querySelectAll()을 이용한다. 
    • input이 정상적으로 들어갔는지 확인하기 위해 for문으로 출력해본다. 
    • querySelectAll(): 지정된 셀렉터 그룹에 일치하는 document의 엘리먼트 리스트를 나타낸는 NodeList를 반환한다. 
    •  
<hide/>
window.addEventListener("load", function(){
    const inputs = this.document.querySelectorAll("form input");
    
    const xInput = inputs[0];
    const yInput = inputs[1];
    const resetButton = inputs[2];
    const submitButton = inputs[3];
    const resultSpan = this.document.querySelector("form span : last-child");

    for(let i = 0; i < inputs.length; ++i){
        console.log(inputs[i]);
    }

    console.log(resultSpan);

});

 

  • 오류
    • Uncaught DOMException: Failed to execute 'querySelector' on 'Document': 'form span : last-child' is not a valid selector.

 

  • 초기화
    • 다음과 같이 resetButton() 을 만들면 초기화할 수 있다. 
    • x, y에 어떤 값을 눌렀다가 초기화 누르면 기본값이 0으로 세팅된다. 
<hide/>
window.addEventListener("load", function(){
    const inputs = this.document.querySelectorAll("form input");
    const xInput = inputs[0];
    const yInput = inputs[1];
    const resetButton = inputs[2];
    const submitButton = inputs[3];
    const resultSpan = this.document.querySelector("form span : last-child");

    for(let i = 0; i < inputs.length; ++i){
        console.log(inputs[i]);
    }

    console.log(resultSpan);

    resetButton.onClick = (e)=>{
        xInput.value = 0;
        yInput.value = 0;
        resultSpan.innerText = 0;
    }; 
}

 

  • xInput은 기본적으로 문자열이므로 .value를 붙여서 숫자로 바꿔줘야한다. =>  xInput.value
    • 계산하기 버튼을 누르면 새로운 화면이 뜨는데(화면 갱신) 이 부분을 고치고 싶으면? => e.preventDefault()
    •  
<hide/>
submitButton.onClick = (e)=>{
    e.preventDefault();
    let x = parseInt(xInput.value);
    let y = parseInt(yInput.value);
    let result = x + y;
    resultSpan.innerText = result;
};
 
 
  • xInput을 바꾸는 동시에 결괏값이 바로 반영되도록 하려면?
    • xInput.oninput()
<hide/>
xInput.oninput = (e)=>{
    let x = parseInt(xInput.value);
    let y = parseInt(yInput.value);
    let result = x + y;
    resultSpan.innerText = result;
};

 

<hide/>
<!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>
<script src="calc.js"></script>
</head>
<body>
    <section id = "calc-app">
        <h1>덧셈 계산기</h1>
        <form action="">
            <fieldset>
                <legend>계산기 입력폼</legend>
                <div>
                    <label>x:</label>
                    <input dir = "rtl" value="0">
                    <label>y:</label>
                    <input  dir = "rtl" value="0">
                    <span>=</span>
                    <span>0</span>
                </div>
                <hr>
                <div>
                    <input type = "submit" value="초기화">
                    <input type = "submit" value="계산하기">
                </div>
            </fieldset>
        </form>
    </section>
</body>
</html>

 

<hide/>
window.addEventListener("load", function(){
    const inputs = this.document.querySelectorAll("form input");
    const xInput = inputs[0];
    const yInput = inputs[1];
    const resetButton = inputs[2];
    const submitButton = inputs[3];
    const resultSpan = document.querySelector("form span:last-child");

    for(let i=0; i<inputs.length; ++i){
        console.log(inputs[i]);
    }

    console.log(resultSpan);

    resetButton.onClick = (e)=>{
        e.preventDefault();
        xInput.value = 0;
        yInput.value = 0;
        resultSpan.innerText = 0;
    }; 

    submitButton.onClick = (e)=>{
        e.preventDefault();
        let x = parseInt(xInput.value);
        let y = parseInt(yInput.value);
        let result = x + y;
        resultSpan.innerText = result;
    };

    xInput.oninput = (e)=>{
        let x = parseInt(xInput.value);
        let y = parseInt(yInput.value);
        let result = x + y;
        resultSpan.innerText = result;
    };

    yInput.oninput = (e)=>{
        let x = parseInt(xInput.value);
        let y = parseInt(yInput.value);
        let result = x + y;
        resultSpan.innerText = result;
    };

});

 

  Note) 실행 결과

  • 코드가 너무 많고 복잡하다. 
  • 가독성이 떨어진다. 
  • 그런데앞으로 Vue를 이용하면 위와 같은 복잡한 코드가 필요없다. 
    • Documetn 객체를 쓰지 않는다. 

Note

  • JavaScript의 세 가지 변수들의 차이점 -  let  const var
    • const: 일정한 상수값을 유지한다. 변수 값을 변경 불가능 (final 키워드와 비슷)
      • 중복 선언 불가능, 재할당 불가능
    • let: 중복 선언 불가능, 재할당 가능
    • var: 중복 선언 가능
      • var를 보완하기 위해 등장한 선언 방식이 let, const 이다.

찾아보기

  •  

 

출처

12강 

https://www.youtube.com/watch?v=CQHxFbWlYAI 

 https://www.youtube.com/watch?v=_JZNF1z7lRk&list=PLq8wAnVUcTFVvV09XIRA0L5hgDPil88r5&index=2

 

 

저작자표시

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

Chapter 05. Vue.js 3  (0) 2023.03.29
Chapter 04. Vue 시작하기  (0) 2023.03.29
Chapter 02. 웹 프론트의 MVC 라이브러리  (0) 2023.03.07
Chapter 01. 사전 지식과 SPA  (0) 2023.03.07

'FrontEnd/Vue.js 3'의 다른글

  • 현재글Chapter 03. Vue.js 사용 전 JavaScript 기본 지식

관련글

댓글

티스토리툴바