사내 Nuxt2 컴포넌트 가이드 페이지 제작

프로젝트 개요

버튼, 인풋, 셀렉트박스, 팝업 레이어, 서제스트 등 프로젝트 내에서 자주 쓰이는 요소들을 기능 + UI를 고려해 (1) 컴포넌트화하고 (2) 이벤트를 바인딩하여 이벤트만 붙이면 사용할 수 있는 형태로 구현하고 (3) 코드, 사용 방법 등을 가이드화하여 제공한 페이지

프로젝트 정보

• 사내 개발용 가이드 페이지

기술 스택

• UI: HTML, SCSS
• FRONT: Nuxt2, MDX
  • Nuxt2에서도 마크다운 문법으로 문서를 작성할 수 있도록 구현

성과

• 전사적 가이드는 아니었으나, 개발 시 매번 사용되는 버튼, 인풋 등의 컴포넌트에 대한 마크업과 기본 CSS(프로젝트마다 커스텀), 이벤트 등을 제공하여 개발 시간 단축에 기여
  • 특히 개발을 고려한 마크업 시간 단축에 큰 도움이 됨
• dev용 가이드 페이지로 제공함으로써 프론트 협업자들이 다양한 형태의 컴포넌트와 코드를 참고할 수 있도록 기여
  • Nuxt3로 대부분 넘어갔을 때도 마크업이나 CSS, 기능 구현을 위해 해당 페이지를 참고하는 협업자가 많았음
• 주기적인 유지보수와 히스토리 관리를 통하여 좀 더 적절하거나 좋은 형태의 개발 코드가 있으면 업데이트하고, 함께 공유할 수 있는 문화를 만듦

개선 사항

• 이러한 가이드 페이지가 있으면 좋을 것 같다는 몇몇 개발자들의 의도에서 시작된 자체 페이지였기 때문에 사실상 타 업무와 병행하여 진행해야 했으므로, 보다 적극적인 사측 지원과 관리가 있었다면 좋았을 것
• 구현에 대한 검증 부족
  • 단순 구현이 아니라 해당 가이드에 대한 검증과 테스트도 충분히 이루어졌다면 더 좋은 코드를 제공할 수 있었을 것
• 주로 팀 내에서 사용하였지만, 전사적으로 제공되었다면 다양한 프로젝트에서 더 효율적인 리소스 운영이 가능했을 것