🎈 이 기사는 WP 전용입니다
htps //wp. 메 / pc9 HC-MQ

전치

구성 요소를 분류하는 방법에 대해
조금이지만 샘플 코드 모음입니다 🎈🧸

이 요소는 어디 ❓
molecules❓
아니면 organisms❓
어쨌든 체크해주세요 ✅🌟

폴더 구분은 원자 디자인을 권장합니다.
Atomic Design이란?

샘플 코드도 있으므로
컴포넌트 명명 및
내용의 구성 등의 참고에도
도움을주세요 ❤️

코드를 작성하기 전에 체크리스트
보면 좋다고 생각합니다 ✨👀

분리 방법

원자 디자인을 기반으로 나누는 방법

원자 디자인은
요소의 크기와 기능별로
파일을 나누는 방법입니다 ✨🗂

그것을 잡아 나누고 있지만,
확실한 정답·룰은 존재하지 않기 때문에
어디까지나 우리를 나누는 방법으로
참고로 해주세요 ♪

각각,
어떤 계층 구조의 구성 요소
읽어도 OK입니다 🙆‍♀️

atoms

UI의 최소 요소.
button, icon, input 등.

제목의 h1과
자막의 p로 세트의 경우도
하나의 집결이므로 atoms에 🍎

molecules

atoms를 2, 3개 붙여넣은 것 🧩
ul > li 의 li
form에 넣는 label 첨부의 input등.

organism이 form이나 ul 등
집결이기 때문에
그것을 분해한 요소입니다 💡

InputDefault.vue
atom으로 만들었다면 import하고,
만들지 않았다면
FormItemInput.vue에서
직접 입력을 사용해도 OK입니다 ⭕️

organisms

form이나 ul 등,
어느 정도 정리.
modal의 내용도 코코💫

templates

modal과 nav, Header, Footer
section 등의 큰 정리🍓

atoms

🎈 자세한 내용은 WP에서 확인하세요 👀
htps //wp. 메 / pc9 HC-MQ