[Vue] Vue.js 소개

Bzeromo·2023년 10월 30일
frontvue
0

Vue.js

목록 보기
1/10
post-thumbnail

⚡ Vue.js 소개

📌 Front-End Development

🔷 웹 사이트와 웹 어플리케이션의 사용자 인터페이스(UI)와 사용자 경험(UX)을 만들고 디자인하는 것

  • HTML, CSS, JavaScript 등을 활용하여 사용자가 직접 상호작용하는 부분을 개발

🔷 Client-side Frameworks

  • 클라이언트 측에서 UI와 상호작용을 개발하기 위해 사용되는 JavaScript 기반 프레임워크
  • 이전에 공부했었던 react, 이번에 공부할 Vue, 그리고 angular가 있다.

💡 물론 엄밀히 따지자면 react는 라이브러리다. 그냥 비교군으로 넣었다.

⭐ Client-side Frameworks 가 필요한 이유

  1. 사용자는 이제 웹에서 문서만을 읽는 것이 아닌 음악을 스트리밍하고, 영화를 보고, 원거리에 있는 사람들과 텍스트 및 영상 채팅을 통해 즉시 통신을 하고 있다. 이처럼 현대적이고 복잡한 대화형 웹 사이트를 웹 어플리케이션(Web Application)이라 부르며 JavaScript 기반의 Client-side frameworks 출현으로 매우 동적인 대화형 어플리케이션을 훨씬 더 쉽게
    구축할 수 있게 되었다.

  2. 어플리케이션의 상태를 변경할 때마다 일치하도록 UI를 업데이트해야 한다. 이는 어플리케이션의 기본 데이터를 안정적으로 추적하고, 업데이트(렌더링, 추가, 삭제 등) 하는 도구가 필요하다는 것이다.

💡 SPA와 클라이언트 사이드 렌더링(CSR)에 대해서는 이전에 언급한 적이 있으니 이 정도까지만 알아보자.

📌 Vue.js

🔷 사용자 인터페이스를 구축하기 위한 JavaScript 프레임워크

  • 2014년 발표 → Evan You (학사 : 미술 & 미술사, 석사 : 디자인 & 테크놀로지 / Angular 개발팀 출신)
  • 2023년 기준으로 Vue3가 최신 버전이다.

⭐ Vue를 학습하는 이유

1. 쉬운 학습 곡선 및 간편한 문법

  • 새로운 개발자들도 빠르게 학습할 수 있음

2. 반응성 시스템

  • 데이터 변경에 따라 자동으로 화면이 업데이트 되는 기능을 제공

3. 모듈화 및 유연한 구조

  • 어플리케이션을 컴포넌트 조각으로 나눌 수 있음
  • 코드의 재사용성을 높이고 유지보수를 용이하게 함

4. 거대하고 활발한 커뮤니티

  • 풍부한 문서, 튜토리얼, 예제 및 다양한 리소스를 공유 받을 수 있다.

⭐ Vue의 핵심 기능

1. 선언적 렌더링 (Declarative Rendering)

  • HTML을 확장하는 템플릿 구문을 사용하여 HTML이 JavaScript 데이터를 기반으로
    어떻게 보이는지 설명할 수 있음

2. 반응형 (Reactivity)

  • JavaScript 상태 변경사항을 자동으로 추적하고 변경사항이 발생할 때 DOM을 효율적으로 업데이트

🖥 맛보기

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>FirstVueApp</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  </head>

  <body>
    <div id="app">
      <h1>{{ message }}</h1>
      <button @click="count++">Count is: {{ count }}</button>
    </div>
    <script>
      const { createApp, ref } = Vue;

      const app = createApp({
        setup() {
          const message = ref("Hello vue!");
          const count = ref(0);

          return {
            message,
            count,
          };
        },
      });

      app.mount("#app");
    </script>
  </body>
</html>

💡 크롬 확장프로그램에서 vue.js devtools를 찾아 다운받으면 이렇게 컴포넌트 확인이 쉬워진다. 리액트 쓸 때 스토리북 와리가리하면서 바쁘게 움직였던거 생각하면 이게 나을지도 모르겠다. 참고로 리액트 버전도 있다.

🔷 Vue를 사용하는 방법
1. CDN 방식

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  1. NPM 방식 (CDN 방식 이후 진행)

