[vue.js] vue 기능 공부 및 약간의 적용

이해한 바를 간단히 적은 문서로 보다 정확한 정보는 공식문서 참고 바람

 

공식문서 : 무려 한글이 지원된다!

https://v2.ko.vuejs.org/v2/guide

 

 

----- ----- ----- ----- -----

 

 

 

 

 

vue는 js기반의 프레임워크로,

사용자 인터페이스를 만들기 위한 프로그레시브 프레임워크이다

 

 

이동이나 화면 전환이 자연스럽고, Vue 엘리먼트가 Vue에 삽입/업데이트/제거될 때

자동으로 트랜지션 효과를 적용하는 전환 효과 시스템을 제공하여

유저에게 깔끔하고 자연스러운 사용 경험을 줄 수 있다.

 

vue를 사용한 웹페이지로는  대표적으로 네이버vibe 웹페이지가 있다

 

 

 

다른 js 프레임워크에 비해 문법이나 사용법이 간단한 편이지만

공식문서에도 적혀있듯 html css에 대한 중급 이상의 이해도가 필요하다고 한다.

 

 

 

 

 

 

1 vue 파일의 기본 구성은 html / script / css 로 구성된다.

 

$router , $store 등으로 원하는 api를 요청하고 내용을 fetch해오거나,

새로운 api를 적용하는 등의 기능을 구현할 수 있다.

 

 

 

 

 

2 vue의 옵션들

vue에서 지원되는 여러 직관적인 기능들이 있다.

 

 

 

 

v-bind로 html에 바인딩. 해당 위치에 html에 적용할 내용을 넣어주거나, 속성을 적용할 수 있다.

 

 

조건문과 반복문을 사용할 수 있고

v-if v-for

 

 

v-on으로 사용자가 앱과 상호작용하는 버튼 등을 형성할 수 있다.

 

 

컴포넌트를 사용한 작성방법..

독립적인 인스턴스와 트리를 만들어 적용할 수 있는 컴포넌트 시스템을 지원하는데,

독립적인 컴포넌트를 정의하고 다른 컴포넌트의 템플릿에서 가져다 사용할 수 있다.

 

 

 

 

 

이해에 시간이 필요하고, vue만의 약속과 여러 기능들을 지원하지만

다른 여러 컴퓨터언어들 처럼 함수를 정의하고 조건을 설정하여 적용하는 로직이 들어간다는 점은 다르지 않다:)

 

 

 

---

 

 

 

텍스트 필드에 값이 없거나 blank인 경우 alert 적용하기

 

 

 

일단 조건문을 작성하자

 

if () 안에 조건문을 작성할 수 있고, 추가 if 문은 {} 뒤에 붙여서 작성하면 된다.

else문도 마찬가지지만 조건을 작성하지는 않는다

 

 

if (text) { if문 True시 조건} if () {} else

 

if (text === null) { 
  if문 True시 조건
} if (text === "") {
  2번째 if문 시 조건
} else { 위의 if 문이 둘다 false일때 조건 }

 

 

 

 

 

이 기능이 적용되길 원하는 함수에 js 문법에 맞추어 if ( or ) 조건문을 작성하였다.

js에서는   || 가 or,      && and   임

 

 

 

vue에서는 alert를 따로 호출하지 않고 사용할 수 있는 듯 하다

 

alert 만 넣으면 이후 함수가 계속 실행되니,

return문을 사용해 error를 발생시키도록 한다.

 

export default {
    ...
    methods: {
        async createConversation() {
        try {
            if (!this.text || this.text==="") {
                alert("하고싶은 말을 적어주세요:)");
                return response.error
            }

 

 

 

 

찾아보니 입력창에 텍스트가 없는 경우

:disalbed를 사용해 TextValue가 없을 경우의 조건을 걸어줄 수도 있지만,

버튼 비활성화 기능을 사용하기 위해 다른 방법을 택했다.

 

 

 

 

---

 

 

 

 

어떤 함수가 실행되는 동안 시간을 두고 기다려야하고,

그 사이에 요청이 중복으로 보내지지 않도록 버튼을 비활성화 하는 기능을 구현했다.

 

 

 

textarea는 사용자가 텍스트를 입력하는 부분, button이 입력 버튼!

 

<textarea autocomplete="off" v-model="text" @keyup.enter="createConversation()"></textarea>
<button @click="createConversation()" :disabled="isDisabled">입 력</button>

 

 

 

 

버튼에 :disabled="isDisabled"를 적용하였고,

export default 의 data 부분(기본값)에 isDisabled를 false로 설정하여 두었다.

 

data() {
    return {
        text: '',
        conversation: [],
	...
        isDisabled: false
    }
},

 

 

 

 

 

마찬가지로 export default의  methods에서

기능이 필요한 함수에 If문을 작성하여, 함수가 실행되는 동안 버튼을 비활성화 하도록 했다.

 

 

 

함수가 실행되면 isDisabled가 true 값으로 변환되며 요청시간동안 버튼을 눌러도 요청이 전송되지 않는다

 

export default {
    ...
    methods: {
        async createConversation() {
        try {
            if (this.isCreateConversation) return;
            this.isDisabled = true;
            # console.log("요청 전송?")

 

 

 

 

이후 함수의 마지막에 finally를 넣어주고, isDisabled를 다시 false로 바꾸어

버튼을 활성화 시켜준다

 

const response = await fetchMeetAICreate(this.text);
if (response.status === 200) {
    ...
    }
} catch (error) {
    if (error.response.status === 500) {
        alert('잠시 후 다시 시도해 주세요!')
    }
} finally {
    this.isDisabled = false;
}

 

 

---

 

 

이 외에도 .once로 한 번만 작동하는 버튼 만들기 

• v-on:click.once
  

함수 실행 후 버튼을 비 활성화 등도 가능함

(위에 작성한 것에서 finally 부분을 제거하면 얼추 된다)

 

 

 

[출처] [ vue.js ] @click 함수, 클릭 이벤트 발생 시 API 호출 1번만 하기