Today I Learned
  • Glossary of terms
  • ✍🏻Today I Learned
  • Algorithm
    • DFS/ BFS
  • Algorithm
    • 재귀(Recursion)
  • Algorithm
    • Regular Expression(정규 표현식)
  • CS
    • Base 64
  • CS
    • Data Compression(데이터 압축)
  • CS
    • 컴퓨터의 저장장치: 하드디스크, 메모리(RAM)
  • CS
    • Transaction(트랜잭션)
  • CSS
    • CSS box model
  • CSS
    • CSS와 JavaScript
  • CSS
    • CSS_Selector
  • CSS
    • Sass(SCSS)란?
  • Development
    • 🪨SOLID: 5 Principles of Object Oriented Design
  • Development
    • Clean Code
  • Development
    • Clean Code
  • Development
    • Mutable vs. Immutable
  • Front-end
    • 프론트엔드 컴포넌트(Component)
  • Git
    • Git
  • Git
    • git push, pull error
  • HTML
    • DOM Element
  • HTML
    • tag의 위치
  • JavaScript
    • Ajax(Asynchronous JavaScript and XML)
  • JavaScript
    • Asynchronous JavaScript(비동기 자바스크립트)
  • JavaScript
    • chrome이랑 node.js 환경 다른 점
  • JavaScript
    • Closure
  • JavaScript
    • ES Modules
  • JavaScript
    • 에러 처리(Error Handling)
  • JavaScript
    • 함수형 자바스크립트(Funtional Javascript)
  • JavaScript
    • 자바스크립트 배열 정렬 메서드(Array.prototype.sort)
  • JavaScript
    • Javascript FE Framework
  • JavaScript
    • 자바스크립트 함수
  • JavaScript
    • 자바스크립트 메모리 관리
  • JavaScript
    • 자바스크립트 - 싱글 스레드
  • JavaScript
    • 객체와 객체 지향 프로그래밍(OOP)
  • Network
    • Forward Proxy
  • Network
    • Reverse Proxy
  • Network
    • Proxy(프록시)
  • Node.js
    • Node.js 로 http server 구축
  • Node.js
    • Package.json
  • Node.js
    • JavaScript & Node.js
  • React
    • React LifeCycle(리액트 생명주기)
  • React
    • React Immutability(리액트의 불변성)
  • React
    • React Routing
  • React
    • React State and Props
  • React
    • 💡React State Tips
  • React
    • React
  • Software
    • Character Encoding(문자열 인코딩)
  • Software
    • UUID(Universally Unique Identifier, 범용 고유 식별자)
  • Vue
    • Vue
  • Web
    • WAI-ARIA, or ARIA
  • Web
    • Chrome Dev Tool(크롬 개발자 도구)
  • Web
    • Web API
  • .github
    • ISSUE_TEMPLATE
      • til-issue-template
  • Algorithm
    • Sorting
      • 1. 선택정렬(selection sort)
  • Algorithm
    • Sorting
      • 2. 삽입정렬(insertion sort)
  • Algorithm
    • Sorting
      • 3. 병합정렬(merge sort)
  • Algorithm
    • Sorting
      • 4. 퀵정렬(quick sort)
  • CSS
    • CSS_Layout
      • CSS Layout
  • JavaScript
    • EventListener
      • DOM Event
Powered by GitBook
On this page
  • 프론트엔드 컴포넌트란?
  • 프론트엔드 컴포넌트 분리
  • Atomic Design
  • 프론트엔드 컴포넌트 관리
  • 디자인 시스템
  1. Front-end

프론트엔드 컴포넌트(Component)

PreviousFront-endNextGit

Last updated 3 years ago

🔗<Vue.js 프로젝트 투입 일주일 전> | 고승원와 프론트엔드에서 Component란를 참고한 글입니다.

프론트엔드 컴포넌트란?

  • View(HTML), Data, Code(JS)의 조합

    • 재사용이 가능하다 - 다른 컴포넌트에서 import하여 사용할 수 있다.

    • 화면에 보이는 페이지 그 자체 또는 페이지 내 특정 기능 요소일 수 있다.

  • Element 그룹을 반환하는 자바스크립트 함수

    • 동적인 웹의 등장으로 사용자와 상호작용 증가, 웹의 복잡성 증가

    • 복잡한 웹을 작게 나누기 시작(전체 >>> element 그룹)

프론트엔드 컴포넌트 분리

Atomic Design

  • 인터페이스 설계에 대한 화학적 접근

    1. Atom(원자): 인터페이스를 구성하는 최소단위의 블록

    2. form, input, button 등 HTML tag

    3. Molecules(분자): 원자들을 하나의 단위로 동작시키는 UI 컴포넌트

    4. form, input, button이 조합된 검색창 - 재사용 가능

    5. Organisms(유기체): 유기체는 하나 이상의 책임을 갖거나 반복적인 원자, 분자의 조합

    6. 로고, 검색창, 유저 정보 등이 존재하는 헤더 영역

    7. Template(템플릿): 원자, 분자, 유기체 단계의 컴포넌트를 배치하는 레이아웃

    8. Page(페이지): 실제 데이터를 템플릿에 전달하면 페이지 완성

  • 단점: 5단계로 구성한 계층 때문에 소요 시간과 사이드 이펙트 증가, 템플릿과 페이지 단계 재사용 어려움

프론트엔드 컴포넌트 관리

디자인 시스템

  • 컴포넌트와 스타일(색상, 아이콘, Typography, 애니메이션)을 관리하는 시스템

    • Microsoft - Fluent UI

  • 이점: 제약, 일관된 경험, 지속성