dev 썸네일형 리스트형 Change the language of tinyMCE (using tinymce-i18n) If you have a paid subscription for tinyMCE, simply changing the language option is all you need to do. The languages available in the paid model are as follows. (link) tinymce.init({ selector: 'textarea', // change this value according to your HTML language: 'ko_KR' }); In this post, we will explore how to change the language when using bundling without a paid subscription. Official Page Guidel.. 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.. React에서 TinyMCE 셋업하기 TinyMCE는 현재 기준 꽤 쓸만한 오픈소스 에디터라고 생각합니다. 다만, 클라우드 호스팅된 서비스를 사용하려면 비용을 내야 합니다. 무료 플랜을 제공하고 있으므로 개인 프로젝트 등에서 간단히 사용할 예정이라면 무료 플랜을 사용해 손쉽게 세팅하면 됩니다. 만약 사용자가 많은 서비스인 경우 셀프 호스팅이나 번들링을 통해 무료로 사용이 가능합니다. 본 포스팅에서는 React환경 기반에서 번들링을 통해 TinyMCE를 셋업하는 방법을 설명합니다. 설치 tinymce, @tinymce/tinymce-react, raw-loader를 설치합니다 npm install --save tinymce @tinymce/tinymce-react raw-loader 번들 컴포넌트 구현 tinymce, tinymce-react.. create react app .env 파일 순서 CRA 공식 문서에 따르면 파일 순서는 아래와 같다. Files on the left have more priority than files on the right: npm start: .env.development.local, .env.local, .env.development, .env npm run build: .env.production.local, .env.local, .env.production, .env npm test: .env.test.local, .env.test, .env (note .env.local is missing) 출처] CRA adding custom enviroment .env파일이 하나 이상 있으면 위 규칙이 적용된다. .env .env.production 이렇게 있으면,.. react query optimistic update 테이블에서 메모를 실시간으로 업데이트 해야 했다. 문제는 메모를 수정할 때, 잠깐동안 이전 데이터가 보였다가 수정된 데이터가 보였다. 예를 들어, 'abc'라는 상태에서 '가나다'로 메모를 수정하면 잠깐동안 'abc'로 데이터가 렌더링되었다가 patch가 완료되면 다시 '가나다'로 변경되는 식이었다. 원인은 데이터가 patch(이하 mutate) 되는 동안 아직 업데이트 되지 않은 데이터를 참조하기 때문이었다. ({ ...data memo: }))} /> 대략 이런 구조에서, 데이터를 mutate 할 때 수정된 데이터가 아닌 기존의 list를 참조하기 때문에 잠시 이전의 데이터가 나타났던 것이다. optimistic update를 통해 이 문제를 해결할 수 있었다. optimistic update는 말 .. tailwind css의 classname 순서 문제 tailwind를 사용해보니 편리하지만 직관적으로 이해하기 어려운 부분도 많다. 그 중 대표적인 것이 스타일이 classname에 적힌 순서대로 적용되지 않는 점이다. 아래 포스트가 좋은 예시를 들고 있다. https://fe-developers.kakaoent.com/2022/220303-tailwind-tips/#tailwind-class%EC%9D%98-%EC%9A%B0%EC%84%A0%EC%88%9C%EC%9C%84 Tailwind CSS 사용기 카카오엔터테인먼트 FE 기술블로그 fe-developers.kakaoent.com 위 포스트의 예시를 한 마디로 정리하면, 아래 코드는 text-blue 를 보장하지 않는다. Hello world tailwind는 classname은 순서는 고려하지 않기.. react 자식 컴포넌트의 함수를 부모 컴포넌트에 내보내기 가끔 react에서 자식 컴포넌트의 함수를 부모 컴포넌트로 내보내야 할 때가 있습니다. 좋은 패턴은 아니지만 필요하다면 useImperativeHandle을 사용하면 됩니다. useImperativeHandle의 특징은 공식 문서 한글 번역이 굉장히 난해하다는 점입니다. 아마 쓰지 말라는 무언의 암시가 아닐까 생각합니다. 공식 문서에서 제공하는 번역은 다음과 같습니다. useImperativeHandle은 ref를 사용할 때 부모 컴포넌트에 노출되는 인스턴스 값을 사용자화(customizes)합니다. 다행히 원문은 아래와 같습니다. useImperativeHandle customizes the instance value that is exposed to parent components when using.. FP 중요 개념 정리4 :: 에러 처리(1) FP 중요 기능 정리 5 :: 함수형 프로그래밍의 에러 처리1 (functor, monad) 명령형 코드는 주로 try-catch 구문으로 예외를 처리합니다. try 문으로 안전하지 않은 코드를 둘러싸는 아이디어 입니다. 함수형 프로그래밍에서도, '위험한 코드를 안전망으로 감싼다' 라는 개념은 동일하게 적용됩니다. 다만, try-catch문은 에러가 발생했을 때 제어를 넘겨주는 방식인 반면 함수형 프로그래밍에서는 특수한 객체를 사용하여, 제어를 역전시키지 않고 데이터 흐름을 유지하며 에러를 처리합니다. 이 특수한 객체를 '모나드'라고 부릅니다. 모나드에 대해 살펴보기 전에 더 넓은 개념인 functor에 대해 살펴보도록 하겠습니다. Functor 값을 특정한 컨테이너로 감싸 불변성을 유지하는 것은 프로그.. 이전 1 2 3 4 ··· 10 다음