전체 글101 Vue의 전역 상태관리 라이브러리 VueX - 중앙 집중식 저장소를 두고 데이터 관리 및 상태 관리를 할 수 있도록 해주는 상태 관리 패턴 라이브러리 - store는 애플리케이션 상태를 저장하고 있는 컨테이너 주요 개념 Store 애플리케이션 상태를 저장하는 컨테이너로, src/store.js를 생성해서 스토어를 정의 정의한 store를 main.js에서 `app.use(store)`의 방식으로 등록 등록이 완료되면 스토어를 사용하고 싶은 컴포넌트에서 this.$store.state로 정의한 state에 접근 가능 getter store의 getter에 정의된 값에 접근할 수 있도록 해줌 사용하고자 하는 컴포넌트에서 `this.$store.getter.[접근하고자 하는 요소]`로 접근 가능 mutation state를 변경시키는 역할 컴포넌트에서.. 2024. 2. 28. Vue의 Mixins Mixins - 공통 모듈에 해당하는 파일을 만들어서 사용하는 방법 - 기능은 따로 구현하고, 필요할 때마다 mixins 파일을 컴포넌트에 결합해서 사용하는 방법 - main.js에서 전역으로 mixins 파일을 설정할 수 있음 - mixins는 기본적으로 메서드 앞에 $가 붙음 사용방법 1. 먼저 src/mixins.js 파일을 생성한 뒤, 사용할 메서드를 설정해야 한다. // scr/mixins.js import axios from "axios"; export default { methods: { async $callAPI(url, method, data) { return ( await axios({ method: method, url, data, }).catch((e) => { console.log.. 2024. 2. 28. Vue의 컴포넌트 심화2(이벤트/ 데이터 전달) 부모 컴포넌트에서 자식 컴포넌트의 이벤트 발생시키기 1. 자식 컴포넌트에서 사용할 메서드를 정의한다. 2. 자식 컴포넌트 태그에서 ref를 정의한다. 자식 컴포넌트의 태그에 ref를 정의해야 부모 컴포넌트에서 해당 태그에 접근이 가능하기 때문에 ref를 정의해야 한다. click 3. 부모 컴포넌트에서 자식 컴포넌트 전체의 ref를 정의한다. 자식 컴포넌트에서 ref를 정의한 것과 같은 이유이며, $ref를 통해 해당 ref에 접근할 수 있다. 해당 ref에 접근을 했다면 접근한 태그에 정해진 메서드를 .[메서드]로 접근을 해서 자식 컴포넌트 이벤트를 발생시킬 수 있다. 부모 컴포넌트에서 자식 컴포넌트의 데이터 옵션 값 직접 변경하기 1. 메서드가 아닌 데이터 값을 변경하는 것이기 때문에 자식 컴포넌트에.. 2024. 2. 28. Vue의 컴포넌트 심화(중첩 컴포넌트) 중첩 컴포넌트 사용 방법 자식 컴포넌트로 활용한 컴포넌트를 만들기 부모 컴포넌트에서 자식 컴포넌트 import // 부모 컴포넌트 부모 컴포넌트에서 자식 컴포넌트로 정적 데이터 전달하기 자식 컴포넌트에서 props를 지정해줘야 함(type, default 등) 아래의 코드는 title이라는 props를 부모 컴포넌트로부터 받겠다는 의미를 가짐 만약 props가 없을 경우 default를 title로 사용 // component/pageTitle.vue {{ title }} 부모 컴포넌트에서 데이터 넘겨주기(이 때 자식 컴포넌트의 title과 이름이 같아야 함) // views/NestedComponents.vue 부모 컴포넌트에서 자식 컴포넌트로 동적 데이터 전달하기 자식 컴포넌트는 정적 데이터 전달할 .. 2024. 2. 28. 이전 1 2 3 4 ··· 26 다음 728x90