전체 글

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

추석 연휴가 끝났지만 나는 펑펑 아주 펑펑 놀았다 이 정도면 진짜 뽀로로랑 친구 할 수 있을듯... 연휴가 끝나고 다음날 싸피에서 프로젝트를 같이 했던 친구들을 만났다 대하전? 이랑 수육 먹었는데 가격은 좀 있었지만 맛있긴 했다 나 포함 총 네명이서 먹었는데 왜 나만 여자친구 없음???????? 나 빼고 세명다 남자친구나 여자친구가 있었다... 그것도 심지어 다 싸피에서 만난 사람들... 나는 그동안 뭐했을가.... 아무튼 그렇게 놀림을 받고 다음날 또 출근해야 하니 술은 얼마 안먹고 집에 갔다 다음날에는 원래 약속이 없었는데 이 날따라 일도 많고 힘들어서 회사 동료와 술 ㄱ? 해서 갑자기 퇴근하고 술먹으러 갔다 회가 땡겨서 회사 주변 회 파는곳 찾다가 숙성회 파는 이자카야가 있어서 저기로 가게됐다 파스..

길고 긴 연휴 이번 연휴는 거의 일주일이나 쉬었다 나는 연휴 전날에 연차 쓰고 하루 전에 광주에 내려갔다 첫날은 뭐 밤에 도착해서 집에서 짐정리하구 다음날엔 치과 가서 스케일링 받구 오랜만에 싸피 코치하는 친구를 만났다 싸피다닐 때 자주 갔었던 곱창볶음 맛집!! 곱창도 진짜 맛있고 저기 가면 계란찜은 무조건 시켜야함 무 조 건! 저거 먹고 2차는 육사시미에 하이볼 먹었다 얼음이 귀여웠다 ㅋㅋㅋㅋㅋ 육사시미두 맛있구 근데 요즘 하이볼 자주 먹는데 쭉쭉 들어가니까 먹다보면 하도 많이 먹어서 돈 생각 안 하고 먹다 보면 계산할 때 오잉?? 하게 된다 ㅋㅋㅋㅋㅋㅋ 오랜만에 만나서 얘기할 게 엄청 많아서 끊임없이 수다 떨다가 집에 갔다 ㅋㅋㅋㅋㅋ 다음날엔 중학교 친구들 만나는 날이었다 그래서 친구 한 명이랑 먼저..

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

인터페이스(Interface) 오늘은 타입스크립트 Interface에 대해 알아보겠다 아마 나와 비슷한 수준의 주니어 프론트엔드 개발자라면 인터페이스 라는 단어를 거의 들어보지 못했을 것이다. 나는 그나마 싸피 프로젝트를 하면서 코틀린으로 안드로이드 앱 개발을 한 적이 있는데 그 때 레트로핏을 하면서 인터페이스를 사용해 본 적이 있다 타입스크립트의 인터페이스도 그것과 비슷한 느낌이다 타입스크립트의 인터페이스는 객체를 위주로 다루고 객체의 껍데기 혹은 설계도로 이해하면 된다 객채의 타입의 틀을 만들어 주는거다 예시를 봐보자 // 인터페이스의 정의 interface Todo { id: number; content: string; completed: boolean; } // 변수 todo의 타입으로 Todo ..

불타는 금요일 그냥 바로 집에 갈 순 없지! 회사에서 가까운 신사역에 가서 맛있는 저녁을 먹었다 성수명당이라는 곳을 갔는데 금요일 저녁이라 웨이팅 많을가봐 걱정했는데 생각보다 거리도 한적하고 자리도 꽤 있었다 사진은 못찍었는데 테이블 양 옆에 커튼이 있어서 다른 사람들 신경도 안 쓰이고 분위기가 좋았다 물병부터 느낌있었다 ㅋㅋㅋㅋㅋㅋ 나는 얼그레이 하이볼, 친구는 복분자 하이볼을 시켰다 하이볼 종류가 많았는데 난 역시 얼그레이 하이볼이 젤 좋다 술맛도 꽤 많이 나고 맛있었다 음식은 후토마키와 해물 떡볶이? 를 시켰는데 둘 다 맛있었다 (내가 봐도 음식사진 진짜 못 찍는 듯 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ) 그리고 특이하게 후토마키에 저렇게 초를 꽂아서 주는데 그냥 별 생각없이 초 안 끄고 먹다가 초가 끝..

오늘은 뷰3에서 ts를 이용해서 변수를 선언하는 방법과 컴포넌트를 불러와서 쓰는 방법을 알아보겠다 (아직 공부 초반이라 틀리거나 부족한 부분이 있을수도 있따 이해해라) 그리고 composition api에서 을 사용할거다 먼저 저번시간에 프로젝트 생성까지 한 프로젝트에서 내 입맛대로 하려고 layout 폴더를 삭제하였고 그에 따른 라우터도 정리해주고 component에 ByeWord.vue 파일을 추가해 주었다 컴포넌트 불러오기 컴포넌트를 불러와서 다른곳에서 보여주기 위해서 원래 했던 방식대로 export default { name: ""} 요런식으로 하려했더니 에러가 나는거 아닌가! 이게 뭐고 저기 에러 메시지에 나와 있듯 안에 export를 못쓴다는데? 그래서 공식문서를 보니까 이 전에는 export..

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