본문 바로가기
정보/IT

Bootstrap에서 component 의 동적 생성 (script api)

by 키운씨 2023. 3. 26.

bootstrap 공식문서에서는 script 로 컴포넌트를 동적 생성할 수 있는 API가 있다
예를 들어 다음과 같다

const bsAlert = new bootstrap.Alert('#myAlert');

그래서 문서를 더 뒤져봤는데 -> https://getbootstrap.com/docs/5.3/components 
스크립트로 모든 컴포넌트를 new 할 수는 없더라...
 
그래서 브라우저 디버그로 bootstrap 객체를 뒤져봤다

많이 제공하지는 않지만 그래도 있는게 어딘가 싶다 ㅜ.ㅜ
아마 Accordion 이나 Card 처럼 group 형태의 복합 컴포넌트들은
사용자가 알아서 디자인하게끔 자유도(?)를 준건 아닌가 예상된다
 
그건 위 목록의 컴포넌트 이외의 복합 형태의 컴포넌트들은 각 dom 에 적용해야 할 style 이 사용자에 따라 커스텀 될 수 있기 때문에
사용자가 본인이 사용할 컴포넌트의 디자인을 미리 정하고 이를 적용하여 생성하는 function 을 직접 작성하는게 맞아 보인다
모든 컴포넌트들에 제어 할 수 있는 스펙을 미리 정해버리면 사용이 편리할지는 몰라도 디자인 스펙은 제한 되버리는 단점이 생긴다
물론 컴포넌트 내부의 dom들을 일일이 접근해서 style을 바꿔주면 되지만 이미 그것만으로 커스텀된 스타일이니 편이성 면에서는 의미가 없다
 
bootstrap 의 탄생 배경을 생각한다면 디자인을 제한하는 스펙같은건 있어서는 안된다
이미 개발자라면 script 로 dom control 하는건 쉬운 일일테니까
그래서 theme store 를 따로 두고 운영하고 있나보다 -> https://themes.getbootstrap.com/

유료로 운영되는 스토어들이 있는걸 보면 bootstrap은 애초에 개발자가 아닌 디자이너들을 위한 프레임워크로 아키텍처를 디자인 하였고
프로그래머들이 해당 디자이너들이 만들어낸 세련된 디자인 테마들을 돈주고 사게끔 유도하는건 아닐까?