NCRM이 기반으로 하는 Web Components는 웹 표준 기술로 범용 브라우저에서 기본으로 제공하는 컴포넌트 주도 UI 개발을 위한 기능으로 복잡해진 마크업 요소들을 코드의 충돌 없이 재사용 가능하도록 캡슐화 시켜 줍니다.
페이지 로드 시에는 사용되지 않으나 실행 시 보여지는 마크업 부분 정의
새로운 엘리먼트를 정의하거나 기존 엘리먼트를 확장
마크업과 CSS를 캡슐화
표준 기반의 모듈화로 빠른 재사용 가능
다른 여러 프레임워크 없이 개발자는 브라우저 고유 API만을 습득하면 되어 코드 복잡성이 줄고 페이지 성능 향상
컴포넌트의 DOM은 자체적으로 분리된 구조, 즉 document.querySelector()로 컴포넌트 shadow DOM 안의 노드에 접근할 수 없으므로 외부 로직에 의해 영향을 받지 않음
shadow DOM 내에 정의된 CSS는 자체로만 한정되어 스타일 규칙이 외부에 영향을 주거나 페이지의 스타일에 영향 받지 않음. 즉, 디자인된 모양 그대로 다른 것에 영향주지 않고 어디에서나 사용되므로 컴포넌트의 이식성이 높아짐
컴포넌트를 선언적으로나 마크업 기반 API로 디자인
CSS 적용범위가 한정되므로 동일한 이름 충돌 우려 없이 단순한 CSS 선택자, 더 일반적인 id 나 클래스 이름 사용 가능
하나의 큰 페이지가 아닌 작게 분리된 DOM으로 개발 생산성 향상
웹 표준으로 작성되어 다른 기술 기반의 환경에서도 동작
컴포넌트가 상호운용 가능하므로 더 긴 수명을 가지며 새 기술에 맞추어 재작성할 필요 감소
컴포넌트가 특정 라이브러리나 프레임워크에 대한 의존성 없이 어디에서나 동작하므로 도입 장벽이 상당히 낮아짐
압축되어 약 5KB로 React의 경우 40KB이상
React 대비 메모리사용량, 상호작용, 시작 시간 등이 16~30% 우수
ES 모듈과 같은 새로운 브라우저 기능과 태그된 템플릿 리터럴을 사용하므로 컴파일 불필요
Web Components 웹 표준을 기반으로 하므로 현재 및 향후 프레임워크에서 작동
Lit에서 구성 요소를 작성하여 쉽게 기존 프레임워크에 추가 가능하며, 구성 요소가 다른 프레임워크에서 작동하므로 단계적 변환 가능
각 컴포넌트를 분리하여 작성하고 연관 상태를 정의, 작게 시작
점차 복잡도를 증가시키며 새로운 기능을 제공하도록 작은 컴포넌트들을 연결하여 구성
구성된 컴포넌트들을 연결하여 페이지 구축, 도달하기 어려운 상태나 경계 사례 등에 대해
가상 데이터로 페이지들을 모의 실험
데이터를 연계하고 비즈니스 로직을 더하여 애플리케이션에 페이지들을 추가하여 백엔드 API와 서비스들을 연결
다른 팀이 쉽게 이해할 수 있도록 제작
독립적으로 실행될 수 있는 기능 분리
컴포넌트 개발 표준 결정
관심사분리를 통해 재사용성 향상
Storybook, Styleguidist, Jest, Linters
Atoms, Molecules, Organisms, Templates, Pages
기능 추가보다는 단일 책임 원칙 준수
표준 및 가이드라인 준수하도록 가능한 자동화
컴포넌트 주도 개발 | 하나로 웹 프로그래밍 방식 개발 | ||
---|---|---|---|
주요 제품 ⁄ 라이브러리 |
|
|
|
특징 |
|
|
|
주요기술 |
|
|
|
고려사항 |
|
|
|
|
|
요소 | NCRM 사용 개발 | Open Source JS Library 사용 개발 |
---|---|---|
UI 컴포넌트 |
NCRM Components고객의 요구사항들이 축적된 유형/무형 컴포넌트 |
해당 library 기반 Components (날짜,문자열,숫자, storage 등 처리를 위한 여러 컴포넌트 들 자체 제작 필요) |
페이지 구조 |
NCRM Templates일관성, 표준화된 템플릿 및 패턴 |
자체 설계 필요 (다양한 요건에 대한 대응, 성능 등 검증 필요) |
UI 프레임워크 |
NCRM FrameworkMDI 등 사용자를 위한 다양한 기능을 구비한 well made 프레임워크 |
MDI 기능 등 요구 기능 구현에 상당한 기간 및 공수 필요 |
개발도구 ⁄ 문서 |
NCRM 개발도구 / Documents개발 생산성을 극대화 할 수 있는 WYSIWYG 개발도구 및 개발가이드 문서 |
Editor 사용 |
상주 지원 |
계약에 의해 제공 |
지원 제공 받기 어려움 |
구축 시스템 |
다수의 구축 경험엔터프라이즈웹 성공적 구축 및 안정적 운영 경험 |
개발자의 역량에 의존적 |