본문 바로가기
국비과정/Vue

20230912 _[72일차]_01. Vue 맛보기

phyho 2023. 9. 13. 10:54

 

Vue 는 현재 version 3까지 나와있고 우리가 배울 버전도 3다.

책 읽어보기 & pdf파일 용어 참고

 

 

두개 차이점 찾아보기

javascript : ECMAScript 사양을 준수하는 범용 스크립트 언어

ECMAScript : ECMA International이 ECMA-262 기술 규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어

 

 

SPA 싱글 페이지 애플리케이션(Single-page application, SPA) :

하나의 HTML 페이지와 애플리케이션 실행에 필요한 JavaScript와 CSS 같은 모든 자산 을 로드하는 애플리케이션

MPA 멀티 페이지 애플리케이션(Multi-page application, MPA) :

클라이언트 요청이 들어오면 서버에 저장된 html을 골라 전송함  => 지금까지 우리가 썼던 타임리프랑 jpa가 MPA 

 

 

jsx : JavaScript의 확장 문법. React.createElement()의 호출을 통해 일반 JavaScript 객체인 “React 엘리먼트”(React element)로 컴파일 됨  (DOC => DOCX 처럼 js 이후 나온게 jsx)

 

 

vue 폴더 하나 만들어준다.

vs code로 해보자.

vue 폴더에 index.html 파일 생성

vue 사용 선언문 넣어준다.

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

 

<body>
    <div id="app">

    </div>

    <script>
        Vue.component(
            'app-header', {}
        );

    </script>
</body>

vue의 동작은 component에서 이루어질건데 

app-header를 찾아가서 내용을 바꿔준다는 의미다. template: <h1>Header</h1> 을 입력한다.

<!DOCTYPE html>
<html>
  <header>
    <title>vue 맛보기</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </header>

  <body>
    <div id="app">
      <app-header></app-header>
    </div>
    <script>
      Vue.component("app-header",
      {
        template: "<h1>Header</h1>",
      });
      new Vue({
        el: "#app",
      });
      // shift + alt + f 정렬
    </script>
  </body>
</html>

 

 

app2를 만들고 vue로 <footer>footer222</footer> 를 띄워본다.

  <body>
    <div id="app">
      <app-header></app-header>
    </div>

    <div id="app2">
        <app-footer></app-footer>
    </div>

    <script>
      Vue.component("app-header",
      {
        template: "<h1>Header</h1>",
      });
      new Vue({
        el: "#app",
      });
      // shift + alt + f 정렬

      new Vue({
        el: "#app2",
        components: {
            'app-footer':{
                template: '<footer>footer222</footer>'
            }
        }
      });

    </script>
  </body>

아래처럼 뜬다.

 

pdf 2

이번에는   <div id="msg">{{ message }}</div>  msg(문자)를 vue로 불러와보자. 

{{ }} 형태를 머스타치라고 한다.

  <body>
    <div id="app">
      <app-header></app-header>
    </div>

    <div id="msg">{{ message }}</div>

    <div id="app2">
        <app-footer></app-footer>
    </div>

    <script>
      Vue.component("app-header",
      {
        template: "<h1>Header</h1>",
      });
      new Vue({
        el: "#app",
      });
      // shift + alt + f 정렬

      new Vue({
        el: "#app2",
        components: {
            'app-footer':{
                template: '<footer>footer222</footer>'
            }
        }
      });

      var app = new Vue({
        el: "#msg",
        data:{message: '안녕하세요 Vue!'}
      });

    </script>
  </body>

 

책 p33 _ Node.js 설치하기 ( JS가 실행되기위한 환경_  java가 동작하려면 JVM이라는 환경이 필요하듯이 )

 

 

설치하자 

Node.js (nodejs.org)

 

Node.js

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

설치완료되면 이렇게 뜬다.

아무키나 누르면 그냥 꺼져버리는데 일단 Node.js 설치는 완료

cmd창에서 확인해보자 

node -v   => 버전확인

npm -v 해보면 npm의 버전이 나온다.

npm은  Node.js를 설치하면 자동으로 설치되는 패키지 관리자이다.

 

최상위 디렉토리로 가서 vue폴더까지 들어간다.

 

npm install -g @vue/cli  : 설치명령 ( g 는 전역변수를 의미)

vue --version  : vue 버전확인 

mkdir sep12  : sep12 폴더생성

del sep12 : sep12 폴더 삭제

삭제해주고 

다시 생성하자

Vue 3 으로 선택한다. (버전선택)

