험난한 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}`, '');
          },
        }}
      />

async await 를 사용해야 하는 이유 (promise object)

(위의 완성 코드 참고) hooks에 async await을 사용하지 않자 callback에서 ![](https://codetech.nworld.dev/[object Object] 를 보내고 있었다.

콘솔에 찍어보니 promise object 객체로 들어오고 있었다. 이게 왜 이렇게 들어오지? 하고 찾아보니 우리가 받은 res 데이터가 완전한 것이 아닌 아직 데이터를 받아오는 중이기 때문에 Promise 를 반환하는 것이다. 그게 싫다면 await 으로 기다린 이후에 데이터를 출력하라는 것을 보고 실행해 보았더니 제대로 작동하게 되었다...! (참고)

Blob에서 file name에서 확장자명 추출하기

토스트 에디터의 이미지 파일 업로드 기능을 사용하면 이미지가 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 빈값 만들기

initialValue=" " //사이에 공백 넣어주면 됨