21.05 FE devtalk / 임채민(뱅크샐러드)

1. 뱅크샐러드
Engineer Foundation Web
임채민

2. Banksalad
Product
Language

3. Banksalad
Product
Language

4. 출처 - Banksalad 사내블로그 "Banksalad Product Language를 소개합니다"
😩

5. 출처 - Banksalad 사내블로그 "Banksalad Product Language를 소개합니다"
TextButton 1 TextButton 2
🙈
Text Text

6. 출처 - Banksalad 사내블로그 "Banksalad Product Language를 소개합니다"
직군이나 조직별로
디자이너에게는 서로 같은 UI TEXT
개발자에게는 서로 다른 UI TEXT
UI 추상화
하는 단위나 방법이 다르기 때문

8. 201_TopNavigation
206_Dashboard/Normal2
109_Spacing/Height12
211_Dropdown/FunctionBar
109_Spacing/Height12
204_Title/Small2
205_ListItem/XSmall1
203_Tab/SegmentedControl
202_BottomNavigation/4Tab
205_ListItem/XSmall1
205_ListItem/XSmall1

9. 이미지 출처 : https://mariocanas.com/projects/bbva

10. rollup.js

11. ESM 형식으로 빌드가 가능하다
rollup.js
플러그인 추가와 결과물 설정이 쉽다
결과가 더 가볍다
출처 - https://rollupjs.org/guide/en/#overview

12. 🤝
PeerDependency
🚀
Path alias
📦
Modules
Babel

13. tree shaking 이미지 출처 - https://brunch.co.kr/@swimjiy/24
Tree Shaking
/

15. bg-gradient-to-r
from-cyan-400
to-light-blue-500
mt-20
bg-white-100
flex
flex-column

16. STYLED COMPONENT
TAILWIND EMOTION
Twin blends the magic of Tailwind
with the flexibility of css-in-js
😎

17. Image
Icon

20. Semantic Release Dependency Cruiser Commitlint / PR Title lint
Validate and visualize
dependencies.

21. 😢 아..! Export 안했다...!
DEPENDENCY CRUISER
Validate and visualize dependencies.
With your rules. JavaScript. TypeScript. CoffeeScript.
ES6, CommonJS, AMD.

22. Banksalad
Product
Language

23. 그만큼 좋았었을까?

25. =

26. =

27. =

28. =

29. 40%
총 개수 461개

30. NO!
그럼 BPL 방식은 안 좋은걸까?

31. BPL
NEXT

32. 뱅크샐러드
Engineer Foundation Web
임채민