Hello_coding

  • 홈
  • 태그
  • 방명록
  • front-end

아토믹패턴 1

[디자인패턴] 아토믹패턴이란?

프로젝트를 준비하며, 폴더구조를 짜던중 디자인패턴 얘기가 나왔다. 리액트에 적용시킬 디자인 패턴을 고려하는 중, 최근에 자주 들리던 (?) 아토믹 패턴에 대해 알아보기로 했다. Atomic Design이란? - 화학에서 용어를 빌린 개념을 웹에 적용한 패턴이다. - 웹사이트에서의 가장 작은 컴포넌트 단위를 원자(Atoms)로 설정하고, 이를 퍼즐을 조립하듯 사용하여 상위 컴포넌트를 만드는 패턴이다. Atomic Design의 5단계 1. Atoms 원자(Atoms)은 인터페이스를 구성하는 기본 블록역할을 한다. 즉, 디자인과 기능의 최소단위라고 볼 수 있다. ex ) Label , Text ,Button , Icon , input 등 basic HTML elements 2. Molecules 분자(Mol..

FE 2022.07.04
이전
1
다음
더보기
프로필사진

Hello_coding

  • 분류 전체보기
    • FE
      • JavaScript
      • HTML,CSS
      • REACT
      • Redux
      • TypeScript
      • Pattern
    • BE
      • HTTP
      • Node
      • AWS
    • 개발자가 꼭 알아야할 지식
    • 코딩테스트
      • 프로그래머스
    • 멋쟁이사자처럼
    • 독서
    • Git , Github
    • FE필수개념
    • 에러해결하기

Tag

useEffect, node.js, 프론트엔드스쿨, 프론트엔드스쿨2기, 리덕스툴킷, JS, 프로그래머스, TypeScript, 자바스크립트, 리덕스, 멋쟁이사자처럼, react, TpyeScript, spa, HTML, http, CSS, 리액트, 코딩테스트, 프론트엔드,

최근글과 인기글

  • 최근글
  • 인기글

최근댓글

공지사항

페이스북 트위터 플러그인

  • Facebook
  • Twitter

Archives

Calendar

«   2025/05   »
일 월 화 수 목 금 토
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31

방문자수Total

  • Today :
  • Yesterday :

Copyright © Kakao Corp. All rights reserved.

티스토리툴바