[Vuetify] 동기,비동기,

동기 방식과 비동기 방식

동기 방식

순차적으로 진행이 되어야 하는 것으로

서버에 요청을 보낼시 응답이 돌아와야 다음 작업이 수행 가능함

 

비동기 방식

요청을 보낼때 응답 상태와 무관하게 다음 동작을 수행할 수 있으며

결과값이 나오는 것과 별개로 아래의 코드들이 실행된다

 

예를들어, setTimeout() 메소드를 생각해보면,

비동기 APi 이며, 첫번째 인자는 콜백 함수를 사용하며,

두번째 인자는 지연시간이다

두번째 인자가 0 이기에 1 -> 2 -> 3 으로 출력될거라 생각할 수도 있다

 

console.log("1");
	setTimeout( () => {
    	console.log("2");
        }, 0);
console.log("3");

 

하지만, 비동기 메소드는 이를 처리하는 다른 프로그램이 담당하기에,

1 -> 3 -> 2로 실행되게 된다

 

즉, setTimeout() 메소드를 처리하는 프로그램은 비동기적 API 를 제외한 모든 코드가 실행된 이후 결과를 콘솔에 출력한다

 

다시말해, 비동기 코드의 실행 결과는 동기적 코드가 전부 실행되고나서 값을 반환하게 된다

 

효율성면에서는, 동기적 코드가 비동기보다 직관적이지만,

결과가 필요한 코드에서는 대기 시간이 필요한 문제가 발생할 수도 있다.

 

그렇기에 비동기는 동기보다는 복잡하지만, 결과가 주어지는데로 다른 시간동안 다른 작업을 수행하면서 기다리지 않고 코드를 실행시켜 나가므로 효율적이다.

 

자바스크립트에서는 위의 동기, 비동기 개념을 사용을 자주 하게 된다.

 

 

---

Vuetify에서 v-text-field에 유효성 규칙 넣기

• 이메일의 유효성 검사를 하려고 하는데
• :rules에 가져올 규칙이름을 넣을 수 있다 -> validate를 적용 가능
• form input에서 validation을 제공
• 실시간 검증을 하기위해서는 비동기적으로 구현해야함
• email v-text field 규칙을 data에 배열 형식으로 만들기
• v : 필드에 들어간 데이터
• !!v : 필드에 데이터가 없을 때
• replace(/(\s*)/g, '') : 필드에 들어간 모든 빈칸을 제거 ( password 같은 경우 이렇게 사용)
• 필드에 빈칸이 들어가게되면 데이터 유효성 검사를 제대로 못 할 경우가 생길 수 있다!!
• pattern : 이메일 정규식으로 만들어 적용

설정한 후 유효성 체크를 모두 거치고 submit 해야함

 

<코드 1>

methods:{
    async login(){
      const validate = this.$refs.form.validate()
      if (validate){
        const email = this.email.replace(/(\s*)/g, '')
        const password = this.password.replace(/(\s*)/g, '')
        await this.$store.dispatch('LOGIN', { email, password, saveLogin:this.autoLoginCheckBox })
      }
    }
  }

 

 

위와 같이

전체 템플릿에 v-form 태그에 reff= "form" 을 넣어주거나,

<v-form
ref="form"
@submit.prevent="login"
>

    <v-col cols="12" md="12">
      <v-card-actions>
        <v-spacer></v-spacer>
        <v-btn
          color="grey darken-3"
          @click="dataChunk"
          outlined
          depressed
          large
          :loading="this.$store.state.RPAStore.SearchLoading"
          type="submit"
          :disabled="invalid"
          ><v-icon right dark> mdi-file-search </v-icon>
          검색 하기
        </v-btn>
      </v-card-actions>
    </v-col>
  </v-row>
</template>

이런식으로 템플릿 하단에 검색하기 버튼을 만들어주고, type을 submit으로 만들어서, 

 

필요한 데이터들은,

  methods: {
    ...mapActions(["EseroParser"]),

    searchData() {
      console.log("dataChunk 검색");
      let parameter = {
        email: this.email,
        date_from: this.date,
        date_to: this.date2,
      };
      this.dataParser(parameter);
    },
  },
};
</script>

이렇게, email 과 입력 받은 데이터들은 dataParser 로 보내주게 설정합니다.

 

참고로, dataParser 는 store 에서 설정한 actions로 추후 설명에 남기도록 하겠습니다.

 

 

아무튼, <코드 1>에 의해서, validate 을 만들고,

this.$refs.form.validate()가 true인지 false인지 확인 후 true일때 submit을 하도록 if문을 걸어주어 실행하면 됩니다

 

 

공부해야할 것

- await  와 async 방식을 통해서 이메일 검증하는 방식

- 비동기적 통신을 좀 더 효과적으로 할 수 있는 방식

- promise 형태의 통신 방식

- vuetify의 기능을 최적화에 맞춰서 사용하는 방식등

- vuelidate 혹은 vee-validate 이라는 툴 사용 방법 등(npm 사용 - 따로 설치해야함)

 

아직 개발자로서 배울 것들이 수없이 많음을 느끼는 하루..

 

 

커피 마시면서 계속 정리해나가야지..