오늘은 vue에서 pdfmake 라이브러리 사용하는 방법을 알아보자 pdfmake가 뭐냐면 말 그대로 pdf파일 만들어주는 라이브러리이다 http://pdfmake.org/#/ (참고로 공식 사이트에 playground도 있어서 거기서 여러가지 테스트를 해볼 수 있다) ts가 적용된 vue3에서 사용하는 방법에 대해 알아보겠다 vue 프로젝트 생성해주고 터미널에 npm install pdfmake 입력! 이제 vue 파일로 가서 pdf 파일을 어떻게 만들건지 작성해줘야하는데 먼저 import를 해줘야하는데 공식문서를 보면 타입스크립트는 이렇게 하라고 되어있다 그래서 똑같이 입력을 해주면 요런 에러를 만날 수 있다 에러 메시지에서 npm i --save-dev @types/pdfmake 이거를 시도해 보라..

오늘은 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. 컴포넌트 단위로 상태를 구성할 수 있다 뭐 이러한 특징과 장점들이 있고 이제 하나하나 뜯어서 어떻게 사용하는지 알아보자 ..

오늘은 뷰 프론트엔드 개발에서 꼭 알아야 할 생명주기 훅에 대해 알아보겠다. 오늘도 마찬가지로 공식문서와 여러 블로그들을 참고했고 최대한 뷰3 기준으로 작성하겠다. (항상 하는 얘기지만 혹시나 잘못된 정보가 있다면 댓글에 남겨주시길ㅠㅠ) 음... 공식문서에 일단 이렇게 나와있는데 내가 지금 아는 부분과 중요하다고 생각하는 부분을 중점으로 봐보자 일단 기본적으로 vue3 (컴포지션api) 에서 라이프사이클 훅을 사용하려면 라이프사이클 명칭 앞에 on을 붙이면 된다 ex) onMounted(), onUpdated() 등등 created 먼저 이 부분 내가 뷰2로 프로젝트했을 때 가장 많이 사용했던 라이프사이클 훅이 created였던 거 같다 근데 자세히 보면 옵션 api 에만 beforeCreate, cre..