현재 Vue.js(Quasar framework 사용중)을 이용하여 웹개발을 진행중에있다. Quasar framework 를 사용한 이유는 이전 게시글에도 썼지만, SSR(서버사이드 렌더링)을 위함과 Quasar Plugin 등을 사용하기 위해서 채택하게되었다. Quasar를 사용하기 시작하였을때는 거의 초창기여서 많은 버그가있었으나 현재는 많이 안정화가 된듯하다. (거의 이틀에 한번 업데이트..) 본론으로 들어가서 현재 인증은 JWT 인증을 사용하고있다. JWT를 쿠키에 넣어서 인증에 사용하고있는데 SPA와 SSR을 혼용하고있기때문에 많은 실수가 있었다. Axios 초반에는 각 파일마다(some.vue) axios를 import 해서 사용하였다. 참.. 멍청한 짓이였다. 아무래도 vue를 처음사용해봤을..
2020/01/20 - [문제/Vue.js] - SSR 데이터 매칭 문제...... SSR 데이터 매칭 문제...... Quasar SSR에서 문제.. /member/:id /member/:id 라는 라우터가있을때 :id 를 axios.post(`/member/${memberid}`) 이와같은식으로 요청하지만, 해당부분은 SSR 처리를하는데, axios.interceptors.response 에서는.. focuspro.tistory.com 위 문제뿐만아니라, 거의 모든 문제를 해결한것같아서 상당히 만족스럽다. 사실 위 문제는 문제도 아니였... 두가지 해결방안이있다. src/router/index.js 에서 해결하거나 [비추!] // 이유는 뭐.. 안써도 다들아시겠지만.. // 아래와같은 코드는 결국 2..
//App.svelte Hello {world}! React, Vue 는 여전히 인기가많고 사랑받는 웹 프레임워크 이다. Angular도 있지만.. 개인적으로 좋아하지않아서 제외.. Svelte 는 관심이있었으나, Vue에만 치중하고있는 요즘 오직 관심만 가지고있던 프레임워크다. 관심가지게된 이유는 다음과 같다. Vue.js 과 같은 짧은 러닝커브 Vue.js 보다 훨씬 간단하게 코드를 짤수있고, 그만큼 적은 용량으로 개발이가능하다. 물론 이정도로 관심을 갖기엔 너무 적고, 가장 관심이 갔던부분은 이부분이다. 가상돔을 사용하지않는다. 또한 위의 3개 프레임워크보다 모든 리소스를 다운받는 속도가 빠르다. Svelte의 기본문법 // App.svelte [Vue와 같이 Svelte도 별도의 파일확장자를 가진..
Quasar SSR에서 문제.. /member/:id /member/:id 라는 라우터가있을때 :id 를 axios.post(`/member/${memberid}`) 이와같은식으로 요청하지만, 해당부분은 SSR 처리를하는데, axios.interceptors.response 에서는 정상적으로 404에러가 반환되지만, 문제는 router.push 를하면 중복된다는 에러가발생.. 어떻게 해결해야할지.. router/index.js 에서는 안잡힘 [beforeEach]
Vue.js 플러그인 관련 사이트들이다. 아래사이트에서 수많은 Vue.js 예제들을 확인가능하니, 개발에 어려움시 참고하면 도움이 될것같다. https://vuejsexamples.com Vue.js Examples A nice collection of often useful examples done in Vue.js vuejsexamples.com https://madewithvuejs.com A collection of projects made with Vue.js – Websites, UI Components, Frameworks, Apps and more! A collection of projects made with Vue.js – Websites, UI Components, Frameworks..
Vue.js 와 Quasar 프레임워크를 사용하면서 한동안 해결하지 못했던 문제를 정리해본다. Quasar 프레임워크에는 SSR(Server Side Rendering) 을 제공해준다. Prefetch 기능인데, 해당 기능으로 SSR 작업을 하면된다. 여기서 문제가 있었는데, 바로 meta data 설정이다. export default { meta: { title: 'Index Page', titleTemplate: title => `${title} - My Website`, } } 물론 위처럼하면 정적 데이터를 가지고 title을 설정해주는것이니 아무런 문제가 없다. 하지만 export default { meta: { title: this.getData.title, titleTemplate: title..
https://quasar.dev Quasar Framework - Build high-performance VueJS user interfaces in record time Developer-oriented, front-end framework with VueJS components for best-in-class high-performance, responsive websites, PWA, SSR, Mobile and Desktop apps, all from the same codebase. Sensible people choose Vue. Productive people choose Quasar. Be both. quasar.dev 최근 quasar(퀘이사) 프레임워크로 SSR 작업을 하게되었는데,..
Vue.js 로 프론트를 개발중에 다음과 같은 에러가 발생하였다. /view/[view_id] 와 같은 경로가 있는데, 해당 경로는 view_id를 가진 게시물을 볼 수 있는 경로이다. /view/[view1] /view/[view2] 위와 같은 2개의 링크가 있는데, view1으로는 잘이동이되나, view1에서 view2로 이동하려면 페이지가 로드되지않는 문제가 발생한다. 물론, 다른 /notic/ 링크로 갔다가 다시 view2로 이동하면 이동이 잘된다. 문제해결을 하기 위해 다음과 같은 시도를해봤다. 기존 view2 수정 view2 솔직히 수정 후에는 될 줄 알았는데 바보같은생각이였다. 역시나 똑같이 안됨. 그외 @click=replaceUrl(item.url) 으로 클릭 이벤트가 있을시 replac..