leteu / 개발 블로그

프로그래밍/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 ..

프로그래밍/Vuejs

[Vue 3] 라우트 변경, 새로고침, 창 닫기 감지

웹 소캣 이용해서 채팅 서비스 만들다가 새로고침으로 방 나가는 방법 예외 넣다가열불 터져서 알아보다가 해결해서 글 적어본다. https://leteu.dev/posts/vue-route-observe# 이 페이지를 어디서 찾아 들어왔는가 궁금할 땐 아래 글 확인2023.10.13 - [프로그래밍/Javascript & TypeScript] - [JS] 네비게이션 타이밍 가져오기 (새로고침, 뒤로가기, 네비게이트)  #1 Watch 그냥 주소만 바꿔서 나가는 경우일 때 사용할 수 있다.사용하긴 제일 쉽지만 별로 맘에 드는 방법은 아니다.새로고침 시엔 라우터가 변경되는 게 아니라 확인이 불가해서 동작하지 않는다. 기본  next 함수는 아규먼트로 아래 예제처럼 사용 가능하다.next('/'); // '/' ..

프로그래밍/Javascript & TypeScript

[JS] ES6 백틱 ( ` )

백틱 모르는 사람들이 꽤 많은 거 같아 써본다. ※주의) 안 써본 사람들은 있어도 한 번만 써본 사람은 없다. 꼭 써보는걸 추천 #1 탬플릿 리터널 ES6부터 도입된 문자열이다. 백틱 ( ` ` )을 사용한다. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals Template literals - JavaScript | MDN 템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴입니다. 여러 줄로 이뤄진 문자열과 문자 보간기능을 사용할 수 있습니다. 이전 버전의 ES2015사양 명세에서는 "template strings" (템플릿 문 developer.mozilla.org 위 문서를 기반으로 포스팅한 글이다. ..