장난감 연구소

이번 글에서는 기존에 CRA(Create React App)를 사용하던 리액트 프로젝트를 Vite로 마이그레이션하면서 진행한 작업들을 개인적으로 정리해보았습니다.타입스크립트 관련 설정 등 제가 사용하지 않은 내용은 포함되어 있지 않으니, 해당 주제가 필요하신 분은 다른 참고 자료를 함께 보시는 것을 추천드립니다. Create React App is deprecated한동안 백엔드 관련 기술에 집중하느라 프론트엔드에 소홀했었는데, 어느새 Create React App(CRA)이 공식적으로 Depreceted 되었다. CRA는 리액트 빌드 도구로, 2025년 2월 14일부터 더 이상 권장되지 않는다.그 이유로는, Webpack 기반의 빌드 속도가 느리고, 라우팅/코드 스플리팅처럼 앱 개발에 필수적인 기능이 ..

주의 | Quill 1.x 버전 때 작성된 오래된 글입니다! 이 글에는 Next.js에서 react-quill의 사용 없이 Quill 에디터를 사용하기 위한 코드를 제공합니다. 코드의 부족한 점과 문의 사항은 댓글 주시면 답변 및 수정하도록 하겠습니다.샘플 프로젝트 다운로드샘플 프로젝트는 create-next-app에서 일부분만 수정하여 위 사진과 같이 Quill 에디터를 사용해볼 수 있게 하였다.해당 폴더로 이동 후 node module 설치 후 개발 서버 실행$ npm install$ npm run dev아래 방식을 사용하게된 이유Next.js를 통해 개발을 진행하면서 Quill 에디터를 사용하고자 했다. 그런데 Quill에서 바꾸고 싶은 부분이 있어 그 부분을 수정한 후 직접 빌드하여 사용해야 했다..

Next.js에서 Quill 에디터를 사용하는 방법을 다른 게시글로 올렸습니다. 필요하시다면 해당 글이 도움되실 겁니다. 문제 발생 개인 프로젝트로서 개발중에 위지윅 에디터가 필요했다. 여러 에디터들을 비교해보니 Quill 에디터가 괜찮아 보였고, Next.js로 만든 페이지 위에서 사용하고자 하였다. 그래서 찾다보니 Quill 에디터를 React에 적용하는 코드까지 올려주신 감사한 분(해당 글은 삭제됨)이 있었고, 이를 활용하여 정상적으로 에디터를 띄울 수 있었다. 그런데, 위 사진과 같이 영문과 한글 모두 첫 글자를 입력하게 되면 커서가 맨 앞으로 가버리는 문제가 있었다. 처음에는 직접 Quill의 develop 브랜치를 컴파일해서 불러온거라 문제가 발생한 줄 알았다. 그래서 Quill의 소스코드만 ..