vue.js26 [Vue3/Vite] <v-img> - 기존 VueCLI 가 아닌 Vite를 사용할 때 이미지가 가져와지지 않는다. 1) 실패 : 프로젝트 구조문제. (아래) 2) 실패 : require은 webpack에서 지원하는 모듈이다. require(../image_path/${image.src}) Vite에서는 assets를 src폴더에서 관리하도록 되어있는 기존 구조를 사용할 수 없다. 빌드시 dist폴더에 js,css,html 파일이 생성되는데, 이 때 src폴더에 있는 assets는 제대로 된 경로에 들어가지 못한다. 따라서 Vite에서는 assets 폴더를 public 폴더에 넣으라고 한다. public 디렉터리 다음 에셋의 경우 robots.txt와 같이 소스 코드에서 참조되지 않는 에셋 해싱 없이 항상 같은 이름을 갖는 에셋 또는 UR.. 2024. 1. 9. axios String데이터 받기 const checkId = () =>{ //아이디 중복확인 //로그인이 안됐을텐데 header 가 필요한가 console.log(state.form.username); axios.post('/auth/checkId', {username : state.form.username}, { headers: { 'Authorization': 'cos' } }).then((res) => { window.alert(res.data); }).catch(() => { window.alert("이미 가입된 회원입니다."); }) } @PostMapping("/checkId") public String checkId(@RequestBody String username) { System.out.println("username.. 2023. 6. 15. img 태그 바인딩 Vue.js에선 element의 속성을 동적으로 처리할 때 v-bind라는 Directive를 사용한다. 일반적인 HTML 태그들의 속성을 바인딩할 경우가 생기는데, 그 대표적인 예로 img 태그의 src 속성이다. (src는 불러올 이미지의 경로를 지정) 특히 여러 이미지를 for문으로 한 번에 불러올 때 src를 바인딩 해줘야 한다. {{ data.title }} {{ data.price }} 원 허위매물 신고 신고 수 : {{ 신고수[0] }} :src 또는 v-bind:src를 써서 binding 해준다. (콜론은 v-bind: 의 sugar syntax. 즉, 축약어) 하지만 위와 같이 하면 이미지가 불러와지지 않는다. 그 이유는 각 객체의 image에 저장이 되어 있는 것은 단순 String .. 2023. 5. 18. [vue3] ref, reactive template에 변화를 적용하기 위함. String, int 와 같은 일반 자료형은 ref 를 사용해도 되지만, object, array 등은 reactive 를 사용 import { ref } from 'vue'; import { reactive } from 'vue'; - ref 를 사용할 때 ref로 정의한 값을 .value로 가져온다. ex) import {ref} from 'vue'; export default { setup() { const name = ref('limi'); const updateName = () =>{ name.value = 'limilmi2'; console.log(name); } return { name, updateName, }; } - reactive는 value가.. 2023. 5. 18. element-ui vue 대표 ui 컴포넌트 https://element.eleme.io/#/en-US/component/table#table Element - The world's most popular Vue UI framework element.eleme.io npm i element-ui import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI); 가이드에 따라 data연결 prop : 가져올 키 이름 label: 화면에 보여지는 컬럼명 결과화면 버튼 팝업 2023. 4. 25. CORS 에러 (vue.js, springboot) / proxy SOP? 자바스크립트 엔진 표준 스펙의 보안 규칙 중, 하나의 출처(Origin)에서 로드된 자원(문서나 스크립트)이 일치하지 않는 자원과 상호작용 하지 못하도록 요청 발생을 제한하는 정책이 SOP (Same Origin Policy, 동일 출처 정책) 이다. 즉, http://localhost:8000와 http://localhost:8000/posts는 같은 출처라서 상호작용이 가능한데, http://google.com에서 http://localhost:8000를 호출하면 SOP에 위배된다. 동일 출처의 기준 http://example.com:8042/over/there?name=ferret&page=1#nose \__/ \__________/\___/ \________/ \______________.. 2023. 4. 25. 이전 1 2 3 4 5 다음
