comento-ui 자동완성 - JetBrains IDE에서 Vue UI Library 자동 완성 지원하기

comento-ui 자동훈!완성
JetBrains IDE에서 Vue UI Library 자동 완성 지원하기
코멘토 유성실

발표자 소개
유성실
유팀장 시루짱 짱시루?!? 임원 이모 비선실세
정신연령5살 성실바나스 인천성실 우사인성실
셀럽성실 아이유성실 아이쿠 에유 트레비콜렉터
코멘토 구혜선 팔씨름챔피언 컨퍼런스발표자
실시간노션업데이터 노션24시간상주
열정은 기술을 뛰어넘는다의 인간화
염소사운드장인

목차
배경
본격 삽질기
자동 완성 지원하기
남은 과제
느낀 점

충격 공포 실화
아빠: 울딸 코멘트 유튜브 나온거 잘 봤어~😍
나: (코멘토인데…☹️
) 어… 고마워~~😀

자동 완성의 필요성
네이버에서 코멘트를 이긴 코멘토.jpg

comento-ui
1개월 동안 구축한 코멘토 디자인 시스템
Vue UI 라이브러리 (https://www.npmjs.com/package/comento-ui)
코멘토에서는 npm, yarn으로 다운받아서 사용중

comento-ui 실전 코딩
<c-button>
버튼
</c-button>

comento-ui 실전 코딩
<c-button type="..." color="...">
버튼
</c-button>

자동 완성이 필요한 프론트팀
그러나...
해당 분기 인프라 담당자였던
유성실 혼자 하게 되었다

본격 삽질기
의식의 흐름 시점 주의

End Image
tag
props
props value
참고: Vuetify

가설 세우기
파일 형식이 TS일 때만 자동 완성이 될 것이다🤔
comento-ui는 JS 형식이고 자동 완성이 되지 않음
Vuetify는 TS 형식이고 자동 완성이 됨

가설 검증하기
이름 파일 형식 component 자동 완성 props 자동 완성
Vuetify TS O O
BootstrapVue JS O O
Vuesax JS O X

가설 검증하기
이름 파일 형식 component 자동 완성 props 자동 완성
Vuetify TS O O
BootstrapVue JS O O
Vuesax JS O X
👉파일 형식이 JS여도 자동 완성이 된다

다시 가설 세우기
🤯
세울 가설이 없다…
도대체 JS에서의 자동 완성은 어떻게 가능한 걸까?

개발자의 친구 구글링 🔍✨
web-types.json
JetBrains에서 만든 다양한 웹 프레임워크를 문서화하기 위한 오픈 소스 표준
프레임워크에 구애받지 않고 JSON 문법 형식만 지키면 IDE에서 자동 완성 가능
참고: https://blog.jetbrains.com/webstorm/2021/01/web-types/

개발자의 친구 구글링 🔍✨
web-types.json
JetBrains에서 만든 다양한 웹 프레임워크를 문서화하기 위한 오픈 소스 표준
프레임워크에 구애받지 않고 JSON 문법 형식만 지키면 IDE에서 자동 완성 가능
👉web-types.json 파일이 있으면 JS여도 자동 완성이 된다!
참고: https://blog.jetbrains.com/webstorm/2021/01/web-types/

web-types.json 만드는 방법
1. 자체적으로 생성하기
2. 라이브러리 이용하기
참고: https://github.com/JetBrains/web-types#distribution

Vue Library들이 대부분 사용 중인 방법
Vuetify
BootstrapVue
Nuxt.js
…
- JetBrains에서 직접 컨트리뷰트 진행함
참고: https://github.com/JetBrains/web-types#distribution

vue-styleguidist: JSDoc 라이브러리
vue-docgen-web-types: vue-styleguidist의 내부 패키지인 vue-docgen-api를 이용하여
JSDoc 구문 분석을 해주는 라이브러리
참고: https://github.com/JetBrains/web-types#generating-web-types

Vue UI Library들은 .js or .ts 형식이라 web-types.json을 쉽게 추출 가능
comento-ui는 .vue 형식이기 때문에 web-types.json으로 추출하기가 까다로움
comento-ui의 기존 구조를 유지하면서도 web-types.json을 추출 가능

2. 라이브러리 이용하기 - 결정 ✅
comento-ui의 기존 구조를 유지하면서도 web-types.json을 추출 가능
Vue UI Library들은 .js or .ts 형식이라 web-types.json을 쉽게 추출 가능
comento-ui는 .vue 형식이기 때문에 web-types.json으로 추출하기가 까다로움

설정 파일 세팅

컴포넌트에 주석 추가

web-types.json 추출하기
yarn build

web-types.json 추출하기
"attributes": [
"name": "size",
"description": "크기(small, medium, large, xlarge)",
"value": {
"type": "string"
},
"default": "'medium'"
"name": "color",
"description": "색상(primary, light-primary, success, error, secondary, info)",
{
"name": "comento-ui",
"contributions": {
"html": {
"tags": [
{
"name": "c-button",
"description": "",
{
"kind": "expression",
},
{
"value": {
"kind": "expression",

컴포넌트 적용
tag

컴포넌트 적용
props

컴포넌트 적용
props value

남은 과제
1. 컴포넌트명 자동 등록
현재는 주석으로 @displayName을 입력해야만 자동 완성이 됨
해결 방법:
컴포넌트명에 C 추가하기
Vue 스타일 가이드에서 컴포넌트명은 단어 하나만 사용하지 말라고 권고하고 있음
우리가 참고하고있는 Vuetify에서도 v를 prefix로 사용중
- 진행중

남은 과제
1. 컴포넌트명 자동 등록
현재는 주석으로 @displayName을 입력해야만 자동 완성이 됨
해결 방법:
컴포넌트명에 C 추가하기
Vue 스타일 가이드에서 컴포넌트명은 단어 하나만 사용하지 말라고 권고하고 있음
우리가 참고하고있는 Vuetify에서도 v를 prefix로 사용중
2. VSCode 지원하기
팀원들이 모두 JetBrains IDE를 사용중이지만, 추후 VSCode를 사용하는 팀원들도 생길 수 있기 때문
해결 방법:
VSCode 자동 완성에 필요한 파일
VSCode에 플러그인 설치: Vetur
comento-ui에 자동 완성 지원 파일 추가: tags.json, attributes.json
- 진행중
(우선순위 낮음)

느낀 점
인프라 개선으로 팀원 생산성과 제품 개발 속도를 높일 수 있게 되어 뿌듯했음

느낀 점
당연하게 사용했던 자동 완성이 어떻게 구현되는지 알 수 있어서 재밌었음

느낀 점
당연하게 사용했던 자동 완성이 어떻게 구현되는지 알 수 있어서 재밌었음
shipjs 최고. 배포를 정말 쉽고 편하게 할 수 있음

참고 자료
Vuetify (https://github.com/vuetifyjs/vuetify)
Vuesax (https://github.com/lusaxweb/vuesax)
BootstrapVue (https://github.com/bootstrap-vue/bootstrap-vue)
https://blog.jetbrains.com/webstorm/2021/01/web-types/
https://github.com/JetBrains/web-types#distribution

comento-ui 자동완성 - JetBrains IDE에서 Vue UI Library 자동 완성 지원하기

Recommended

Recommended

More Related Content

Featured

Featured (20)

comento-ui 자동완성 - JetBrains IDE에서 Vue UI Library 자동 완성 지원하기