자유로운 개발생활

안녕하세요. 이번에는 여러개의 vue component를 팝업으로 띄울때 dynamic component를 이용하는 법에 대해 적어보겠습니다. 일단 아래 예제를 살펴보겠습니다. Open A Open B 위 예제는 두개의 버튼이 있고 'Open A' 를 클릭하면 A 가 팝업되고, 'Open B'를 클릭하면 B 가 팝업되는 단순한 구조입니다. 위 예제는 짧게 작성되어 있지만, 화면이 좀 더 복잡해 지기 시작하면 코드는 한 줄이라도 줄이는게 보기도 좋고 유지보수에도 도움이 됩니다. 그리고 사용할지 말지도 모르는 popup 컴퍼넌트를 미리 import / rendering 해 놓는것도 좀 부담이 됩니다. 이때 vue에서는 매우 재미있는 기능 하나를 제공합니다. 바로 다이나믹 컴퍼넌트 라는 방식이며 기본 설명은 ..

안녕하세요. Vue.js로 개발을 다 하고 나서 테스트를 하다보니 백스페이스나 새로고침을 하고나면 값들이 초기화 되버리는 상황이 발생하게 되었습니다. 새로고침을 해도 store를 유지할 수 있게 vuex-persistedstate 적용하였지만 문제가 하나 발생했습니다. uxgjs.tistory.com/207 vuex-persistedstate 덕분에 Vue.js 화면을 새로고침 해도 안전해요. Vue.js로 프로젝트를 개발하는 경우 화면을 이동 할 때 일반 웹페이지처럼 페이지 전체를 새로 고침하는 방식이 아니라 SPA(Single Page Application)와 같이 javascript로 필요한 부분만 교체하는 식으로 개 ux.stories.pe.kr 제가 만든 site는 login 기능이 있어서 로그..

vue, vuetify로 웹페이지를 개발하다가 점점 시간이 지나다 보니 공통화해도 괜찮겠다 싶은 부분을 모아 유틸을 만들게 되었습니다. 이 유틸을 하나의 소스에서 사용할 때는 문제가 없었는데 3개정도 넘어가기 시작하면서 업데이트하기가 힘들어 졌고 npm package로 배포해서 사용하면 좋겠다는 생각을 하게 되었죠. 일단은 아래 블로그를 참고하여 npm에 첫번째 배포를 성공했습니다.velog.io/@rnfh1111/1[Vue] Component NPM에 배포 삽질기NPM에 첫 배포를 시도해 보았습니다. 완벽하지는 않지만 한글로 된 자료가 많이 없기에 작성해 봅니다. 목표 vue에서 사용 가능한 widget 형식의 modal을 만들어 배포해 보려고 합니다. 환경 작업환경velog.io음 근데 뭔가 이상한게..