πŸ”₯
DevNote
  • README
  • WEEK1
    • 1. κ°œλ°œν™˜κ²½
    • 2. νƒ€μž…μŠ€ν¬λ¦½νŠΈ 기초
    • ETC-FNM
  • WEEK2
    • 1. JSX
    • 2. JSX 컴파일
    • 3. VirtualDOM
    • 4. λ¦¬λ Œλ”λ§
  • WEEK3
    • 1. JSON
    • 2. REST API
    • 3. μžλ°”μŠ€ν¬λ¦½νŠΈ κ°œλ… 및 기초
    • 4. μžλ£Œκ΅¬μ‘°μ™€ μ»¬λ ‰μ…˜
    • 5. Indexed collection
    • 6. Keyd collection
    • 7. DOM collection
    • 8. Array
    • [9. Map] - ING
    • [10. Set] - ING
    • [λ¦¬μ—‘νŠΈλ‘œ μ‚¬κ³ ν•˜κΈ°] - ING
    • [State λŒμ–΄μ˜¬λ¦¬κΈ°] - ING
    • 97. ν”„λ‘œν† νƒ€μž…
    • 98. 클둜져
    • 99. ETC
  • WEEK4
    • 1. Express
    • 2. Fetch API&CORS
    • 3. Unicode&ASCII
    • hooks-useState
    • hooks-useEffect
    • hooks-useMemo
    • hooks-useCallback
    • hooks-useReducer
  • WEEK5
    • 1. Test에 λŒ€ν•˜μ—¬
    • 2. Test 도ꡬ μ„€μ •κ³Ό μ‚¬μš©
    • 3. Jest
  • WEEK6
    • 1. ExternalStore
    • 2. TSyringe
    • 3. useSyncExternalStore
  • WEEK7
    • 1. React Router μ‚¬μš©ν•΄λ³΄κΈ°
    • 2. React Router 에 λŒ€ν•œ ν…ŒμŠ€νŠΈ μ½”λ“œ λ§Œλ“€κΈ°
    • 3. Navigate
    • 4. ErrorPage 둜 Routing ν•˜κΈ°
  • WEEK8
    • 1. Semantic Tags
    • 2. HTML block&inline level
    • 3. Boxbox Sizing
    • 4. Flex
    • 5. Grid
    • 6. DesignSystem
    • 7. StyledComponents
    • 8. GlobalStyle&Theme
    • 9. VenderPrifix
    • 10. SCSS
    • Tips
  • WEEK9
    • 1. ν†΅ν•©κ°œλ°œν™˜κ²½ μ„ΈνŒ…
  • WEEK11
    • 1. μš°νŽΈλ²ˆν˜Έκ²€μƒ‰
    • 2. ν¬νŠΈμ›
  • WEEK12
    • 1. Uncontrolled Form
    • 2. ING...
  • NestJS
    • 1. nestjs-intallation
    • 2. folder-structure
    • 3. controller
    • 4. provider
    • 5. middleware
    • 6. exception-filter
    • 7. pipe
  • SNIPPET
    • μ •κ·œμ‹
    • μ§„μˆ˜μ „ν™˜
    • νŠΉμ • 문자 κ°―μˆ˜μ„ΈκΈ°
    • μ†ŒμΈμˆ˜λΆ„ν•΄
  • ETC
    • JetBrain Licence
    • Pretendard Font
  • GIT
    • Git Commit Message
    • How to change branch name
    • How to change git origin
  • Docker
    • 1. docker
    • 2. docker-cli
    • 3. dockerfile-syntax
    • 4. docker-compose-syntax
    • 5. expose_vs_ports
    • 6. docker-networkd
    • etc-Dockerfile-layer
Powered by GitBook
On this page
  • Design System 에 λŒ€ν•΄μ„œ
  • λ””μžμΈ μ‹œμŠ€ν…œ κ²”λŸ¬λ¦¬
  • Atomic Design
  1. WEEK8

6. DesignSystem

Previous5. GridNext7. StyledComponents

Last updated 1 year ago

Design System 에 λŒ€ν•΄μ„œ

μ•„λž˜λŠ” 유λͺ…ν•œ μ„œλΉ„μŠ€ 업체가 ꡬ좕해놓은 λ””μžμΈ μ‹œμŠ€ν…œμ— λŒ€ν•œ λͺ©λ‘μ΄λ‹€.

μ‹œκ°„ λ‚  λ•Œ μ½μ–΄λ³΄μž.

λ””μžμΈ μ‹œμŠ€ν…œ κ²”λŸ¬λ¦¬

Atomic Design

Atomic Design 은 λ””μžμΈ μ‹œμŠ€ν…œμ„ μ–΄λ–»κ²Œ ꡬ좕할 것인가에 λŒ€ν•œ 방법둠 μ€‘μ˜ ν•˜λ‚˜μ΄λ‹€.

Atlassian
Meterial
Uber
Shopify
Salesforce
Mailchimp Pattern Library
Ant Design
Framer
Design System Galary
Atomic Design
Atomic Design E-Book