개발💻/Vue

vue 프로젝트를 하다보면 dialog 혹은 모달 이라고도 많이 부르는데 어쨌든 그걸 사용할 일이 꽤 많다 직접 구현할수도 있겠지만 나는 vuetify의 v-dialog를 사용해서 구현했다 근데 dialog를 그냥 한 컴포넌트 안에서 사용하면 v-model 연결하기도 편하고 dialog를 다루기에 편하긴 하지만 한 컴포넌트 안에 넣다보면 코드도 길어지고, 만약 같은 dialog를 사용할 일이 많다면 컴포넌트로 분리하는게 재사용성도 좋고 가독성, 유지보수 면에서도 좋다 그래서 오늘은 vuetify에서 사용하는 v-dialog를 컴포넌트로 분리하는 법에대해 알아보겠다 컴포넌트를 분리함에 있어 props, emit은 거의 필수적이기 때문에 같이 공부해 보겠다 참고로 나는 https://velog.io/@2wn..

(vue3,ts 가 적용된 환경에서 작성함) ※개인적인 생각이 많이 들어갔고 혹시나 틀린 정보가 있을수 있음 그런건 댓글에 적어주시길! 오늘 해볼거는 제목 그대로 Provide, Inject를 사용해서 전역에서 변수, 함수를 가져다 쓰는것을 해보겠다 vue2에서는 app.appContext.config.globalProperties 를 사용해서 보통 전역변수를 사용했는데 내가 찾아본 바로는 vue3에서는 저걸 쓰는게 좀 어려운? 아니면 그쪽 부분이 deprecated 된것 같기도 하고 무튼 그래서 전역변수 사용하는거를 Provide, Inject를 사용해보려 한다 물론 여기서도 store에 여러 값들을 저장해 놓을수도 있지만 내 지극히 개인적인 생각으로는 store에는 값이 변하는 것들을 위주로 넣어주면..

(vue3, pinia, vuetify 이용) 지난 글 https://moooostory.tistory.com/entry/Vue-Vue-%EC%A0%95%EB%A6%AC%ED%95%98%EA%B8%B012-%EB%8F%99%EC%A0%81-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8Dynamic-Component-%EC%9E%90%EC%8B%9D%EC%97%90%EC%84%9C-%EB%B6%80%EB%AA%A8-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8%EB%A1%9C-emit-%EC%A0%84%EB%8B%AC [Vue] Vue 정리하기(12) - 동적 컴포넌트(Dynamic Component ), 자식에서 부모 컴포넌트로 emit 전달 오늘은 vue에서 동적..

오늘은 vue에서 동적 컴포넌트를 사용하는 방법에 대해 알아보겠다 (정확한 이름이 동적 컴포넌트 인지는 모르겠다) (참고로 ts가 적용된 vue3에서 작업했다) 보통 컴포넌트를 사용할때는 아래 그림과 같이 여러 컴포넌트를 불러와 하나의 view를 만든다 하지만 오늘 해볼거는 저게 아니라 아래 그림과같이 상황에따라 하나의 view를 두고 안에 컴포넌트를 갈아끼는거를 해볼거다 이게 어떤 상황에 필요하냐면 일련의 단계가 있는 컴포넌트를 구현할때 (예를들면 MBTI검사를 할때 문항에 체크하고 다음 페이지로 넘어가는 그런상황) 필요할 거 같고 다른 여러 상황에도 적용시킬수 있을 것 같다 물론 view하나당 컴포넌트 하나씩 넣어서 다뤄도 크게 문제는 안되겠지만 이렇게 동적 컴포넌트를 쓰면 A,B,C 컴포넌트에 있는..

오늘 할거는 제목 그대로이다 pinia와 typescript가 들어가서 카테고리 분류가 좀 애매하긴한데 vue에 정리를 해보겠다 이 전글 https://moooostory.tistory.com/entry/Vue-Vue-%EC%A0%95%EB%A6%AC%ED%95%98%EA%B8%B010-Pinia-aixos [Vue] Vue 정리하기(10) - Pinia, axios 오늘은 pinia 안에서 axios 쓰는 방법에 대해 알아보자 (사실 뭐 vuex 말고 pinia에서 axios 쓴다고 달라질 거는 거의 없다) 먼저 axios를 사용하기 위해서는 당연히 먼저 설치를 해줘야 한다 터미널에서 n moooostory.tistory.com 여기서 tmdb에서 영화 데이터 불러와서 콘솔창에 출력하는거 까지는 했는데..