dev_0hoon

작업하던 App.vue 파일 그대로 올리는게 아니라build용 파일을 생성하신 후 올려야 한다.왜냐고요? 웹브라우저는 HTML CSS JS 이 세개의 언어만 해석할 수 있습니다. 브라우저는 .vue파일그런거 읽을 줄 모름 npm run buildVue 프로젝트 폴더 내에 dist 라는 폴더가 하나 생성된다. 깃 허브에 내아이디.github.io 라는 레퍼지토리를 만든다. vue build를 해서 만들어진 작고 소중한 dist폴더 내부의 모든 파일을 넣어준다. 이제 10분 뒤 정도면 https://내아이디.github.io 로 들어가면 사이트가 보인다.

const routes = [ { path: "/", component: Home, }, { path: "/list", component: List, }, { path: "/detail/:id*", component: Detail, children: [ { path: "author", component: Author.vue }, { path: "comment", component: Conmment.vue } ] }]; /detail/0/author 형식으로 사용이 가능하며, 컴포넌트는 임폴트해서 자리에 넣어주면 된다. 페이지 안에서 컴포넌트를 불러올 때에 사용한다. ..

vue3 기준 router 설치npm install vue-router@4 설정을 위해 router.js 를 만든다. (vue-router 만든 사람이 이렇게 쓰라고 했음)import { createWebHistory, createRouter } from "vue-router";const routes = [ { path: "/경로", component: import해온 컴포넌트, }];const router = createRouter({ history: createWebHistory(), routes,});export default router; 예를 든다면const routes = [ { path: "/list", component: List, }]; 후에 main.js..

일단 설치 명령어는 언제든 바뀔 수 있다. 홈페이지를 확인하자 https://getbootstrap.com/ BootstrapPowerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins.getbootstrap.com 2024/05/06 일자 명령어npm i bootstrap@5.3.3 main.js 위에 해당 importimport 'bootstrap'import 'bootstrap/dist/css/bootstrap.mi..

create 단계 : 데이터만 존재하는 단계mount 단계 : 컴포넌트 사이에 있던걸 실제 html 바꿔줌컴포넌트 생성 : index.html에 장착update 단계 : data가 변하면 html이 실시간 재렌더링 됩니다.unmount단계 : 컴포넌트 삭제되면 실시간 재렌더링 이 단계들의 중간마다LifeCycle hook을 걸어서 사용 될 코드를 작성할 수 있다.  mounted(){ //mount되고 나서 //setTimeout(function(){ // 바깥의 this를 잘 못가져옴 setTimeout(()=>{ this.showDiscount = false; },2000); }, mounted(){ setInterval(()=>{ //1초마..

priceSort(){ this.원룸들.sort(function(a,b){ return a.price - b.price }); //[3,5,2].sort(); //2,3,5 이건 문자순 정렬임 /*[3,5,2].sort(function(a,b){ return a-b })*/ //숫자 순 정렬 }다음 과 같이 원룸들.sort(function(a,b) 를 입력했는데 a는 이전 원룸, b는 다음 원룸으로 된다. 이 점을 이요해서a.price처럼 값을 꺼내 쓸 수 있다.. 되돌리기를 사용하고 싶다면 원래의 데이터를 하나더 만들어 state에 두는 방식으로 사용한다. sortBack(){ //this.원룸들 = this.원룸..

.start{ opacity : 0; transition: all 1s;}.end{ opacity : 1;}위의 코드를 보면 :class 라는 속성이 있다 :를 이용해 v-bind 상태로 사용할 수 있는데 end 라는 클래스가 true면 동작하게 끔사용할 수 있는 것이다. vue 에서는 transition을 쉽게 사용할 수 있는 태그를 제공한다. 태그의 name 속성은 편한데로 작명하면 된다.여기에서는 fade로 작명했다..fade-enter-from{/*시작*/ opacity:0;}.fade-enter-active{ /*transition*/ transition : all 1s;}.fade-enter-to{/*끝*/ opacity:1;}3개의 정해진 클래스를 css해야한다. 이건 룰이기에..

vue.js에서 $event는 javascript의 eventListener같은 존재이다. 클릭,체인지 등의 이벤트를 만들때에 이벤트요소 이다. function안의 e와 같은 일을 한다고 보면 된다. $event.target.value 라고 입력하면, input에 입력한 값이 된다.  이렇게하면 month에 값을 넣을 수 있다.  v-model은 input에 입력한 값을 month에 넣어주세요.라는 명령어 이다.(축약버전)  123 1124 11 다양한 방식으로 가능하다. 참고로 v-model로 들어가는 값은 모두 문자로 들어가게 된다. {{ month }} 개월 선택함 {{ 원룸들[누른거].pri..