Store에 있는 아래 4가지 속성들을 간편하게 코딩하는 방법- state -> mapState- getters -> mapGetters- mutations -> mapMutations- actions -> mapActions store.jsexport const store = createStore({ state: { todoItems : storage.item() }, getters: { storedTodoItems(state){ return state.todoItems } }, list.vue {{ todoItem.item }}this.$store.getters.storedTodoItems 로도 접근이 ..
아 아래부분에 변경하는 부분이 있구나.. 이렇게 접근해서 변경하는구나.. this.$store.commit(함수명,인자)를 넘겨서 사용할 수 있구만.. 인자를 여러개 보내고 싶으면 저렇게 보내면 된다.payload라는 매개변수로 정의했는데 아마도 법칙이 아닐까 싶다.아 관행적으로 하는 것이 맞다고 강의에서 말한다. 바꿔도 되지만 통상적으로 사용하는 매개변수 명임.. 실제로 이렇게 store.js에 작성했다.export const store = createStore({ state: { todoItems : storage.item() }, mutations : { addOneItem(state,todoItem){ var obj = {comple..
Vuex 기술 요소- state : 여러 컴포넌트에 공유되는 데이터 data- getters : 연산된 state 값을 접근하는 속성 computed- mutaions: state 값을 변경하는 이벤트 로직 메서드 methods- actions : 비동기 처리 로직을 선언하는 메서드 aysnc methods 뭐가 다른지 싶은데 helper 함수를 쓰게 되면 편하게 쓰게 된다. import { createStore } from "vuex";export const store = createStore({ state: { headerText : 'ToDo!' }})스토어에서 이렇게 작성했고 {{ this.$store.state.headerText..
- Vuex는 ES5와 ES6 2가지 방식으로 설치 할 수 있다. ES6로 진행하겠다. npm install vuex --saveES6와 함께 사용해야 더 많은 기능과 이점을 제공받을 수 있음.. 더 쉽게 코딩이 가능함2022년 2월 7일부터 Vuex 라이브러리를 설치할 때 아래와 같이 라이브러리 버전을 명시해야 한다.고 하는데 나는 그냥 된다..? 또 바뀐거 같다.vuex 버전 확인 방법npm list vuex https://v3.vuex.vuejs.org/kr/ Vuex가 무엇인가요? | VuexVuex가 무엇인가요? Vuex는 Vue.js 애플리케이션에 대한 상태 관리 패턴 + 라이브러리 입니다. 애플리케이션의 모든 컴포넌트에 대한 중앙 집중식 저장소 역할을 하며 예측 가능한 방식으로 상태를v3...
Vuex가 왜 필요할까? Vuex 컨셉- State: 컴포넌트 간에 공유하는 데이터 data()- View: 데이터를 표시하는 화면 template- Action: 사용자의 입력에 따라 데이터를 변경하는 method 화면에서 먼저 view에서 어떤 이벤트(action)을 발생시키면 state가 변경된다. 그럼 다시 화면(view)가 변경된다. 그렇게 돌고 돈다.그게 vuex의 컨셉이다. 중요한 것은 단방향 흐름이라는 것이다. Vuex 구조 컴포넌트 -> 비동기 로직 -> 동기 로직 -> 상태 actions과 mutations는 둘다 function이다 하지만 둘을 나눈 것은actions은 데이터를 불러오는 것mutations는 state를 가공하는 것 정도로 나눈다고 한다,개념자체는 어려우니 연습하면..
개요- 복잡한 애플리케이션의 컴포넌트들을 효율적으로 관리하는 Vuex 라이브러리- Vuex 라이브러리의 등장 배경인 Flux 패턴 소개- Vuex 라이브러리의 주요 속성인 state, getters, mutations, actions 학습- Vuex를 더 쉽게 코딩할 수 있는 방법인 Helper 기능 소개- Vuex로 프로젝트를 구조화하는 방법과 모듈 구조화 방법 소개 컴포넌트가 많아지면 어떻게 관리할까? 에서 나왔다.React에서 Flux라는 패턴으로 복잡한 애플리케이션의 문제점들을, 무수한 관리 문제점을 관리를 해결했다.vue에서도 Flux처럼 도입한 것이 Vuex이다. 왜 MBC 패턴에서 Flux 패턴으로 넘어갔는지를 먼저 알아야 한다. state =data, data Propertygetters..
- Total
- Today
- Yesterday
- rejectValue
- 항해99
- 백엔드 개발자 역량
- 백엔드 개발자 공부
- exception
- Java
- 리터럴
- 향해플러스
- 인터셉터
- 컨트
- SpringBoot
- Intercepter
- 스프링공부
- 항해플러스
- 스프링부트
- 로그인
- ArgumentResolver
- JPA
- React
- filter
- reject
- jpa api
- react실행
- HTTP
- 향해플러스백엔드
- 향해99
- thymleaf
- 예외처리
- hypertexttransferprotocol
- BindingResult
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |