Kkongchii_Log

Vuex란? Vue.js의 상태 관리를 위한 패턴이자 라이브러리입니다. 다른 상태 관리 패턴이나 라이브러리와 비교했을 때 뷰의 반응성(Reactivity) 체계를 효율적으로 활용하여 화면을 업데이트한다는 차이점이 있습니다. 상태 관리란? 상태 관리란 여러 컴포넌트 간의 데이터 전달과 이벤트 통신을 한 곳에서 관리하는 패턴을 의미합니다. 뷰와 성격이 비슷한 프레임워크인 리액트(React)에서는 Redux, Mobx와 같은 상태 관리 라이브러리를 사용하고 있고 뷰에서는 Vuex라는 상태 관리 라이브러리를 사용합니다. 상태 관리(State Management)가 왜 필요한가? 컴포넌트 기반 프레임워크에서는 작은 단위로 쪼개진 여러 개의 컴포넌트로 화면을 구성합니다. 예를 들면, Header, button, L..

Vue Template Vue의 Template 문법이란, Vue로 화면을 조작하는 방법을 의미합니다. Template 문법은 크게 1. Data Binding, 2.Directive 으로 나뉩니다. Data Binding : Vue Instance에서 정의한 속성들을 화면에 표시하는 방법입니다. Instance의 속성을 연결할 수 있습니다. 기본 구조 : {{data}} Directive : Vue로 화면의 요소를 더 쉽게 조작하기 위한 문법입니다. 화면 조작에서 자주 사용되는 방식들을 모아 Directive 형태로 제공하고 있습니다. 기본 구조 : v- (ex. v-bind, v-if, v-else, v-show, v-on, v-model 등) !-- seen의 진위 값에 따라 p 태그가 화면에 표시..

Router Vue Router는 Vue 라이브러리를 이용하여 싱글 페이지 애플리케이션을 구현할 때 사용하는 라이브러리입니다. 페이지 이동 시 사용하는 기능으로, 프로젝트에 Vue Router를 설치하는 방법은 CDN, NPM 2가지 방식이 있습니다. CDN 방식 Axios Axios는 Vue에서 가장 많이 사용하는 Promise 기반 HTTP 통신 라이브러리입니다. CDN과 NPM 설치 방식 모두 지원하며 상대적으로 다른 HTTP 통신 라이브러리들에 비해 문서화가 잘되어 있고 API가 다양합니다. script 코드를 입력하고 라이브러리를 설치합니다. npm install axios axios의 기본구조는 아래와 같습니다. methods: { fetchData: function() { axios.get(..

Component 통신 방식 - 부모 / 자식 레벨 Vue Component는 각각 고유한 데이터 유효 범위를 갖습니다. 따라서 Component 간에 데이터를 주고 받기 위해서는 아래와 같은 규칙을 따라야 합니다. 자식 Component → 부모 Component : Event 발생 부모 Component → 자식 Component : Props 전달 즉, 자식 Component는 부모 Component에게 Event를 발생시켜 올려줌으로써, 부모 Component는 자식 Component에게 props 속성을 통해 데이터를 전달하게 됩니다. Props 부모 Component → 자식 Component Props를 이용한 예제는 아래와 같습니다. 위의 예제를 쪼개어 본다면 아래와 같습니다. 1. 부모 ..

Vue Vue는 무엇일까요? Vue.js는 웹 개발을 단순화하고 정리하기 위해 개발된 대중적인 자바스크립트 프론트엔드 프레임워크이자, MVVM 패턴의 뷰모델(ViewModel) 레이어에 해당하는 화면(View)단 라이브러리 입니다. MVVM 패턴 MVVM 패턴은 'Model + View + ViewModel' 을 의미하는 아키텍처 패턴으로, View의 개발을 비즈니스 로직 또는 백엔드 로직(Model)과 Client의 데이터 표현단을 분리하기 위한 구조입니다. 즉, 화면 동작과 관련 로직과 DB 데이터 처리 및 백엔드 로직을 분리하여, 데이터를 Model에 담아 View로 넘겨주는 중간지점으로 ViewModel이 이용되게 됩니다. Vue Instance Instance는 뷰로 개발할 때 필수로 생성해야 ..