leteu / 개발 블로그

프로그래밍/Vuejs

[Vuejs] Expose로 ref에서 함수 꺼내 쓰기

사실 expose 하는 방법에 대한 글이라기 보단typescript로 작성할 때 자동완성 때문에  글 쓰게 됨난 vscode 쓰기 때문에 jetbrains에서는 원래 잘 나오고 있는지는 모른다.그래도 그냥 이렇게 해라https://leteu.dev/posts/vue-expose#1 일단 하는 방법 간단하다. 우선 setup 써서 하는 놈 먼저...... optional API는 ...expose: ['something'],...  이렇게 해주면 끝이다. 이제 사용 방법이다. #2 어떻게 쓰냐위에서 작성한 Component를 `Child` 컴포넌트라고 하고 시작하겠다. ...import Child from 'src/components/path/to/ChildComponent.vue'const ChildRe..

프로그래밍/Vuejs

[vuejs] Component 기초 - template, render, setup, slot

컴포넌트는 Vue에서 가장 기초가 되는 부분이다. 컴포넌트 하나 잘 만들어두면 비슷한 화면은 계속 가져다 쓸 수 있다. Vue 3를 기준으로 작성하였다. #1 참고 https://kr.vuejs.org/v2/guide/components.html 컴포넌트 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org 일단 공식 문서를 보자. 답은 저기에 있다. 결론만 보고 싶다면 넘어가자 #2 화면 일단 제일 중요한 건 화면이다. 일단 뭐가 보여야 재밌으니 화면부터 들어가겠다. Template, Setup, Render 이렇게 3곳 중 한 군대를 골라서 화면을 만들어줄 수 있다. ## template 제일 익숙한 html로 짤 수 있다. pug 언어로도 가능하다. ( 이 포스..

프로그래밍/Vuejs

[Vue 3] Props, Emit

https://leteu.dev/posts/vue-prop-emit#1 왜 쓰나 Vue를 사용하다 보면 상위 컴포넌트에서 하위 컴포넌트로 데이터를 넘겨주거나 반대로 하위에서 상위로 올려 받아야 하는 경우가 있을 수 있습니다. #2 간단 요약 Props상위 컴포넌트에서 하위 컴포넌트로 뿌려주는 것 하위 컴포넌트에서 선언하고 상위에서 선언해둔 이름으로 보낼 수 있음.Emit하위 컴포넌트에서 상위 컴포넌트로 올려주는 것하위 컴포넌트에서 선언하고 상위에서 선언해둔 이름으로 받을 수 있음. #3 Props 예시)  {{ customProp }} 컴포넌트의 props에서 키을 지정한 뒤 부모 컴포넌트에서 키에 맞는 값을 보내주는 식으로 사용한다. props는 배열로 작성하여 키값을 텍스트만으로도 지정할 수 있다. ..

프로그래밍/Vuejs

[Vue] Quasar Vue UI framwork 소개

회사에서 사용 중인 Vue UI 프레임워크를 소개해보려고 한다. Vue 사용자도 React에 비해 많이 적은 와중에 UI 프레임워크는 보통 Vuetify를 많이 사용한다. Quasar를 처음 접했을 때 검색하기 참 힘들었던 거 같다. #1 공식 사이트 https://quasar.dev/ Quasar Framework - Build high-performance VueJS user interfaces in record time Developer-oriented, front-end framework with VueJS components for best-in-class high-performance, responsive websites, PWA, SSR, Mobile and Desktop apps, all ..

프로그래밍/Vuejs

[Vue] Composition API - 주사위 만들기 예제

Composition API 사용법 공유해볼 겸 해서 주사위나 만들어보려고 한다. .vue 파일 없이 js 파일로만 짜 보려고 한다. h 함수를 통해 랜더를 할 생각인데 이건 react의 JSX createElement와 유사하게 사용할 수 있다. jsx로 Vue 컴포넌트 만들다 보면 React도 쉽게 적응하지 않을까 싶다. ( 오류 있다고 나오면 좌측 하단 새로고침 눌러주면 잘 나온다 ) #1 뭔가 있어 보이는 초반 세팅 컴포넌츠 폴더에 Dice 폴더 만들어서 아래 파일들을 생성해준다. index.js Dice.js DiceFace.js dice.sass 컴포넌트에 입혀줄 스타일은 sass 파일로 만들어준 뒤 dice를 사용하는 컴포넌트에서 Import 해서 사용하거나 글로벌 sass에서 import ..