🖼️ 게시글 이미지 처리 ( + drag & drop )

🙌 이미지 처리 흐름

1. 파일 탐색기 이용

1. <input type="file" />대신하는 버튼 클릭
2. 파일 탐색기로 이미지 하나 선택
3. martipark/form-data형식으로 백엔드로 이미지 전송
4. 백엔드에서 처리하는 동안 스피너 랜더링
5. 백엔드에서 처리 완료 후 사용가능한 url을 받음 ( photoUrl )
6. 해당 url을 이용해서 ![이미지](photoUrl)형태로 contents에 넣음

2. drag & drop 이용

1. 이미지 드래그 시 드래그 영역에 드래그 화면 랜더링
2. 영역에 이미지 드래그 시 martipark/form-data형식으로 백엔드로 이미지 전송
3. 백엔드에서 처리하는 동안 스피너 랜더링
4. 백엔드에서 처리 완료 후 사용가능한 url을 받음 ( photoUrl )
5. 해당 url을 이용해서 ![이미지](photoUrl)형태로 contents에 넣음

👋 drag & drop 이미지 처리 코드 예시

// 2022/04/28 - 이미지 업로드 로딩 변수 - by 1-blue
const [uploadLoading, setUploadLoading] = useState(false); 
// drag & drop으로 이미지 처리하는 이벤트 핸들러
const onUploadPhotoByDrop = useCallback(
  async (e: any) => {
    e.preventDefault();

    setUploadLoading(true);

    try {
      const formData = new FormData();
      formData.append("photo", e.dataTransfer.files[0]);
      const { photoUrl }: PhotoResponse = await fetch("/api/photo", {
        method: "POST",
        body: formData,
      }).then((res) => res.json());
      setValue(
        "contents",
        getValues("contents") + `\n![이미지](${photoUrl})`
      );
      toast.success("이미지를 업로드했습니다.");
    } catch (error) {
      toast.error("이미지 업로드에 실패했습니다.");
    }

    setUploadLoading(false);
    setIsDragging(false);
  },
  [getValues, setValue, setUploadLoading, setIsDragging]
);

// jsx 영역
return (
  <article
    onDragOver={() => setIsDragging(true)}
    onDragLeave={() => setIsDragging(false)}
  >
    <section className="flex-1 dark:bg-zinc-800 bg-zinc-200 p-4">
      {isDragging ? (
        <div
          className="flex flex-col h-full justify-center items-center"
          onDragOver={(e) => e.preventDefault()}
          onDrop={onUploadPhotoByDrop}
        >
          <span>🖼️이미지를 여기에 드래그 해주세요!</span>
          <Icon icon={ICON.PHOTO} className="w-40 h-40" />
        </div>
      ) : (
        <>
          // markdown 형식으로 입력받는 form... 생략
        </>
      )}
     </section>
   </article>
)

👏 <input type="file" />을 이용한 이미지 처리 예시

// 2022/04/28 - 이미지 input ref - by 1-blue
const photoRef = useRef<HTMLInputElement>(null);
// 2022/04/28 - 이미지 드래그중인지 판단할 변수 - by 1-blue
const [isDragging, setIsDragging] = useState(false);
// 2022/04/28 - 이미지 업로드 로딩 변수 - by 1-blue
const [uploadLoading, setUploadLoading] = useState(false);
// 2022/04/28 - 이미지 업로드 ( 파일 탐색기 이용 ) - by 1-blue
const onUploadPhotoByExplorer = useCallback(
  async (e: any) => {
    setUploadLoading(true);

    try {
      const formData = new FormData();
      formData.append("photo", e.target.files[0]);
      const { photoUrl }: PhotoResponse = await fetch("/api/photo", {
        method: "POST",
        body: formData,
      }).then((res) => res.json());
      setValue(
        "contents",
        getValues("contents") + `\n![이미지](${photoUrl})`
      );
      toast.success("이미지를 업로드했습니다.");
    } catch (error) {
      toast.error("이미지 업로드에 실패했습니다.");
    }

    setUploadLoading(false);
    setIsDragging(false);
  },
  [setUploadLoading, getValues, setValue, setIsDragging]
);

// jsx 영역
return (
  <article
    onDragOver={() => setIsDragging(true)}
    onDragLeave={() => setIsDragging(false)}
  >
    <section className="flex-1 dark:bg-zinc-800 bg-zinc-200 p-4">
      {isDragging ? (
        <div
          className="flex flex-col h-full justify-center items-center"
          onDragOver={(e) => e.preventDefault()}
          onDrop={onUploadPhotoByDrop}
        >
          <span>🖼️이미지를 여기에 드래그 해주세요!</span>
          <Icon icon={ICON.PHOTO} className="w-40 h-40" />
        </div>
      ) : (
        <form
          className="flex flex-col h-full"
          onSubmit={handleSubmit(onCreatePost)}
        >
          <input
            type="file"
            accept="image/*"
            ref={photoRef}
            onChange={onUploadPhotoByExplorer}
            hidden
          />
          <button
            type="button"
            onClick={() => photoRef.current?.click()}
            className="p-1 rounded-md hover:text-white hover:bg-black dark:hover:text-black dark:hover:bg-white focus:ring-2 focus:ring-indigo-400 focus:ring-offset-2"
          >
            <Icon icon={ICON.PHOTO} />
          </button>
          
          // 다른 태그들은 생략...
        </form>
      )}
     </section>
   </article>
)

🤔 처음 생각했던 이미지 처리 방식

1. 이미지를 탐색기 or drag & drop API로 받음
2. 받은 File을 배열에 넣음
3. FileReader를 이용해서 이미지를 base64형태로 처리함
4. base64를 화면에 랜더링함
5. 이후 게시글 생성 시 File배열을 백엔드로 넘겨줘서 이미지를 저장함

• 발생한 문제
  1. 이미지가 조금만 크더라도 base64의 크기가 너무 커져서 react-markdown이 고장 나서 브라우저가 멈춰버림
  2. 게시글을 임시저장 하는 경우에는 base64 자체를 DB에 넣어야 하는 경우 발생 ( 메모리 낭비 )
  만약 다른 방법을 사용한다면 게시글을 임시 저장할 때마다 이미지가 있는지 확인하고 이미 저장한 건지 검사하는 로직이 추가로 필요함

😥 문제

이미지를 드래그해서 페이지 내부로 가져온 경우에 이미지 드래그 영역을 랜더링하는데 해당 영역이 깜빡거리는 문제가 있습니다.
드래그 영역에서 내부 태그의 위를 지나갈 경우에만 isDragging값이 false가 돼서 즉, onDragLeave 이벤트가 작동하는데 작동하는 이유를 파악하지 못해서 트렐로에 기록해두고 다음에 처리할 생각입니다.

👇 참고

• drag & drop 참고
• 이전에 만들었던 프로젝트(blegram)에서 코드 참고
• File-API 참고 (처음 생각한 방식)