본문 바로가기

전체 글

 (364)
[Udemy Vue 완벽가이드 Section15] 221. 예시: 더 많은 상태 추가하기 Counter 기능 외에 사용자 인증을 다루는 UserAuth.vue 컴포넌트도 만들어보자. 두 버튼이 있고, 인증(Auth) 상태에 따라 두 버튼 중 한 버튼만 보이게 하자. 물론 컴포넌트 내부에서 관리할 수도 있지만, 앱의 많은 부분에서 사용자 인증 여부를 고려해야하니 Vuex로 관리하는 게 좋다. 버튼이 두개로만 이루어진 template을 만들고, Login Logout 그리고, App.vue에 UserAuth 컴포넌트를 import 해서 새 컴포넌트로 등록하자. Add 10 // 생략.. import UserAuth from './components/UserAuth.vue'; export default { components: { //생략.. UserAuth, }, 인증이 된 상태라면 첫 번째 컨..
[Udemy Vue 완벽가이드 Section15] 220. 매퍼 헬퍼(Mapper Helper) 사용하기 이제 Vuex가 실제 애플리케이션에서 어떻게 사용되는지 보자. 시작하기 전에, 개발을 좀 더 쉽게 만들어주는 몇가지 유틸리티 기능에 대해 알아보자. # mapper 1/ mapGetters computed 프로퍼티인 counter가 있고, fingalCounter인 getter에 접근한다. {{ counter }} 저장소에 파고드는것 말고는 아무것도 하지 않는다. 만약 이 코드가 마음에 들지 않는다면, Vuex의 도움을 받을 수 있다. → mapGetters라는 함수! - computed객체 내부에서 mapGetters 함수를 사용할 수 있다. - computed 프로퍼티를 직접 정의하는 대신, 여기서 mapGetters를 호출하면 이것이 객체를 반환한다. - three dot spread(...)를 사..
[Udemy Vue 완벽가이드 Section15] 219. 액션 "컨텍스트" 이해하기 action은 비동기 코드에서 중요하고, 일반적으로도 action을 사용하는 것이 좋다. 인수로 얻게되는 context 객체에는 흥미로운 것들이 많다. 지금까지는 commit 메서드만 사용했는데, context 내부에 다른 어떤게 있는지 한번 보자. # commit 내부 commit도 있고, 다른 것들도 보인다. - dispatch dispatch를 살펴보자. dispatch를 이용해 작업 내부에서 다른 작업을 전달할 수 있다. HTTP 요청을 보낼 때도 도움이 된다. 요청이 성공하면 성공 액션을 트리거하고 오류가 발생하면 오류 처리 액션을 트리거할 수 있다. HTTP 요청의 결과에 대한 반응으로 다른 여러 작업을 전달하는 하나의 액션을 만들 수 있다. - getters getters를 사용하여 gett..
[Udemy Vue 완벽가이드 Section15] 218. 액션(Actions)으로 비동기 코드 실행하기 Mutations, Getters 이외에 Vuex가 제공하는 중요한 개념, 기능이 하나 더 있다. # mutation의 한계 예를 들어, increment 변형에서 숫자를 즉시 더하지 않고, 2초를 기다린 후 더한다고 해보자. 실제 앱에서는 HTTP 요청을 보내고, 응답을 기다리는 상황이 있을 수 있다. 응답을 받은 후에야 상태를 바꾸는 상황이다. 다른 말로 한다면, 비동기식으로 실행하는 어떤 코드는 즉시 실행을 완료하는 것이 아니라 미래의 어떤 시점에 완료하게 된다. mutation의 문제는, 언제나 동기식이라는 것. mutation에는 비동기식 코드가 허용되지 않는다. 따라서 mutation이 실행되면 중단없이 단계별로 실행되면서 상태는 즉시 바뀌어야 한다. 더 나중에 바뀌는 것은 허용되지 않는다. ..
널 병합 연산자 ?? (Nullish coalescing operator) # 널 병합 연산자란? - 왼쪽 피연산자가 null 또는 undefined일때 오른쪽 피연산자를 반환. - 왼쪽 피연산자가 null 또는 undefined이 아니면 왼쪽 피연산자를 반환하는 '논리 연산자' # 논리 연산자 OR과의 차이점 논리 연산자 OR (||) : 왼쪽 연산자가 null 또는 undefined 뿐만 아니라 falsy값('' 또는 0 등)에 해당할 경우 오른쪽 피연산자를 반환. const foo = null ?? 'default string'; console.log(foo); // 'default string' const baz = 0 ?? 42; console.log(bas); // 0 const result = 0 || 42; console.log(result); // 42 # 특징..
[Udemy Vue 완벽가이드 Section15] 217. 게터(Getters) 소개-데이터를 얻는 더 나은 방법 state에 있는 데이터를 store에서 변경하기 위해 mutations를 사용했다. 컴포넌트 내부에서 상태를 직접 변경해서는 안된다. (전에 발행한 mutations에 관한 글↓) [Udemy Vue 완벽가이드 Section15] 215. 변형(Mutation) 소개 - 데이터를 변경하는 더 나은 방법 예측 가능한 상태 관리에 관해 이야기를 했었다. 예측 가능한 flow는 데이터 flow를 명확하게 정의하고, 데이터를 업데이트하고 얻을 때 특정 방식을 따르게 하여 오류 발생을 줄여준다. # state 직 lion284.tistory.com [Udemy Vue 완벽가이드 Section15] 216. payload를 사용하여 변형(Mutation)에 데이터 전달 어떤 변형(Mutation) 메서드는 인수를..
[Udemy Vue 완벽가이드 Section15] 216. payload를 사용하여 변형(Mutation)에 데이터 전달 어떤 변형(Mutation) 메서드는 인수를 요구하기도 한다. 'increment' mutation에서는 더하고자 하는 값인 2이 하드코딩 되어있다. // main.js mutations: { increment(state) { state.counter = state.counter + 2; }, }, 'increase' mutation을 추가하여 똑같은 state를 인수로 하고, 여기에서도 counter를 바꾸고 싶다. 하지만 이번에는 하드코딩된 값이 아닌, mutation이 commit될 때 정의한 값을 더하고 싶다. # mutation에 데이터 전달방법 1/ mutation에 두 번째 인수인 payload를 추가한다. 가할 수 있는 데이터 패키지이다. (물론 이름은 'payload' 말고, 원하는대로 ..
[Udemy Vue 완벽가이드 Section15] 215. 변형(Mutation) 소개 - 데이터를 변경하는 더 나은 방법 예측 가능한 상태 관리에 관해 이야기를 했었다. 예측 가능한 flow는 데이터 flow를 명확하게 정의하고, 데이터를 업데이트하고 얻을 때 특정 방식을 따르게 하여 오류 발생을 줄여준다. # state 직접 변경 - 이상적인 상황 x 지금 Vuex를 사용하는 방식도 괜찮지만, Vuex의 철학을 완전히 따르지는 않고 있다. $store.state를 직접적으로 이용하여 컴포넌트의 내부에서 state를 변경하고있다. 엄밀히 말하면 이런 식으로도 동작은 하지만, 이상적인 상황은 아니다. 애플리케이션 어디에서도 state를 바꿀 수 있고, 이는 전적으로 우리에게 달려있다. 만약 추가하거나 state.counter + 10으로 설정하거나 오타로 1을 두번 입력하여 11을 추가하는 등, 오류가 발생할 수도 있다. m..

티스토리툴바