정리공간

Vue에 주소 검색을 하여 주소를 가져오는 다음API를 적용하려 한다. 다른 사이트에서도 제일 많이 봤던 API일 것이다. 공식문서 https://postcode.map.daum.net/guide Daum 우편번호 서비스 우편번호 검색과 도로명 주소 입력 기능을 너무 간단하게 적용할 수 있는 방법. Daum 우편번호 서비스를 이용해보세요. 어느 사이트에서나 무료로 제약없이 사용 가능하답니다. postcode.map.daum.net 1. index.html에 스크립트 추가 공식문서에 사용방법이 아주 친절하게 나와있다. 2. 사용할 페이지에 HTML, 함수 입력 기본주소 주소찾기

Vue3 에서 부모-자식 컴포넌트로 emit을 쓰고 있는데 콘솔창에 아래와 같은 warning 이 떴다. [Vue warn]: Extraneous non-emits event listeners (함수명) were passed to component but could not be automatically inherited because component renders fragment or text root nodes. If the listener is intended to be a component custom event listener only, declare it using the "emits" option. 함수는 작동이 잘 되지만 워닝은 최대한 안뜨는게 좋기에 원인을 찾아봤다. 1) 부모 컴포넌트에..

자식 컴포넌트에서 부모 컴포넌트에게 데이터를 넘기고자 한다. 부모 컴포넌트의 함수를실행시키는 방법과, 파라미터 여러 개는 어떻게 넘기는지 알아보자. 구조 /* 부모 컴포넌트 */ export default { ...(생략)... ,methods: { testFunc(파라미터1, 파라미터2) { console.log("자식에서 실행명령받음!") } } } // 자식 컴포넌트 export default { ...(생략)... ,methods: { changeNum() { this.$emit('setDate', 파라미터1, 파라미터2); } } } 파라미터 넘기기 부모 컴포넌트에서 자식컴포넌트 태그에 @함수명A = "함수명B" 를 입력한다. ex) 여기서 '함수명A' 는 자식의 호출을 알아차리기 위한 이름이고..

부모 컴포넌트에서 자식에게 props를 전달했는데 콘솔창에 아래와 같은 오류가 뜨면서 파라미터에 undefinded 가 떴다. Property " " was accessed during render but is not defined on instance 원인은 넘길때 파라미터 타입을 지정해주지 않아서였다. S라는 문자열을 넘기고 싶었는데 변수도 아니면서 그냥 쌩으로 적어버린거... 알고보니 멍청한 내 실수였다..ㅋㅋ S를 문자열로 인식하게끔 ' ' 따옴표를 넣어주었다. ㅎ... // 오류 코드 // 수정 코드 변수를 넣었는데도 해당오류가 뜬다면 부모 컴포넌트에서 해당 변수에 값이 잘 들어있는지 확인하고, 자식 컴포넌트에서도 잘 받아왔는지 확인해보자. // 자식 컴포넌트 export default { pr..

Vue 프로젝트에 데이터 시각화를 위해 그래프를 붙이고 싶었다. 찾아보니 chart.js 가 있었고, 제일 많이 추천하는 오픈 소스 라이브러리였다. - 무료 - Js, HTML5, Canvas 기반 - 반응형 지원 이 세가지만 봐도 사용하기 충분했다. 사이트 : https://www.chartjs.org/ Chart.js Simple yet flexible JavaScript charting library for the modern web www.chartjs.org 1. chart.js 설치하기 npm install chart.js pakage.json 에 가서 버전을 확인하자. 버전을 따로 지정하지 않았으면 아마 최신버전이 설치됐을것이다. 나는 4.4.0이다. 2. 기본 Bar 차트 만들어보기 우선 ..

상대경로 : ../../assets/images/logo.png절대경로 : @/assets/images/logo.png 상대경로는 현재페이지 기준으로 경로를 작성해야되므로 얼마나 ../을 써야할지 볼때 너무 귀찮다. 그래서 복붙하기도 좋은 절대경로를 쓰는게 좋다.   절대경로 Alias 설정vue 설정파일을 연다.나는 webpack.config.js 인데 각각 프로젝트별로 vue.config.js일수도있고, jsconfig.js일수도 있고 무튼 vue 루트 설정파일에서 작업한다. const path = require('path');module.exports = { resolve: { alias: { '@': path.join(__dirname, 'src/') } }, }너무 간단하..

, 태그를 쓰면 아래 사진같은 걸 만들 수 있다.  단순히 반복할거라 v-for를 써서 반복했는데 {{ month }} 사용자들이 중간에 있는 숫자를 많이 쓸 것 같아서 처음부터 기본 값을 8로 나타나게 하고싶었다.  여기서 약간 방황.... v-for를 쓰는게 아니라면 기본으로 하고싶은 option태그에 selected를 적으면된다. 아래처럼 가 나 다근데 나는 v-for를 써서 반복하기 때문에 이렇게 한 태그에 selected를 적을 수 없었다. 결국 젤 좋은 방법은 마지막에 있는데 급하신 분은 바로 마지막꺼 보면된다.   첫번째 시도 : v-if를 걸어서 8일때만 selected 지정하도록 하기.Vue 2.3버전부터 v-for과 v-if를 같이 쓸 수 있다고 한다. 근데 우선..

첫번째. v-if를 사용하는 방법 1. 모달창 vue페이지를 만든다. 모달창 닫기 전달된 데이터: {{ this.modalData }} export default { props : ['modalData']// 호출된 곳으로부터 전달받은 데이터를 받는다. } *혹시 닫기 전에 다른 동작을 하고 닫기 위해 @click에 함수를 쓰고싶다면?* 닫기 export default { methods : { closePop() { this.$emit('close'); } } } 함수안에서 닫기를 호출할때는 앞에 this를 붙이면된다! 2. 호출할 페이지에서 모달 상태를 관리할 변수 선언 export default { , data() { return { popState : false } } } 3. 호출할 페이지에 모달..

개발 환경 Vue3 Spring Boot 3.0.2 JAVA 17 Vue의 포트번호 : 3000 Spring의 포트번호 : 8080 Vue랑 Spring Boot를 처음으로 연동하여 공부를 하고 있는데 역시나 CORS에 부딪혔다. 수많은 블로그에 추천은 하지 않지만 프론트 단에서만 해결할 수도 있다고 하는데 아무리 Proxy를 설정해도 해결되지 않았다. 결국 프론트단의 proxy설정과 백엔드단의 설정이 둘다 필요했다. Vue webpack.config.js module.exports = { devServer : { proxy : { '/api' : { target:'http://localhost:8080', pathRewrite:{'^/api':''}, } } }, }; target : 위 내용은 /ap..

현 상태 이렇게 이미지 주소가 담긴 배열을 반복문을 돌려 화면에 뿌려주려 한다. 우선 require을 써야하고, 썼는데도 로드가 되지않고 콘솔에 다음과 같이 [object Module] 이라고 찍혀있다. 원인 esModule을 끄지 않아서. url을 commonJS 으로 처리하기 때문에 esModule 방식을 꺼야한다. 해결 webpack.config.js module: { rules: [ { test: /\.js$/, use: 'babel-loader' }, { test: /\.vue$/, use: 'vue-loader' }, { test: /\.css$/, use: ['vue-style-loader', 'css-loader']}, { test: /\.(gif|svg|jpg|png)$/, use: {l..