Vue.js를 배워보자(feat.인프런)

 

#vue 시작하기

1.node.js설치

2.vscode 설치 (원하는툴 설치)

 

*vscode 확장 툴설치

- Vetur

- Night Owl

- Material Icon Theme

- Live Server

- ESLint

- Prettier

- Auto Close Tag

- Atom Keymap

 

3.Vue.js devtools - 크롬확장프로그램 설치

 

(https://chrome.google.com/webstore/detail/vuejs-devtools/iaajmlceplecbljialhhkmedjlpdblhp/related)

Vue3를 사용할때는 베타버전으로 다운해야함

 

#vue

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

 

view = 화면단(DOM)

-view에서 보내는 이벤트를 뷰모델 DOM Listeners에서 청취하여 자바스크립트 안에 있는 데이터를 바꿔주거나 자바스크립트 특정로직에서 실행하게 함

-자바스크립트가 변경되었을때 뷰모델 Data Bindings을 통해서 화면단(view)에 반영하게 됨

 

#인스턴스

뷰로 개발할때 필수로 생성해야하는 코드

*인스턴스 생성

new Vue();

const vm = new Vue();

console.log(vm); //인스턴스 안에 어떤 속성과 api가 있는지 확인 할수 있음

 

#뷰컴포넌트

화면의 영역을 구분하여 개발할 수 있는 뷰의 기능 (재사용성이 올라가고 빠르게 화면을 제작할 수 있음)

 

*컴포넌트 통신 방식

뷰의 컴포넌트는 각각 고유한 데이터 유효 범위를 갖음

따라서 컴포넌트 간의 데이터를 주고 받기 위해서는 규칙을 따라야함

 

상위컴포넌트->하위컴포넌트 : props 전달(props라는 속성에 data를 넣음)

하위컴포넌트->상위컴포넌트 : 이벤트발생(event-emit : 이벤트에밋)

 

반응형

#Filters

화면에 표시되는 텍스트의 형식을 편하게 바꿀 수 있도록 고안된 기능이며 | 을 이용하여 여러 개의 필터를 적용할 수 있다.

#같은 레벨 컴포넌트 간의 통신

바로 줄수 없으므로 상위로 올린후 상위컴포넌트에서 data선언 후 같은레벨의 전달해줄 컴포넌트로 props 해준다

#뷰 라우터

뷰 라이브러리를 사용하여 싱클페이지 애플리케이션(spa)를 구현할 때 사용하는 라이브러리

 

1)router-view : url 변경시 routes속성에 따라 해당 컴포넌트가 화면에 뿌려짐 / 뿌려지는 지점이 <router-view> 이다

 

2)router-link : 화면에서 특정링크를 클릭하여 페이지를 이동할수 있게 해주는 것 / to 속성을 이용하여 링크를 넣어준다.

#액시오스(Axios) : HTTP통신 라이브러리로 promise기반의 http통신 라이브러리이며 상대적으로 다른 http통신 라이브러리에 비해 문서화가 잘되어있고 api가 다양함

https://github.com/axios/axios / vue-resource도 사용했으나 2년전부터는 사용하지않음(참고) / Interceptors - 좋은기능(참고)

 

*ajax(에이젝스 - Asynchronous Javascript and Xml)는 비동기적인 웹 애플리케이션의 제작을 위해 아래와 같은 조합을 이용하는 웹 개발 기법이다

 

-표현 정보를 위한 html과 css

-동적인 화면 출력 및 표시 정보와의 상호 작요을 위한 DOM, JAVASCRIPT

-웹서버와 비동기적으로 데이터를 교환하고 조작하기 위한 XML,XSLT,XMLHttpRequest (ajax는 XML,XSLT 대신 미리 정의 된 html이나 일반 텍스트,json,json-rpc를 이용할 수 있음)

 

*http 요청 메서드

GET : 존재하는 자원에 대한 요청

POST : 새로운 자원을 생성

PUT : 존재하는 자원에 대한 변경

DELETE : 존재하는 자원에 대한 삭제

 

#웹서비스에서 클라이언트와 서버와의 http통신 구조

 

1)브라우저(클라이언트)에서 http 요청[Request] 송신(axios를 이용하여 url 전달)

2)서버 특정백엔드 로직에서 db를 통하여 값(data)을 가져옴

3)서버에서 http 응답[Response] 수신 (클라이언트로 data를 전달 해줌)

#개발자도구 네트워크패널 보는 방법

1.fetch/xhr 선택 후 보기: 요청한 것이 보임

2. Headers 탭 : 기본적인 정보가 담김

 -General : 요청한 정보가 담김

 

+상태코드로 200(성공)과 404(실패)

1)2xx : 대부분성공을 의미

2)3xx : 리다이렉션

3)4xx : 클라이언트 에러

4)5xx : 서버에러

 

