📌 애니메이션 효과 주기CSS로 애니메이션 효과를 주려면1. 시작전 class 명2. 애니메이션 끝난 후 class명3. 그리고 원할 때 2번 class명 부착4. 시작전 class 명에 transition 속성을 주면 부드럽게 애니메이션이 완성된다. .start .end 에 대한 스타일을 미리 만들어 놓고, 모달창이 열렸을 때만 .end 클래스를 부착한다. (CSS).start { opacity: 0; transition: all 1s;}.end { opacity: 1;} HTML 속성에 데이터바인딩하려면:속성="데이터이름" class 명을 조건부로 넣으려면 => 조건이 true 일 때 클래스명이 부착된다 ex):class=" { end: true } "end라는 클래스명이 항..
vue3
📌 custom event자식 컴포넌트가 부모 컴포넌트가 가진 데이터를 바꾸고 싶다면 부모에게 메시지를 줘야 한다.부모는 그 메시지를 수신하면 데이터를 변경하는 코드를 실행한다.이걸 custom event 라고 한다. 1. 자식은 $emit(작명, 전달할 자료) // 전달한 자료는 선택사항. 작명은 필수 => 커스텀 이벤트 전송2. 부모는 @작명="데이터 변경하는 JS 코드"3. 부모 컴포넌트가 전달한 자료를 사용할 때는 $event 로 사용 가능 자식 컴포넌트에서 openModal 이라는 커스텀 이벤트 전송, prodData의 id 값을 전송//자식 컴포넌트{{prodData.title}} 부모 컴포넌트에서 @openModal 로 커스텀이벤트를 받고, prodId라는 데이터에 자식 컴포넌트에게 받은 ..
📌 PropsApp.vue 안에 Modal.vue 라는 파일이 하위 컴포넌트로 있다고 하면,App.vue 는 부모 컴포넌트, Modal.vue는 하위 또는 자식 컴포넌트라고 한다. 자식 컴포넌트가 부모 컴포넌트의 데이터를 쓰려면 props 라는 문법을 이용해야 한다.// 부모 컴포넌트에서 예시 코드에서는 로 작성하면 된다. 그리고 나서 자식 vue 파일에서 props 등록을 해야 한다.// 자식 컴포넌트에서props: { {작명}: 데이터타입 } props: { prodList: Array } 데이터 타입은 Array, Object, String, Number 등이 있다. 보내는 자료형에 맞게 입력하면 된다. 이제 props 로 등록한 데이터는 HTMl 안에서 데이터 바인딩으로 자유롭게 ..
🔎 들어가기 전에나는 현재 코딩애플 1년권을 이용하고 있다.코딩애플 강의가 좋은 점은, 핵심만 빠르게 실전 중심으로 원하는 프레임워크, 라이브러리, 언어 강좌를 수강할 수 있다는 점이다.처음부터 너무 깊은 내용을 다루고 이론 중심으로만 공부하게 되면 금방 지치고 흥미가 떨어진다.코딩애플 강사님의 방식은 간단한 개념 설명 (근데 엄청 웃김) 을 한 후에 바로 실습을 하면서 이해시켜주는 방식이다.자바스크립트란 언어를 공부할 때 이론 위주로 된 사이트를 보며 공부를 했었는데 (물론 유용했음) 코딩애플의 자바스크립트 강의를 맛보기로 5-6개 들은 것만으로도 습득이 엄청 빨랐다. 유튜브에서 코딩애플의 맛보기 강의를 다들 들어보는걸 추천한다. 너무 웃기고 재밌다,,암튼 학창시절부터 꼼꼼하고 딱딱한 강의를 고집했었..
