정리공간

, 태그를 쓰면 아래 사진같은 걸 만들 수 있다.  단순히 반복할거라 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. 호출할 페이지에 모달..

나는 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..

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

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

나는 뷰를 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..

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

1. node.js 설치하기 노드js는 웬만하면 12버전 이상으로 설치를 권장한다. https://nodejs.org/ko/download/ 설치 후 버전 확인. 노드를 설치했으면 npm도 자동으로 설치되어 npm버전도 확인해준다. D:\> node -v v16.14.0 D:\> npm -v 8.3.1 2. Vue 패키지 설치 우선 작업을 할 폴더를 생성하고 그 폴더 안으로 들어가서 패키지를 설치한다. D:\myVue> npm init -y 아무것도 없었던 작업폴더에 파일이 하나 생성된다. 3. webpack 패키지 설치 > npm i vue > npm i -D vue-loader vue-template-compiler vue-style-loader webpack webpack-cli webpack-de..

내가 하고싶은것은 넓이가 유동적으로 변하는 값에 따라 높이를 맞추고 싶었다. 그냥 간단히 말해 vue단에서 선언한 변수를 css에 적용하고 싶었다. 여러가지 구글링 했을때는 css변수 사용해서 :root에 변수를 선언하라고 되있는데, 나는 css에서 새로운 변수를 만드는게 아니라 자바스크립트 단에서 만든 변수를 사용하고 싶었다. 방법은 생각보다 간단! Vue3 1) 변수 선언 data() { return { hhhhh : '', }; }, 2) 변수에 값 넣기 mounted(){ this.hhhhh = 50 * 10 + "px"; }, 3) 변수를 style에 적용 변동css 변동css Vue2 Vue2는 3과 적용 방법이 살짝 다르다.

input값을 가져올수 있는 방법은 아이디(id), 이름(name), 클래스(class)로 가져올 수 있다. 자바스크립트로 가져오는 방법과 jQuery로 가져올 수 있는 방법 두가지를 썼다. // 1. id값 document.getElementById("aaa").value(); $("#aaa").val() // 2. class 값 $(".aaa").val() document.getElementsClassName("aaa")[0].value(); 자바스크립트로 가져올때 배열 인덱스 값은 필수다! // 3. name값 %("[name=aaa]").val() %("input[name=aaa]").val() document.getElementsByName("aaa")[0].value(); checkbox 체크..