Just Do It

컴포넌트를 막 사용하면 안되는 이유!먼저 지난 번에 배운대로 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..

PriorityQueue(우선순위 큐) 일반적으로 큐는 데이터를 일시적으로 쌓아두기 위한 자료구조로 스택과는 다르게 FIFO(First In First Out)의 구조, 즉 먼저 들어온 데이터가 먼저 나가는 구조를 가진다. PriorityQueue는 들어온 순서대로 데이터가 나가는 것이 아닌 우선순위를 결정하고, 그 우선순위가 높은 요소가 먼저 나가는 자료 구조이다. PriorityQueue의 특징 높은 우선순위의 요소를 먼저 꺼내서 처리하는 구조이다.(큐에 들어가는 원소는 비교가 가능한 기준이 있어야 함) 내부 요소는 힙으로 구성되어 이진트리 구조로 이루어져 있다. 내부 구조가 힙으로 구성되어 있기에 시간 복잡도는 O(nlogN)이다. 응급실과 같이 우선순위를 중요시해야 하는 상황에서 쓰인다. 사용예제..

getOrDefault 메서드란? getOrDefault(Object key, V DefaultValue) key가 존재한다면 찾는 key의 value를 반환하고, value가 없거나 null이면 default 값을 반환한다. 사용예제 import java.util.HashMap; public class practice { public static void main(String arg[]) { String [] strArr = { "a", "b", "c" ,"c" }; HashMap map = new HashMap(); for(String key : strArr) { map.put(key, map.getOrDefault(key, 0) + 1); } System.out.println("출력 결과 : " +..