milliwonkim의 블로그

import { defineStore } from 'pinia'; export const useDiariesStore = defineStore('useDiariesStore', { // TypeScript에서 타입 체킹을 위해 초기화 값을 넣어줌 state: () => ({ diaries: [{ id: 0, title: '', contents: '', date: new Date() }], }), getters: { getDiaries: (state) => state.diaries, }, }); 이 다이어리 pinia store에서 diaries를 Vue 컴포넌트에서 접근해보자 {{ diary.title }} {{ getDate(diary.date) }} {{ diary.contents }} 일기쓰기

오른쪽에 AWS계정 섹션 중, ‘생성’ 클릭 그 후 https://kiwonkim-aws-2.signin.aws.amazon.com/console 를 다른 크롬 시크릿탭 혹은 다른 브라우저에서 복붙 로그인 하면 이 화면이 뜹니다.

React에서는 react-dom/test-utils, testing-library/react, enzyme 등 유닛 테스트를 실행할 수 있는 방법이 있습니다. 반면 Vue의 경우, 리액트에서 인기인 testing-library의 Vue 버전인 testing-library/vue가 있긴 하지만, 주로 vue-test-utils를 사용하는 것 같아, vue-test-utils로 적용해보았습니다. 테스트 전, 테스트를 구성을 하도록 하겠습니다. // jest.config.jsmodule.exports = { preset: '@vue/cli-plugin-unit-jest/presets/typescript-and-babel', moduleFileExtensions: ['js', 'jsx', 'json', 'vu..

// @/views/TeacherPage/TeacherCard.vue {{ card.name }} 선생님 {{ card.currentJob }} 주요분야: {{ card.mainSection }} {{ card.price }} {{ card.evaluationIndex }} / 10.0 // @hooks/useGetCssModule.ts import { useCssModule } from 'vue'; interface CssModuleProps { [key: string]: { [key: string]: string; }; } interface ICssModule { [key: string]: string; } function useGetCssModule({ cssModuleProps }: CssModu..

뷰포트를 ref로 인식한 값을 이용해서 뷰포트 넓이에 따라 Vuetify의 Hamburger Icon와 네비게이션메뉴를 조건부 렌더링하도록 하는 로직을 구현해보았습니다 ALLIGHT {{ headerButton }} header width가 640px이 넘은 경우 header의 width가 640px 이하인 경우 resize를 하는 로직을 react의 hook처럼 외부화 시킬 수 있습니다. // @/hooks/useResize.ts import { onMounted, onUnmounted, Ref } from '@vue/composition-api'; interface IRefs { clientWidth: number; } function useResize(refs: Ref, result: Ref): v..

React에서는 다음과 같이 String, Boolean 값이든, 함수든 다 props로 내려서 그대로 실행할 수 있습니다 const AComponent = () => { const [exampleString, setExampleString] = useState('') const handleRoute = () => { history.push('/some-route') } return ( ) } const BComponent = ({ exampleString, handleRoute }) => { return ( 클릭 ) } 하지만 Vue는 이것과 조금 다른 방법이 존재합니다. Vue에서는 상위 컴포넌트의 함수를 실행시키기 위해서는 emit이라는 것을 이용할 수 있습니다 ****TypeScript with ..

라이브러리의 경우, scoped CSS, CSS Modules 다 안됨 해싱이 되기 때문임 따라서 plain CSS 혹은 plain SCSS / SASS를 사용해야합니다. /* TeacherCard.scss */ .q-date__view { padding: 0; } // @/views/TeacherPage/TeacherPage.vue ... // 이 부분은 Quasar를 override할 부분이 아니기 때문에 // CSS Module로 해도 됨

Reset CSS를 담당하는 App.scss를 main.ts에서 import하면 됩니다. import { createApp } from 'vue'; /* import the fontawesome core */ import { library } from '@fortawesome/fontawesome-svg-core'; /* import font awesome icon component */ import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'; /* import specific icons */ import { faUserSecret } from '@fortawesome/free-solid-svg-icons'; import AOS from 'aos'..

Vue의 Composition API에서는 기존의 data()를 this로 접근하는 방식 대신, ref와 reactive로 접근하는 것으로 변경됐습니다. 거두절미하고, ref, reactive를 사용하는 방식은 다음과 같습니다 정확한 내용은 아니며, 사용할 때 얻었던 경험을 미루어 말씀드립니다. 참고링크입니다. https://v3.ko.vuejs.org/api/refs-api.html#toref Refs | Vue.js Refs 이 섹션에서는 싱글 파일 컴포넌트 문법을 사용해 예제를 설명하겠습니다. ref 내부에 값을 가지면서 반응적이고 변경 가능한 ref 객체를 반환합니다. ref 객체는 단 하나의 프로퍼티를 가지는 v3.ko.vuejs.org // ref는 초기화할 내용이 객체가 아닌 경우에 주로 사..