[Taskify] 이미지 확장자 제한 추가

오전 스크럼 회의 때 카드 이미지에 대한 이슈가 있었습니다.

담당 팀원분이 바쁜 관계로 제가 수정하기로 했습니다.  제가 작성한 로직은 아니지만, 서로서로 돕는 게 팀이죠😊

 

🚫 문제 상황

이미지를 등록한 상태로 카드를 생성했지만, 화면에 보여지는 카드는 이미지가 없이 렌더링 됩니다.

할 일 카드 생성 모달

 

💡 해결 방법

<input type='file' /> 에 accept 속성을 사용해 이미지 확장자를 제한해 보겠습니다❗

• 테스트해보니 svg 형식을 업로드하면 이미지가 안 보이는 것 같습니다.
• gif, jpg, png 확장자의 경우 잘 렌더링 되는 것을 확인했습니다.

<input
    type="file"
    id="profile-image"
    onChange={onImageChange}
    className={styles[`img-input`]}
    accept=".gif, .jpg, .png"
/>

 

결과를 확인해 보겠습니다.

이미지 파일 선택 화면

깔끔하게 해결! ... 이면 좋겠지만, 파일 선택창 하단에 사용자 지정 파일을 선택할 수 있게 되어있네요..🤔

한 번 눌러봐야겠죠?

 

슬픈 예감은 항상 틀린 적이 없네요...😂

사용자가 파일 형식을 모든 파일로 변경하면 accept 속성이 무용지물이네요.

 

✨ 최종 해결 방법

로그인 기능을 구현할 때 Input의 value들을 검증하는 로직을 작성했던 기억이 떠올랐습니다💡

<input type='file' /> 도 같은 input이니 onChange 이벤트가 발생했을 때 파일 확장자를 검사하면 되겠죠?

 

파일 Input 핸들러 - value 검증 추가 전 코드

const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    
    if (file) {
      setImage(file);
      const imgURL = URL.createObjectURL(file);
      setPreview(imgURL);
    }
  };

 

음... 어떤 식으로 처리해야 할지 고민이네요🤔

일단 파일이 어떤 형식인지 console로 확인해 보겠습니다.

 

name에 파일 이름과 확장자가 있네요.

알고리즘 풀이에서 수도 없이 연습했던 문자열 처리 실력을 보여줄 때가 된 것 같습니다🔥

 

파일 Input 핸들러 - value 검증 추가 코드

const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];

    if (file) {
      const allowedExtensions = ['png', 'gif', 'jpg'];

      // 이미지 확장자
      const imgFileExtension = file.name.split('.').pop()?.toLowerCase();

      // 확장자 검증
      if (!imgFileExtension || !allowedExtensions.includes(imgFileExtension)) {
        alert('허용되지 않는 파일 형식입니다 (png, gif, jpg만 등록 가능)');
        return;
      }

      setImage(file);
      const imgURL = URL.createObjectURL(file);
      setPreview(imgURL);
    }
  };

🌈결과

 

사용자가 모든 파일 형식을 선택하고 gif, jpg, png 외 다른 파일을 추가하려고 하면 정상적으로 alert을 출력합니다!

 

 

 

 

느낀 점

• input 처리 시에는 항상 검증(validation)이 필요한지 고려하는 습관을 들여야겠다고 느꼈습니다.
• 기획서에 명시된 기능만 테스트하는 데 그치지 않고 에러가 발생할 수 있는 예외 상황도 꼼꼼히 테스트해야겠다고 생각했습니다.

 

 

 

[Taskify] 무한스크롤 - 해결

 

[Taskify] 대시보드 상세 - 무한 스크롤