전체 글190 Vue_Part3_13_Vuex 4 : mapState를 사용하면 편리할 수도 있음 🐥 Vue에서 함수 만들기두가지 선택지가 존재한다.methodscomputed이 둘의 차이점은 무엇일까?methodsmethods 내부의 함수는 함수를 사용할 때마다 코드를 새로 읽어서 실행한다.computedcomputed 내부의 함수는 함수를 매번 새로 읽어오는 것이 아니다.vue 파일이 처음 로드될 때 읽어와서 간직하는 개념이다. 이후 호출될 때마다 간직했던 값을 뱉어준다.데이터가 변경되면 다시 실행되지만, 그게 아니라면 다시 실행되지 않는다.computed 내부에는 계산된 값을 저장할 때 사용된다.매번 계산이 필요 없는 경우 computed에 저장해두면 컴퓨팅파워를 절약할 수 있다.🤷♂️ 컴퓨팅파워란?컴퓨터의 처리 능력이나 자원을 카리키는 용어이다.즉, computed를 통해 자원절약을 할 .. 2026. 1. 25. Vue_Part3_12_Vuex 3 : actions 항목을 알아보자 🐥 actionsmutations에 이어서 actions에 대해 알아보겠다.actions는 어떤 상황에서 쓰이는 것일까?서버에서 ajax 요청을 하고자 할 때, 즉 Vuex에서 데이터를 받아와 무언가 보여주고 싶거나 state에 보관하고자 할 때actions에 ajax 요청 코드를 작성하면 된다. 🤷♂️ 그냥 mutations에 할 수 없을까?버튼을 눌렀을 때 서버에서 데이터를 가져와 state의 데이터에 넣고자 하는 상황을 가정해보겠다.mutations 내부에 함수를 만들어 axios.get으로 데이터를 가져와 state의 more : { } 내부에 넣으려고 한다면..하려면 할 수야 있지만 좋은 생각이 아니다.예를 들어 name을 바꾸고 age를 바꾸고자 할 때, name을 바꾸는 동작이 ajax.. 2026. 1. 24. Vue_Part3_11_Vuex 2 : store에 있는 state 데이터 바꾸는 법 🐥 데이터 수정 방법store.js의 state 내부에 데이터를 저장해주면 $store.state.데이터명을 통해 저장한 데이터를 가져다 쓸 수 있다.그런데 데이터를 직접 수정하면 안된다.컴포넌트가 많이 있는 상황에서 온갖 데이터를 수정해버리면 버그가 났을 때 찾기 어려워진다.🤷♂️ 그렇다면 어떻게 데이터를 수정할 수 있을까?store.js에 데이터를 수정해달라고 부탁하는 코드를 짜는 것이다.store.js에 state 수정방법 정의mutations 항목에 수정방법 정의하기const store = createStore({ state() { return { name: 'kim', }; }, mutations:{ changeName(state){ state.n.. 2026. 1. 24. Vue_Part3_10_Vuex 1 : 사용하는 이유 🐥 데이터의 전송많은 데이터를 주고받게 됨에 따라 복잡함도 그만큼 증가한다하위 컴포넌트의 전송은 props상위 컴포넌트의 전송은 custom event나 mitt 라이브러리그런데 코드가 길어지고 복잡해지다보니 버그도 찾기가 어려워진다..props가 들어왔는지 아닌지도 확인해야 하고.. 이런게 싫을 때 사용할 수 있는 것이 props이다. 🐥 Vuex모든 컴포넌트들이 데이터를 공유할 수 있는 하나의 js파일을 하나 만들 수 있다.해당 js 파일에 저장한 데이터들은 모든 컴포넌트들이 직접 꺼내 쓸 수 있으며 저장, 수정, 읽기가 가능하다. 🤷♂️ 그럼 그냥 Vuex만 쓰면 되는거 아니야?마냥 좋은 것만은 아니다.Vuex를 쓰면 코드가 길어진다. (간단한 수정기능 하나만 만들려고 해도 코드가 길어진다... 2026. 1. 24. Vue_Part3_09_멀리 있는 컴포넌트간 데이터전송할 땐 mitt 🐥 필터 선택 기능필터 박스 클릭 시 하단 필터 미리보기 화면에 적용되도록 해보자+ App.vue에 선택한 필터명을 전달해보자 (상위 컴포넌트에 전달)🤷♂️ 상위 -> 상위로 전달을 어떻게 할 수 있을까?FilterBox의 정보를 Container로 전달한 후 App.vue에 전달해야 한다.그냥 상위로 전달을 할 때는 emit을 활용해 custom event를 해주면 됐었는데..두 번 전달은 어떻게 할 수 있을까?이 때 사용할 수 있는 것이 mitt 라이브러리이다. 🐥 mitt 라이브러리mitt 라이브러리를 활용하면 어떤 컴포넌트이건 간에 원하는 컴포넌트로 데이터를 전달할 수 있다.터미널npm install mittmain.js에서 mitt 라이브러리 등록import mitt from 'mitt'.. 2026. 1. 24. Vue_Part3_08_props 싫으면 slot은 어떻습니까 🐥 slot으로 인스타그램 필터명 표기이번 시간에는 사진 위에 필터명을 표기해보겠다.그러기 위해 부모로부터 받아온 filter 데이터를 표기하면 되는 것이다.props를 통해 부모 컴포넌트에서 자식 컴포넌트로 데이터를 보내주는 방법이 아닌,더 쉽고 직관적으로 자식 컴포넌트에 데이터를 전송해주는 slot 문법이 존재한다. 1. 자식 컴포넌트에서 데이터를 넣고자 하는 곳에 slot 태그를 사용해 빵꾸를 내준다.이 빵꾸자리에 원하는 데이터를 쉽게쉽게 넣을 수 있다. div :class="filter" class="a filter-item" :style="{ backgroundImage: `url(${imageUrl})` }"> slot>slot> div> 2. 부모 컴포넌트의 컴포넌트 태그 사이에서.. 2026. 1. 23. 이전 1 2 3 4 ··· 32 다음