[패스트캠퍼스 수강후기] 프론트엔드 강의 61회차 미션

드디어 마지막 강의날!

내가 최근에 뭘 이렇게 61일동안, 두달이 넘게 꾸준히 한 적이 없었는데 뿌듯하다.

 

지난번에 문의했던 38강 타입스크립트 강의에서 코드 예시를 보고 싶다고 메일을 보냈었는데

갑자기 강의자료에 올라왔다

나중에 그 강의는 다시 한 번 봐야겠다!

 

오늘도 41강 UI 컴포넌트 제작부분 21번째 클립부터 마지막까지 수강했다

 

ToastPopup트랜지션

success일때 토스트팝업이 뜨도록  애니메이션 효과 구현하기

<예시>

<app.vue>

<template>

  <div>

    <form v-on:submit.prevent="submitform">

      <div>

        <label for="username">ID: </label>

        <input id="username" type="text" v-model="username" 

          class="username-input error"

          v-bind:class= "{'error': isError }">//여기 추가

          //class="username-input"

          //v-bind:class= "{'error': false }"> //false면 이렇게  

          //class="username-input error"

          //v-bind:class= "{'error': true }">//여기 추가

      </div>

      <div>

         <lavel for="password">PW: </label>

         <input id="password" type="password" v-model="password">  

      </div>

      <button v-bin:disabled="!isUsernameValid" type="submit">로그인</button> //맞을때만 로그인버튼을 

    </form>                                                                                   클릭할 수 있게 되어잇

    <p v-if="isSuccess">로그인되었습니다.</p>

    <!--<p v-if="isError">올바르지 않은 ID입니다</p> //올바르지않은 아이디폼 #등을 입력하면 자동으로 뜸

    <p v-if="isUsernameValid">이메일 형식이 맞습니다</P>-->

    <ToastPopup v-bind:open="isSuccess"></ToastPopup> //대소문자 구분은 안함, toast-popup써도 인식은 함

  </div>

    

</template>

 

<script>

//vim치면 자동으로 import쓸 수 있는 명령어 생성

import ToastPopup from '@/components/toastpopup.vue';

//이메일 형식 체크함수

function validateEmail(email) {

    const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

    return re.test(String(email).toLowerCase());

}

export default {

 components: { /

    'ToastPopup': ToastPopup //문자열: 변수, 문자열에 ''생략가능, toastpopup만 써도 됨

 },

 data() {

     return {

         username: '',

         password: '',

         isError: false,

         isSuccess: false

     };

 },

 computed:{

   isUsernameValid() {

     return validateEmail(this.username);

   }

 },

 methods: {

   submitForm(event) {

     //event.preventDefault();

     console.log('로그인';)

     axios. post();

     //axios

     //  .post()

     //  .then()

     //  .catch(error => {

     //      this.isError = true;

     //  });

     this.isError = true;

     this.initForm(); 

   },

   initForm() { //로그인이 되면 지워짐

       this.username = '';

       this.password = '';

   }   

 }

};

 

</script>

<style scoped> //scoped 현재 컴포넌트에만 적용

 .usename-input {

     outline: none;

 }

 .username-input.error{

     border: 1px solid red;

 }

</style>

 

<toastpopup.vue>

<template>

 <div class="toast">토스트 팝업</div>  

</template>

 

<script>

export default {

 props: {"open"},

 watch: {

     open(newValue) {

         if (newValue) {

             console.log("토스트 팝업 열기");

         }

     }

 }

};

</script>

<style scoped> //현재 컴포넌트만

 .toast {

         width: 200px;

         height: 50px;

         background-color: black;

         color: white;

         display: flex;

         justify-content: center;

         align-items: center;

         position: fixed;

         bottom: -5%;

         left: 5%;

         transition: bottom 1s linear; //크롬개발자환경에서 미리 보기

 }

        .open {

            bottom: 5%;

        }

</style>

ToastPopup 구현 마무리

<예시>

<app.vue>

<template>

  <div>

    <form v-on:submit.prevent="submitform">

      <div>

        <label for="username">ID: </label>

        <input id="username" type="text" v-model="username" 

          class="username-input error"

          v-bind:class= "{'error': isError }">//여기 추가

          //class="username-input"

          //v-bind:class= "{'error': false }"> //false면 이렇게  

          //class="username-input error"

          //v-bind:class= "{'error': true }">//여기 추가

      </div>

      <div>

         <lavel for="password">PW: </label>

         <input id="password" type="password" v-model="password">  

      </div>

      <button v-bin:disabled="!isUsernameValid" type="submit">로그인</button> //맞을때만 로그인버튼을 

    </form>                                                                                   클릭할 수 있게 되어잇

    <p v-if="isSuccess">로그인되었습니다.</p>

    <!--<p v-if="isError">올바르지 않은 ID입니다</p> //올바르지않은 아이디폼 #등을 입력하면 자동으로 뜸

    <p v-if="isUsernameValid">이메일 형식이 맞습니다</P>-->   

   <ToastPopup 

      v-bind:open="isSuccess"

      v-on:close="isSuccess = false"></ToastPopup>

  </div>

    

</template>

 

<script>

//vim치면 자동으로 import쓸 수 있는 명령어 생성

import ToastPopup from '@/components/toastpopup.vue';

//이메일 형식 체크함수

function validateEmail(email) {

    const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

    return re.test(String(email).toLowerCase());

}

