방문해 주셔서 감사합니다! 항상 행복하세요! - 문의사항은 메일 또는 댓글로 언제든 연락주세요. - "해줘","답 내놔" 같은 질문은 답변드리지 않습니다. - 메일주소 : lts06069@naver.com vuejs5 [VUEJS3] 뷰 환경에서 URL은 바뀌었지만 실제 라우팅이 안될 때 뷰 개발환경에서 URL이 바뀌었지만 실제 라우팅이 되지 않을 때가 있습니다. "중첩 라우팅" 인 환경에서 "단일 라우팅" 환경으로 동작 했다가 다시 "중첩 라우팅" 인 환경으로 이동한 경우 발생하는 케이스라 생각 됩니다. 이때 문제가 발생하는 구간은 중첩 라우팅에서 파라미터를 포함된 요청이 발생하는 경우 입니다. 여기서 눈 여겨 보아야 하는 구간은 name 입니다. name을 사용하게 되면 모든 필요한 파라미터를 명시적으로 전달해야 합니다. 부모 라우트에서 필요로 하는 파라미터가 자식 라우트에서 누락되면, Vue Router가 정확한 라우트를 식별하지 못해 이동을 수행하지 않을 수 있습니다. 반면, path를 사용하면 URL이 명확하게 지정되므로 이런 문제가 발생하지 않습니다. name을 사용하게되면 좀.. 2024. 4. 5. SPA 환경에서 배포가 이루어 졌을 때 새로 고침 방법 SPA 구성으로 된 웹 어플리케이션은 웹 서버로부터 1번의 정적 리소스를 받아와서 브라우저에서 구동하는 형태 입니다. 서버에서의 리소스를 1번만 받기 때 문에 부드러운 화면표현, 빠른 동작 등이 장점이라 할 수 있습니다. 그러나 어플리케이션의 규모가 커지게 되면(예 : 화면 200장 이상) SPA 구성으로만 동작시키게 되면 브라우저가 처음부터 많은 데이터를 받아야 하기 때 문에 오히려 더 성능이 느려질 수 있습니다. 그리하여 서버 렌더링을 어느정도 포함시킨 Next, Nuxt 같은 기술이 나오게 되었습니다. 운영중인 SPA 어플리케이션이 너무나 완벽한 기획과 개발에 의해 고칠 게 1도 없다면 배포(deployment)에 대해서 고민 할 필요가 없습니다. 그러나..개발자의 현실은 항상 애자일(Agile)과.. 2024. 2. 16. [Vuejs] chartjs 오류(NS_ERROR_FAILURE, chart.js, vue-chartjs) 뷰 환경에서 무료 라이센스 차트의 최강자인 차트js를 설치 해 보았습니다. 물론 처음 개발을 하기에..가장 최신버전으로 설치를 하였습니다. * 23년도 4월 기준으로 아래 버전으로 설치 하였습니다. { "chart.js": "^4.2.1", "vue-chartjs": "^5.2.0" } 워낙 훌륭한 차트답게 사용법도 쉽고 레퍼런스가 많아서 적용하는 데 문제는 없었습니다. 바, 선형, 원형 등 기존의 chartjs에서 제공하는 모든 차트를 사용 가능 하였으며, 사용법과 옵션도 거의 비슷 했습니다. https://vue-chartjs.org/ 📈 vue-chartjs vue-chartjs.org 그런데 차트 1개를 컴포넌트에서 사용 할 때는 아무런 이상이 없었지만, 2개 이상의 차트를 화면에서 표출하는 경우.. 2023. 4. 5. [Vuejs] vuex 설정시 만날 수 있는 경고(warn) vuejs 3버전에서 vuex를 연습하기 위해서 이곳저곳의 글을 참조하여 연습하던 중 만난 경고 문구 입니다. [Vue warn]: A plugin must either be a function or an object with an "install" function. 분명 시키는데로 했는데..왜 이러한 경고 문구가 발생하는지.. SPA의 기술이 이럴 때 마다 참 아쉽습니다. 기존의 개발방식이나 방법을 아에 없애는 경우도 허다하니까요. 아무튼, 해당 문제의 원인은 Vuex를 use 라는 함수에 넣어서 발생한 경우 였습니다. 해당 기능을 설명하는 vuex의 index.d.ts 타입스크립트를 따라가봐도 Vuex로 시작하는 export하는 구간은 없습니다. 제가 vuex 연습을 위해 참고 하였던 해당 포스팅에서.. 2023. 3. 17. [Vuejs] 글로벌 컴포넌트 등록시 경고(warning compilerOptions isCustomElement) 컴포넌트를 부트스트랩하는 파일에서 글로벌하게 등록하여 사용하면 다른 컴포넌트에서 별도의 import 없이 해당 컴포넌트를 어디서든지 불러올 수 있습니다. 아래는 메인 동작(부트스트랩, bootstrap)을 담당하는 샘플 파일모습 입니다. import { createApp } from 'vue' import App from './App.vue' import './assets/main.css' import 글로벌하게사용할컴포넌트 from './경로/이름.vue'; const app = createApp(App); app.component('별명', 글로벌하게사용할컴포넌트); //"별명" 값으로 글로벌하게 사용 합니다. app.mount('#app'); 요렇게 등록을 하고나면 따로 import하는 곳 없이 해.. 2023. 3. 15. 이전 1 다음
