Just Do It

할인 배너를 2초 후에 자동으로 사라지게 하는 기능을 만들어보자.이때 알아야 하는 개념이 Lifecycle 컴포넌트는 웹페이지에 표시되기까지 일련의 step을 거친다. 그 step을 라이프사이클이라고 한다.create 단계 -> mount 단계 -> 컴포넌트 생성 -> update 단계 -> unmount 단계Lifecycle Hook을 걸어서 중간에 원하는 코드를 실행 가능하다. 1. 컴포넌트를 보여줄 때 create -> mount 이 단계로 생성됩니다.      create는 데이터생성, mount는 index.html 파일에 장착 이렇게 생각하시면 됩니다. 2. 데이터가 바뀌어서 컴포넌트가 재렌더링될 때는 update 단계를 거치며3. 다른 페이지로 이동하거나, 컴포넌트가 삭제될 때는 unmoun..

원룸의 가격순대로 데이터를 정렬해보자.button>가격순정렬button>--> 먼저 클릭하면 가격순으로 정렬되는 버튼을 하나 만들어보자.button @click="priceSort">가격순정렬button>--> 그리고 정렬하는 함수를 생성한다.     priceSort() {      var array = [3,5,2];      array.sort(function(a,b){        return a-b      });    }--> 정렬을 하기 앞서 잠깐 sort() 문법을 정리해보자. sort()는 말 그대로 정렬해주는 함수이다.그런데 여기서 3,5,2는 숫자가 아닌 문자로 인식이 되기 때문에 숫자로 정렬을 하려면 위와 같이 function을 사용해야한다.sort 안에서 위 코드는 'a-b가 음수..

모달창이 열릴 때 애니메이션 효과를 줘보자기존 css로 만드는 법style>.start {  opacity: 0;  Transition: all 1s;}.end {  opacity: 1;}--> style을 주고  div class="start" :class="{ end : modalOpen }">    Modal @closeModal="modalOpen=false;" :원룸들="원룸들" :누름="누름" :modalOpen="modalOpen" />  div>--> class명 넣어주면 끝!      class명을 조건부로 넣으려면 { 클래스명 : 조건 } 으로 사용하면 된다.    :class="{ end : modalOpen }"은  modalOpen이 true 면 end를 클래스명에 넣어라. 라는 ..

지난 시간에 만들었던 input에 사용자가 숫자가 아닌 문자를 입력할 경우 제재를 가하는 코드를 짜보자.input에 문자를 입력하면 경고문을 띄우고 싶다 -> watcher를 사용하면 된다. (데이터를 감시하는 친구)script>export default {    data() {        return {            month : 1,        }    },    watch : {        month() {                    }    },}script>--> watch : { 감시할데이터(){} } / 감시할데이터가 변할 때 마다 안에 있는 코드가 계속 실행된다.     함수 이름은 위에 있는 데이터 이름으로 만들어야 한다.     watch : {        mont..

모달창 안에 사용자가 살고자 하는 개월 수를 입력하는 칸을 만들어보자. (Model.vue에서 진행)input @change="">input @input="">--> @change는 입력하고 커서를 다른 곳에 찍으면 실행해주세요. 라는 의미이고,     @input은 입력할 때마다 실행해주세요. 라는 의미이다.사용자가 input 에 입력한 값을 데이터로 저장하려면 먼저 저장할 공간을 만들어준다.export default {    name: 'Modal_',    data() {        return {            month : 1,        }    },    props: {        원룸들 : Array,        누름 : Number,        modalOpen : Bool..

지난 시간에 props로 받아온 데이터를 자식 컴포넌트에서 수정할 수 없어서 모달창을 열 수가 없었다. 이것을 해결해보자!가장 쉬운 해결 방법은? 그냥 컴포넌트에 이벤트를 주는 것이다.Card @click="modalOpen=true; 누름=i" :원룸="원룸들[i]" v-for="(원룸,i) in 원룸들" :key="원룸" />--> 그런데 이렇게 하면 제목을 누르든, 이미지를 누르든, 가격을 누르든 모두 모달창이 열리게 된다. (이벤트 버블링 현상에 의해) 나는 제목을 클릭했을 경우에만 모달창이 열리게 하고 싶다. 그렇다면?custom event 를 사용한다.부모 컴포넌트에게 몇 가지 정보와 함께 데이터를 수정해달라는 메세지를 보낸다고 생각하면 된다. template>    div>    img :s..

컴포넌트를 막 사용하면 안되는 이유!먼저 지난 번에 배운대로 Modal을 Component로 만들었다.template>    div class="black-bg" v-if="modalOpen == true">    div class="white-bg">        h4>{{ 원룸들[누름].title }}h4>        p>>{{ 원룸들[누름].content }}p>        p>>{{ 원룸들[누름].price }}원p>        button @click="modalOpen = false">닫기button>    div>  div>template>script>export default {    name: 'Modal_',}script>style>style>--> 여기서 문제는 '원룸들', '누..

Component가 무엇일까?: 긴 HTML을 한 단어롤 줄일 수 있는 문법이라고 간단히 생각하면 된다. 먼저 새 vue 파일 하나를 만든다.--> Discount.vue 라는 이름으로 컴포넌트를 하나 만들었다.모든 vue 파일은 같은 구조를 갖는다.template>template>script>export default { }script>style>style>--> template, script, style로 된 구조 template 안에 필요한 html을 작성해주고,template>  div class="discount">    h4>지금 결제하면 20% 할인h4>  div>template>script>export default { name: 'Dis_count',}script>style>style>-..

현재 상태는 제목을 누르면 모달창이 켜지고, 모달창 안 상세페이지가 모두 같은 상황여기에 상세 페이지를 다르게 적용해보자.  data() {    return {      누름 : 0,      원룸들 : data,      modalOpen : false,      신고수 : [0,0,0],      메뉴들 : ['Home', 'Shop', 'About'],      products : ['역삼동원룸', '천호동원룸', '마포구원룸']    }  },--> 먼저 '누름' 데이터 생성한다. (각 항목에 해당하는 상세 페이지가 떠야해서 데이터부터 생성함)--> 원룸들 : data  그리고 위로 올라가서  div v-for="(product,i) in 원룸들" :key="i">    img :src="pro..

다른 파일에 있는 데이터를 가져올 때 사용하는 import / export먼저 상품 정보가 담긴 데이터 파일을 만들어주자.oneroom.jsexport default[{    id : 0,    title: "Sinrim station 30 meters away",    image: "https://codingapple1.github.io/vue/room0.jpg",    content: "18년 신축공사한 남향 원룸 ☀️, 공기청정기 제공",    price: 340000    },    {    id : 1,    title: "Changdong Aurora Bedroom(Queen-size)",    image: "https://codingapple1.github.io/vue/room1.jpg", ..