분류 전체보기

Editorjs를 사용한 블록 에디터에 이미지 플러그인을 추가해보자 2 - 이미지 선택 기능 추가
React 2024. 11. 3. 02:06
플러그인의 render함수에서 이미지 태그를 생성하고 리턴하면 해당 태그가 에디터에 보여지므로, image 태그에 이미지 선택 기능을 추가해본다.  render() { const wrapper = document.createElement("div"); const image = document.createElement("img"); const fileInput = document.createElement("input"); // 이미지 속성 설정 image.style.maxWidth = "100%"; image.style.maxHeight = "300px"; image.alt = "선택한 이미지가 여기에 표시됩니다."; // 파일 입력 요소 설정 fileInp..
Editorjs를 사용한 블록 에디터에 이미지 플러그인을 추가해보자 1
React 2024. 10. 31. 00:09
Editor.js에서 플러그인은 블럭에 사용할 수 있는 여러 기능을 제공하는 도구로, 아래와 같이 여러 블럭 속성을 사용할 수 있다.만약 설치 후, 아무런 플러그인을 설정하지 않았다면 다음과 같이 기본 플러그인인 text와 지금부터 만들어볼 Image 플러그인을 볼 수 있다. 플러그인을 구현하기 위해서는 class를 선언하고, save, render, toolbox 메소드를 구현해야 한다.class SimpleImage { static get toolbox() { return { title: "Image", icon: '', }; } render() { return document.createElement("input"); } save(blockContent) ..
블럭 에디터를 사용해보자
React 2024. 10. 30. 23:43
노션을 사용하면 아래와 같은 블럭 에디터를 사용할 수 있다.editor.js 라이브러리를 사용하면 노션에서 사용하는 블럭 에디터를 사용해볼 수 있다.react에서 사용하기 위해서는 아래 패키지를 설치한다.npm i @editorjs/editorjs --save패키지를 설치한 후, 에디터를 사용하기 위해서는 Editor 객체를 생성해야 한다.import EditorJS from "@editorjs/editorjs";import { useEffect, useRef } from "react";const Editor = () => { const editorRef = useRef(null); useEffect(() => { if (editorRef.current) { return; } ..
웹 크롤링 시스템 아이디어
시스템 2024. 10. 24. 22:57
사이트의 이상 여부를 확인하기 위해, 셀레니움을 이용하여, 특정 사이트에 접속한 후, 사이트의 랜더링이 정상적으로 이루어졌는지를 확인한다.사이트에서 접속이 가능한 링크를 모두 접속하여, 해당 페이지가 정상적으로 랜더링이 되는지를 확인하는 것이 목적이다. 목적 사이트와 종료 조건이 필요하다. 목적 사이트는 웹 크롤링으로 접속한 후, 페이지 랜더링이 정상적으로 이루어졌는지 확인하기 위한 최초의 최상위 사이트로, 해당 사이트에서부터 접속이 가능한 링크를 서치하여, 마우스 클릭을 모방한다. 마우스 클릭과 스크롤 다운으로 애니메이션이 필요한 페이지 영역까지 모두 정상적으로 랜더링이 되었는지를 확인하기 위해, 일정 간격으로 스크린 샷을 찍거나, 동영상으로 기록하여, 정상적인 사이트 랜더링 결과와 비교하도록 한다. ..
도커 크롬 드라이버를 설치하여, 웹 화면 셀레니움으로 headless 크롬 브라우저에서 한글 텍스트가 깨지는 이슈
시스템 2024. 10. 17. 00:56
크롤링을 위해 우분투 도커 서버에 크롬 드라이버를 설치하고, 셀레니움으로 headless 크롬 브라우저로, 네이버 화면을 랜더링하고 캡처 이미지를 저장할 때, 저장된 캡처 이미지에서 한글 텍스트가 랜더링이 되지 않고 빈 박스 형태로 깨지는 이슈가 발생하였습니다.headless 크룸 브라우저는 서버 환경과 같이 GUI 환경이 아닌 운영체제에서도 크롬 브라우저를 가상으로 랜더링하여, 웹 페이지를 그려주는 기능을 가지고 있습니다.하지만 우분투 도커에서는 한글 텍스트가 정상적으로 랜더링 되지 않고, 깨지는 이슈가 생기고 있습니다.해당 이슈에 대한 추측으로는 우분투 도커 환경에서 한글 폰트를 지원하지 않아, 크롬 브라우저에서 랜더링에 실패 했을 것으로 보고. 서버 환경에서 한글 폰트를 지원하는지 확인하였으나, 한..

티스토리툴바