minguri brain is busy

Feature-Sliced Design이란? 우선 FSD의 레이어(layer), 슬라이스(slice), 세그먼트(segment)의 세 개념을 살펴봐야한다. Layers app: 로직 초기화. provider, router, 전역 스타일, 전역 타입 선언등이 여기에서 정의됨. processes(optional): 여러 페이지에 걸쳐 있는 프로세스를 처리한다.(deprecated됨) pages: 애플리케이션의 페이지 포함 widgets: 페이지에 사용되는 독립적인 UI 컴포넌트 features(optional): 비즈니스 가치를 전달하는 사용자 시나리오와 기능을 다룸 entities(optional): 비즈니스 엔티티를 나타낸다. 사용자, 리뷰, 댓글등이 포함됨. shared: 특정 비즈니스 로직에 종속되지..

이 글에서는 Cam Jackson의 Micro Frontends 번역 글을 보고 내가 쉽게 보려고 요점만 정리해봤다. 스타일링 CSS는 모듈시스템, 네임스페이스 또는 캡슐화가 없는 본질적으로 전역적이고 상속되며 계단식이다. 예시: 두개의 마이크로 프론트엔드 앱에 스타일시트에 각 h2 { color: black; }, h2 { color: blue; }가 있다면 충돌 그래서 지금까지 개발된 CSS를 보다 쉽게 관리할 수 있는 접근법 BEM: 엄격한 명명 규칙 사용 SASS: 셀렉터를 감싸(nesting) 네임스페이스 같은 형태로 사용 CSS 모듈: 모든 스타일을 프로그래밍 방식으로 적용 CSS-in-JS 라이브러리: 모든 스타일을 프로그래밍 방식으로 적용 shadow DOM: 좀더 플랫폼기반 접근 방식 서..

이 글에서는 Cam Jackson의 Micro Frontends 번역 글을 보고 내가 쉽게 보려고 요점만 정리해봤다. 통합 접근 방식 느슨한 정의를 감안할 때 마이크로 프론트엔드라고 부를 수 있는 많은 접근 방식이 있다. 일반적으로 애플리케이션의 각 페이지에 대한 마이크로 프론트엔드가 있고 컨테이너 애플리케이션이 있다. 렌더링 구성 헤더나 푸터 같은 일반적인 페이지 요소 렌더링한다. 인증이나 네비게이션같은 교차적 문제를 해결한다. 여러 마이크로 프론트엔드를 페이지로 가져오고 각 마이크로 프론트엔드에게 언제 어디서 렌더링 할지 알려준다. 방법 1. 서버사이드 템플릿 구성 방식 여러 템플릿 또는 프래그먼트에서 서버의 HTML을 렌더링 한다. 페이지의 공통 요소를 포함하고 있는 index.html이 있고, 서..

이 글에서는 Cam Jackson의 Micro Frontends 번역 글을 보고 내가 쉽게 보려고 요점만 정리해봤다. Micro Frontends의 정의 프론트엔드의 단일 구조를 개별적으로 개발, 테스트 및 배포 할 수 있는 작고 간단한 덩어리로 분해하는 패턴이 나타나고 있으며 이것은 고객에게 단일 응집력있는 제품으로 나타납니다. 우리는 이 기법을 Micro-Frontends 라고 부르며 , 다음과 같이 정의합니다. 독립적으로 제공 가능한 프론트엔드 애플리케이션들로 더 큰 하나의 전체 어플리케이션을 구성하는 아키텍처 스타일 장점 더 작고, 응집력 있고 유지보수가 쉬운 코드 베이스 이전보다 더 많은 분할, 증가 방식으로 일부씩 나누어 업그레이드, 업데이트 또는 재작성 할 수 있음 단점 dependeny의 ..