이 기사는 iCARE Advent Calendar 2020의 6 일째입니다.

Buefy란?

Buefy은 BULMA과 Vue.js을 결합한 UI 구성 요소입니다.
오픈 소스로 공개되었습니다. MIT 라이센스입니다.

요점은 컴퍼넌트가 준비되어 있어 사용법으로서도 props에 적절한 값을 건네주면 어느 정도의 디자인을 효율적으로 작성할 수 있습니다.

tailwindcss에서는 좋지 않습니까?

2020년 12월 현재 npm trends

npm trends를 보면 tailwindcss가 무리를 벗어나는 것을 볼 수 있습니다.

여기서 Buefy와 tailwindcss를 비교하는 것이 원래 넌센스입니다만, 타이틀대로Vue.jsで早くWebサービスを作る 것을 최우선으로 한다면 컴퍼넌트가 이미 준비되어 있으므로, 기능을 중시한 개발이 가능합니다.

덧붙여서 tailwindcss (은)는, 자주(잘) 사용하는 CSS가 변수화, 공통화되고 있기 때문에 확장성이 매우 높습니다.
스크래치로 스타일을 짜는 것은 어렵지만, 스스로 독자적인 컴퍼넌트를 만들고 싶을 때는 tailwindcss가 좋을까 생각합니다.

Buefy의 구체적인 예

버튼 예

b-button 라는 컴퍼넌트가 준비되어 있으므로 type에 is-dark 를, boolean 으로 rounded 를 props 로 건네줍니다.



화면에 표시하면 이런 느낌↓

표 예

data와 columns를 props로 전달하면 테이블이 완성됩니다.
정렬 기능도 추가 가능합니다.



이런 느낌↓

신경이 쓰이는 Vue3 대응은?

Vuejs 3 (vue-next) support #2505
GitHub에서 논의가 진행되고 있지만 새로운 Branch 또는 Pull Request는 존재하지 않는 것 같습니다 😭
프로젝트를 만들고 업데이트할 생각은 있을 것 같아서 적극적으로 커밋해 나가고 싶은 곳입니다.

iCARE의 프런트 엔드는 Vue.js+Buefy+TypeScript+GraphQL로 구성됩니다.

10월에 iCARE에 조인했기 때문에, 기술 채용의 역사적 배경을 깊이 이해하고 있지 않습니다만, 현대적인 기술 스택인 인상입니다.
서버측 측에서 정의된 스키마를 바탕으로 GraphQL, Vue.js 측의 형태도 묶여 있으므로 형태 안전합니다.

채용 도 가고 있기 때문에 신경이 쓰이는 분 잘 부탁드립니다!
DM 에서도 채용 담당에 연결할 수 있습니다!