dev_0hoon

https://developer.mozilla.org/ko/docs/Web/HTML/Viewport_meta_tag 태그를 사용하여 뷰포트의 크기와 모양을 제어하는 방법에 대해 설명합니다." data-og-host="developer.mozilla.org" data-og-source-url="https://developer.mozilla.org/ko/docs/Web/HTML/Viewport_meta_tag" data-og-url="https://developer.mozilla.org/ko/docs/Web/HTML/Viewport_meta_tag" data-og-image="https://scrap.kakaocdn.net/dn/bDYWBk/hyV2xfyRuw/AWAoPGQ1qsMkInBjzRJJT0/img..

일반적으로 프로젝트를 만들면 src > components 폴더를 만들어 이곳에서 컴포넌트를 만든다.

작업하던 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.원룸..