이안의 평일코딩

Bootstrap getbootstrap.com/docs/5.0/getting-started/introduction/ Introduction Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with jsDelivr and a template starter page. getbootstrap.com 첫 번째 방법은 CSS와 JS를 index.html 에 아래와 같이 넣어주는 것이다. 하지만 항상 받아와야 되기 때문에 사이트가 느려질 수 있다. 그러므로 두 번째, 아예 설치하는 방법이다. getbootstrap.com/docs/5.0/getting-started/do..

Lifecycle(라이프사이클, 생명주기) 는 웹페이지에 표시되기까지 일련의 step을 거치는데 그 step을 라이프사이클이라고 한다. create단계는 데이터만 존재하는 단계, mount단계는 사이에 있던걸 실제 HTML로 바꿔주고 그 다음에 컴포넌트 생성단계에서 index.html에 장착한다. data가 변하면 가 재렌더링되는 update단계. 컴포넌트가 삭제되면 unmount단계. Hooks 라이프사이클(생명주기)은 Hook을 걸어서 중간에 원하는 코드를 실행가능하다. (예: mount 전에실행, update(재렌더링) 이전에 실행). lifecycle hook을 쓰려면 beforeCreate(), created(), beforeMount(), mounted(), beforeUpdate(), upd..

sort() sort()는 문자정렬이 된다. priceSort(){ var array = [3,5,2]; array.sort(); console.log(array); // [2, 3, 5] } 숫자정렬을 하려면 function(a,b)를 넣어 만든다. a - b가 음수면 a가 왼쪽으로 가면서 숫자 정렬이 된다. array.sort(function(a,b){ return a - b }); spread operator sort() 함수는 원본이 변형되므로 기존 데이터를 보존하기 위해서 spread operator [... 데이터]를 사용한다. 그러면 array/object 데이터의 각각 별개의 사본을 만들 수 있다. [...array자료] spread operator를 사용하지 않으면 같은 값을 공유한다. ..

UI 애니메이션 애니메이션 시작 전 class(start)를 디자인하고 동작 후 class(end)를 디자인한다. 그리고 원할 때 애니메이션 동작 후 class를 부착한다. 시작 전 class 명에 transition 속성을 주면 부드럽게 애니메이션이 완성된다. CSS 먼저 애니메이션 주고싶은 요소를 으로 감싼다. .작명-enter-from{시작스타일} .작명-enter-active{transition} .작명-enter-to{끝날때스타일}로 3개를 작성한다. 태그 이용 .fade-enter-from { transform: translateY(-150px); } .fade-enter-active { transition: all 0.3s; } .fade-enter-to { transform: transla..

이벤트리스너 에 입력한 값을 데이터로 저장하려면 사용자 입력 값을 저장하기 위해 v-model @input="month = $event.target.value">를 v-model을 이용해서 축약할 수 있다. (@input, @onchange...) 사용자가 에 입력한 것은 전부 문자자료형이기 때문에 숫자로 변경시켜주려면 v-model.number로 해주면 된다. {{month}}개월 : {{oneroom[clicked].price * month}} 원 닫기 watcher input에 문자입력하면 경고문을 띄우고 싶을 때 data를 감시하는 함수인 watcher를 쓰면 된다. month(a, b)라면 a는 변경 후 데이터를 가리키고 b는 변경 전 데이터를 말한다. 에 글자 입력하면 alert()를 띄우려면..

Component 컴포넌트 문법은 재사용이 간단하고 반복적으로 출현할 부분 컴포넌트화 권장된다. 다른 곳에서 쓸 것 같거나 라우터로 나눌 페이지 혹은 HTML이 너무 길어서 복잡할 때 사용한다. Vue파일을 만들고 에 축약할 HTML을 넣은 뒤 먼저 vue파일을 props 부모가 가진 데이터를 자식이 쓰고 싶을 때 사용한다. 데이터는 보통 한 곳에 보관하고 props를 통해 필요할 때 가져다 쓴다. 먼저 부모에서 로 데이터를 보내고 자식은 props:{데이터이름:자료형이름}으로 등록하고(자료형 Object, Array, String, Number,...) 사용하면 된다. props는 read-only이기 때문에 받아온 것을 수정하면 오류가 난다. 하위 자식컴포넌트에만 필요하면 자식에 데이터를 만들면 되긴..

Router 라우터란 웹페이지 간의 이동하는 방법을 말한다. 리액트, 뷰, 앵귤러 모두 라우팅을 이용해서 화면을 갱신한다. npm install vue-router@4 또는 yarn add vue-router@4 main.js는 가장 먼저 실행되는 javascript 파일이며, 먼저 router를 import해와서 use에 넣어줍니다. src/main.js import { createApp } from 'vue' import App from './App.vue' import router from './router.js'; createApp(App).use(router).mount('#app') 라우터를 사용하기 위해 router.js를 만든다. src/router.js import { createWebH..

이벤트 핸들러 자바스크립트 전통방식은 onclick=""이지만 Vue에서는 v-on:click=""를 사용한다. 또는 @click=""를 쓴다. (@mouseover (마우스를 가져다 댈 때), @input 등등) 아이폰12 중고 80만원 허위매물신고 신고수 : {{count}} 또는 함수로 만들어서 넣어줄 수 있는데, 함수는 그리고 동적인 UI를 만들 때 UI 상태를 저장해둘 데이터를 먼저 만들고 데이터에 따라 HTML 어떻게 보일지 @click 등으로 UI 조작하는 버튼을 만들면 된다. {{oneroom[clicked].title}} // 3) 동적으로 UI가 작용 {{oneroom[clicked].content}} 닫기 {{a}} {{a.title}} // 2) 클릭했을 때 clicked에 해당하는..