글 사이 이미지 넣고 관리하기

🍑   배경

사이드 프로젝트에서 글 사이에 이미지를 넣고 관리할 수 있는 게시판 CRUD 기능을 만들어야 했다.

이미지, 게시글 작성 관리 방식에 대규모 수정이 여러 번 있었고… 최종 선택한 방식과 함께 접근했던 방식을 정리해보고 싶어서 포스팅을 작성한다..!

 

 

🍑   생각했던 방법들…

1. 이미지를 선택할 때마다 s3 스토리지에 이미지를 저장하고 → 응답으로 넘겨준 주소를 img 태그로 추가하여 프론트에 보여주는 방법
   
   • 글 작성을 완료하기도 전에 이미지 업로드 → 완료 전 취소한다면 낭비가…
2. 이미지 및 글 전체 다 전송
   
   • 일반적으로 웹 서버에서 request body 사이즈 제한을 걸어서 운용하기에 대용량 또는 여러 파일 업로드 시 문제를 쉽게 만난다…
   • 일반적으로 스토리지는 공용 사용을 위해 서버와 별개로 구축한다고 함…

 

🍑   그래서 채택한 방법은…

1. 글 생성 전까지 작성한 텍스트와 선택한 이미지를 base64로 인코딩하여 프론트에서 보여주고 / 편집할 수 있도록 함
2. 글 작성 시점에 이미지 유무를 분리하여
3. 이미지가 없는 경우 글 생성 api 호출
4. 이미지가 있는 경우 글 생성 api 호출 - 보여주던 이미지를 form data로 변환 후 s3 서버에 업로드 & base 64 url을 s3 url로 변경 후 글 업데이트 api 호출
   (*왜? 게시글이 생성될 때 게시글 id가 생성되고, 이미지는 게시글 id를 참조하여 조회/삭제에 사용됨)

 

업로드하는 동안 커넥션을 계속 물고 있어야 하고 구현이 복잡하다는 단점은 있었지만…

불필요한 자원 낭비를 최소화할 수 있는 방법이라고 생각했다...

 

 

🍑   어떻게 구현했나요…

 

1. content editable 속성 사용

글 사이에 이미지를 넣는 방법을 모색하던 중 찾은 속성이다. 사용자가 동적으로 텍스트나 내용을 편집할 수 있고, 텍스트, 이미지, 링크 등을 수정하거나 추가할 수 있게 해 준다. div contenteditable에는 입력하는 요소들이 html로 변환되어 들어간다.

<Box contentEditable={true}></Box>

 

React는 사용자 입력을 렌더링 할 때 자체적으로 이스케이프 처리를 하여 해당 입력이 HTML 태그로 해석되지 않게 하여 자동으로 XSS 공격을 방지한다고 한다… 하지만 contentEditable 속성을 통해 사용자가 직접 내용을 편집하고 수정하는 과정에서 입력 / 조회 요소들이 html로 변환되어 들어가는 것을 허용하고, 때문에 악의적인 사용자가 스크립트를 삽입하거나 (XSS 공격) 다른 공격을 시도할 수 있다고 한다… 이런 이유 때문에 글 사이 이미지 넣는 서비스를 많이 못 본 건가 싶기도 하고…

 

 

2. 이미지를 base64 url로 변경

type이 file인 input 태그에 담긴 파일을 input.current.files로 추출 후 FileReader로 파일 내용을 base 64 데이터 url로 읽어온다. img 태그를 생성하고 content editable 요소 내 동적으로 추가해 준다.

function KeyboardFixedElement(){
	const fileInputRef = useRef<HTMLInputElement | null>(null);

	function handleFileChange() {
	  if (
	    fileInputRef.current && 
	    fileInputRef.current.files &&
	    fileInputRef.current.files.length > 0 // 선택한 파일이 있는 경우
	  ) {
	    const files = fileInputRef.current.files;
	    for (let i = 0; i < files.length; i++) {
	      const file = files[i];
	      const reader = new FileReader();
	      reader.onloadend = () => { // 파일을 base 64 url로 변환
	        if (reader.result) {
	          const newNode = document.createElement("img");
	          newNode.src = reader.result as string;
	          newNode.alt = "포스팅 이미지";
	          newNode.style.maxWidth = "100%";
		        
						const targetElement = document.getElementById("contentEditable"); 
	          targetElement && targetElement.appendChild(newNode); // 변환한 url을 src로 갖는 이미지 태그를 contenteditable 본문에 삽입 
	        }
	      };
	      reader.readAsDataURL(file);
	    }
	  }
	}
	
	return (
	...
	 <input
	      type="file"
	      accept="image/*"
	      ref={fileInputRef}
	      style={{ display: "none" }}
	      onChange={handleFileChange}
	      multiple
	    />
	...
	)
}

 

