정리공간

아래와 같이 상황에 따라 길이를 다르게 적용해야할때가 있다. 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과 적용 방법이 살짝 다르다.