-Response : 서버에서 보낸 정보가 담김

-Request :서버로 보낸 정보가 담김

3.Response 탭  - 서버에서 보낸 data 정보가 담김 (Preview로 보면 더 보기 쉬움)

https://developer.chrome.com/docs/devtools/

 

#뷰의 템플릿 문법(Vue Template)

뷰로 화면을 조작하는 방법

뷰 인스턴스에서 관리하는 데이터를 화면에 연결하는 데이터 바인딩과 화면의 조작을 편하게 할 수 있는 디렉티브로 나뉜다.

 

1)데이터 바인딩

-뷰인스턴스에서 정의한 속성들을 화면에 표시하는 방법

예) 콧수염 문법인 “{{ }}”를 활용하여 인스턴스의 data, computed, props 속성을 연결할 수 있다.

그리고 간단한 자바스크립트 표현식도 화면에 표시할 수 있다.

 

2)디렉티브(Directive)

HTML 태그의 속성에 v- 접두사가 붙은 특별한 속성으로 화면의 DOM 조작을 쉽게할 수 있는 문법들을 제공한다.

#vue cli = vue Command Line Interface

명령어 인터페이스는 텍스트 터미널을 통해 사용자와 컴퓨터가 상호 작용하는 방식

 

1.npm update -g @vue/cli *퍼미션 에러가 날경우 sudo npm update -g @vue/cli

https://stackoverflow.com/questions/5926672/where-does-npm-install-packages

2.cli 버전 / 현재는 3버전 [Vue 2.x] vue init '프로젝트 템플릿 유형' '프로젝트 폴더 위치'

[Vue 3.x] vue create '프로젝트 폴더위치'

3.vue create vue_cli / 프로젝트 생성

4.cd vue-cli

5.npm run serve / 프로젝트 실행

뷰를 이용하여 간단한 로그인 폼 만들기🙄 :  https://github.com/miseon920/vue_form

 

도움받은 곳

https://vuejs.org/

https://cli.vuejs.org/

https://joshua1988.github.io/web-development/vuejs/vuejs-tutorial-for-beginner/

https://pygmalion0220.tistory.com/entry/Vue-Watch

#뷰와 데코레이터

//자식
<template>
	<!--html-->
    <ul class="infor">
        <li><span>수</span>{{ info.userCount }}</li>
	<li><span>수2</span>{{ count }}</li>
    </ul>
</template>

<script lang="ts"> //typescript를 사용할경우 lang="ts" 추가
import { Component, Prop, Vue } from 'vue-property-decorator'; //vue-property-decorator 이용하기
import { 타입명 } from "타입을 정의한곳 위치";

@Component //타입스크립트의 데코레이터형을 사용할 수 있게 해주는 vue-property-decorator을 사용할 때에는 클래스형으로 사용하기 위해 적음
export default class extends Vue {
	//타입정의해주기!
    @Prop({ required: true }) info!: 타입명;
    @Prop({ required: true }) count!: number; //부모에서 준 props 값을 적어줘야 사용할 수 있음
	// 이곳에 넘어온정보(props로 넘어온값)를 찍고 싶을경우 
	mounted(
		//여기안에 적어줘야함 console.log 이용
	)
}
//그외적인 스크립트는 이곳에 적기
</script>

<style>
	/*스타일적을곳*/
</style>

#부모요소에서 넘겨줄때에는 

//부모
<template>
	<!--html-->
    	<케밥형식으로 적은 자식컴포넌트명 :info="info" :count="Count"/>
        <!--props 네임은 소문자로시작,스네이크 기법으로 작성: 정해진규칙은없음! 저만의 규칙 v-vind 생략가능-->
    </ul>
</template>

<script lang="ts"> 
import { Component, Prop, Vue } from 'vue-property-decorator'; //vue-property-decorator 이용하기
import 자식컴포넌트명 from "자식컴포넌트위치 .vue까지 써주어야함";

@Component({
    components: {
        자식컴포넌트명 // 이곳에 적어줘야 사용가 - 당연하지만 컴포넌트명은 대문자로 시작,첫번째 단어와 두번째 단어의 시작은 대문자
    }
})
export default class extends Vue {
}
//그외적인 스크립트는 이곳에 적기
</script>

<style>
	/*스타일적을곳*/
</style>

도움받은곳 : https://leesoo7595.github.io/2020/03/31/TS_decorator/

#emit - 매개변수가 여러개 일때

// $emit() 보낼곳 - 자식
$emit('select-menu-item', $event, 1, 2, 3, 4, "cupcakes")

//받을곳 - 부모

<search-component @select-menu-item="selectMenuItem">
//실제 구성 요소 마크업에서는 인수를 추가할 필요가 없으며 괄호 없이 메서드에 대한 참조만 작성

selectMenuItem: function(evt, num1, num2, num3, num4, food){
	//스크립트에서 추가
}