Nuxt 3rd-party 소개

Pinia

Pinia는 Vue.js 애플리케이션을 위한 상태 관리 라이브러리입니다. Vuex의 후계자로 간주되며, Vue 3의 컴포지션 API와 완벽하게 통합되도록 설계되었습니다. 그러나 Vue 2와도 호환되도록 만들어져 있어서 어느 버전의 Vue를 사용하더라도 Pinia를 활용할 수 있습니다.

Pinia의 주요 특징은 다음과 같습니다:

타입스크립트 통합: Pinia는 타입스크립트와 잘 통합되어 있어서, 타입스크립트를 사용하는 Vue 애플리케이션에서 더 나은 개발 경험을 제공합니다.
개발자 친화적: Vue Devtools와 완벽하게 통합되어 상태 변화를 추적하고 시간 여행 디버깅을 할 수 있게 해줍니다.
모듈식 구조: Pinia는 상태, 게터, 액션을 하나의 스토어에서 관리할 수 있도록 모듈식 구조를 제공합니다. 이는 Vuex에서 볼 수 있는 모듈 구조와 비슷하지만, 더 단순하고 사용하기 쉬운 API를 가지고 있습니다.
컴포지션 API 통합: Vue 3의 컴포지션 API와 잘 어울리도록 설계되었기 때문에, reactivity(반응성) 시스템을 최대한 활용할 수 있습니다.
간단한 API: Pinia는 Vuex에 비해 더 간단하고 직관적인 API를 제공합니다. 이로 인해 새로운 사용자가 Vue.js 상태 관리를 더 쉽게 배우고 사용할 수 있습니다.

Pinia를 사용하여 상태를 관리하는 기본적인 방법은 다음과 같습니다:

스토어 생성: defineStore 함수를 사용하여 스토어를 정의합니다. 이 함수는 고유한 ID와 함께 상태, 게터, 액션을 포함하는 객체를 인자로 받습니다.
상태(state) 정의: 스토어의 state는 함수로 정의되며, 함수는 객체를 반환해야 합니다. 이 객체는 스토어의 상태를 나타냅니다.
게터(getters) 정의: 계산된 상태를 만들기 위해 게터를 사용할 수 있습니다. 게터는 state에 의존하는 함수로, 마치 계산된 속성(computed properties)처럼 작동합니다.
액션(actions) 정의: 비동기 로직이나 여러 상태 변경을 처리하기 위해 액션을 정의할 수 있습니다. 액션은 메서드로서, 스토어의 상태를 변경하는 커밋(commit)을 수행할 수 있습니다.

Pinia 스토어는 Vue 컴포넌트에서 직접 사용할 수 있으며, useStore 훅을 통해 각 컴포넌트에서 필요한 상태를 쉽게 접근하고 조작할 수 있습니다.

L-UI Vue

소개

L-UI Vue 는 Radix Vue 를 기반으로 하여 Lotte Innovate 에서 개발한 UI 컴포넌트 라이브러리이다.
다양한 UI 컴포넌트와 템플릿을 제공하여 FrontEnd 개발자들이 빠르고 효율적인 UI 개발이 가능하다.
접근성, 헤드리스 구조, 고급 UI 패턴 등 Radix UI 의 핵심 기능을 지원한다.
스토리북을 통해서 지원하는 UI 컴포넌트를 확인할 수 있다.

장점

다양한 UI 컴포넌트 (버튼, 입력 필드, 다이얼로그, 메뉴, 탭 등의 다양한 요소)
커스터마이즈 가능성 (사용자 정의 및 테마 지원)
풍부한 문서 및 예제

컴포넌트

L-UI Vue는 다양한 UI 컴포넌트를 제공하여 Vue.js 프로젝트에서 사용자 인터페이스를 빠르고 쉽게 개발할 수 있도록 도와준다.
아래 L-UI Vue 스토리북에서 주요 컴포넌트 및 활용 예제를 확인할 수 있다.

L-UI Vue 스토리북

Button (버튼): 버튼 컴포넌트는 기본 버튼, 아이콘 버튼과 같은 다양한 스타일과 옵션을 제공한다.
TextField (입력 필드): 텍스트 입력, 비밀번호 입력, 숫자 입력 및 여러 가지 입력 필드 유형을 지원하는 입력 필드 컴포넌트다.
Checkbox / Radio Group (체크박스/라디오그룹): 사용자 입력을 위한 기본 컴포넌트. 키보드 내비게이션, 포커스, 상태 관리가 내장되어 있어 접근성이 뛰어나다.
Select (선택): 리스트를 선택할 수 있는 기능의 컴포넌트이다.
Datepicker (달력): 날짜 선택을 위한 직관적인 캘린더 인터페이스 제공한다. 오늘 날짜 강조, 특정 날짜 이동, 날짜 최대최소 선택제한 등 다양한 기능을 제공한다.
Dialog (다이얼로그): 모달 또는 팝업 다이얼로그를 만들기 위한 컴포넌트다. 다양한 다이얼로그 스타일과 기능을 제공한다.
Menu (메뉴): 메뉴와 네비게이션을 만드는 데 사용되는 메뉴 컴포넌트다. 수직 및 수평 메뉴를 만들 수 있다.
Dropdown Menu (드롭다운메뉴): 버튼 클릭 시 나타나는 메뉴이다. 옵션 선택, 사용자 설정 등에 활용된다.
Tab (탭뷰): 탭 스타일의 다중 탭 인터페이스를 구현할 수 있는 컴포넌트다. 다양한 탭 관련 이벤트를 처리할 수 있다.
Accordion (아코디언): 접히고 펼쳐지는 아코디언 스타일의 컴포넌트를 만들 수 있다. 주로 섹션 펼치기 및 축소하기에 사용된다.
Tooltip (도움말): 마우스를 올렸을 때 간단한 설명을 보여주는 컴포넌트이다.
Popover (슬라이더): 특정 요소 위에 작은 정보창을 띄우는 컴포넌트이다. 툴팁보다 더 많은 내용을 담을 수 있으며, 사용자 인터랙션에 따라 열림/닫힘 제어 가능하다.
Editor (편집기): tiny editor 를 활용한 Editor 컴포넌트이다.

Last modified: 17 7월 2025