본문 바로가기

FrontEnd

 (437)
[Storybook/ Vue3] Play 함수를 이용하여 컴포넌트 상호작용 자동화 Storybook 공식 문서를 번역한 글입니다. https://storybook.js.org/docs/vue/writing-stories/play-function Play function Storybook is a frontend workshop for building UI components and pages in isolation. Thousands of teams use it for UI development, testing, and documentation. It’s open source and free. storybook.js.org Play 함수는 스토리가 렌더링된 후 실행되는 작은 코드 스니펫입니다. 다음과 같은 용도로 사용할 수 있습니다. 사용자 대신 컴포넌트와 상호작용 테스트 시나리오를 ..
[번역] Vite 플러그인 만들기 아래 게시물을 번역한 글임 https://www.vuemastery.com/blog/building-a-plugin-with-vite Building a plugin with Vite | Vue Mastery In this article, we’ll walk through how to create some simple plugins that you can use as the foundation and inspiration for your own custom Vite plugins. www.vuemastery.com 왜 Vite 플러그인을 만드나요? Vite 플러그인을 사용하면 아래와와 같은 작업을 수행할 수 있습니다. index.mycustomextension과 같은 커스텀 확장자를 index.js로 r..
[Typescript] 객체 함수와 타입스크립트 함수는 객체다 함수는 호출이 가능한(callable) '행동 객체(action object)’라고 이해하면 쉽습니다. 우리는 함수를 호출 할 수 있을 뿐만 아니라 객체처럼 함수에 프로퍼티를 추가·제거하거나 참조를 통해 전달할 수도 있습니다 함수 타입 표현식 가장 간단한 함수 타입 표현 방법은 아래와 같이 작성하는 것이다. function greeter(fn: (a: string) => void) { fn("Hello, World"); } function printToConsole(s: string) { console.log(s); } 또 해당 글의 주제에서 벗어나지만 재미있는 타입은 생성자 시그니처다. type SomeConstructor = { new (s: string): SomeObject; }; ..
[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] watch vs watchEffect 사용사례 비교 해당 글을 번역한 글입니다. https://www.vuemastery.com/blog/vues-watch-vs-watcheffect-which-should-i-use/ Vue’s watch vs watchEffect, which should I use? | Vue Mastery Let’s unwrap the core differences between watch and watchEffect so that you can use the best tool for the job in your day-to-day code. www.vuemastery.com Vue에서 reactive value(ref, reactive, computed)이 변경될 때마다, 특정 함수(사이드이펙트를 포함한 함수)를 실행하고 싶다면,..
[React 디자인 패턴] Renderless Component 패턴 리액트에는 훅 아키텍처 이전에 유행한 Render Props 패턴이 있었다. https://reactjs.org/docs/render-props.html Render Props – React A JavaScript library for building user interfaces reactjs.org children을 함수 형태 인자로 받아 하단 컴포넌트로의 의존성을 명시적으로 제공하는 패턴으로 의존성 주입의 베스트 프랙티스 중 하나로 여겨졌지만, 반대로 render props hell을 생성하는 단점이 있었다. 훅 아키텍처와 함께 사라진 패턴이지만, 분명 컨테이너 컴포넌트는 사이드 이펙트의 격리를 위해 필요하다. https://kciter.so/posts/effective-atomic-design Ef..
Svelte 코드 컴파일러는 어떻게 동작할까? 스벨트는 내부적으로 Virtual Dom을 사용하지 않는 것으로 알고 있습니다. 그렇다면 컴파일러가 상당히 많은 일을 해줘야 할텐데, 어떻게 이것이 가능할 것일까요? 요새 Vue3을 이용해 신규 프로젝트를 진행하고 있습니다. 춣시되면 아마 한국에서 Vue3을 이용한 하이브리드 앱 중 가장 큰 규모의 엔터프라이즈 애플리케이션이 될 것 같습니다. (이 글을 읽는 어려분도 제가 개발하고 있는 앱을 신규 버전으로 사용하게 될 확률이 상당히 높습니다. 이미 엄청 유명한 앱이거든요) 원래 리액트만 활용했던 만큼, 리액트의 불변 모델과 온리 코드 모델, 함수형 사고 방식과 다른 Vue3의 라이프사이클과 가변 모델, 탬플릿에 적응해야 했는데요. Vue3는 탬플릿을 사용하는 대신 컴파일러 레벨에서 상당한 최적화를 제공해..
[Vue3] v-model props로 사용하기: modelValue 컴포넌트의 props로 v-model을 사용하는 방법을 알아봅니다. Props은 readOnly reactive object임 즉 computed 등으로 반응성 체킹은 가능하지만 props를 직접 수정할 수는 없음 우회 방법 : modelValue https://vuejs.org/guide/components/events.html#usage-with-v-model Component Events | Vue.js vuejs.org 놀랍게도 Vue3은 내부적으로 v-model의 양방향 바인딩을 단방향 바인딩으로 캐스팅하여 이를 해결함 즉 아래와 같은 소스코드는 아래와 같이 컴파일러에 의해 변환됨. 자식 컴포넌트에서는 이를 대비한 구현을 해줘야 함 참고 : 아래와 같이 구현하는 것도 가능함. 뭔가 리코일 같은 ..

티스토리툴바