분류 전체보기58 Vuex로 중앙에서 상태 관리하기 StoreVuex에서 store란 애플리케이션의 공유된 상태를 보유하고 있는 전역변수상태(State), 뮤테이션(Mutations), 액션(Actions), 게터(Getters) 라는 속성(property)를 가지는데애플리케이션 상태를 더 작은 모듈들로 나누어 구성하기 위해 모듈(Modules) 사용 가능각각의 모듈들이 위 4가지 속성을 가짐 Store의 프로퍼티들상태(State) State는 Vue 컴포넌트에서 data이다 원본 소스의 역할을 하며, View와 직접적으로 연결되어있는 Model이다. state는 직접적인 변경은 불가능하고 mutation을 통해서만 변경이 가능하다.mutation을 통해 state가 변경이 일어나면 반응적으로 View가 업데이트된다.뮤테이션(Mutations)Mutati.. 2024. 5. 7. Vue 프로젝트 경로의 @ import store from '@/src/main.js' 이런식으로 경로에 @ 가 들어가있는 경우를 볼수있는데 이는 Vue 프로젝트에서 쓰이는 alias다. 프로젝트의 루트를 가르킨다. 즉 위의 경로는 프로젝트의 루트에 있는 src파일 하위의 main.js를 가르키는것 2024. 5. 7. import 시 index.js 생략 예를들어 현재 파일과같은 위치에 있는 main 폴더 아래에 index.js 파일이 있다고 가정하면 import '~/main/index.js'; 일반적으로 이렇게 추가하는데 index.js 파일의 경우 파일명이 생략 가능하다import '~/main'; 이런식으로 index.js 파일은 노드 모듈 시스템 및 대부분의 모듈 번들러에서 기본적으로 가져오는 파일명이라 그렇다고 한다. 2024. 5. 7. emit으로 자식 -> 부모 데이터 전달 전달 방식이 헷갈려서 따로 정리함 부모 전송 emit 이용해서 this.$emit('데이터명', 데이터); 방식으로 부모로 넘겨주고 자식 부모 컴포넌트에서 받은 데이터: {{ receivedData }} 자식 컴포넌트 에서는 @'데이터명'="부모의 함수명" 해서 받음 그럼 부모의 함수쪽에서 패러미터로 해당 데이터 받을 수 있음그럼 그걸로 this.부모쪽 데이터 = 패러미터; 해서 받기 넘겨주는 데이터가 여러개인 경우에는 부모 전송 여전히 데이터명은 하나인 상태로this.$emit('데이터명', 데이터1, 데이터2); 해서 넘기고 자식 부모 컴포넌트에서 받은 데이터: {{ receivedData }} 이렇게 패러미터 부분을 data1, data2 해서 받아도 되고.. 2024. 5. 3. Vue 프로젝트 동작 순서 1. package.json설정파일이다Spring의 pom.xml과 유사하다2. index.html기본적인 html파일App.vue가 들어갈 장소를 명시해놓는 뼈대보통 수정x 이부분이 App.vue가 들어가는 장소3. main.jsApp.vue의 템플릿 내의 을 마운트 한다.여기서 import한 파일들은 나머지 뷰에서 잘 동작한다.import Vue from 'vue'import App from '~/App'import router from '~/router';import axios from 'axios';import BootstrapVue from 'bootstrap-vue/dist/bootstrap-vue.esm';import 'bootstrap/dist/css/bootstrap.css';i.. 2024. 5. 2. 객체 속성을 정의하는 두가지 방법 자바스크립트에서 객체를 생성했을때 속성을 정의하는 방법은 두가지가 있다. 1. 객체 축약 문법을 사용한 방법export default { name: 'app', data() { return { testStatus: false, }; },}; ES6의 객체 축약 문법을 사용한 방법이고 2. 객체 리터럴 문법을 사용한 방법export default { name: 'app', data: { loadingStatus: false, },}; 이 두 가지 방법의 가장 큰 차이점은 자바스크립트 객체를 생성하는 방식이다.첫 번째 방법은 data 속성을 함수로 정의하고, 그 함수가 호출될 때마다 새로운 객체를 생성하여 반환한다. 이렇게 함으로써 각 컴포넌트 인스턴스가 고유한 데이터 객.. 2024. 5. 2. 이전 1 2 3 4 5 ··· 10 다음
