회원가입페이지 코드리뷰 받은내용 고쳐보기

어떤 파일만 받을 것인가 - 아니 이렇게 쉬운 방법이?

 if (Blob.type.substr(0, 5) !== 'image') {
      alert('image만 업로드가 가능합니다');
      return;
    } else if (Blob.type.substr(0, 5) === 'image') {
      const reader = new FileReader();
      reader.readAsDataURL(Blob);

나는 이런식으로 file type의 substring의 0번째 index부터 5개 length가 (그냥 '첫 다섯글자가' 라는 말을 이렇게 어렵게 한다..) 'image'일 때와 아닐때를 나누어 예외처리를 해주었는데, 그냥 input 의 accept속성을 넣어주면 간편하게 해결할 수 있다.

 

사실 명세서에 // 이미지 파일(*.jpg, *.gif, *.png, *.jpeg, *.bmp, *.tif, *.heic) 확장자명이 다를 때 이미지 파일만 업로드가 가능합니다. // 라는 요구명세가 있어서 이참에 이를 추가해주었다.

 

        <input
          type="file"
          accept=".jpg, .gif, .png, .jpeg, .bmp, .tif, .heic"
          ref={fileInput}
          style={{ display: 'none' }}
          onChange={imageFileHandler}
        />

 

+ 아래와 같이 지정하면 모든 이미지파일을 받는다.

accept = 'image/*'

 

 

Min-length냐, 커스텀 유효성 검사냐

일단 내가 특정 길이의 문자열만 받고싶을 때는 Min-length, Max-length라는 아주 간편한 속성을 사용할 수 있다. 다만 

1. 경고창 문구가 커스텀이 되지를 않고

2. Min-length같은 경우는 IE지원이 아예 안되며

3. input값 유효성검사 통과시 회원가입 버튼을 활성화해주는 State도 변경을 해주어야 하기 때문에

 

좀 더 유연한 설계를 위해 따로 유효성검사를 진행하였다.

 

+ pattern속성을 사용하면 IE10버전 지원이 되고 경고문구 수정이 가능하다고 한다.

https://stackoverflow.com/questions/10281962/is-there-a-minlength-validation-attribute-in-html5/10294291#10294291

Is there a minlength validation attribute in HTML5?