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

오늘은 vuetify를 활용해서 반응형 웹을 쉽게 만드는 법을 알아보겠다!! 보통 반응형 웹을 만들기위해서 css 에서 미디어 쿼리를 사용해서 만드는 걸로 알고있다 물론 미디어 쿼리를 사용하면 내가 설정한 화면 크기 안에서 특정 스타일이 적용되게 할수있고 뭐 간단한 텍스트 같은것들은 % 나 vw vh등을 통해서도 구현이 가능할거다 하지만 매번 미디어 쿼리를 작성하기 귀찮기 때문에 나는 오늘 뷰티파이를 사용해서 반응형 스타일을 작성하는 법을 알려주겠다 일단 터미널에서 npm create vuetify 명령어를 입력해서 뷰티파이 프로젝트를 생성한다 이런식으로 프로젝트가 만들어 질텐데 styles파일에 scss 파일을 하나 추가해주고 helloWorld.vue 파일에 기존에 있던 내용들을 삭제해주고 안녕 반응..

오늘은 뷰3에서 타입스크립트를 적용해서 프로젝트를 생성하는 방법에 대해 알아보겠다 그리고 프로젝트를 하며 vuetify를 사용할 것이기 때문에 vuetify도 추가해 줄거다 먼저 터미널에서 npm create vuetify를 입력해 준다 (참고로 여기서 내가 사용한 노드 버전은 18.17.1 이다) npm create vuetify 입력해 준 뒤 적절한 프로젝트 이름을 입력하고 엔터 그럼 이제 preset을 선택하라고 하는데 여기서 다 익숙한데 저 피니아? 무튼 Pinia를 처음 들어본 사람들도 있을 텐데 (내가 그랬었음) 원래 뷰에서 상태관리 라이브러리를 vuex를 써왔는데 vue3부터는 Pinia를 쓰는 게 공식문서에서도 채택한 거라나? 무튼 pinia는 상태관리 라이브러리이다 쪼금 찾아봤더니 pin..