Just Do It

지난 시간에 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", ..

이미지 넣기상대경로 이미지 넣을 때는 src 폴더 아래 이미지 파일을 저장해두고 div>    img src="./assets/room0.jpg" class="room-img">    h4>{{ products[0] }}h4>    p>50 만원p>    button @click="increase">허위매물신고button> span>신고수 : {{ 신고수[0] }}span>  div>  div>--> ./ (현재 경로라는 의미)로 시작하는 경로를 적어준다. 모달창 만들기동적인 UI 만드는 법 0. HTML CSS로 디자인 하기1. UI의 현재 상태를 데이터로 저장하기2. 데이터에 따라 UI가 어떻게 보일지 작성하기차례대로 해보자.0. HTML CSS로 디자인 하기  div class="black-bg">..

이벤트 핸들러 : HTML 클릭시 코드 실행하는 것  div>    h4>{{ products[0] }}h4>    p>50 만원p>    button v-on:click="자바스크립트~~">허위매물신고button> span>신고수 : 0span>  div>--> v-on:click="자바스크립트" 혹은 @click="자바스크립트" 로 사용하면 된다.이 때 신고수는 중요 데이터니까 밑에 정의해주자.export default {  name: 'App',  data() {    return {      신고수 : 0,      메뉴들 : ['Home', 'Shop', 'About'],      products : ['역삼동원룸', '천호동원룸', '마포구원룸']    }  },  components: {  ..

v-for 문법을 쓰면 반복이 가능하다.template>   div class="menu">    a v-for="aaa in 3" :key="aaa">Homea>  div>template>--> aaa in 3 에서 aaa는 내가 정의한 변수 이름이고, 3은 3번 만큼 반복하라는 의미이다.그런데 이렇게 하면 문제가 생긴다. 똑같은 Home만 3개가 생기는 것, 해결 방법은?저 3 자리에 내가 정의한 데이터를 넣을 수 있다. export default {  name: 'App',  data() {    return {      메뉴들 : ['Home', 'Shop', 'About'],      products : ['역삼동원룸', '천호동원룸', '마포구원룸']    }  },  components: {..

데이터 바인딩 : JS 데이터를 HTML에 꽂아 넣는 문법1. 쌩자바스크립트 스타일 데이터 바인딩document.getElementById().innerHTML = ??2. 뷰 데이터 바인딩{{ 데이터 이름  }}ex )export default {  name: 'App',  data() {    return {      price1 : 60    }  },  components: {  }}--> 데이터를 이렇게 저장해놓고 template>  div>    h4>XX 원룸h4>    p>{{ price1 }} 만원p>  div>  div>    h4>XX 원룸h4>    p>XX 만원p>  div>template>--> {{ }} 안에 변수 이름을 써주면 끝! * 이 문법을 왜, 언제 쓰는가?1. HTM..

HTTP의 약점 평문(암호화하지 않은) 통신이기 때문에 도청 가능 통신 상대를 확인하지 않기 때문에 위장 가능 완전성을 증명할 수 없기 때문에 변조 가능 평문이기 때문에 도청 가능 TCP/IP 구조의 통신 내용은 전부 통신 경로의 도중에 엿볼 수 있다. 암호화된 통신도, 암호화되지 않은 통신도 모두 엿볼 수 있다. 암호화된 통신은 메세지 속의 의미는 간파할 수 없어도 암호화된 메세지 자체는 엿볼 수 있다. 도청으로부터 정보를 지키기 위한 방법 중 가장 보급되어 있는 기술은 암호화이다. 1. 통신 암호화 - SSL, TLS라는 다른 프로토콜을 조합해서 HTTP의 통신 내용을 암호화 할 수 있다. - SSL 등을 통해 안전한 통신로를 확립하고 나서 그 통신로를 사용해 HTTP 통신을 한다. - SSL을 조합..