본문 바로가기

전체 글

 (364)
[Udemy Vue 완벽가이드 Section15] 214. 상태에 컴포넌트 연결하기 # $store.state를 통해 state 접근 메서드를 추가해서 버튼을 연결할 수 있다. 'Add 1' 버튼을 클릭하면 트리거되는 'addOne'메서드를 추가해보자. method내에서 this.$store.state에 액세스하면 state인 counter가 있다. 그 counter를 ++로 증가해주자. {{ $store.state.counter }} Add 1 ## $store.state 값을 computed에 아웃소싱 h3태그의 $store.state.counter값을 computed 프로퍼티를 써서 아웃소싱하는 방법도 있다. computed에 counter 프로퍼티를 추가해서 this.$store.state.counter를 반환해보자. 이제 이 counter를 h3태그에 가져다 쓰고 저장한 다음,..
[Udemy Vue 완벽가이드 Section15] 213. 저장소 생성 및 사용하기 # Vuex 설치 npm run serve 작동시키 전, Vuex를 먼저 설치해야한다. npm install --save vuex 최신버전을 설치하려면 vuex 뒤에 @next를 추가하자. npm install --save vuex@next 이렇게 하면 앞서 라우터를 설치했던 것처럼 프로젝트에 Vuex패키지가 설치된다. 이제 Vuex를 사용할 수 있다. # Vuex 예제 파일은 아주 간단한 앱이다. Vuex가 필요할 정도의 애플리케이션은 아니지만, Vuex의 핵심 개념을 이해하기에 아주 좋은 예시. 이제 npm run serve로 개발 서버를 작동해보자. 위와 같이 'Vuex'라고 적힌 간단한 컨테이너가 있다. App.vue 템플릿 내부의 base-container안에 'Add 1'이라는 버튼을 하나 추..
[Udemy Vue 완벽가이드 Section15] 212. 개념 및 사용 목적 # What is "Vuex"? Vuex란 무엇일까? → Vuex is a library for managing global state - Vuex는 전역 상태(Global state)를 관리하기 위한 라이브러리. # State(상태)는 무엇인가? - 상태는 데이터로 번역될 수 있다. 애플리케이션이 필요로 하고, 사용자가 화면에서 무엇을 보는지에 영향을 주는 데이터. - 상태란 일종의 반응형 데이터라고 볼 수 있다. 변경될 수 있으며, 변경함으로써 화면상의 무언가를 트리거하는 데이터. Vue.js는 이러한 반응성과 관련이 깊다. 하지만 앱의 다양한 컴포넌트에 영향을 주는 데이터, 즉 상태를 관리하는 건 어려울 수 있다. 따라서 두 주요 상태인 지역 상태(local state)와 전역 상태를 구분하는게 아..
[Udemy Vue 완벽가이드 Section15] 211. Vuex 섹션소개 구축한 Vue 애플리케이션의 규모가 커질수록 애플리케이션 상태나 데이터 관리가 점점 더 어려워진다. [ Better State Management with Vuex ] 이번 섹션에서는 Vuex를 소개한다. 한층 뛰어난 상태관리 솔루션. - Replacing provide/inject 여러 컴포넌트 또는 앱 전체에서 데이터를 공유하기 위한 provide, inject를 대체할 수 있다. [Udemy Vue 완벽가이드 Section8] 104. Provide + Inject로 해결하기 코드를 통과해야하는 문제를 해결하는데 Vue를 어떻게 사용할 수 있을까? 다시 말하면, props와 커스텀 이벤트가 여러 컴포넌트를 통과하는게 꼭 문제인건 아니다. 기존 방식대로 해도 괜찮다. 하 lion284.tistory...
[Github] 잔디반영 에러(잔디 안심어지는 현상) # 문제 - commit을 하고, push를 했음에도 잔디가 누락되는 현상이 발생했다. # 원인 - Github계정에 등록되어 있는 이메일 계정과 local 환경의 이메일 설정이 다른게 원인이었다. # 해결방법 먼저 Github계정에 등록되어 있는 이메일 계정을 확인해보자. 1. Github Settings에 들어가보자. 상단 맨 오른쪽에 자신의 프로필 사진을 클릭해보자. 그러면 아래와 같이 메뉴가 나오는데, 여기서 Settings를 들어가자. 2. 왼쪽 메뉴에서 Emails에 들어가자. 3. 등록된 이메일을 확인해보자. 이번에는 local 환경의 git에 등록된 이메일을 확인해보자. 1. 작업중인 폴더에서 terminal을 열어 아래 명령어를 쳐보자. git config --list 2. 쭉 정보가 나..
[Udemy Vue 완벽가이드 Section14] 197. 전환 컴포넌트<transition> 사용하기 wrapping된 문단을 살펴보자. Vue가 특수한 유틸리티 클래스를 추가한다고 했다. 해당 클래스의 스타일을 CSS 코드로 정의해보자. # 요소가 추가될 때 Vue가 추가할 클래스의 이름은 기본적으로 v-enter-from, v-enter-active, v-enter-to로 설정되어있다 Vue가 기본적으로 이 세가지 CSS 클래스를 추가하는데 DOM에 요소가 처음 추가됐을 때 차이를 두고 추가한다. 이 경우는 DOM에 해당 문단이 처음 나타났을 때를 의미한다. 이제 각 클래스의 스타일을 지정해보도록 하자. 각기 다른 프로퍼티를 정의해볼텐데 최소한 하나의 전환 효과나 애니메이션이 있어야 Vue가 각 클래스로부터 지속 시간을 읽어들일 수 있다. 지속 시간을 읽어들이는 것 자체가 Vue가 내부적으로 실행하는..
[Udemy Vue 완벽가이드 Section14] 196. Vue로 CSS 애니메이션 재생하기 App.vue에서 새로운 div를 추가해보자. 'container'라는 class도 추가하고, button태그로 버튼을 만들어보자. button 위에 p태그로 문단을 하나 추가하여 'This is only sometimes visible...'을 적고, 이 p태그는 아래 button을 클릭했을 때 토글, 즉 열려야한다. This is only sometimes visible... Toggle Paragraph 새 data 프로퍼티로 paralsVisible를 추가하고, 초깃값을 false로 설정한다. methods에 새로운 메서드, toggleParagraph를 추가하고 이 메서드를 통해 paralsVisible 프로퍼티를 제어해보자. this.paralsVisible를 현재 값과 반대로 설정하고 par..
[Udemy Vue 완벽가이드 Section14] 195. "CSS만"으로 충분하지 않은 이유 지금과 같이 CSS의 기본 transition 효과와 animation으로는 충분하지 않은 경우란 어떤 때일까? # transition, animation 충분하지 않은 경우 CSS애니메이션과 전환 효과는 대개 해당 기능 자체로도 충분하나, 지금과 같이 추가하게 되면 모자란 부분이 나올 수 있다. 예시를 한번 보자. 현재 실행중인 애플리케이션에서 Show Dialog를 누르면 팝업 창이 뜬다. 떠 있다가 창을 닫으면 없어진다. 이 동작으로 충분하다고 생각할 수 있다. 하지만 팝업 창에도 애니메이션이 필요한 경우가 있다. 팝업으로 나타낼 때와 사라지는 애니메이션이 필요할 수 있다. 바로 이런 경우에는 지금과 같이 단순히 Vue에 CSS 클래스를 추가하여 CSS애니메이션을 적용하는 방법으로는 충분하지 않다...

티스토리툴바