본문 바로가기

전체 글

 (364)
[Udemy Vue 완벽가이드 Section14] 194. CSS 애니메이션 이해하기 transition 프로퍼티를 사용해 CSS로 변경사항에 전환효과를 적용하는 것 외에도 더욱 상세한 애니메이션을 설정할 수 있다. # @keyframes 먼저 CSS로 애니메이션을 정의해야 하는데 @keyframes을 통해 정의할 수 있다. 그 뒤에 원하는 이름을 입력해보자. 'slide-fade'로 해보자. ('slide-fade'는 임의로 설정한 것.) @keyframes slide-fade {} 이를 통해 애니메이션이 어떻게 동작해야 하는지를 상세히 정의할 수 있고, 필요로 하는 여러 상태를 퍼센트로 나타낼 수 있다. 가령, 1) 애니메이션 완성도가 0%인 경우, 다시 말해 첫 시작인 경우 - transform: translateX(0)로 설정한다. 이동한 적이 없으므로. - scale(1)도 함께..
[Udemy Vue 완벽가이드 Section14] 193. 애니메이션 기초 및 CSS 전환 화면 가운데의 보라색 사각형을 바꿔보자. CSS와 Vue를 사용해서 이 요소에 애니메이션 효과를 넣어보자. Vue를 통해 애니메이션 구현을 지원받으면 좋은 지점과 실제로 Vue의 지원을 받는 방법도 배워볼거다. 애니메이션 효과는 어떻게 추가할까? 간단한 것부터 시작해보자. 'Animate' 버튼을 클릭하면 화면의 보라색 사각형, 즉 이 블록에 애니메이션 효과가 적용되도록 해보자. 이 있는 App.vue 파일을 열고 Animate 버튼에 클릭 리스너(@click)를 추가하자. Animate 블록을 왼쪽으로 약간 움직이게 해보자. 그러기 위해 methods에 새 메서드 'animateBlock'를 추가하자. 클릭 시 트리거되어야하는 메서드이므로, 클릭 리스너에 연결하자. data()에는 블록에 애니메이션 효..
가상 클래스 셀렉터(Pseudo-Class Selector) 가상 클래스는 요소의 특정 상태에 따라 스타일을 정의할 때 사용된다. [ 특정 상태의 예 ] 마우스가 올라와 있을 때 링크를 방문했을 때와 아직 방문하지 않았을 때 포커스가 들어와 있을 때 이러한 특정 상태에는 원래 class가 존재하지 않지만, 가상 class를 임의로 지정하여 선택하는 방법이다. 가상 클래스는 마침표(.) 대신, 콜론(:)을 사용한다. CSS 표준에 의해 미리 정의된 이름이 있기 때문에 임의의 이름을 사용할 수 없다. selector:pseudo-class { property: value; } # 예시 다음은 a 요소가 hover 상태일 때(마우스가 올라와 있을 때-특정 상태) 글자색이 red로 변경되고, input요소가 focus 상태(특정 상태)일 때 backgroud-color가..
[Udemy Vue 완벽가이드 Section14] 192. 섹션 소개(애니메이션 전환) 애플리케이션에 필수적 요소는 아니지만, 애플리케이션에 추가하면 유용한 전환(Transitions)과 애니메이션(Animations)이다. 애니메이션을 활용해서 화면상 요소를 움직이면 사용자의 인터페이스 이해를 돕고 사용자 경험을 향상할 수 있다. 엄밀히 말하면 전환과 애니메이션은 분명히 선택적인 요소이지만 구현하면 사용자 인터페이스와 사용자 경험이 현격히 좋아진다. 1/ Understanding Transitions & Animations 따라서 이번 섹션에서는 전환(Transition)과 애니메이션(Animation)의 원리와 CSS와 결합하여 사용하는 방법을 배워보자. 2/ Animating with Vue 애니메이션 사용 시 Vue.js가 유용한 경우와 적용하면 좋은 사례 3/ Animation L..
[Udemy Vue 완벽가이드 Section13] 190. 요약 라우팅이 필요한 이유와 라우팅 설정 방법을 배웠고 라우트를 등록하는 방법과 다양하게 구성이 가능하다는 점을 배웠다. redirect, path, name, meta를 설정하고 components프로퍼티로 컴포넌트 여러 개를 로드하고, children 프로퍼티로 중첩 라우트를 설정하는 법도 배웠다. 동적 경로 세그먼트(:)를 사용해서 로드된 컴포넌트에서 라우트 매개변수를 추출하는 방법이나 로드할 컴포넌트에 라우트 매개변수를 props로 전달하는 방법 등 다양한 내용을 배웠다. 내비게이션 가드 사용법과 스크롤 동작 제어도 배웠다. router-link를 사용한 이동방법과 $router 프로퍼티와 push메서드를 사용하는 프로그래밍 방식 이동도 배웠다. 이동하는 경로를 설명하는 방법도 배웠다. 이렇게 하면 사..
[Udemy Vue 완벽가이드 Section13] 189. 라우트 파일 정리하기 Vue 라우터와 라우팅에 대해 알아둬야 하는 핵심 기능과 심화 기능까지 배웠다. # 파일, 폴더 정리법 파일과 폴더 정리법에 대해서 잠깐 알아보자. 지금은 components 폴더 밑에 기능별로 폴더를 두고 기능별 폴더에 컴포넌트 파일이 있다. 물론 잘못된 건 아니다. 다만 라우팅을 사용할 때는 components 폴더만 쓰는게 아니라 pages나 screens 폴더가 필요할 수도 있다. 이번에는 pages 폴더를 만들어보자. 꼭 해야하는 것은 아니지만 폴더를 따로 두면, 라우터를 통해 페이지로 로드되는 컴포넌트를 pages 폴더에 따로 정리해서 라우터로 로드되는 컴포넌트 vs 템플릿에 임베딩된 일반 컴포넌트를 구분할 수 있다. 물론 구분이 불필요한 경우도 있다. TeamMembers.vue 파일에서는 ..
[Udemy Vue 완벽가이드 Section13] 188. 라우트 메타데이터 활용하기 내비게이션 가드와 함께 사용하면 특히 유용한 기능이 있다. → 바로 '라우트 메타 필드' 어떤 라우트에도 라우트 구성에 메타(meta) 프로퍼티를 추가할 수 있다. meta에는 객체 또는 그 외 다양한 값을 넣을 수 있다. 예를 들어 needsAuth를 추가하고 true로 설정할 수 있다. 이 부분은 원하는 대로 해라. //main.js { name: 'teams', path: '/teams', meta: { needsAuth: true }, components: { default: TeamsList, footer: TeamsFooter }, // 생략 }, meta 프로퍼티가 유용한 건 바로 라우트 객체나 $route 객체가 있는 곳 모두에서 메타필드에 액세스할 수 있다. 컴포넌트 내부에서도 사용할 수..
[Udemy Vue 완벽가이드 Section13] 187. 라우트 Leave 가드 사용자가 페이지를 떠나려 할때 호출되는 유용한 가드도 있다. 물론 한 페이지를 떠나서 다른 페이지로 이동하면 before로 시작하는 이름의 가드가 모두 호출되지만, 떠나기 직전에 기존 컴포넌트에서 어떤 코드를 실행해야 할 수도 있다. 페이지를 떠나는 액션을 거부해야 할 수도 있다. UsersList 컴포넌트를 떠날 때마다 코드를 실행한다고 해보자. Vue가 인식하는 unmounted 생명주기 훅을 쓰면 되는데, unmounted를 콘솔에 출력하도록 하면 Users페이지를 떠날 때마다 출력된다. Users페이지에서 Teams 페이지로 가면 콘솔에 unmounted가 출력된다. 그렇지만 지금은 훅이 실행되고 나서, 즉 이동이 승인된 후(이동 후)에 실행된 거라 이동을 취소할 수는 없다. 어떤 경우에 떠나는 ..

티스토리툴바