Composable (6) 썸네일형 리스트형 [Vue3] Composition API와 Composable이란 무엇인가? 실무에서 Vue3를 이용해 아토믹 디자인 패턴을 적용한 공통 UI 컴포넌트 셋을 개발해고 있다. 원래 나는 React 개발자 였으므로, hooks 아키텍처에 익숙하기에, 대부분의 업무로직과 상태가 결합된 기능들을 composable로 뽑아내서 작업하려 하고 있다. 그런데 Vue3은 Vue2의 하위호환을 위한 Option API로 작성된 코드들도 혼용하는 경우도 꽤 보인다. 나는 Vue2를 안해보았기 때문에 새로운 API를 만나면 헷갈린다... @.@ 그렇다면 Composition API와 Composable은 무엇이며 Option API와 무슨 차이가 있을까? Composition API Option API는 컴포넌트 인스턴스에 프로퍼티와 메서드를 추가하기 위한 수단이다. 또한 Composition AP.. [번역] Vue3 Coding Better Composables : await 없이 비동기를 처리하는 컴포저블 잘만들기 await 없이 비동기를 처리는 컴포저블을 만들어 봅시다. 해당 글은 컴포저블 잘 만들기 시리즈의 마지막 아티클입니다. 아래 글의 번역입니다. https://www.vuemastery.com/blog/coding-better-composables-5-of-5/ Coding Better Composables: Async Without Await (5/5) | Vue Mastery This tutorial series will serve as your guide on how to craft solid composables that you and your team can rely on. www.vuemastery.com 이전 시리즈 보기 2022.12.08 - [Vue.js] - [번역] Vue3 Coding.. [번역] Vue3 Coding Better Composables : 인터페이스를 잘 설계하여 컴포저블 잘 만들기 컴포저블용 인터페이스 작성에 대해 알아보고 이 프로세스가 먼 미래를 위해 확장 가능한 컴포저블을 만드는 데 어떻게 도움이 되는지 알아봅니다. 해당 문서의 번역입니다 : https://www.vuemastery.com/blog/coding-better-composables-4-of-5/ Coding Better Composables: Start with the Interface (4/5) | Vue Mastery This tutorial series will serve as your guide on how to craft solid composables that you and your team can rely on. www.vuemastery.com 이전 시리즈 목록 2022.12.08 - [Vue.js].. [번역] Vue3 Coding Better Composables : 다형적인 리턴값을 활용하여 컴포저블 잘만들기 컴포저블의 리턴 값을 좀 더 유용하게 만드는 방법을 알아봅니다. 해당 글을 번역 및 요약한 글입니다. https://www.vuemastery.com/blog/coding-better-composables-3-of-5/ Coding Better Composables: Dynamic Returns (3/5) | Vue Mastery This tutorial series will serve as your guide on how to craft solid composables that you and your team can rely on. www.vuemastery.com 이전 시리즈도 참고하세요 2022.12.08 - [Vue.js] - [번역] Vue3 Coding Better Composables : 옵.. [번역] Vue3 Coding Better Composables : ref 및 unref를 사용하여 유연한 컴포저블 만들기 prop의 ref 여부와 관계없이 유연하게 사용할 수 있는 컴포저블을 만들어 봅시다. 해당 글을 번역 및 요약한 글입니다. https://www.vuemastery.com/blog/coding-better-composables-2-of-5/ Coding Better Composables: Flexible Arguments (2/5) | Vue Mastery This tutorial series will serve as your guide on how to craft solid composables that you and your team can rely on. www.vuemastery.com 이전 시리즈도 참고하세요 2022.12.08 - [Vue.js] - [번역] Vue3 Coding Better .. [번역] Vue3 Coding Better Composables : 옵션 객체 파라미터 활용하여 컴포저블 잘 만들기 컴포저블을 잘 활용하여 클린한 Vue3 코드를 작성해 봅시다. 해당 게시물에서는 파라미터를 잘 설계하는 방법을 다룹니다. 컴포저블이란? 상태 저장 로직을 캡슐화하고 재사용하기 위해 Vue Composition API를 활용하는 함수 모든 반응성이 필요한 코드 컴포저블 Vue 3 앱에서 비즈니스 로직을 합성하는 가장 좋은 방법 작은 코드 조각을 함수로 추출하여 반복적으로 쉽게 재사용 코드를 쉽게 작성할 수 있음 코드를 읽기 쉬움 옵션 객체 파라미터 대부분의 컴포저블에는 하나 또는 두 개의 필수 입력이 있습니다. 그런 다음 컴포저블 동작 방식을 설정하는 데 도움이 되는 일련의 선택적 인수가 있습니다. 컴포저블을 구성할 때 긴 인수 목록을 전달하는 대신 옵션 객체를 전달할 수 있습니다. // Using an .. 이전 1 다음
