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

[220524] 코멘토 개발팀 세미나 발표자료

Transcript

1. comento-ui 자동훈! 완성 JetBrains IDE 에서 Vue UI Library 자동 완성 지원하기 코멘토 유성실
2. 발표자 소개 유성실 유팀장 시루짱 짱시루?!? 임원 이모 비선실세 정신연령5 살 성실바나스 인천성실 우사인성실 셀럽성실 아이유성실 아이쿠 에유 트레비콜렉터 코멘토 구혜선 팔씨름챔피언 컨퍼런스발표자 실시간노션업데이터 노션24 시간상주 열정은 기술을 뛰어넘는다의 인간화 염소사운드장인
3. 목차 배경 본격 삽질기 자동 완성 지원하기 남은 과제 느낀 점
4. 배경
5. 충격 공포 실화 아빠: 울딸 코멘트 유튜브 나온거 잘 봤어~ 😍 나: ( 코멘토인데…☹️ ) 어… 고마워~~ 😀
6. 자동 완성의 필요성 네이버에서 코멘트를 이긴 코멘토.jpg
7. comento-ui 1 개월 동안 구축한 코멘토 디자인 시스템 Vue UI 라이브러리 (https://www.npmjs.com/package/comento-ui) 코멘토에서는 npm, yarn 으로 다운받아서 사용중
8. comento-ui 실전 코딩 <c-button> 버튼 </c-button>
9. comento-ui 실전 코딩 <c-button type="..." color="..."> 버튼 </c-button>
10. 자동 완성이 필요한 프론트팀 그러나... 해당 분기 인프라 담당자였던 유성실 혼자 하게 되었다
11. 본격 삽질기 의식의 흐름 시점 주의
12. End Image tag props props value 참고: Vuetify
13. 가설 세우기 파일 형식이 TS 일 때만 자동 완성이 될 것이다🤔 comento-ui 는 JS 형식이고 자동 완성이 되지 않음 Vuetify 는 TS 형식이고 자동 완성이 됨
14. 가설 검증하기 이름 파일 형식 component 자동 완성 props 자동 완성 Vuetify TS O O BootstrapVue JS O O Vuesax JS O X
15. 가설 검증하기 이름 파일 형식 component 자동 완성 props 자동 완성 Vuetify TS O O BootstrapVue JS O O Vuesax JS O X 👉 파일 형식이 JS 여도 자동 완성이 된다
16. 다시 가설 세우기 🤯 세울 가설이 없다… 도대체 JS 에서의 자동 완성은 어떻게 가능한 걸까?
17. 개발자의 친구 구글링 🔍✨ web-types.json JetBrains 에서 만든 다양한 웹 프레임워크를 문서화하기 위한 오픈 소스 표준 프레임워크에 구애받지 않고 JSON 문법 형식만 지키면 IDE 에서 자동 완성 가능 참고: https://blog.jetbrains.com/webstorm/2021/01/web-types/
18. 개발자의 친구 구글링 🔍✨ web-types.json JetBrains 에서 만든 다양한 웹 프레임워크를 문서화하기 위한 오픈 소스 표준 프레임워크에 구애받지 않고 JSON 문법 형식만 지키면 IDE 에서 자동 완성 가능 👉 web-types.json 파일이 있으면 JS 여도 자동 완성이 된다! 참고: https://blog.jetbrains.com/webstorm/2021/01/web-types/
19. web-types.json 만드는 방법 1. 자체적으로 생성하기 2. 라이브러리 이용하기 참고: https://github.com/JetBrains/web-types#distribution
20. web-types.json 만드는 방법 1. 자체적으로 생성하기 Vue Library 들이 대부분 사용 중인 방법 Vuetify BootstrapVue Nuxt.js … - JetBrains 에서 직접 컨트리뷰트 진행함 참고: https://github.com/JetBrains/web-types#distribution
21. web-types.json 만드는 방법 2. 라이브러리 이용하기 vue-styleguidist: JSDoc 라이브러리 vue-docgen-web-types: vue-styleguidist 의 내부 패키지인 vue-docgen-api 를 이용하여 JSDoc 구문 분석을 해주는 라이브러리 참고: https://github.com/JetBrains/web-types#generating-web-types
22. web-types.json 만드는 방법 1. 자체적으로 생성하기 Vue UI Library 들은 .js or .ts 형식이라 web-types.json 을 쉽게 추출 가능 comento-ui 는 .vue 형식이기 때문에 web-types.json 으로 추출하기가 까다로움 2. 라이브러리 이용하기 comento-ui 의 기존 구조를 유지하면서도 web-types.json 을 추출 가능
23. web-types.json 만드는 방법 2. 라이브러리 이용하기 - 결정 ✅ comento-ui 의 기존 구조를 유지하면서도 web-types.json 을 추출 가능 1. 자체적으로 생성하기 Vue UI Library 들은 .js or .ts 형식이라 web-types.json 을 쉽게 추출 가능 comento-ui 는 .vue 형식이기 때문에 web-types.json 으로 추출하기가 까다로움
24. 자동 완성 지원하기
25. 자동 완성 지원하기 설정 파일 세팅
26. 자동 완성 지원하기 컴포넌트에 주석 추가
27. 자동 완성 지원하기 web-types.json 추출하기 yarn build
28. 자동 완성 지원하기 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",
29. 자동 완성 지원하기 컴포넌트 적용 tag
30. 자동 완성 지원하기 컴포넌트 적용 props
31. 자동 완성 지원하기 컴포넌트 적용 props value
32. 남은 과제
33. 남은 과제 1. 컴포넌트명 자동 등록 현재는 주석으로 @displayName 을 입력해야만 자동 완성이 됨 해결 방법: 컴포넌트명에 C 추가하기 Vue 스타일 가이드에서 컴포넌트명은 단어 하나만 사용하지 말라고 권고하고 있음 우리가 참고하고있는 Vuetify 에서도 v 를 prefix 로 사용중 - 진행중
34. 남은 과제 1. 컴포넌트명 자동 등록 현재는 주석으로 @displayName 을 입력해야만 자동 완성이 됨 해결 방법: 컴포넌트명에 C 추가하기 Vue 스타일 가이드에서 컴포넌트명은 단어 하나만 사용하지 말라고 권고하고 있음 우리가 참고하고있는 Vuetify 에서도 v 를 prefix 로 사용중 2. VSCode 지원하기 팀원들이 모두 JetBrains IDE 를 사용중이지만, 추후 VSCode 를 사용하는 팀원들도 생길 수 있기 때문 해결 방법: VSCode 자동 완성에 필요한 파일 VSCode 에 플러그인 설치: Vetur comento-ui 에 자동 완성 지원 파일 추가: tags.json, attributes.json - 진행중 ( 우선순위 낮음)
35. 느낀 점
36. 느낀 점 인프라 개선으로 팀원 생산성과 제품 개발 속도를 높일 수 있게 되어 뿌듯했음
37. 느낀 점 인프라 개선으로 팀원 생산성과 제품 개발 속도를 높일 수 있게 되어 뿌듯했음 당연하게 사용했던 자동 완성이 어떻게 구현되는지 알 수 있어서 재밌었음
38. 느낀 점 인프라 개선으로 팀원 생산성과 제품 개발 속도를 높일 수 있게 되어 뿌듯했음 당연하게 사용했던 자동 완성이 어떻게 구현되는지 알 수 있어서 재밌었음 shipjs 최고. 배포를 정말 쉽고 편하게 할 수 있음
39. 참고 자료 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