🖨 Vue 첫 번째

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 1. CDN 추가 -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  </head>
  <body>
    <div id="app">
      <!-- 6. 꺼내어 사용할 때는 .value가 필요 없다. -->
      <p>{{message}}</p>
      <!-- 자바스크립트 표현식도 사용 가능 -->
      <p>{{message.split('').reverse().join('')}}</p>
    </div>
    <script>
      const { createApp, ref } = Vue; //구조 분해 할당
      //2. Application Instance 생성

      const app = createApp ({
        setup() {
          const message = ref("Hello Vue!"); //4. 변수 사용을 위해 ref메서드로 감싸서 초기화
          console.log(message);
          console.log(message.value);

          //5. 템플릿에서 사용하기 위해 반환 -> 객체 타입으로 반환
          return {
            message,
          };
        },

      });

      // 3. dom 연결(mount)
      app.mount("#app");
    </script>
  </body>
</html>

🔷 createApp()에 전달되는 객체는 Vue 컴포넌트 (Component)

  • 컴포넌트의 상태는 setup() 함수 내에서 선언되어야 하며 객체를 반환해야 함

🔷 Application instance

  • 모든 Vue 어플리케이션은 createApp 함수로 새 Application instance를 생성하는 것으로 시작

🔷 app.mount()

  • 컨테이너 요소에 어플리케이션 인스턴스를 탑재(연결)
  • 각 앱 인스턴스에 대해 mount()는 한 번만 호출할 수 있음

🔷 ref 함수

  • 인자를 받아 .value 속성이 있는 ref 객체로 래핑(wrapping)하여 반환
  • ref로 선언된 변수의 값이 변경되면, 해당 값을 사용하는 템플릿에서 자동으로 업데이트
  • 인자는 어떠한 타입도 가능
  • 템플릿의 참조에 접근하려면 setup 함수에서 선언 및 반환 필요

💡 템플릿에서 ref를 사용할 때는 .value를 작성할 필요가 없다.

🖨 Vue eventListener 맛보기

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="app">
        <!-- v-on: 이벤트 지정, '@'로 대체할 수 있음 -->
        <button v-on:click="increment">{{ count }}</button>
    </div>
    <script>
        const { createApp, ref } = Vue;
        
        const app = createApp({
            setup() {
                const count = ref(0);
                const increment = () => {
                    count.value++;
                }
                return {
                    count,
                    increment,
                }
            }
        });

        app.mount("#app");
    </script>
    
</body>
</html>

누르면 숫자가 늘어난다. 반응형 변수기 때문에 가능하다. 이게 무슨 말이냐면

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  </head>
  <body>
    <div id="app">
      <div>반응형 변수: {{ reactiveValue }}</div>
      <div>일반 변수: {{ normalValue }}</div>
      <button @click="updateValues">값 업데이트</button>
    </div>
    <script>
      const { createApp, ref } = Vue;

      const app = createApp ({
        setup() {
          const reactiveValue = ref(0); //반응형 변수
          const normalValue = 0; //그냥 변수

          const updateValues = () => {
            reactiveValue.value++;
            normalValue++;
          }

          return {
            reactiveValue,
            normalValue,
            updateValues,
          };
        },

      });

      app.mount("#app");
    </script>
  </body>
</html>

이 경우에 반응형 변수는 버튼을 누르면 바로바로 숫자가 업데이트 되지만 일반 변수는 콘솔창에 오류 표시가 뜰 뿐, 숫자가 바뀌지 않는다.

🖨 unwrap

  • 템플릿에서의 unwrap은 ref가 최상위 속성인 경우에만 적용가능하다.
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  </head>
  <body>
    <div id="app">
      <div>{{ object.id + 1 }}</div>
      <div>{{ object["id"] + 1 }}</div>
      <div>{{ object.id }}</div>
      <div>{{ object.id.value }}</div>
      <div>{{ object.id.value + 1 }}</div>
      <div>{{ object["id"] }}</div>
      <div>{{id}}</div>
      <div>{{id+1}}</div>
    </div>
    <script>
      const { createApp, ref } = Vue;

      const app = createApp ({
        setup() {
          const object = { id: ref(0) }; 
        
          const { id } = object;

          return {
            object,
            id,
          };
        },

      });

      app.mount("#app");
    </script>
  </body>
</html>

리액트랑 비슷해서 익숙한 맛이 난다.

profile
Bzeromo
Hodie mihi, Cras tibi

0개의 댓글