HAN STORY

✔️ Lifecycle Diagram Vue.js 의 Lifecycle 은 CREATE 단계 → MOUNT 단계 → 컴포넌트 생성   → UPDATE 단계   → UNMOUNT 단계  를 거친다. 이 중간에 hook 을 걸어서 액션을 취할 수도 있다. 예를 들어서 배너 하나가 띄워진 후에 mount 된 2초 후에 배너를 없애고 싶다면  data() { return { onerooms_original: [...data], onerooms: data, user_clicked: 0, modal_status: false, discount_status: true, menus: ['Home', 'Shop', 'About'], warn_count:..

✔️ UI 애니메이션 주기.start { opacity: 0; transition: all 1s;}.end { opacity: 1;} start 와 end css 코드를 작성해놓고  위처럼 Modal Component 를 div 로 감싸 초기 class 상태를 start 로 만들어주고, :class 를 활용해 modal_status 가 true 일 때만 end class 를 붙여주도록 조건부를 달아줄 수 있다. vue 에서 제공하는 태그가 있는데,  이렇게 transition 태그로 감싸주고 name 에 작명을 해준다. 이후 아래에 style 태그에서.fade-enter-from { 시작 시 스타일}.fade-enter-active { 동작}.fade-enter-to {..

✔️ 사용자의 input 을 받는 법 data() { return { month : 1 } 데이터에 input 에 입력받을 변수를 추가하고,   input 에 값이 입력되면 자동으로 그 값이 month 변수에 저장되도록 설정을 할 수 있다.  더 축약해서 위처럼 줄일 수 있다. textarea, select 태그 등에도 사용할 수 있다. ※ data 에서 초기값에 따라서 해당 변수에 어떤 값이 들어올지 정하는 것이기 때문에, 지금 상황에서 input 태그 안에 문자를 넣으면 인식을 안한다. v-model.number 를 사용해서 숫자로 취급할 수 있다.✔️ watch 를 사용해 데이터 감시데이터가 올바른 값이 들어왔는지 검사하기 위해 watch 를 사용한다. ..

💡 Component 만들기Component 를 만들어서 코드를 간결화 시킬 수 있다.파일 분리를 통해 유지보수가 더 쉬워진다.하지만 Component 를 만들면 기존에 data 를 바인딩 하는 과정에서 필연적으로 더 복잡해질 수 밖에 없다는 단점이 있다.  1. Discount.vue 이름으로 파일을 만들어준다.  지금 결제하면 20% 할인  기본 템플릿을 이 vue 파일에 역시 만들어준 후에 template 태그 안에 넣고 싶은 HTML 코드를 넣어준다. export default 안에 name 도 설정을 해준다.  2. App.vue 설정하기 import Discount from './components/Discount.vue'; 해당 Discount 파일을 사용하기 위해..