분류 전체보기 184

JAVA) List<Map<String, Object>> 반복문 돌리기

자바에서 List 형태는 일반 반복문으로 돌릴 수 없다. List tempListMap = new ArrayList(); The type of the expression must be an array type but it resolved to List 위와 같은 오류를 만나게 된다. 해결방법 향상된 for문을 사용한다! for(Map map : tempListMap) { System.out.println("리스트 내용: " + map); System.out.println("키 값으로 value찾기: " + map.get("키 값")); } 이렇게 하면 List안의 배열을들 하나하나 돌릴 수 있고, 돌리면서 그 안에 세부내용도 볼 수 있다.

Vue3) 모달창(팝업)을 만드는 2가지 방법. v-if, vuex store

첫번째. 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. 호출할 페이지에 모달..

Front-end/Vue.js 2023.03.22

WebPack5) terser-webpack-plugin 오류 options has an unknown property 'sourceMap'

나는 webpack3 에서 webpack5로 버전 업을 진행하고 있다. 버전 3과 5는 정말 많은 플러그 인이 달랐다ㅠㅜ 상황 버전3의 uglifyjs-webpack-plugin 이 webpack5에서는 이미 내장되어 제공하는 terser-webpack-plugin 로 지원한다고 한다. webpack4는 를 설치해야하지만, 5부터는 기본 제공되어 따로 설치할 필요가 없다. 가져오기 webpack.prod.config const TerserPlugin = require('terser-webpack-plugin') 실행 오류 ValidationError: Invalid options object. Terser Plugin has been initialized using an options object tha..

Front-end 2023.03.10

Spring Boot + Vue) 서버단에서 CORS 문제 해결하기

개발 환경 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..

Vue) 이미지 URL 입력 시 로드가 안되거나 [object Module] 뜨는 경우

현 상태 이렇게 이미지 주소가 담긴 배열을 반복문을 돌려 화면에 뿌려주려 한다. 우선 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..

Front-end/Vue.js 2023.02.15

Vue.js) 태그에 조건을 달아 조건에 따른 CSS 적용하기(Vue2, 3버전)

아래와 같이 상황에 따라 길이를 다르게 적용해야할때가 있다. C가 있다면 보여주고, 없으면 안보여주는 상태. 비율로해서 없는 부분이 채워지게 할 수 도 있겠지만, C가 있는지 없는지에 대한 조건을 달아서 width값을 다르게 적용해보자. 방법은 간단하다. "[ ]" 로 감싸고 그 안에 삼항 연산자 형식으로 입력하면된다. :style = "[countC > 0 ? 'width: 33.3%' :'width: 50%']" ** 주의할 점. 여기서는 css와는 다르게 카멜표기법이 아닌, 스네이크형식으로 입력해야한다. ex) backgroundColor (X), background-color (O) Vue 2 버전 방식 문법이 조금 다르니 참고하기! :style = "[countC > 0 ? {'width': '..

Front-end/Vue.js 2023.01.04

Vue ) 프록시 설정. Dev Server has been initialized using an options object that does not match the API schema.

나는 뷰를 cli를 통해서 설치한게 아니라 따로 npm으로 필요한것만 설치를 했었다. 그러다 보니 구글링해서 많이 나오는 것을 가져다 쓰면 오류범벅... 그래도 덕분에 이걸쓰려면 뭐가 필요한지 알아가는것같으니 좋다고 생각하자..하하 프록시를 설정하는와중에 나오는 오류다. [webpack-cli] Invalid options object. Dev Server has been initialized using an options object that does not match the API schema. - options.proxy should be one of these: object { … } | [object { … } | function, ...] -> Allows to proxy requests, c..

Front-end/Vue.js 2022.11.19

JavaScript) 자바스크립트 글자 변경, 여러개, 공백제거

자바스크립트에서 글자를 변경하는 공식은 아래와 같다. replace(변경하고싶은문자, 변경할 문자) 이렇게 도 -> 만으로 글자를 변경할 수 있다. 하지만 원본 텍스트가 바뀌는 것은 아니다. 다시 test를 출력해보니 그대로 "도"로 출력이 되는데, 원본 텍스트를 바꾸려면 바꾼것을 다시 넣어줘야한다. test = test.replace("도", "만") [공백제거] 보통 로그인 기능을 만들때 사용자가 자신도모르게 공백이 들어가는 경우가 있어 공백을 제거하는 과정을 넣는게 좋다. 공백을 제거할때도 replace를 써서 활용할 수 있다. 문자열.replace(/\s/gi, "") [여러글자 한꺼번에 치환] 문자열.replace(/ 글자1 | 글자2 | 글자3 /gi, "변경할 글자") [replace 사용방..

Vue.js) 스크롤 감지하기. 스크롤 할 때마다 특정 함수 실행

vue 프로젝트에서 화면을 스크롤할때 감지하여 특정 함수를 실행시키고 싶었다. 계속 addEventListener를 해줘도 안되서 뭐지 했는데 뒤에 true를 써줘야 했던것...ㅠㅠㅠ // 이벤트 등록 mounted() { document.addEventListener('scroll', this.scrollEvents, true); }, // 이벤트 해제 beforeUnmount() { window.removeEventListener('scroll', this.scrollEvents); }, methods : { scrollEvents(e) { console.log("스크롤될때마다 이 함수 실행?",e) } } 결과화면 => 스크롤 내릴때마다 함수가 실행된다! 이제 응용해서 만들어야지~

Front-end/Vue.js 2022.09.29
반응형