한 개발자의 노트패드

vue의 가장 큰 특징 중 하나인 양방향 데이터 바인딩에서 주로 사용되는 기능 중 하나가 v-model 입니다. (아주)지난 포스팅에서 v-model의 대략적인 사용법에 대해 글을 적은 적이 있습니다. 개인적으로 vue의 가장 강력한 장점 중 하나라 생각하는데 최근에 나온 vue 3.4에서 이걸 더욱 편리하게 해주는 defineModel이 등장했습니다. 뭔 차이야...? 생각 할 수 있는데 좀 더 봅시다. InputField.vue App.vue 입력된 값: {{ text }} 코드를 작성하다 보면 공통 컴포넌트를 만들고 부모가 상태값을 제어하는 경우가 많습니다. vue에선 v-model을 통해 양방향 데이터 바인딩으로 값을 구현하죠. 부모에서 컴포넌트에 v-model에 ..

v-if와 v-show. 둘 다 조건부 렌더링에서 사용하는데에 쓰입니다. v-if는 조건이 만족했을 때에 렌더링을 하고 그렇지 않을 시에 dom 레벨에서 제거되며, 그와 관련된 모든 감시들도 제거됩니다. 만약 컴포넌트라면 인스턴스가 제거 되며 이후 렌더링이 되면 모든 상태가 초기화가 되겠죠. v-if는 주로 특정한 데이터를 가지고 있지 않을 시 오류를 발생시키거나, 컴포넌트를 많이 사용되는 경우에 사용됩니다. 주로 에러 출력이나, 비동기 처리로 불러온 값에 따라 렌더링을 요구할 시에 사용하죠. v-show는 display:none으로 처리를 하기 때문에 dom 레벨에서도 제거되지 않으며, 모든 감시들도 제거되지 않기 때문에 상태값도 초기화가 되지 않습니다. 추로 변경 빈도가 높은 경우에 사용하며 대표적으..

제목은 거창하게 써놨지만 별 건 아닙니다. 부모에 v-model로 연결된 값을 자식이 바꾸고자 할때 사용할 수 있는 방법입니다. 이야기만 들으면 간단하죠. 스토어를 사용하면 됩니다. pinia를 통해 store를 만들고 store에 값을 넣으면 되죠. 저 역시도 그렇게 생각했었고, 실무에서 그렇게 사용할려고 했습니다. 하지만. 만약 배열 안에 있는 객체의 값만을 바꿀려면 어떻게 해야 할까요? items: [ { uuid: '1', keyword: '탭 1', title: '', content: '', thumbnail: '', }, { uuid: '2', keyword: '탭 2', title: '', content: '', thumbnail: '', }, { uuid: '3', keyword: '탭 3..