벌써 24년도 추석이에요!
커피를 너무 많이 먹은 나머지 잠이 안와서 ㅠㅠ 심심해서 글을 써보려구요
오늘은 제가 설계에서 사용해 본 아키텍처 중 Component-Based Architecture 와
Atomic Design Pattern에 대해 애기 해 볼까 해요!
그 전에 앞서 제가 생각하는 설계는 참 수학문제 풀이 같아요.
하나의 문제에 다양한 문제 풀이법이 있으니 어떤 풀이법을 선택하느냐에 따라 이해도,사용수식,풀이시간들이 되게 많이 다르잖아요
이상하게 어떻게 풀어야 잘 풀 수 있을까 이 고민을 하는 시간이 재밌더라구요.
그래서 앞으로는 설계에 대해 주기적으로 포스팅 할 거에요!ㅎㅎ
이제 다시 본론으로 돌아오면 아키텍처, 디자인패턴 어떻게 보면 이둘은 개발에서 빠질 수 없는 필연적인 존재죠.
협업하여 개발 하다보면 테스트 해보고 수정하고 다시 코드 작성하고 그러다보면 아... 같은 코드를 또 만들어 버렸네..
이러는 경우가 꼭 한번은 있더라구요..;;
뭐.. 당연하긴 하죠, 사람마다 개발하는 방식이나 생각하는 구조가 다르니까요!
근데 ㅠㅠ 수정하고 통합하는데 시간이 너무 걸려요~~~
그래서 생각난게 회사 구조였어요, 각자 하는 일은 달라도 위에서 부터 명령하듯이 지시하면 다 똑같이 맞출 수 있을지 않을까?
찾아보니까 있더라구요 방법!
바로 Component-Based Architecture와 Atomic Design Pattern !
저는 백엔드 개발자인뎅... 프론트도 하거든요... React... 참 좋아요
그래서인지 Component-Based Architecture 는 이름만 봐도 알겠더라구요.
간단히 설명하자면 구성할 시스템의 최소 단위를 Component 라는 단위로 만들자! 이거에요
여기에서도 쓰고 저기에서도 쓸 수 있는 Component, 사실 당연한거죠 ㅎㅎ..;
근데 좀 더 들어가서 디자인패턴은 어떤게 있나 찾아봤거든요?
Atomic Design Pattern 이거이거.. 진국이네
학부생때 UI 디자인 맛만 보려다 똥손인 제 자신을 느끼고 세상에 나와선 안될 UI들을 몇몇개 만들었는데 만든 UI 여러군데 돌려쓰려다보니 가져올때마다 코드 복붙하고 맞게 수정했었는데..
그 떄 좀더 찾아볼걸 ㅠㅠ
Atomic이 뭔지 아세요? 영어 못해서 구글에 검색하니까 원자래요
느낌 오시나요? 이야~ 느낌 오셨다면 맞아요, 원자까지 쪼개버리자~~~
Atomic Design Pattern은 Atoms,Molecules,Organisms,Templates,Pages 로 구성한다네요?
음... 뭔소리지 했는데 뭔가 느낌이 오름차순이네 라고 생각했거든요?
역시 아니나 다를까 고등학생때 분자식 만들때 기억이 확 돌더라구요
Atoms ⊆ Molecules ⊆ Organisms ⊆ Templates ⊆ Pages 이거네 이거 포함해서 여러개 만들기~
그런줄 알았는데 Temlates이랑 Pages 살짝 조미료 추가했더라구요
Temlates은 Organisms를 어디 위치에 둘건지 레이아웃만 정의하는 거고,
Pages는 Temlates 에 데이터 넣어서 만든 최종 결과물 이더라구요
대충 이해하고 몇몇개 실제 사용하고 포스팅 된 글들 봤는데 러닝커브 높다고 하... 개 어렵구나 생각했는데 아니 대충 리액트에 적용해서 만들어 봤는데 되게 쉬워요
대충 보여드리면
약간 이런느낌? 만들면서 ChatGPT로 긴가 민가 한것도 물어보고 했는데 대부분 맞더라구요
대충 실제 폴더구조 다 만들고 보니까 이거 요물이다 요물
이렇게 하면 디자이너랑 프론트엔드 개발자에서도 각자 기능별로도 서비스개발,비즈니스 로직개발 분리해도 충분히 문제 없겠더라구요.
좋다~ 이 맛에 설계 찾아보는거지
글을 너무 길게 써버려서 그냥 여기까지만 쓸게요~~~ ㅎㅎㅎㅎㅎ
어려운 거면 더 쓰려고 했는데 너무 잘 설명해주신 개발자 분들의 블로그가 많아요
아쉽지만 제 필력으론 못 따라가...
헿... 오늘은 설계 맛 많이 봤으니 머리도 개운한데 코테 풀러갈게요!
여러분들 좋은 추석 되세요