추가로 모든 필드가 작성 완료된 경우에만 제출 버튼을 활성화시킨다고 했을 때, 본문 내용(innerHTML) 가변값을 상태값으로 관리해주려 했지만 div은 다른 input, textarea 태그들처럼 onchange 이벤트가 발생하지 않고 placeholder를 지정할 수 없는 이슈가 있어 DOM 요소의 변경을 감지할 수 있도록 mutation observer를 등록했다...

function GeneralPostForm(){
	const editableDivRef = useRef<HTMLDivElement | null>(null);
	...
	useEffect(() => {
	    const observerCallback: MutationCallback = (mutationsList, observer) => {
	      for (const mutation of mutationsList) {
	        if (
	          mutation.type === "childList" ||
	          mutation.type === "characterData"
	        ) {
	          handleContentChange(editableDivRef.current?.innerHTML);
	        }
	      }
	    };
	    const observer = new MutationObserver(observerCallback);
	    if (editableDivRef.current) {
	      const observerConfig: MutationObserverInit = {
	        childList: true,
	        subtree: true,
	        characterData: true,
	      };
	      observer.observe(editableDivRef.current, observerConfig);
	    }
	    return () => {
	      observer.disconnect();
	    };
	  }, []);

	...
	return (
		<Box
        contentEditable
				id="contentEditable"
        onBlur={handlePlaceholderChange}
        ref={editableDivRef}
        onFocus={handlePlaceholderChange}
      ></Box>
	)
}

 

3. img base url 추출

본문 내용에 삽입한 이미지 Data URL 내 base64로 인코딩한 이미지를 추출하고…

// img str 추출 함수
function extractImgBaseStr() {
  const innerHTML = document.querySelector("#contentEditable")!.innerHTML;
  const imgSrcPattern = /data:[^"]+/g; // Data URL 정규표현식
  const encodedImgLst = innerHTML.match(imgSrcPattern) || [];
  return encodedImgLst;
}

 

4. img url form data 변환 업로드

Data URL을 사용하여 다시 이미지 업로드 파일 객체를 생성하여 전달해야 할 형태의 form data로 변환한다.

function addBase64ImagesToFormData(base64Images: any, formData: any) {
  base64Images.forEach((base64ImageData: any, index: number) => {
    const fileName = `img${index + 1}.jpeg`; /
    const file = dataURLtoFile(base64ImageData, fileName);
    formData.append("multipartFiles", file);
  });
}

function dataURLtoFile(dataurl: string, fileName: string) {
  const arr = dataurl.split(",");
  const mime = arr[0].match(/:(.*?);/)?.[1];
  const bstr = atob(arr[1]);
  let n = bstr.length;
  const u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new File([u8arr], fileName, { type: mime });
}

 

s3 서버에 올린 후 s3 url을 받아온 후…

 

5. 본문에서 앞서 추출한 img base url의 blob url을 s3 url로 변환하고

최종 s3 url로 대체된 img 태그가 포함된 본문을 제출한다~ 끄읕

// img blob string을 s3 이미지 링크로 replace 하는 함수
function replaceImgStrToS3(imgUrls: string[]) {
  let newInnerHTML = document.querySelector("#contentEditable")!.innerHTML;
  const encodedImgLst = extractImgBaseStr();
  for (let i = 0; i < imgUrls.length; i++) {
    const replaceFrom = encodedImgLst[i];
    const replaceTo = imgUrls[i];
    newInnerHTML = newInnerHTML.replace(`${replaceFrom}`, replaceTo);
  }
  return newInnerHTML;
}

 

 

🍑   한 줄 요약

가능한 방법을 찾는 과정에서 많이 헤매었지 대부분의 코드는 지피티가 도와줬다,,,

관련 라이브러리가 없다는 것도 신기하고… 더 나은 방법이 있는데 복잡한 방법으로 우회한 건가 싶기도 하고… 

그래도 당장 급하신 분들은 아이디어를 얻을 수 있지 않을까 해서 공유해 봅니다…