험난한 toast ui 사용기...
const editorRef = useRef<Editor>(null);
<Editor
ref={editorRef}
previewStyle="vertical"
initialValue="내용을 입력해주세요"
height="550px"
usageStatistics={false}
plugins={[[codeSyntaxHighlight, { highlighter: Prism }]]}
hooks={{async addImageBlobHook(blob, callback) {
const formData = new FormData();
formData.append('file', blob);
console.log(`blob`, blob);
const imageURL = await uploadEditorImage(formData);
console.log(`imageURL`, imageURL);
const imageUrlData = imageURL.data;
console.log(`imageUrlData`, imageUrlData);
callback(`https://codetech.nworld.dev${imageUrlData}`, '');
},
}}
/>
(위의 완성 코드 참고) hooks
에 async await
을 사용하지 않자 callback
에서 
토스트 에디터의 이미지 파일 업로드 기능을 사용하면 이미지가 base64
형식으로 생성된다. 이 방식은 글자 길이가 어마무시하기 때문에 서버에 이미지를 보내 uuid를 받아와 base64
형식을 바꿔주려고 한다.
이때 서버에서 받아오는 uuid의 뒤에 이미지 파일 확장자를 붙이는 것은 백엔드에서도 구현이 가능하고, 프론트에서도 구현이 가능하다.
아래의 방식은 프론트에서 blob
의 name
에 있는 파일명에서 확장자만 떼어내고, 서버에서 보내준 uuid 뒤에 떼어낸 확장자명을 붙인다음 callback
으로 토스트 에디터에 띄워주는 방식이다.
async addImageBlobHook(blob, callback) {
const formData = new FormData();
formData.append('file', blob);
console.log(`blob`, blob);
//blob의 파일명을 저장하는 변수
const blobName = blob.name;
const _fileLen = blobName.length;
//뒤에서 부터 '.'의 위치를 찾는다. 파일 이름에 '.'가 포함될 수도 있기 때문에 lastIndexOf()를 사용함.
//'.'를 찾으면 검색 문자의 위치를 반환(숫자로)함
const _lastDot = blobName.lastIndexOf('.');
//확장자 명만 추출한 뒤 소문자로 변경
const _fileExt = blobName.substring(_lastDot, _fileLen).toLowerCase();
//api 호출 함수
//{data: '/images/e4db4f1b-9abd-4260-94f5-764695017945.jpg', status: 200, statusText: 'OK' ... 생략
const imageURL = await uploadEditorImage(formData);
//위의 객체에서 data 부분만 떼온 것에 확장자명을 붙임
const imageUrlData = imageURL.data + _fileExt;
callback(`https://codetech.nworld.dev${imageUrlData}`, '');
(참고)
initialValue=" " //사이에 공백 넣어주면 됨