📌 목차 서론 기존 모달 관리 기존 모달 관리의 문제점 어떻게 해결해야할까? interface 잡아보기 왜 promise를 사용했는가? 어떻게 구현을 해야할까? 그럼 composition은 어떻게 사용이 되어질까? 결론 📌 서론 안녕하세요. 에디 입니다. 오늘은 가장 많은 분들이 고민하시는 모달 혹은 다이얼로그 관리에 대해서 한번 알아보겠습니다. 오랜 고민 끝에 나온 정의니 혹시 더 좋은 방법이 있다면 댓글로 달아주세요. 그럼 시작하겠습니다. 📌 기존 모달 관리 우리 한번 모달을 띄워야한다고 생각을 해볼까요? 그럼 우리 머리속에 가장 먼저 드는 생각은 vuex를 통한 스위칭 관리 일거예요. 대략적으로 이렇게 보통 구현을 했었을거 같아요. // store.js export default createStor..
📌 목차 요약 서론 vite란? vite 회사 프로젝트 적용하기 결론 📌 요약 기존 vite 적용후 build time 34897ms 548ms re-build time 3310ms 100ms 이하 📌 서론 개인 프로젝트에서 vite를 사용하면서 느꼈던 장점들을 토대로 회사 프로젝트에 적용을 해보았습니다. 기존에 있는 프로젝트를 vite를 적용 하면서 힘들었던 점들과 그것을 어떻게 해결했는지를 기술을 하는 글 입니다. 그럼 재밌게 읽어주세요! 😎 📌 vite 란? 먼저 들어가기 전에 vite가 생소하실거 같아 간략하게 vite에 대해 설명해보겠습니다. vite는 바이트 라고 읽지 않고 비잍라고 읽어야 한답니다. (빠르다는 뜻의 불어라서 이렇게 읽어야합니다.) 그리고 vite는 기존 webpack, rol..
📌 목차 서론 Vue SSR의 기본적인 설명 코드 설명 결론 참고 자료 📌 서론 안녕하세요. 이번에 라이엇 프로젝트가 vue를 커스터마이징하여 ssr을 구현하여 client only의 컴포넌트가 없었습니다. 따라서 필요에 따라 컴포넌트 전체의 랜더링 시점을 결정하는 Nuxt에서의 컴포넌트를 만들게 되었습니다. 그에 따라 이글에서는 사용방법 및 구현 방식을 설명하고자 합니다. 💡 Nuxt에서 client-only 컴포넌트란? ClientOnly 컴포넌트는 자식요소들을 client-side에서 랜더링 시킵니다. 📌 Vue SSR의 기본적인 설명 일단 해당 컴포넌트에 대해서 조금 더 깊게 이해를 하자면 먼저 customized vue ssr부분을 먼저 이해를 해야합니다. 보통 SSR일때는 server에서 데이..
📌 목차 서론 usedExport 나라 탐방 devtool 무기 획득 webpack-bundle-analyzer 세계 지도 획득 Element-UI 나라와의 전쟁 그리고 패배… Lottie.js 나라와의 전쟁 결론 📌 서론 안녕하세요. 회사에서 빌드 타임이 길어져 많은 비용이 발생하고 있었습니다. 이 문제를 한번 해결을 해보고 싶었습니다. main 프로젝트에서 build 최적화를 시키는데 기승전결의 형식으로 재밌게 풀어나가보려고 합니다. 그럼 재밌게 읽어주세요! (피드백도 너무나 환영합니다. ) 그럼 출발 ! 🚀 📌 usedExport 💡 사용되지 않는 코드들이 build가 되는 모습을 보았고 나는 그걸 없애고 싶었습니다. 출근을 하여 들뜬 마음으로 build가 된 main.js를 읽고 있었을때 였습니다..
📌 목차 Introduction v-model(value, event) v-model argument mutilple v-model Conclusion Reference 📌 Introduction 안녕하세요. vue3에서 v-model에 새로운 기능들이 있어서 이렇게 포스팅을 작성하게 되었습니다. 해당 코드는 여기서확인 할 수 있습니다. 📌 v-model(value, event) 새롭게 바뀐 vue3에서는 이제 props로 value와 input 이벤트로 v-model을 사용할 수 없습니다. value -> model-value @input -> @update:model-value 로 바뀌었습니다. 📌 v-model argument 이런식으로 name을 지정해 줄 수 있습니다. // MyName.vue ..
📌 목차 Introduction What is teleport? Usage Conclusion Reference 📌 Introduction 안녕하세요. 이번에는 teleport에 대해서 알아보겠습니다. 해당 코드는 여기서 확인할 수 있습니다. 📌 What is teleport? teleport는 vue2에서 vue-teleport와 똑같습니다. 문서에서는 주로 modal을 사용할때 쓴다고 하네요. to를 이용해서 보낼수 있는데 그냥 일반적인 string으로는 사용하지 않습니다. 아이디나 클래스를 사용해서 사용하라고 하네요. 당연한 얘기지만 원하는 곳으로 제대로 보낼수 있어야 하기 때문입니다. 📌 Usage // App.js MyDiv01 MyDiv02 이제 div(#teleport)안으로 들어가집니다. ..
📌 목차 Introduction What is Provide/Inject? Usage Reactice Usage Conclusion Reference 📌 Introduction 안녕하세요. 이번 포스팅에서는 새로운 provide/inject에 대해서 알아보겠습니다. 해당 코드는 여기서볼수 있습니다. 📌 What is Provide/Inject? 만약 이런 상황이라고 가정해볼게요. 상위의 부모에서 물론 props로 전달이 가능하겠지만 좀더 깔끔한 방법으로 한번에 전달할 순 없을까요? 네 그게 provide/inject입니다. 🎉 📌 Basic Usage 컴포넌트 구조 입니다. |_App -> provide ⭐️ |_MyDiv1 |_MyDiv2 |_MyDiv3 |_InjectedPractice -> inje..
📌 목차 Introduction Life cycle in vue Hook inside setup Conclusion Reference 📌 Introduction 안녕하세요. 오늘은 Vue3에 새로운 life cycle에 대해서 알아보려고 합니다. 해당 코드는 여기서 확인할 수 있습니다. 📌 Hook inside setup 먼저 새롭게 바뀐 것들에 대해서 Vue3 공식 문서에 자세하게 나와있습니다. 네 이제 beforeCreated나 created는 굳이 선언을 할필요가 없어 졌습니다. import { onMounted, nextTick, onUpdated } from 'vue'; export default { name: 'App', components: { HelloWorld }, setup() { co..
