Develop_NOTE

Vue.js 문법을 활용한 조건부로 class를 요소에 부착 이 문법은 인터렉션 뿐 아니라 사용자 동작과 부착된 데이터에 따라 class를 요소에 부착 할 수 있기 때문에 유저 인터페이스 측면에서 매우 유용하게 쓸 수 있는 문법이다. 단계별로 보자면 아래의 단계로 코드를 작성한다. 1. 조건부 클래스 바인딩이 true & false인 상태일 때의 class를 디자인하기 2. 원하는 요소에 원하는 타이밍으로 UI 동작 관련 class를 부착 1. Fade로 토글되는 모달 창 만들기 위의 단계를 거쳐가며 Fade IN & OUT 되고, 토글 기능이 있는 코드는 아래와 같이 작성할 수 있다. // class 'active'는 조건부 클래스 바인딩. 모달 박스 모달 토글 위의 코드에서 조건부 클래스 바인딩을 동..

Vue Cli에서 Scss 사용하는 방법 1. npm 모듈 sass & sass-loader 설치 npm install sass npm install sass-loader@10 2. 전역 설정 Scss를 사용해봤다면 알겠지만, 자주사용하는 속성값을 담아두는 변수(variable), 스타일 재사용을 위한 mixin, reset.scss 같은 것을 담아주는 Scss파일은 별도로 따로 만들어서 관리한다. 이를 Vue 컴포넌트 전역에 import 해올 수 있게 전역 설정을 처리해두면 편하다. 전역 설정은 vue cli 설치시 자동으로 생성되는 vue.config.js에서 확인 할 수 있다. const { defineConfig } = require('@vue/cli-service') module.exports ..

Watcher(감시자) 이란? watcher는 데이터 변경을 모니터링 하고, 데이터가 변경 될 때 특정 동작을 수행하게 하는 Vue의 항목이다. 사용 예시를 예를 들자면, 특정 데이터가 변경 될 때 로그를 출력하거나, 특정 동작을 트리거(trigger)하기를 원할 때, Watcher를 사용 할 수 있겠다. watch 항목 사용하기 위 코드 기준으로 "watch" 라는 항목을 생성해주고, month데이터가 변경될 때마다 이를 감시해주는 month()라는 콜백함수를 생성해뒀다. v-model로 인하여 month라는 데이터가 변경 될 때마다 이제 콘솔에 "month값이 변경되었습니다." 라는 메세지가 출력 되는 것을 확인 할 수 있다.