화살표키로 선택해서 enter 해주면 Vue3으로 설치가 된다.

설치완

cd sep12

npm run serve

=> 실행명령

위의 주소로 들어가보면 아래처럼 뜬다. 그럼 성공

소스보기로 보여지는 화면은 이렇게 되어있는데

F12로 확인해보면

다시 vs code로 가보면 내가 만든 폴더가 있다.

App.vue 파일이 로고가 떠있는 첫 화면이다.

HelloWorld.vue 파일에서 스크립트 언어를 하나로 합쳐준다고 한다.

중간에 오류가 나면 어디에서 난건지 찾을수가 없다. 모든 파일마다 다 찾아다녀야 한다. *주의*

 

이제 플러그인 설치하자.

Vetur 설치

HTML CSS Support 는 이미 깔려있다.

Vue 3 Snippets 설치

실행 종료하려면 cmd에서 아래처럼 명령어 적어준다.

 

이제 구조를 살펴보자.

App.vue  파일을 먼저 보자.

 

.vue에는 기본적으로 

template, script, style이 들어있다. 

ctrl + c 하면 아래처럼 뜨는데 Y로 Vue의 가동을 멈춰준다.

폴더열기에서 - 다시 sep12로 들어가준다.

터미널을 열고

아래부분을 powershell이 아니라 cmd로 바꿔주고 (powershell로 되어있어서 오류났다.)

 

근데 안된다.

vs code를 껐다가 다시 켜서 실행해보니 된다.

npm run serve 명령어로 실행해보면 아래처럼 나온다. (cmd에서 실행시키는것과 동일하다.)

[ Vue.js 작동순서 ]

3. Vue.js 작동 순서 (tistory.com)

 

3. Vue.js 작동 순서

Vue.js 작동 순서 1. package.json 설정들이 들어가져있다. vue의 버전 같은데 전부 기입되어져있다. eslintConfig 등도 포함되어져있다. Spring 의 pom.xml 같은 역할을 한다고 보면 될거같다. 2. index.html 기본

gustv.tistory.com

 

 

package.json 파일 내부에 dependency 설정이 있다.

아래 파일 두개를 수정하면 index에서는 호출만 한다.

아래 id를 통해 불러온다

책 p50 ~ 58 까지 읽어보기

 

App.vue에서

template 태그 내부에 있는 이미지태그(로고) 삭제해주고

msg 내용도 바꿔보자.

import 되어있는 HelloWorld.vue 에 msg가 String 타입으로 명시되어있다.

vue는 새로고침 없이도 수정사항이 바로 반영된다.

 

App.vue-부모

HelloWorld.vue -자식

 

페이지 소스보기에는 아래처럼만 뜬다.

아래에 보면 script들은 사라져있다.

 

이제 String말고 Object를 보내보자. (객체는 json형식이랑 비슷)

<script>
export default {
  name: 'HelloWorld',
  data() {
    return{
      msg: "자식에서 값을 보냅니다.",
      human: {
        name: "홍길동",
        age: 150,
        addr: "한양"
      }
    }
  }
}
</script>

머스타치 문법으로 human 객체를 불러와보면

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <span v-text="msg"></span>
  </div>
  <div>{{ human }}</div>
</template>

 

브라우저에 아래처럼 뜬다.

human.name 으로 호출하면 name의 value값만 가져온다.

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <span v-text="msg"></span>
  </div>
  <div>{{ human.name }}</div>
</template>

 

 

 

저장하는대로 수정사항들이 바로 적용된다.

 

이제 배열값을 띄워보자.


