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을 사용하지 않고..

2022년 2월 7일부터 Vue.js 라이브러리와 공식문서의 기본 버전이 3버전으로 바뀌었다. Vue2의 지원은 2023년 12월 31일에 종료된다고 한다. 내가 가장 마지막에 Vue를 사용한건, k8s 스터디에 참여하기 위해 2020년 10월 17일에 Spring boot + Vue로 만든 To Do List이다. 당시에 Vue2 버전을 사용했었고, 공식 문서 한글번역이 매우 잘 되어있어 편했던 기억이 난다. 이후로 계속 React만 써왔지만 추후 Vue를 사용하는 프로젝트에 참여하게 될 수도 있어서 빠르게 훑고 넘어가려고 한다. 템플릿 문법 같은 기본적인 틀은 Vue2와 비슷하고, 두드러지는 특징은 composition API인 것 같다. template 텍스트 바인딩 데이터 바인딩의 가장 기본 형태..

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를 사용해봤고, ..

Node.js로 서버 실행 파일 수정 시 서버를 종료하고 다시 실행해야하는 불편함이 있습니다. 서버 실행 $ cd $ node 서버 종료 cmd + c supervisor supervisor 패키지를 이용하면 서버를 재시작하지 않아도, 변경사항을 확인할 수 있습니다. 1. supervisor 설치 $ sudo npm install supervisor -g sudo : super do 의 약자로 super 권한으로 명령어를 실행합니다. npm : npm을 통해서 supervisor를 설치합니다. npm은 Node.js 설치 시 같이 설치되는 기본 패키지 관리자입니다. -g : 서버컴퓨터 전역의 어떤 프로젝트든지 사용가능하도록 하는 옵션입니다. 2. supervisor로 서버 실행 $ cd $ supervi..