📌 목차 서론 기존 모달 관리 기존 모달 관리의 문제점 어떻게 해결해야할까? interface 잡아보기 왜 promise를 사용했는가? 어떻게 구현을 해야할까? 그럼 composition은 어떻게 사용이 되어질까? 결론 📌 서론 안녕하세요. 에디 입니다. 오늘은 가장 많은 분들이 고민하시는 모달 혹은 다이얼로그 관리에 대해서 한번 알아보겠습니다. 오랜 고민 끝에 나온 정의니 혹시 더 좋은 방법이 있다면 댓글로 달아주세요. 그럼 시작하겠습니다. 📌 기존 모달 관리 우리 한번 모달을 띄워야한다고 생각을 해볼까요? 그럼 우리 머리속에 가장 먼저 드는 생각은 vuex를 통한 스위칭 관리 일거예요. 대략적으로 이렇게 보통 구현을 했었을거 같아요. // store.js export default createStor..
📌 목차 서론 usedExport 나라 탐방 devtool 무기 획득 webpack-bundle-analyzer 세계 지도 획득 Element-UI 나라와의 전쟁 그리고 패배… Lottie.js 나라와의 전쟁 결론 📌 서론 안녕하세요. 회사에서 빌드 타임이 길어져 많은 비용이 발생하고 있었습니다. 이 문제를 한번 해결을 해보고 싶었습니다. main 프로젝트에서 build 최적화를 시키는데 기승전결의 형식으로 재밌게 풀어나가보려고 합니다. 그럼 재밌게 읽어주세요! (피드백도 너무나 환영합니다. ) 그럼 출발 ! 🚀 📌 usedExport 💡 사용되지 않는 코드들이 build가 되는 모습을 보았고 나는 그걸 없애고 싶었습니다. 출근을 하여 들뜬 마음으로 build가 된 main.js를 읽고 있었을때 였습니다..
목차 Introduction 설정 기본적인 mdx controls argTypes Advanced argTypes 전체적인 코드 Conclusion Reference 📌 Introduction 안녕하세요! 오늘은 storybook을 mdx로 하는 법에 대해서 알아보겠습니다. mdx로 작성하는 이유는 docs를 만들기 위함입니다. 그럼 한번 떠나볼게요~ 📌 설정 일단 Docs는 자동적으로 parsing해서 만들어주곤 합니다. 그러나 만들지 않은 것에 대해서 만드는 부분이 조금 그래서 저는 설정을 꺼주려고 합니다. // preview.js import { addParameters } from "@storybook/vue"; addParameters({ docs: { page: null } });📌 기본적인 ..
목차 Introduction Implement MyButton MyButton story Conclusion Reference 📌 Introduction 안녕하세요. 오늘은 간단하게 뷰로 MyButton을 만들고 그걸 storybook으로 한번 활용 해보겠습니다. 🎉 📌 Implement MyButton MyButton은 간단하게 색을 props로 받아 변경하는 것으로 구현을 해보겠습니다. export default { name: "MyButton", props: { btnType: { type: String, default: "blue", }, }, computed: { btnTypeClass() { return `my-button__${this.btnType}`; }, }, methods: { onC..
목차 Introduction 초기 설정 Conclusion Refernce 📌 Introduction 안녕하세요. 오늘은 storybook6를 vue에 적용하는 법을 알아 보겠습니다.🎉 storybook/cli를 통해 간단하게 초기 설정을 해보겠습니당 📌 초기 설정 해당 버전은 vue2에 기준하여 진행을 합니다. 먼저 vue project를 하나 만들어주세요 vue create vue-storybook6 그런 뒤에 해당 폴더에서 storybook/cli를 통해 storybook 초기 설정 template을 가져옵니다. cd vue-storybook6 npx -p @storybook/cli sb init 📌 Conclusion 이렇게 새로운 storybook 사용에 대해 준비를 해보았습니다. 다음 포스팅은..
📌 목차 Introduction Gherkin?이 뭔데? Gherkin 키워드 Good And Bad Gherkin example Conclusion Reference 📌 Introduction 안녕하세요. 이번 포스팅은 드디어 BDD를 시작하는 첫걸음 입니다. 바로 Gherkin인데요. 그럼 지금부터 Gherkin이 뭔지 사용은 어떻게 하는지에 대해 알아보겠습니다. 👍 📌 Gherkin?이 뭔데? Gherkin이란 cucumber의 표현 형식입니다. 아래 그림을 봐주세요. Gherkin은 바로 이렇게 Given, When, Then으로 정의를 합니다. Before Gerkin을 보면 기획자로 보이는 사람과 개발자로 보이는 사람이 서로 대화를 합니다. 개발자의 말을 기획자는 이해를 못하죠. 하지만 Ghe..
📌 목차 서론 Builder-Direrctor Pattern 이란? Builder-Director Pattern Vue에 적용해보기(FormBuilder) Implementing Vuex Implementing Vee-Validate Conclusion Reference 📌 서론 Component로 vue를 관리 할때 우리는 이러한 문제들을 마주 하게 됩니다. Components |_SignInForm.vue |_CreditCardFrom.vue |_RegisterFrom.vue |_EditForm.vue |_SignUpForm.vue |_TeamAddForm.vue |_... 만약 이 수많은 Form들을 |_FormBuilder.vue |_FormBuilder.js |_FormDirector.js 로 ..
목차 Introduction What is Test Double Stub Spy Mock Conclusion Reference 📌Introduction 이번편은TDD를 하기위해 test double이라는 것에 대해 부가적으로 알아보는 포스팅입니다. 📌What is Test Double? 테스트 더블이란 실제 객체를 대신해서 테스팅에서 사용하는 모든 방법을 말합니다. 예를 들어 보겠습니다. 다음과 같은 실제 api 통신을 하는 함수가 있다고 가정해봅시다. asnyc function getTodos() { await axios.get('jsonplace-holder/todos'); } getTodos를 테스팅하려면 실제 네트워크 api를 사용하게 됩니다. 이것은 네트워크 연결 상태에 영향을 받을 것이고 항상..