<script>
export default {
  name: 'HelloWorld',
  data() {
    return{
      msg: "자식에서 값을 보냅니다.",
      human: {
        name: "홍길동",
        age: 150,
        addr: "한양"
      },
      arr : [10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
    };
  },
};
</script>

 

이제 배열값들을 for문으로 뽑아내보자. 는 실패

오류창은 닫으면 꺼진다.

if문 사용은 아래처럼

else 도 아래처럼 쓸 수 있다.

 

else if 도 써본다.

 

 

 

다시 cmd를 켠다.

최상위폴더에서 vue폴더로 이동한 후에 새로운 프로젝트 sep12_1 생성

cd c:\vue

vue create sep12_1

cd sep12_1

npm run serve

실행시킨다.

이제 vs code에서 새로생성한 sep12_1 폴더 열어주고

다시 터미널에서 실행시켜보면 잘된다.

components 내부에 새로운 파일 HelloVue.vue 생성

기본 구조 (  / + tab 으로 자동틀 생성가능 )

template : 화면에 보여줄것들 정해주는곳

script : 화면에 무엇을 어떻게 찍을지 정해줄곳

 

<template>
    <div class="hello">
        {{ name }}
       
    </div>
</template>

<script>
    export default{
        name: 'HelloWorldVue',
        data(){
            name: '홍길동'
        }
    }
</script>

<style>
    div{
        height: 100px;
        width: 500px;
        background-color: gray;
    }
    .hello{
        color: green;
    }
</style>

브라우저에는 안뜬다 

왜냐하면 실제 구동을 담당하는 App.vue에 HelloWorld만 연결되어 있으니까!

import문 추가해서 HelloVue.vue 파일도 연결해준다.

components에도 정의**

사용을 안했다고 빨간줄이 떠서

HelloVue를 태그형태로 template에도 넣어줘야 한다.

다시 HelloVue.vue 파일로 돌아와서

script 의 data 부분에 return 넣어주고 style 지정을 해줬다.

<template>
    <div class="hello">
        {{ name }}
       
    </div>
</template>

<script>
    export default{
        name: 'HelloWorldVue',
        data(){
            return {
                name: '홍길동'
            }
        }
    }
</script>

<style>
    div{
        height: 100px;
        width: 500px;
        background-color: gray;
    }
    .hello{
        color: green;
    }
</style>

브라우저에 잘 뜬다.

 

헷갈리니까 HelloWorld는 뺴고 HelloVue만 띄워보면 아래처럼 뜬다.

새로운 파일 CountOne.vue 만들어준다.

파일이름으로 Count처럼 단어 하나로는 안된다. 

 

책 p74~  참고

 

이번에는 버튼을 만들어서 click 기능을 넣어준다. 

버튼을 눌렀을 때 count값이 변경되도록 해준다.

<template>
    <p>{{ counter }}</p>
    <p v-if="counter < 5">5보다 작습니다.</p>
    <p v-else>5와 같거나 5보다 큽니다.</p>
    <button @click="counter++">클릭하면 숫자가 올라갑니다.</button>
    <button @click="counter--">클릭하면 숫자가 내려갑니다.</button>
</template>

<script>
import {ref} from 'vue'
    export default{
        setup() {
            let counter = ref(0)
            return{
                counter,
            }
        }
    }
</script>

<style>

</style>

* setup() : 객체를 반환할 때 속성을 자동으로 초기화시켜주는 함수

 

App.vue 에서 연결해주고

브라우저 확인해보면

올라가는 버튼을 눌렀을 때 아래처럼 count값이 변한다.

음수까지도 내려간다.

[ Vue3의 Composition API 에 내장되어 있는 함수 ]

 

* ref :  반응적인 데이터를 생성하는 데 사용

사용하려면 import {ref} from 'vue'  필요.

 

let counter = ref(0)   

=> 초기값이 0인 반응적인 변수를 생성해서 counter 라는 이름을 붙여준거다.

 

일반 JavaScript 변수는 변경되는 값을 Vue에서 감지할 수 없는데 ref 변수는 Vue에서 바로 감지해서 화면을 자동으로 업데이트 해준다. (반응속도향상)

또, Vue의 템플릿 문법과 함께 사용가능하다.

* setup() :  컴포넌트 로직을 초기화하고 데이터를 설정하는 데 사용

 

Vue 3의 Composition API에서 ref와 setup 함수는 일반적으로 함께 사용

*  Composition API : Vue.js 3에서 도입된 새로운 컴포넌트 구성 스타일 및 API로 Vue.js 애플리케이션을 더 모듈화하고 재사용 가능하게 만들며, 코드의 가독성과 유지 보수성을 향상시키는데 도움을 준다.

 

 

node_modules : 프로젝트에 쓰는 라이브러리들

package.json : 라이브러리 버전, 프로젝트 설정 기록 (dependency 설정)

src : 소스코드들

public : html파일, 기타파일 보관

 

 

'국비과정 > Vue' 카테고리의 다른 글

20230920 _[78일차]_01. Vue (4차)_게시판만들기2  (0) 2023.09.20
20230919 _[77일차]_01. Vue (4차)_게시판만들기  (0) 2023.09.20
20230918 _[76일차]_01. Pandas 사용해보기  (0) 2023.09.18
20230914 _[74일차]_01. Vue로 게시판 만들기  (0) 2023.09.14
20230913 _[73일차]_01. Vue 맛보기2  (0) 2023.09.14

'국비과정/Vue' Related Articles

티스토리툴바