전체 글

transition 이란? transition은 애플리케이션 내에서 요소 추가, 업데이트, 제거될 때 애니메이션 효과를 적용하기 위한 기능 css, javascript transition 을 모두 지원 transition 속성 name: 트랜지션 이름 appear: 초기 렌더링 시에도 트랜지션을 적용할지 여부 appear-class: 초기 렌더링 시 트랜지션을 적용할 때 적용할 클래스 enter-class: 추가될 요소에 적용될 클래스 enter-active-class: 추가될 요소가 애니메이션을 수행하는 동안 적용될 클래스 enter-to-class: 추가될 요소가 애니메이션을 완료한 후 적용될 클래스 leave-class: 제거될 요소에 적용될 클래스 leave-active-class: 제거될 요소가..

FireBase 란? Firebase는 구글에서 개발한 클라우드 기반의 백엔드 서비스를 제공하는 모바일 및 웹 애플리케이션 개발 플랫폼이다. Firebase는 데이터베이스, 인증, 스토리지, 호스팅, 애널리틱스 등의 다양한 기능을 제공하며, Realtime Database와 Cloud Firestore, Authentication, Cloud Storage, Hosting, Cloud Messaging 등의 기능을 포함한다. Firebase는 다양한 프로그래밍 언어와 플랫폼을 지원하며, 개발자들은 빠르게 애플리케이션을 개발하고 배포할 수 있다. 이미지 파일 스토리지에 저장 각 배너 이미지 목록들을 스토리지에 저장 배너 종류에 따라 파일을 나누어 저장하는게 관리 하는데 용이함 remote config에 배..

$emit 이벤트 내보내기 하위 컴포넌트에서 상위 컴포넌트로 데이터 전달 또는 트리거 목적으로 이벤트를 내보낼 수 있다 // Child.vue // parent.vue 이런식으로 하위(자식) 컴포넌트에서 발생시킨 이벤트를 상위(부모)컴포넌트로 호출을 할 수 있다. 추가적으로 파라미터도 같이 담아서 이벤트를 발생 시킬 수 있다. // Child.vue // parent.vue props 하위 컴포넌트에서 상위 컴포넌트에게서 받아 올 데이터를 선언하면 해당 데이터를 가져 올 수 있다. // parent.vue // Child.vue {{ name }} // minki {{ height }} // 175 export default { props : { name : { type : String, // 속성 타입..

vue 를 사용하다보면 같은 컴포넌트 안에서 기획의도나 특정상황에 대하여 조건에 따라 해당 엘리먼트가 보이고 안보이는 상황이 생긴다 v-if 와 v-show 의 차이점은 v-show 는 항상 렌더링 되어 있고 dom에 남아있다. display : none 같은 결과 v-if 기본 사용법 HI~ Bye v-if 데이터 값에 따른 조건부 렌더링 Hi export default{ data(){ return { isShowElement : true } } } v-else-if, v-else : v-if에 대한 else 블록을 나타낼수도 있다 Hi Bye Hi Bye see You export default{ data(){ return { isShowElement : true, elementId : "sayHi"..

v-bind는 : 약어로 사용 가능 예시 v-bind:class :class 동일한 의미 class 바인딩 // 삼항 연산자로 class 바인딩 가능 export default{ name : "test", data(){ return { activeClass : "active", isAcitve : true, } } }style 바인딩 export default{ name : "test", data(){ return { activeColor : "blue", fontSize : "30px", styleObject : { color : "red", fontSize : "20px" }, isActive : true } } }

vue 에는 인스터스 내의 정의된 데이터 값이 변경되는지 감시하고 변경이 될 때마다 정의된 함수가 실행된다 computed 선언형, 기본 getter 함수 data 들을 구독하며 구독하고 있는 값이 변경됨을 감지하여 계산하고 출력 지켜야 할 문법 return 값 template에서 호출 시 괄호 x export default{ name : "test", data(){ return{ message : "안 녕 하 세 요" } }, computed: { replaceWhiteSpaceMessage(){ return this.message.replaceAll(" ", ""); } } } watch 명령형 computed 와 같이 특정한 데이터 구독, 구독하고 있는 data가 업데이트 될 때에 등록한 함수가 콜..