이안의 평일코딩

slot으로 부모 -> 자식 데이터 전송법 FilterBox.vue (자식) 1. 자식 컴포넌트에서 데이터를 받아오고 싶은 곳에 을 넣는다. (출력될 위치) Container.vue (부모) {{filter}} 2. 태그사이에 데이터를 넣는다. slot 여러개 사용하기 name 속성을 주면 된다. (복잡하니 그냥 props 쓰자) FilterBox.vue (자식) 1. Container.vue (부모) 데이터1 데이터2 2. 보낼거 slot props slot 사용할 때 부모가 자식데이터 필요한 경우. FilterBox.vue (자식) 1. Container.vue (부모) {{작명.msg}} 2. 부모는 {{작명.자식데이터}} slot의 한계 slot은 HTML에만 가능하고 속성안에는 쓸 수 없다. 즉..

이미지 업로드한 것을 HTML에 보여주려면 두가지 방법이 있다. FileReader() : 파일을 글자로 변환해준다. URL.createObjectURL() : 이미지의 가상 URL을 생성해준다. (다만 새로고침하면 사라진다.) => background-image속성으로 집어넣으면 된다. multiple을 넣으면 다수의 파일을 선택할 수 있다. accept="image/*"를 넣으면 이미지 파일을 가져올 수 있게 기본으로 설정된다. var file = e.target.files; file[0].type과 같이 자바스크립트에서 .type 사용하면 image/png 와 같이 확장자 검사가 가능하다. 조건문을 사용해 일부 확장자만 가능하게끔 설정을 해주면 된다. App.vue URL.createobjectUR..

ajax란? GET 또는 POST 요청하면 브라우저가 새로고침하게 된다. ajax를 쓰면 새로고침 없이도 요청이 가능하다. axios 설치 axios 라이브러리를 쓰든가 기본 fetch 함수를 쓰면 된다. fetch API는 브라우저 비교적 최신 기능이지만 호환성 문제때문에 axios를 이용한다.

props로 받아온 이미지 넣기 `${}` 문자를 만들 때 "따옴표"쓰지만 `백틱`기호를 쓰면 글자 중간에 변수 넣기가 편리하다. '문자' + 변수 + '문자" 또는 `문자 ${변수} 문자` 둘 중 하나를 선택해서 사용하면 된다. {{instaData.name}} {{instaData.likes}} Likes {{instaData.name}} {{instaData.content}} {{instaData.date}}

:파라미터 URL 파라미터를 만들기 위해 router의 path안에 "/detail/:id"과 같이 /:작명을 하면 된다. (그럼 /detail/0, 1, 2... 가능) 그럼 가져올 때 Detail.vue에서 {{blog[해당하는 id번호].title}} 에서 []안에 $route.params.id를 넣는다. 현재 URL 정보는 $route에 담겨있음. $route.params는 파라미터자리에 기입된 것을 알려준다. $route.params.id는 router의 path안에 :파라미터 작명한 것을 넣어주면 URL의 파라미터를 가져온다. src/router.js import { createWebHistory, createRouter } from "vue-router"; import List from '...

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를 사용하지 않으면 같은 값을 공유한다. ..