본문 바로가기
[React 성능 최적화] react-tooltip 성능 이슈 해결 성능 최적화를 진행하며 react-tooltip이 매우 느리게 렌더링 되는 것을 확인했습니다.검색해보니 관련된 이슈가 있었습니다. https://github.com/ReactTooltip/react-tooltip/issues/334 ReactTooltip renders very slow when used many time on the same page · Issue #334 · ReactTooltip/react-tooltipI'm displaying tooltips in some table cells in tables that contain 500+ items. Rendering is extremely slow. When I remove just the ReactTooltip elements, the t..
[React 성능 최적화] Children 컴포넌트의 불필요한 렌더링 방지하기 React를 최적화하는 업무를 받아 작업을 진행하며 알게 된 것들을 공유하고자 합니다.우선 react에서 제공하는 공식 예제를 참조하면 다음과 같습니다.const MyApp = props => { const [name, setName] = useState(''); const [address, setAddress] = useState(''); return ( Name{': '} setName(e.target.value)} /> Address{': '} setAddress(e.target.value)} /> );}위와 같은 컴포넌트에서, MyApp의 address가 ..
tinymce 에서 svg 처리 tinymce에서는 보안상의 이유로 svg 업로드를 지원하지 않는다. SVGs (Scalable Vector Graphics) are not supported in TinyMCE to protect our users and their end-users. SVGs can be used to perform both client-side and server-side attacks. 문제는 tinymce 이미지 플러그인에서 기본적으로 제공하는 file picker의 accept 속성이 image/*로 고정되어 있다는 점이다. automatic upload를 사용할 경우 file_picker_callback을 커스텀할 수 없기 때문에 accept속성을 수정할 수 없고, svg를 선택할 수 있게 된다. 이 때, s..
tinyMCE 커스텀 툴바 버튼과 다이얼로그 만들기 생각보다 tinyMCE관련 포스팅이 조회수가 높아 계속해서 후속 포스팅을 작성합니다. 이번 포스팅은 tinyMCE에서 커스텀 툴바 버튼과 다이얼로그를 만드는 방법을 설명합니다. 커스텀 툴바 버튼 생성 버튼 생성은 addButton함수를 사용하면 됩니다. 보통 셋업 단계에서 버튼 추가를 하기 때문에 setup에 세팅해 주시면 됩니다. 공식 문서의 예제를 축약하면 다음과 같습니다. tinymce.init({ setup: (editor) => { editor.ui.registry.addButton('customInsertButton', { text: 'My Button', onAction: (_) => editor.insertContent(` It's my button! `) }); }); 위 예제의 옵션 중..
tinyMCE 언어 변경하기 (tinymce-i18n 사용) tinyMCE를 유료 구독하고 있다면 단순히 language 옵션을 변경해주기만 하면 됩니다. 유료 모델에서 제공하는 언어는 다음과 같습니다. (링크) tinymce.init({ selector: 'textarea', // change this value according to your HTML language: 'ko_KR' }); 본 포스팅에서는 유료 구독을 하지 않고 직접 번들링하여 사용할 때 언어 번경 방법을 살펴보겠습니다. 공식 페이지 가이드라인 먼저 공식 페이지에서 제공하는 가이드라인은 다음과 같습니다. Download the language pack from the Tiny Community Language Packages download page. Set the language option..
틱톡 외부링크에 http 프로토콜 사용시 에러 ios 틱톡에서 인앱 브라우저로 외부링크 열때, 외부 링크가 http 프로토콜을 사용한다면 정상적으로 열리지 않는 문제가 있습니다. https를 사용하면 정상적으로 링크가 열립니다.
React에서 TinyMCE 셋업하기 TinyMCE는 현재 기준 꽤 쓸만한 오픈소스 에디터라고 생각합니다. 다만, 클라우드 호스팅된 서비스를 사용하려면 비용을 내야 합니다. 무료 플랜을 제공하고 있으므로 개인 프로젝트 등에서 간단히 사용할 예정이라면 무료 플랜을 사용해 손쉽게 세팅하면 됩니다. 만약 사용자가 많은 서비스인 경우 셀프 호스팅이나 번들링을 통해 무료로 사용이 가능합니다. 본 포스팅에서는 React환경 기반에서 번들링을 통해 TinyMCE를 셋업하는 방법을 설명합니다. 설치 tinymce, @tinymce/tinymce-react, raw-loader를 설치합니다 npm install --save tinymce @tinymce/tinymce-react raw-loader 번들 컴포넌트 구현 tinymce, tinymce-react..
HTML 이메일을 작성할 때 주의해야 할 CSS 관련 요소들 HTML 형식으로 제작된 이메일은 마케팅에 흔히 사용되는 요소입니다. 그런데, 이메일 HTML을 작성할 때에는 CSS 사용에 주의해야 합니다. 모던 브라우저에서 흔하게 사용되는 css 속성들이 이메일 클라이언트에서는 지원되지 않는 경우가 많기 때문입니다. 예를 들어 Gmail은 flex 속성을 제대로 지원하지 않습니다. 이렇듯 이메일 클라이언트와 서비스 제공 업체에 따라 다양한 제한 사항이 있으므로 이메일 HTML에 CSS를 사용할 때에는 다음과 같은 요소를 고려하는 것이 좋습니다. 1. 인라인 스타일 사용 이메일 클라이언트 대부분은 외부 CSS 파일을 지원하지 않습니다. 따라서 스타일을 HTML 인라인 요소로 작성해 주어야 합니다. inline-css 같은 패키지를 사용하면 간단하게 css파일을 인라인..

티스토리툴바