[TIL]231228_Typescript에서 이미지 업로드하기

👩🏻‍💻 Today Learn

• 알고리즘 스터디
• 심화프로젝트 진행

🤦🏻‍♀️ 고민한 부분

이미지 다중 업로드

지금까지는 이미지를 업로드 할때 한 장씩만 작업했었는데 여러장 업로드를 하려니 생각보다 쉽지않았다.

 const [imageFile, setImageFile] = useState<string[]>([]);

// 이미지 파일 미리보기, 최대5장
  const processImageFiles = (files: FileList, existingImageFiles: string[]): string[] => {
    let imageFiles: string[] = [...existingImageFiles];

    for (let i = 0; i < files.length; i++) {
      const file: File = files[i];
      const reviewImageUrl: string = URL.createObjectURL(file);
      imageFiles.push(reviewImageUrl);
    }

    if (imageFiles.length > 5) {
      warnTopCenter({message: '최대 5장 까지만 업로드 할 수 있습니다', timeout: 2000});
      imageFiles = imageFiles.slice(0, 5);
    }
    return imageFiles;
  };

 
  // 이미지 클릭해서 가져오기
  const imageUploadHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
    if (!event.target.files) return;

    const files: FileList = event.target.files;
    const processedImageFiles = processImageFiles(files, imageFile);
    setImageFile(processedImageFiles);
  };

// input에 multiple 추가해줘야함!
<input
    id="inputImg"
    type="file"
    accept="image/*"
    ref={fileInput}
    onChange={e => imageUploadHandler(e)}
    multiple
    />

이미지 드래그 앤 드롭

// 이미지 드래그 앤 드롭
  const handleDragOver = (event: React.DragEvent<HTMLLabelElement>) => {
    event.preventDefault();
  };

  const handleDrop = (event: React.DragEvent<HTMLLabelElement>) => {
    event.preventDefault();

    if (!event.dataTransfer.files) return;

    const droppedFiles: FileList = event.dataTransfer.files;
    const processedImageFiles = processImageFiles(droppedFiles, imageFile);
    setImageFile(processedImageFiles);
  };

// label에 속성 추가
 <label htmlFor="inputImg" onDrop={handleDrop} onDragOver={handleDragOver}>
드래그하거나 클릭하여 이미지를 업로드해주세요
</label>

구글링과 기계친구의 도움을 많이 받아서 한줄한줄 분석하지는 못했다 ㅠ
이미지는 할때마다 느끼지만 익숙해지기 어려운것 같다..

💡 알게된 내용

이 부분은 위에 내용과 관련은 없지만 github 협업하면서 알게된 사실!
평소에 팀프로젝트시에 내가 작업을 하다가 pull 받아야 하는 상황에서 불필요한 commit 보다 stash 로 임시저장 하는 방식을 자주 썼었다.

그런데 stash 를 하고 pull 을 받으면 내가 작업중이던 코드가 덮어씌워진 것인지 사라지는 현상이 몇번 있었다.

그 때 팀원분이 알려준 git stash pop !!! 이걸 하면 내가 작업하던 파일을 다시 불러올 수 있는 것이었다.!!

작업중 pull받기

git add .
git stash
git checkout dev
git pull origin dev
git checkout 작업중인브랜치
git merge dev
git stash apply

✍🏻 회고

진짜 어려운 부분은 시작도 안했는데 생각보다 어려움을 느껴서 당황했다.
멘탈나갈뻔~ 했지만 그래도 잘 부여잡고 하나씩 해결하는 중이니 끝까지 잘 마무리 해보도록 하자!