dev/React 썸네일형 리스트형 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는 말 .. react 자식 컴포넌트의 함수를 부모 컴포넌트에 내보내기 가끔 react에서 자식 컴포넌트의 함수를 부모 컴포넌트로 내보내야 할 때가 있습니다. 좋은 패턴은 아니지만 필요하다면 useImperativeHandle을 사용하면 됩니다. useImperativeHandle의 특징은 공식 문서 한글 번역이 굉장히 난해하다는 점입니다. 아마 쓰지 말라는 무언의 암시가 아닐까 생각합니다. 공식 문서에서 제공하는 번역은 다음과 같습니다. useImperativeHandle은 ref를 사용할 때 부모 컴포넌트에 노출되는 인스턴스 값을 사용자화(customizes)합니다. 다행히 원문은 아래와 같습니다. useImperativeHandle customizes the instance value that is exposed to parent components when using.. redux를 이용해 react modal을 효율적으로 관리하는 방법 이전에 봤던 코드 중에 전체 프로젝트의 모달을 하나의 컴포넌트에서 제어하는 것을 보았습니다. 이번에 모달을 만들 일이 생겨 관련 내용을 검색해보니 실제로 저와 같은 생각을 하시는 분도 종종 계셨습니다. [Okky 질문글 링크] 링크를 따라가 보시면 댓글에서 Practical Redux, Part 10: Managing Modals and Context Menus 라는 글을 소개하고 있는데, 조금 오래된 글이지만 이 글을 읽고 대략적인 구조를 잡을 수 있었습니다. 본론에 앞서, 이 작업의 목표를 정의하자면 '모달의 상태, 렌더링을 다른 컴포넌트에서 분리하자' 입니다. 자세히 말하자면 다른 컴포넌트에 isOpen 같은 state를 두지 말고 redux 스토어로 관리하는 것이 첫 번째 목표입니다. 그리고 렌더.. Next.js TypeScript 환경에서 Jest 초기 설정 create next app(CNA)에 typescript 옵션을 붙여 프로젝트를 생성한 후 Jest를 설정하는 방법입니다. CNA 을 사용할 경우 Jest 세팅이 되어 있지 않기 때문에 별도로 세팅을 해 주어야 합니다. 공식 문서 링크 Testing | Next.js Learn how to set up Next.js with three commonly used testing tools — Cypress, Playwright, Jest, and React Testing Library. nextjs.org 1. 필요 패키지 설치 테스트에 필요한 파일들을 설치합니다. $ yarn add -D @testing-library/dom @testing-library/jest-dom @testing-library/r.. Redux 개념 이해하기 Flux 패턴 redux는 Flux 패턴의 구현체입니다. 따라서 Flux 패턴을 먼저 이해하면 자연스럽게 Redux를 이해할 수 있습니다. facebook은 우리가 흔히 알고 있는 MVC 패턴을 사용하는 대신, Flux라는 새로운 방식의 아키텍처를 사용하고 있습니다. Flux의 가장 큰 특징은 데이터가 한쪽 방향으로만 흐른다는 것입니다. 이를 단방향 데이터 흐름 이라고 표현합니다. 아래의 글을 읽으면 Flux가 얼마나 직관적인지 알 수 있습니다. Flux 패턴에서 모든 데이터의 변경은 action 으로 표현됩니다. 예를 들면 '카운터 증가' 를 다음과 같이 액션으로 정의할 수 있습니다. const increaseCounterAction = { type: "INCREASE_COUNTER" }.. [번역글] react functional component에서 setState를 동기식으로 사용하기 react 프로젝트에서 본격적으로 functional component를 사용한 이후로 처음 맞닥뜨린 이슈는 useState가 비동기로 동작하는 것이었습니다. setter를 호출한 뒤, 바로 값을 가져다 쓰면 업데이트 되지 않은 값이 참조되는😥 문제인데요... 아마 함수형 컴포넌트를 사용하시는 분이라면 한번쯤 고민해봤을 문제라고 생각합니다! 그리고 저처럼 왜 react는 이걸 비동기로만 쓰게 해놓은거야😡 라며 화내보신 분도 분명.. 분명 한분쯤은 있으리라 생각합니다. 글의 원문은 함수형 컴포넌트에서 useState를 동기식으로 사용하는 방법과, react 팀이 왜 이 기능을 기본 기능으로 추가하지 않는지를 모두 설명해 줍니다! 원문을 참조하시려면 useStateWithPromise: a custom ho.. 이전 1 2 다음
