C-log

보호되어 있는 글입니다.

블로그 포스팅 기준 너무 나도 긴 공백이었다. 블로그 기준으론 긴 시간 동안 자리를 비웠지만 정말 많은 것들을 실행하고 실험해봤다. 물론 지난 달 2주 정도는 중간고사 시험이 있어서 거기에 매진을 해야 했지만 개발 속도를 맞추기 위해 시험 공부를 뒷전으로 두고 프로젝트를 기준으로 시험공부를 야금야금 진행 했다. 1달간 진행 했던 코드를 기준으로 이야기를 풀어가 볼 것이다. 아쉽게도 중간 중간 있던 일들을 하나하나 담아내지 못했을 뿐 결과를 설명하면서 기억나는 중요한 것들을 담아 낼 것이다. 먼저 지금까지 내가 제작한 코드의 구조도는 아래 그림과 같다.여기서 가장 우리가 중점으로 보아야할 파일은 EditorExam이다. 시간을 많이 들였던 부분이다. 아무래도 editor 라이브러리를 사용하지 않고 직접 하..

보호되어 있는 글입니다.

보호되어 있는 글입니다.

Document.execCommand() - Web API | MDNHTML 문서가 designMode로 전환되면 문서에서 execCommand 메서드를 사용할 수 있게 되는데 이것을 이용해서 문서의 편집 가능한 영역을 변경할 수 있습니다. 대부분의 명령어는 문서의 선택 영역에 영developer.mozilla.org현재 execCommand 앞으로 지원이 중단될 예정이다. execCommand를 대신할 라이브러리들은 무수히 많지만 원하는 형태와 코드 유지 보수가 매우 불편하기 때문에 가급적 라이브러리를 사용하지 않고 툴과 에디터를 제작하기로 했다. 개발을 하면서 execCommand를 사용하지 않고 개발을 시작했지만 생각보다 많은 고려를 해야해서 우선은 execCommand 를 사용해서 개발을 진행 후..

const [imageFiles, setImageFiles] = useState([]); // 이미지 파일들을 저장할 배열 상태 const [imageUrl, setImageUrl] = useState([]); ... // 에디터가 업데이트될 때 이미지 삽입 useEffect(() => { if (editorRef.current && imageFiles.length > 0) { const file = imageFiles[imageFiles.length - 1]; insertImageDate(file); } }, [editorRef.current, imageFiles]); const handleImageSelect = (e) => { const files = e.target.files; if (!!file..

앞서 포스팅에서 react-quill을 사용하지 않고 직접 에디터와 툴바를 제작하기로 결정 했다. 그러기 위해서는 두가지를 알아야 한다. 첫 번째로 contentEditable과 execCommand이다. # contentEditable contentEditable은 HTML 요소의 속성(attribute) 중 하나로, 사용자가 해당 요소의 내용을 직접 편집할 수 있게 하는 기능을 활성화하는 역할을 한다. 따라서 원하는 태그에 contentEditable="true"를 기입하게 되면 웹 페이지나 웹 애플리케이션에서 텍스트 입력 상자나 편집 가능한 컨텐츠가 된다. 사용하는 방법은 아래와 같다. 따라서 div태그가 편집을 할수 있게 된 것이다. 사용자가 입력을 직접 기입할 수 있는 에디터로 지정이 된 것이다..

이제 나만의 시험지를 생성할 수 있는 페이지를 제작할 것이다. 모든 기능의 툴을 일일이 제작하는 방법도 있겠지만 라이브러리를 이용해서 빠르게 작업을 수행하면 좋게다고 판단을 했다. FE팀원이 알아봐준 결과 react-quill이라는 라이브러리가 정보와 자료가 많다고 추천을 해주었다. 그래서 이번 시간에는 react-qull 라이브러리를 알아보려고 한다. 우선 react-quill 라이브러릴 npm으로 설치하고 기본적인 세팅을 해보겠다. 기본적인 세팅을 아래와 같다. # setting react-quill import ReactQuill from "react-quill" export default function EditTestSplit() { return ( Test ) } 위와 같이 작성하고 브라우저로..