# atomic design

14개의 포스트

Atomic-Design

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

2022년 6월 27일
·
0개의 댓글
post-thumbnail

React | Atomic Design

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

2022년 2월 1일
·
0개의 댓글
post-thumbnail

93일차

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

2021년 12월 15일
·
0개의 댓글
post-thumbnail

Atomic Design 적용해보기

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

2021년 11월 30일
·
0개의 댓글
post-thumbnail

What is Atomic design?

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

2021년 11월 9일
·
0개의 댓글

테스트 방법에 대한 고민

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

2021년 10월 17일
·
0개의 댓글
post-thumbnail

Atomic Design과 Storybook

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

2021년 9월 12일
·
0개의 댓글
post-thumbnail

Atomic Design

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

2021년 7월 20일
·
0개의 댓글
post-thumbnail

Atomic Design

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

2021년 5월 6일
·
0개의 댓글
post-thumbnail

[TIL] Atomic Design

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

2021년 3월 7일
·
0개의 댓글
post-thumbnail

Developer | Atomic Design

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

2021년 2월 21일
·
0개의 댓글
post-thumbnail

Atomic Design을 응용해 React 프로젝트 구조를 설계하고 기술 스택을 결정한 경험

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

2020년 12월 24일
·
2개의 댓글

아토믹 디자인

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

2020년 6월 24일
·
0개의 댓글
post-thumbnail

Atomic Design으로 Todo 만들기

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

2020년 3월 2일
·
5개의 댓글