ui 개발시 프로젝트를 진행하며 발생한 문제점...

이미 개발되어 있는 컴포넌트에 추가적인 디자인, 기능이 필요한 경우

• 문제점
  • 이미 개발되어 있는 컴포넌트라면 외부에서 사용하고 있을 가능성이 높음
  • 만약 미묘한 디자인 또는 기능의 변경이 있더라도 해당 컴포넌트를 사용하는 모든 부분에서 장애를 일으킬 수 있음
• 해결방안
  • 개발되어 사용되고 있는 컴포넌트에 새로운 기능을 넣지 않도록 한다.
    • 완벽한 기획과 디자인이 선행되어야 하는데 현실적으로 불가능함.
  • 모든 가능성을 열어두고 확장성이 무궁무진한 코드를 작성한다.
    • 실현 불가능함.
  • 같은 ui의 컴포넌트를 버전별로 나누어 개발한다.
    • npm을 이용한 버전 관리를 진행한다.
      • 사내에서만 사용해야 되기 때문에 private 저장소가 필요하다.

컴포넌트와 기능은 완전히 분리할 것

컴포넌트에 기능이 포함되어 있을 경우 문제점

• Selectbox가 있다.
• Selectbox는 키보드로 선택된 list를 컨트롤 할 수 있어야 하며, Selectbox 컴포넌트 내에 해당 기능이 존재한다.
• Selectbox를 사용하는 50개의 페이지가 있다고 하자.
• 50개의 페이지 중 어떤 한 페이지에서 해당 기능이 작동하지 않는다.
• 그 페이지의 버그를 고치기위해 Selectbox의 버그를 수정한다.
• 버그가 발생된 페이지는 정상적으로 돌아가지만 극단적일 경우 나머지 49개의 페이지에서 모두 버그가 발생한다.

• 이를방지하기 위해 기능은 컴포넌트 외부에 일임하도록 하며 컴포넌트가 책임을 지지 않도록 해야 한다.