AS-IS 사내 시스템 : 나모웹에디터 24년 신규 프로젝트 : TinyMCE 요구사항 폰트 - 사이즈/볼드/이탤릭 폰트 - 서체 커스텀 : Noto Sans 폰트 적용 가능 여부 (일어 한자 깨짐 문제) (KO) Noto Sans Korean (JP) Noto Sans Japanese (CH) Noto Sans Simplified Chinese 하이퍼링크 표 그리기 단락 구분(bullet point 등) 반응형 UI ❗️Office 호환성 (Ctrl + C, Ctrl + V) 기안 작성시 Office에서 선작업 후 에디터에 붙여넣기 하는 케이스가 많다고 한다. 인프라 구조를 CF + S3구조로 갈 것이기 때문에, 이미지/동영상 업로드시 이를 지원하는지 확인 필요. React Editor 라이브러리 비교..

AS-IS 24년 신규 프로젝트 : Material UI 요구사항 향후 신규 개발 또는 개편될 사내 시스템 및 대외 시스템에 공통으로 적용할 UI 라이브러리 선정. 대용량 데이터(ex. AMS: 자산 관리 시스템)를 노출시켜야 할 경우가 있기 때문에 이에 적합한지 퍼포먼스 확인 필요. 24년 신규 프로젝트건에 대하여, 기존에 없던 테이블 Drag Sort 기능이 추가됨. 해당 UI 지원 가능 여부 확인 필요. React UI 라이브러리 비교 🔗 npm trends 디자인 템플릿 디자인 자유도 사용 편의성 Bootstrap △ △ △ Tailwind △ ○ △ Material UI ○ ○ △ Ant Design ○ △ ○ ❗️ Bootstrap, tailwindCSS는 CSS 프레임워크로, 컴포넌트를 직접..

리액트는 index.html에서 "root"라는 id를 가진 div에 App.js를 렌더링 시켜 사용자에게 보여줄 화면을 정의한다. 즉, 모든 리액트 컴포넌트/페이지가 root라는 컨테이너 안에 담기게 된다. 그런데 서비스를 만들다보면 modal, dialog, overlay 등 메인 컨테이너가 아닌 별도의 컨테이너에 내용을 담아야 하는 경우가 생긴다. 이 때 z-index만으로 화면을 구성해도 되지만, z-index에 대한 정의가 제대로 되지 않을 경우 원하는 결과가 나오지 않을 수 있다. 그래서 사용하는 것이 리액트의 Portal이다. Portals Portal은 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링하는 최고의 방법을 제공합니다. 1. Portal을 사용하지 않고..

React React는 Facebook에서 제공하는 프론트엔드 라이브러리이다. 주로 SPA(Single Page APplication)나 모바일 애플리케이션을 만들 때 사용된다. React를 사용하는 이유 1. Virtual DOM의 사용 DOM은 Document Object Model의 약자이며 HTML, XML, CSS 등을 트리 구조로 인식하고, 데이터를 객체로 간주하고 관리한다. 기존의 DOM은 페이지가 바뀔 때 마다, 새 HTML을 로드하면서 DOM 전체를 변경한다. React는 이 DOM Tree 구조와 같은 구조체를 Virtual DOM으로 가지고 있다. Virtual DOM은 가상의 Document Object Model을 말합니다. 실제 DOM을 제어하지 않고, 이벤트가 발생할 때 마다 ..

리액트는 State(상태) 관리 라이브러리를 사용해야 편하다. 이전 프로젝트에서는 Global State를 관리하기 위해 Redux를 사용하다가 신규 프로젝트에서는 MobX를 사용해보면 어떨까 검토하기 위해 두 라이브러리를 비교한 글들을 짜집기해봤다. Redux는 워낙 다양한 방식으로 구현하기 때문에 이전 프로젝트에 적용했던 것을 기준으로 작성했다. Redux Flux와 함수형 프로그래밍을 결합한 가장 많이 사용되는 상태 관리 솔루션. Mobx 애플리케이션 내에서 로컬 상태를 관리할 수 있는 상태 관리 솔루션. 1. 점유율(인지도) 2020.6.21 기준 구글 검색어 통계만 비교해보아도 Redux가 압도적임을 확인할 수 있다. JavaScript 2019 Survey 결과에서도 Redux를 사용해봤고, ..