코딩의숲

버튼을 클릭 했을 때, 배경색상이 바뀌도록 하고 싶다. 아마 버튼을 클릭 했을 때, class를 추가해달라고 부탁할 것이고, class가 추가되면 css 가 변경되는 방식으로 코딩 했을 것이다. 기존의 방식은 '클릭한 걔'에 초점을 맞추어 이벤트를 감지하도록 하는 것이었다. 예시 코드는 이렇다. **템플릿** 초록으로 핑크로 초록으로 핑크로 초록으로 핑크로 ** js(script setup) ** const test = (index, event) => { event.target.closest('.static').classList.add('active'); } const cancel = (index, event) => { event.target.closest('.static').classList.remov..

vue.js 강의를 듣거나 vue.js로 과제를 수행하다보면 가장 처음 접하게 되는 것이 v-for 일 것이다. v-for 은 리스트 렌더링을 위해 쓰게 되는 명령어다. 배열 혹은 객체의 밸류 갯수 만큼 컴포넌트에 렌더링을 하고싶을 때, 퓨어 js 에서는 element를 forEach를 사용해서 반복해줘야 하는 번거로움이 있었다. vue나 react 같은 프레임워크에서는 이런 과정을 생략하고 컴포넌트 내에서 간략하게 표현 할 수 있다. 1. 배열에서 v-for 사용하기 testArr 를 사용해서 li를 랜더링 할 것이다. 코드는 다음과 같다. testArr로 v-for 연습 {{ `${index} / ${value}` }} v-for 안에도 똑같이 value, key, index를 바인딩 해줄 수 있다...

1. v-html template 내에서 직접 html 코드를 작성하는 방법도 있지만, a태그 및 콘텐츠 자체를 url이라는 변수에 담아 template에서 출력하려는 것이다. 보간법(일명 콧수염 {{ }})을 사용하여 출력하면 a태그를 선언하는 < 부터 모두 출력 된다. v-html을 사용하여 출력하면 template 내에서 a 태그를 해석하여 랜더링 해준다. ** 출력내용 ** 2. v-bind 속성을 바인딩해서 쓴다는 것은,,, html 태그 내에서 사용하는 atrribute 값을 어디에선가 가져와서 쓰겠다는 뜻이다. v-bind: 로 시작하는 구문을 줄여서 : 로 표현하곤 한다. ** temtplate ** {{ background }} ** ** const background = 'pink'; ..

참고링크 https://vuejs.org/guide/components/v-model.html Component v-model | Vue.js vuejs.org v-model은 컴포넌트간 양방향 데이터 바인딩을 구현하는데 사용할 수 있다. 그리고, form 태그 안에서 사용할 수 있다. 이런데서 안통함 데이터를 보낼 컴포넌트 $emit 을 통해서 input 이벤트에 속해있는 props를 정의 함. modelValue는 고정되어있는 props이기 때문에 바꾸면 안됨 데이터를 받을 컴포넌트 {{ searchText }} 호출한 컴포넌트 안에서 v-model을 사용하여 데이터를 지켜본다. 지켜본 데이터(바뀌는 데이터는 ref('')라는 반응형 데이터로 정의 해둔다. 결과물 modelValue 를 변형하기 보낼..

1. 피니아란? - 피니아라고 읽음. - composition API 방식으로 사용하는 store 라이브러리. - vuex4와는 약간 차이 있으나, vuex5와 거의 대부분 동일하기 떄문에 pinia를 vue.js 에서 공식지원 하기로 했다. - 아래의 예시에서도 vue2, options API 방식이 아니라 Vue3, Composition API 방식으로 사용 하도록 한다. 2. 설치하기 yarn add pinia # 또는 npm으로 npm install pinia 3. 세팅하기 3.1. main.js 세팅 import { createPinia } from 'pinia' const app = createApp(App) const pinia = createPinia() use(pinia) 3.2 stor..

1. 값을 저장 하기 store.js 파일 내에서 state() 함수 안에 데이터를 객체 형식으로 저장을 한다. state(){ return { name : 'kim', age: 20, } }, 이 데이터를 App.vue 파일 안에서 '불러' 오도록 할것이다. 2. 값을 불러오기 vuex name : {{ $store.state.name }} 값을 불러와 출력할 때에는 $store 안에 있는 state 안에 있는 name 을 출력해달라고 정중하게 부탁하도록 한다. {{ 이중괄호 }} 를 써야 완성이다. 객체의 형식이므로 객체를 불러다 쓰는 방식을 그대로 사용한다. 출력 화면은 아래와 같다. 2. 값을 수정하기(or) 값을 변경해서 다시 출력하기 그런데 언제까지나 store 에 저장한 초기값만 불러다 출력..

vue를 사용하는데 데이터가 너무 많거나, 컴포넌트간에 데이터를 주고받는 것이 props 만으로 해결되지 않을 때 사용하는 라이브러리 이다. store.js 파일 하나에 데이터를 다 때려넣은 뒤에 하나씩 꺼내먹기.. 꺼내쓰기 때문에 간편하기도 하다. 아니 이럴거면 나는 mitt를 왜 배운거야.... 그러나 그것은 그렇지 않다는 것이 코딩애플 스앵님의 말씀. 프로젝트 규모가 크지 않은 이상 vuex를 사용하는 것은 배보다 배꼽이 더 클 수도 있다고 한다. 기술적인 효율성을 중시하도록 하자. 배움의 효율성을 중시하는 것 보다...(이제 학생의 입장에서 벗어날 때도 되었다.) 1. 설치하기 npm install vuex@next 혹은 yarn add vuex@next 2. 셋팅하기 2-1. src 폴더 안에 ..

vue 에서 데이터를 활용 할 때, 부모 -> 자식컴포넌트로 데이터를 이동 하고 싶을 때에는 props 기능을 사용 한다. 그런데, 하위 -> 상위 -> 상위 컴포넌트로 이동하고 싶거나 형제간에 데이터를 이동시키고 싶을 때에는 props 기능을 사용 하지 못한다. 이렇게, 데이터를 부모-자식 관계에 종속되지 않고 보낼 수 있게 해주는 라이브러리가 mitt 이다. mitt 는 emitter와 같음 1. mitt 설치하기 npm install mitt 혹은 yarn add mitt 2. 셋팅하기 - main.js 파일에 작성 import mitt from 'mitt'; //mitt라이브러리를 import 함 const emitter = mitt(); const app = createApp(App); app...