export default {

 components: { /

    'ToastPopup': ToastPopup //문자열: 변수, 문자열에 ''생략가능, toastpopup만 써도 됨

 },

 data() {

     return {

         username: '',

         password: '',

         isError: false,

         isSuccess: false

     };

 },

 computed:{

   isUsernameValid() {

     return validateEmail(this.username);

   }

 },

 methods: {

   submitForm(event) {

     //event.preventDefault();

     console.log('로그인';)

     axios. post();

     //axios

     //  .post()

     //  .then()

     //  .catch(error => {

     //      this.isError = true;

     //  });

     this.isError = true;

     this.initForm(); 

   },

   initForm() { //로그인이 되면 지워짐

       this.username = '';

       this.password = '';

   }   

 }

};

 

</script>

<style scoped> //scoped 현재 컴포넌트에만 적용

 .usename-input {

     outline: none;

 }

 .username-input.error{

     border: 1px solid red;

 }

</style>

 

<toastpopup.vue>

<template>

 <div class="toast" v-bind:class="{'animation': open}">로그인이 완료되었습니다</div> //아래에 있는 animation  

</template>

 

<script>

let timer;

export default {

 props: {"open"},

 watch: {

     open(newValue) {

         if (newValue) {

             console.log("토스트 팝업 열기");

             clearTimeout(timer);

             timer = setTimeout(()=> this.$emit('close'), 2000); / 보내기             

         }

     }

 }

};

</script>

 

<style scoped> //현재 컴포넌트만

 .toast {

         width: 200px;

         height: 50px;

         background-color: black;

         color: white;

         display: flex;

         justify-content: center;

         align-items: center;

         position: fixed;

         bottom: -5%;

         left: 5%; !

         transition: bottom 1s linear;

        

 }

        .animation {

            bottom: 5%;

        }

 

</style>

 

ProgressBar 소개 및 컴포넌트 등록

로딩바 라고도 함

이렇게 녹색바가 움직임

<예시>

<app.vue>

<template>

  <div>

    <ProgressBar></ProgressBar>

    <form v-on:submit.prevent="submitform">

      <div>

        <label for="username">ID: </label>

        <input id="username" type="text" v-model="username" 

          class="username-input error"

          v-bind:class= "{'error': isError }">//여기 추가

          //class="username-input"

          //v-bind:class= "{'error': false }"> //false면 이렇게  

          //class="username-input error"

          //v-bind:class= "{'error': true }">//여기 추가

      </div>

      <div>

         <lavel for="password">PW: </label>

         <input id="password" type="password" v-model="password">  

      </div>

      <button v-bin:disabled="!isUsernameValid" type="submit">로그인</button> //맞을때만 로그인버튼을 

    </form>                                                                                   클릭할 수 있게 되어잇

    <p v-if="isSuccess">로그인되었습니다.</p>

    <!--<p v-if="isError">올바르지 않은 ID입니다</p> //올바르지않은 아이디폼 #등을 입력하면 자동으로 뜸

    <p v-if="isUsernameValid">이메일 형식이 맞습니다</P>-->   

   <ToastPopup 

      v-bind:open="isSuccess"

      v-on:close="isSuccess = false"></ToastPopup>

  </div>

    

</template>

 

<script>

//vim치면 자동으로 import쓸 수 있는 명령어 생성

import ProgressBar from "@/components/progressbar.vue";

import ToastPopup from '@/components/toastpopup.vue';

//이메일 형식 체크함수

function validateEmail(email) {

    const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

    return re.test(String(email).toLowerCase());

}

export default {

 components: { 

    ToastPopup,     

    ProgressBar

 },

 data() {

     return {

         username: '',

         password: '',

         isError: false,

         isSuccess: false

     };

 },

 computed:{

   isUsernameValid() {

     return validateEmail(this.username);

   }

 },

 methods: {

   submitForm(event) {

     //event.preventDefault();

     console.log('로그인';)

     axios. post();

     //axios

     //  .post()

     //  .then()

     //  .catch(error => {

     //      this.isError = true;

     //  });

     this.isError = true;

     this.initForm(); 

   },

   initForm() { //로그인이 되면 지워짐

       this.username = '';

       this.password = '';

   }   

 }

};

 

</script>

<style scoped> //scoped 현재 컴포넌트에만 적용

 .usename-input {

     outline: none;

 }

 .username-input.error{

     border: 1px solid red;

 }

</style>

 

[ProgressBar.vue]

<template>

  <div>hi</div>

</template>

 

<script>

export default {};

</script>

 

<style>

 

</style>

 

ProgressBar 애니메이션 구현

<예시>

[ProgressBar.vue]

<template>

  <div class="progress"></div>

</template>

 

<script>

export default {};

</script>

 

<style scoped>

 .progress {

     height: 5px;

     background: lime;

     width: 0%; //이게 증가할 수록, 퍼센티지가 변함

     /*transition: width 700ms linear;*/

     animation: loading 1s linear;

 }

 /*.complete {

     width: 100%;

 }*/

 //transition은 한단계 변화, animation은 점차적으로 변화

 @keyframes loading{ //애니메이션의 구체적인 설정을 하는 keyframe

     0% {

         width: 0%;

     }

     50% {

         width: 50%;

     }

     100% {

         width: 100%;

     }

 }

</style>

https://bit.ly/3g7RJpi

프론트엔드 개발 올인원 패키지 with React Online. | 패스트캠퍼스