Front-End(Web)/Vue
-
[Vue.js] Transition & AnimationFront-End(Web)/Vue 2021. 7. 14. 02:24
근래의 웹 어플리케이션은 유저들의 조작에 따라 다양한 인터렉션 효과를 제공한다. Vue는 여기에 사용되는 transition 효과를 좀 더 용이하게 사용할 수 있도록 이라는 태그 컴포넌트 기능을 제공한다. 이번 포스팅에서는, Vue.js 공식문서의 "트랜지션 & 애니메이션" 내용을 기반으로 태그 컴포넌트를 사용하는 방법에 대해 학습해보겠다. 💚 진입/진출 그리고 리스트 트랜지션 0. 컴포넌트 Vue 프론트화면 개발에는 많은 애니메이션이 적용된다. 이 때, 보편적으로 사용되는 방법이 CSS를 통한 제어일 것이다. (transform 을 통한 변형, class를 동적으로 부여하여 제어한다. 이를, transition 설정을 통해 유하게 구현할 수 있다.) Vue.js 에서는 CSS transition을 더 ..
-
[Vue.js] 컴포넌트 톺아보기Front-End(Web)/Vue 2021. 6. 14. 14:44
Vuex 공부를 마치고, 캡틴판교님의 인프런 강의도 레벨3부터는 실제구현에 집중되다보니, 공식문서 공부를 좀 더 하려고 했다. 그래서, 공식문서 필수요소 바로 다음에 이어지는 "컴포넌트 톺아보기" 섹션에 대해 정리해보려고 한다. 아무래도, React 프로젝트를 진행하면서도 컴포넌트를 어떻게 쪼개고 재활용할지, 심지어 이름을 어떻게 지을지도 고민이 많았다. 이러한 컴포넌트의 선언과 활용에 대한 많은 팁이 담겨있는 해당 섹션을 윤독하면서 중요한 내용을 정리해보려고 한다. * 이 글은 캡틴판교님의 Vue.js 강의 및 블로그를 기반으로 학습한 내용을 정리하고 있습니다. 💚 컴포넌트 톺아보기 1. 컴포넌트 등록 먼저 컴포넌트를 명명하는 2가지 방법(kebab-case, CamelCase), 각각의 모듈화된 지역..
-
[Vue.js] Vuex - (3) Store 모듈화Front-End(Web)/Vue 2021. 6. 13. 23:51
이전에 진행한 프로젝트는 Vuex Store에 state, getter, mutations 들이 일괄적으로 들어가는 형태였다. 아무래도 프로젝트의 규모가 커지면, 당연히 Store 자체의 코드량도 많아지고 유지보수도 힘들어질 것이다. 이러한 부분을 ES6 import/export 문법을 통해 좀 더 용이하게 분리하는 모듈화에 대해 간단하게 정리해보았다. (개념보다는 Vuex의 코딩기법의 내용이기에 분량이 많지 않다.) * 이 글은 캡틴판교님의 Vue.js 강의 및 블로그를 기반으로 학습한 내용을 정리하고 있습니다. 💚 Getters, Mutations 분리 공식문서에서는, Vue.js 애플리케이션의 복잡한 컴포넌트들을 관리하는 상태관리 패턴 + 라이브러리로 정의한다. 컴포넌트들에 대한 중앙 집중식 저장소..
-
[Vue.js] Vuex - (2) Helper 함수Front-End(Web)/Vue 2021. 6. 11. 16:48
이번에는 Vuex에서 Store의 상태, getter, 메서드들을 좀 더 용이하게 사용하는 Helper 함수에 대해 알아보겠다. * 이 글은 캡틴판교님의 Vue.js 강의 및 블로그를 기반으로 학습한 내용을 정리하고 있습니다. 💚 Helper 함수란? Vuex의 내장함수로, Store의 아래 네 가지 속성을 간편하게 코딩하는 방법이다. (Synthetic Sugar에 해당) state => mapState getters => mapGetters mutations => mapMutations actions => mapActions - 사용법 // App.vue import { mapState, mapGetters, mapMutations, mapActions } from 'vuex' export defau..
-
[Vue.js] Vuex - (1) Vuex 기본Front-End(Web)/Vue 2021. 6. 10. 01:28
드디어, Vuex 라고 하는 Vue.js의 상태관리 라이브러리를 학습하는 단계에 돌입했다! 다행인 점은, Context나 Redux를 사용해 보았기에 Vuex를 처음 접하는데 위화감은 덜 할 것 같다. 심지어, Redux의 Flux 패턴과 어느 정도 유사하면서도, 좀 더 간소화된 절차를 가진다는 것으로 선임 개발자님께 대략적으로 들었다. Redux와는 또 다른, Vuex만의 특징과 장점은 어느 것이 있을지 한 번 학습하면서 정리해보겠다! (분량이 길 시 포스팅 분리하겠다.) * 이 글은 캡틴판교님의 Vue.js 강의 및 블로그를 기반으로 학습한 내용을 정리하고 있습니다. 💚 Vuex 란? 공식문서에서는, Vue.js 애플리케이션의 복잡한 컴포넌트들을 관리하는 상태관리 패턴 + 라이브러리로 정의한다. 컴포..
-
[Vue.js] Template 문법Front-End(Web)/Vue 2021. 6. 3. 01:37
Vue에서도 React 처럼 state, props 등의 데이터를 HTML 요소에 바인딩할 수 있다. (이러한 연관성을 Reactivity 라고 칭한다.) 이러한 방법을 data를 활용한 선언적 바인딩이라고 한다. 이렇게 화면을 조작하기 위한 Vue의 문법들에 대해 학습해보았다. * 이 글은 캡틴판교님의 Vue.js 강의 및 블로그를 기반으로 학습한 내용을 정리하고 있습니다. 💚 Vue Template 위에서 언급한 선언적 바인딩을 포함해서 Vue로 화면을 조작하는 문법들을 "Vue Template" 이라고 한다. Template 문법은, 1) Vue 인스턴스에서 관리하는 데이터를 화면에 연결하는 데이터 바인딩, 2) 화면조작을 편하게 하게 해주는 Vue 디렉티브 2가지가 있다. 1. 데이터 바인딩 //..
-
[Vue.js] Vue RouterFront-End(Web)/Vue 2021. 6. 2. 15:04
이번엔 Vue에서 공식으로 라우팅을 담당하는 Vue Router에 대해 공부해보았다. Vue 역시 SPA 웹 어플리케이션 제작을 위한 프레임워크로, URL에 따른 페이지 컴포넌트 간의 라우팅을 지원할 것으로 예상된다. 또한, React 경우엔 필요한 기능을 수동적으로 추가했지만, Vue Router는 공식 라이브러리인 만큼 params, query 나 페이지 인터렉션 등 다양한 기능을 지원한다고 한다. * 이 글은 캡틴판교님의 Vue.js 강의 및 블로그를 기반으로 학습한 내용을 정리하고 있습니다. 💚 Vue Router 위에서 언급했듯, Vue Router는 Vue.js 공식 라우터 라이브러리다. SPA를 쉽게 구현하기 위해 코어와 긴밀하게 통합되어있다. - 기능 Vue 라우터 공식문서에서 소개하는 V..
-
[Vue.js] 컴포넌트(Component), Props & EventFront-End(Web)/Vue 2021. 5. 26. 21:04
이번에는 비교적 친숙한! 뷰의 컴포넌트 개념에 대해 알아보고자 한다. React와 마찬가지로 화면을 구성하는 요소이다. 현대의 모던 프레임워크들은 대부분 컴포넌트 개념을 차용하고 있기 때문에 뷰 역시 이를 기반으로 하고 있는 것 같다. 컴포넌트와 관련된 개념과 영상이 많기 때문에 포스팅 분량이 길어지고 몇 부분으로 나눠질 것 같다. * 이 글은 캡틴판교님의 Vue.js 강의 및 블로그를 기반으로 학습한 내용을 정리하고 있습니다. 💚 Vue 컴포넌트 React와 마찬가지로 화면을 영역 단위로 쪼개서, 재사용 가능한 코드로 캡슐화하는 개념이다. 뷰에서 컴포넌트를 등록하는 방법은 2가지가 있다. 전역 등록, 지역 등록이 바로 그것들이다. - 전역 컴포넌트 // 전역 컴포넌트 Vue.component('컴포넌트..