세상을 살아가는 지혜

vue는 반응형 상태의 변수를 만들기 위해서 ref를 주로 쓴다. 이걸 쓰면 C에서 포인터 처럼 asterisk(*)와 같이 .value를 통해서 실제 값에 접근할 수 있다. Vue나 React가 핫한 이유도 반응성이 한 몫을 하고 있는데, 일반 변수가 추적이 어려운 이유는 아래 링크에 나와있고, https://ko.vuejs.org/guide/essentials/reactivity-fundamentals.html#why-refs 반응형 기초 | Vue.js ko.vuejs.org ref를 쓰다보면 내가 직접 선언한 변수들은 자연스레 .value를 사용하겠지만 그렇지 않은 경우거나 프로젝트 양이 방대해 질수록 ref로 선언한 변수인지 일반 변수인지 헷갈리게 된다..ㅎ 실 예로 Nuxt에서 useFetch..

nuxtjs든, nextjs든 비슷할거라 본다. 어쨋든 frontend단에서 뭔가 일어나는것이고,, frontend단은 backend단에 axios던 fetch던 데이터 통신을 통해서 정보를 가져오면되는거다.. 물론 기존 SPA형태가 아닌 SSR까지 들어간다면 backend(django, ruby 등)단의 어플리케이션서버와 node서버가 통신하는 형태가 될것이다. 그래서 cors_origin의 whitelist도 django쪽에 추가도 해줘야되는거고, 암튼 서론은 줄이고 통합을 어떻게 해야되냐.. ssr이냐 csr이냐에 따라 달라지는데, csr의 경우 bundling된 main.js와 같은 파일하나가 떨어진다.. 그 파일을 django쪽 index.html에서 불러오면 되는거고,, ssr이면 index...

먼저, 이번 튜토리얼의 목표는 django + vite + vue + tailwind 환경에서 hmr이 정상적으로 작동하는 boilerplate를 구축하는 것이 목표이다. 제가 django + vue연동 과정에서 webpack을 사용했는데,, 프로젝트가 커지면서 어마어마하게 느려져서 이번엔 vite를 도입하기로 마음먹었다. 생각보다 환경구축 과정이 까다로워서 포스팅으로 공유하게 됐다. tailwind에 대해서 이야기를 드리면 taliwind css만으로는 modal이나 다양한 js와 반응하는 컴포넌트들을 만들기가 까다롭다. 그래서 파생되는데 패키지를 추가해줘야되는데 내 경우는 flowbite를 사용하려다가 hmr이 vite환경에서 제대로 작동안해서 현재는 tailwind-elements를 사용하고 있다...

https://github.com/iamport/iamport-vue-example/blob/master/manuals/CERTIFICATION.md GitHub - iamport/iamport-vue-example: Vue.js 에서 아임포트를 연동하기 위한 예제입니다. Vue.js 에서 아임포트를 연동하기 위한 예제입니다. Contribute to iamport/iamport-vue-example development by creating an account on GitHub. github.com 위 내용 참고해서 vue단에서 인증처리, 아엠포트사에서 제공해주는 예시코드로도 충분히 짤 수 있다. 그 뒤 결과는 밴엔드쪽으로 전달해줘야하는데, https://github.com/iamport/iamport..

const i = that.initial_listing_items.find((_item) => _item.id == item.id); const is_same = JSON.stringify(i) == JSON.stringify(item); 서비스가 방대해질 수록 고민해야할 것들이 늘어난다. 근래 들어서 고민하던것 중 frontend에 약간의 과부하가 걸리더라도, 불필요한 업데이트를 하지 않도록 하려면 어떻게 해야할까라는 고민이 생겼다. https://stackoverflow.com/questions/65280254/what-would-be-the-most-efficient-way-of-tracking-deleted-objects-on-the-front-en What would be the most eff..

Veeprovider가 늘어날 수록, 유효성 체크 때문에 페이지가 굉장히 느려질 수도 있다.. 기본적으로 특별히 입력이 없더라도 textfield는 유효성 검사를 하는데, 그럴 필요가 없는 상황이라면 굳이 blur가 일어날때는 유효성 검사가 필요없을지도 모른다. 또한 input도 실제 인풋이 없을때(text입력이 없을때) 처리할 필요가 없다면 custom mode를 적용하여 좀 더 가볍게 validation 체크를 해도 좋다. https://vee-validate.logaretm.com/v3/guide/interaction-and-ux.html#custom-modes Interaction and UX | VeeValidate Interaction and UX Client-side validation is..

hard-source-webpack-plugin 으로 빌드 최적화를 하다가 제목과 같은 에러가 나는 경우가 있었다. 의존관계가 조금이라도 바뀌면 변경 된 사항을 제대로 업데이팅하지 못하는 과정 때문에 생기는 에러였다. 의존관계가 바뀐경우 cache 폴더를 삭제해주면 간단하게 해결이 가능한데, 에러 뜰때마다 수동으로 해줘야 한다는게 불편하기 때문에 hard-source-webpack-plugin-fixed-hashbug 이라는 개선 패키지가 있다. 해당 패키지는 의존관계 변경시 자동으로 cache폴더를 삭제 해준다. 변경 후 아직까지는 에러 없이 잘 동작하는 듯하다.

General output time took 2 mins, 31.04 secs SMP ⏱ Loaders cache-loader, and thread-loader, and babel-loader took 1 min, 24.32 secs module count = 391 mini-css-extract-plugin, and css-loader, and postcss-loader, and sass-loader took 1 min, 18.69 secs module count = 95 css-loader, and postcss-loader, and sass-loader took 1 min, 18.66 secs module count = 95 vuetify-loader, and cache-loader, and vue..

watch 요소는 특정 data가 변경이 일어났을때 동작하는 기능이다. 해당 기능을 통해 특정 data의 변화를 감지하고 그에 따른 처리가 가능하다. 비슷한 기능으로는 computed 요소가 있는데 공식문서에서는 명령형 프로그래밍인 watch 보다는 선연형인 computed를 선호한다고 되어있다. 나도 그런 이유로 주로 computed를 사용했으나 이번엔 특별히 computed 내부에서 추가적으로 처리해야할 로직이 없었고 단순히 options 내부 값들을 저장해주는 로직뿐이여서 watch 기능을 사용하게 되었다. 본론으로 들어가서, watch 기능을 사용하는데 nested object는 제대로 watch 요소가 제대로 작동하지 않는다. watch: { options: function(val) { loca..

github.com/webpack-contrib/eslint-loader [ webpack-contrib/eslint-loader [DEPRECATED] A ESlint loader for webpack. Contribute to webpack-contrib/eslint-loader development by creating an account on GitHub. github.com ](https://github.com/webpack-contrib/eslint-loader) emitError / emitWarning 에러/경고수에 따라서 에러/경고 표시를 조절해서 보여주는데, 해당 기능을 끄려면 본 옵션을 true로 바꿔주면된다. failOnError / failOnWarning 내가 찾던 옵션인데, 빌..