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

(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에서 동적..

오늘은 pinia 안에서 axios 쓰는 방법에 대해 알아보자 (사실 뭐 vuex 말고 pinia에서 axios 쓴다고 달라질 거는 거의 없다) 먼저 axios를 사용하기 위해서는 당연히 먼저 설치를 해줘야 한다 터미널에서 npm install axios 를 해주고 main.js 혹은 main.ts에 app.config.globalProperties.$axios = axios를 추가해 준다 참고로 나는 TMDB에서 인기 영화를 가져와 보겠다 TMDB에서 API 사용하는법은 다른 블로그나 문서도 많으니 찾아보시길 쨌뜬 스토어에서 const getMovieData = () => { axios({ method: "get", url: "https://api.themoviedb.org/3/movie/popular..

저번시간에 이어서 오늘은 Getters와 Actions에 대해 알아보겠다 Getters getters는 vuex에서와 마찬가지로 store에 computed라고 생각하면 될거같다 먼저 store에서 어떻게 정의하는지 봐보자 일단 count라는 state값을 10으로 저장했고 타입은 넘버로 해줬다 굳이 타입 지정 안해줘도 되는데 그냥 한번 해봤다 원래 ts에서 변수 타입 선언할때 const count: number = 10 요렇게 하면 되는데 ref 쓸 때는 저렇게 하는것 같다 무튼 count값에 10을 저장하고 getters에 doubleCount를 정의해 줬다 컴포넌트에서 불러와서 쓰는거는 state를 불러와서 쓰는것과 같다 이런식으로 불러와서 쓰면 되는데 count값을 바꾸는 것 까지 시도를 해봤다 ..

오늘은 pinia에 대해 알아보겠다 캐릭터는 귀엽고 좋네 ㅋㅋㅋ pinia가 뭐냐면 vuex와 같이 vue에서 사용하는 상태관리 라이브러리이다 vue3에서 지정한 공식 상태관리 라이브러리이다 나도 원래는 vuex를 계속 사용하려 했지만 vue3에서 공식 지정하기도 하고 여러가지 장점이 있어서 pinia에 대해 알아보려고 한다 특징과 장점 1. 가볍고 직관적 api pinia는 vuex보다 더 가볍고 직관적이라고 한다 또한 vue3의 Composition API와 함께 사용되어 vue3에서 vuex보다 더 적합하다고 한다 2. TS와 호환 pinia는 타입스크립트와 완전히 호환된다 3. 컴포넌트 단위로 상태를 구성할 수 있다 뭐 이러한 특징과 장점들이 있고 이제 하나하나 뜯어서 어떻게 사용하는지 알아보자 ..