nuxt/kit를 이용한 팝업 레이어 공통 모듈 제작

프로젝트 개요

Useragent 모듈처럼 UI나 프레임워크 의존성 없이 기능만을 제공하는 모듈뿐만 아니라, UI도 함께 제공하는 MUI 형태의 모듈 제공에 대한 관심을 갖고, nuxt/kit를 이용하여 Nuxt3에서 설치해 사용할 수 있는 팝업 레이어 모듈 제작

프로젝트 정보

• 사내 모듈

기술 스택

• UI: HTML, SCSS (사용처에서 커스텀)
• FRONT: Nuxt3, nuxt/kit

주요 구현 기능

• 특정 Git 저장소에서 해당 모듈을 라이브러리 형태로 설치하여 사용할 수 있도록 구현
• Nuxt3 모듈 제작 키트인 nuxt/kit를 이용한 컴포넌트 제작
• 프로젝트 시작 시 해당 컴포넌트를 전역 컴포넌트로 등록하여 사용할 수 있도록 함
• <slot />을 이용하여 팝업 레이어 내 개별적 세부 구성할 수 있도록 함
• 컴포넌트 내부 버튼에 이벤트 바인딩을 통해 외부에서 클릭 이벤트 발생 시 실행할 함수를 설정할 수 있도록 함
• 팝업 레이어 위로 중첩 레이어 띄우는 기능 제공
  • 기존 Vue3에서 팝업 레이어 라이브러리를 사용할 때 불편을 겪었던 부분으로, 팝업 레이어 모듈을 만들게 되면 꼭 구성해야 할 필요성을 느낀 기능

성과

• 라이브러리 형태로 컴포넌트를 사용할 수 있다는 가능성 제공
  • 버튼, 인풋 등 자주 사용하는 컴포넌트를 MUI처럼 구성하여 가이드화한다면 페이지 구현 시(특히 사내 페이지) 리소스를 많이 줄일 수 있을 것으로 기대

개선 사항

• 사내 private 저장소에서 구현되었기 때문에 npm으로 Git 저장소 자체를 라이브러리처럼 설치하여 사용하는 데 보안 이슈가 있을 수 있음
  • private 저장소이기 때문에 해당 모듈이 포함된 프로젝트 자동 배포 시 문제가 됨
• 실제로 해당 모듈을 프로젝트 내에 사용해 보지 못했다는 아쉬움