# atomic design

rlatjsdn147

아토믹 디자인은 디자인 시스템을 만드는 데 여러 가지 방법론 중 하나이다. 이름에서 유추할 수 있듯이 Atom(원자) 단위로 디자인 및 개발을 한다.명료하게 말해서, 원자가 결합하여 분자가 되고, 분자가 결합하여 유기체가 되는 것처럼, UI 컴포넌트 또한 가장 작은 단

heelieben

리액트를 사용해서 컴포넌트를 개발하다보면 자주 듣는 아토믹 디자인 패턴에 대해서 얘기해보도록 하겠습니다.아토믹 디자인은 디자인 패턴중에 하나입니다. 가장 작은 원자부터, 원자가 모여서 분자를 이루고, 분자들을 모아서 유기체를 형성하고, 유기체를 모아 하나의 템플릿으로

minkuk90

원문: https://andela.com/insights/structuring-your-react-application-atomic-design-principles/필자는 처음 프로그래밍을 시작했을 때, 디자인 패턴, 파일구조와 같은 추상적인 프로그래밍의 개념

hjkdw95

Atomic Design을 한번 사용해보았습니다

magnet

출처https://overthecode.io/the-meaning-and-limits-of-atomic-design-from-a-software-design-perspective/https://sumini.dev/guide/009-dont-use-at

ginameee

최근 프론트엔드 테스트에대해 관심이 생겼다.https://www.youtube.com/watch?v=q9d631Nl0_4이 영상이 매우 유익한 것 같다.React test를 위한 도구로 jest 프레임워크 위에서 testing-library/react, Enz

hong7511059

작년 네이버 커넥트재단에서 열린 부스트캠프에 Final Project 때 Atomic Design과 Storybook을 사용했던 경험에 대해서 소개한 글입니다.

gwak2837

디자인 패턴이라는 것은 공통되는 코드를 여러 곳에서 재사용하기 위해서 존재합니다. Atomic 디자인도 코드 재사용 및 원활한 코드 유지보수를 도와주는 객체지향 프로그래밍의 SOLID 원칙과 맥락이 비슷합니다.

clowns123

회사에서 react로 마이그레이션을 진행하기 위해 storybook를 공부하면서기존 container-component구조가 아닌 Atomic Design을 적용하기 위해 공부하는 글 입니다.디자인 요소들을 나누어 파악하고 요소를 조합하는 과정을 통해 디자인을 구성하는

go286

아토믹 디자인은 디자인 시스템을 만드는 하나의 방법론으로서 5개의 구분된 단계가 있다.원자는 물질의 기본 빌딩 블록이다. 웹 인터페이스에 적용되며 원자는 폼의 텍스트 레이블, 인풋필드 혹은 버튼과 같은 HTML의 태그이다.원자들을 서로 결합하여 그룹을 만들면 분자들은

katej927

디자인 요소들을 나누어 파악하고 이 요소들이 조합되는 과정을 통해서 디자인을 구성하는 방식 = 컴포넌트 중심의 디자인 패턴 Atoms: 하나의 구성 요소. 본인 자체의 스타일만 가지고 있으며 다른 곳에 영향을 미치는 스타일은 적용되지 않아야 함.Molecules

moaikang

부스트캠프 프로젝트에서 Atomic Design을 응용해 프론트엔드 프로젝트 구조를 설계하고 기술 스택을 결정한 경험을 공유합니다.

muchogusto

https://ui.toast.com/weekly-pick/ko_20200213/#:~:text=%EC%95%84%ED%86%A0%EB%AF%B9%20%EB%94%94%EC%9E%90%EC%9D%B8%EC%9D%80%20%EC%9B%90%EC%9E%90(Ato

thsoon

이번 포스팅은 숙제인 투두 리스트를 만들면서 뷰를 설계하는 과정을 작성했습니다. 이번에 아토믹 디자인이란 것을 공부하면서 적용해보았습니다.