프로필 사진 디폴트 만들어주기

 

오늘은 프론트 작업을 끝내 놓고 백엔드 팀원들의 IP를 받아 로컬 환경에서 테스트를 진행했다.

대체로 작업은 수월하게 끝났고, JWT방식을 처음 해본 팀원들이라서 로그인 인증에서 약간 에러가 있었지만 잘 해결했다!

인스타 클론을 1주일만에 끝내야 하며 우리는 웹소켓을 이용해서 DM기능에 도전하기로 했으므로 

회원정보 수정 페이지는 생략하기로 했다. 그래서 회원가입 시에 프로필 사진을 받기로 했고

혹시 프로필 사진 설정을 원하지 않는 유저에게는 기본 이미지가 들어가도록 설정하고 싶었다.

const [files, setFiles] = useState();

const onImgChange = (e) => {
    const file = e.target.files;
    setFiles(file);

    const reader = new FileReader();
    const imgFile = file[0];
    reader.readAsDataURL(imgFile);
    reader.onloadend = () => {
      dispatch(actionCreators.setPreview(reader.result));
    };
  };

  const signupBtnClick = () => {
    const email = emailref.current.value;
    const username = usernameref.current.value;
    const nickname = nicknameref.current.value;
    const password = passwordref.current.value;

    if (email.match(emailRegExp) === null) {
      window.alert("이메일 형식을 확인해주세요");
      return;
    }
    
    const formdata = new FormData();
    formdata.append("profileImg", files[0]);
    formdata.append("userEmail", email);
    formdata.append("userName", username);
    formdata.append("nickName", nickname);
    formdata.append("password", password);
    const config = {
      headers: {
        "Content-Type": "multipart/form-data",
      },
    };
    dispatch(actionCreators.singUpDB(formdata, config));
  };
  return (.......

처음에 프론트엔드 코드를 이렇게 작성했다. 

인풋에 이미지가 들어오면 onChange이벤트를 감지해서 파일 객체를 찾는다. (e.target.files)

file에는 사진객체가 담겨있을 것이다. 그것을 setFiles를 사용해서 state에 저장한다.

(잘 놔뒀다가 이따가 회원가입 버튼 클릭하면 꺼내 쓸 거 ㅎㅎ)

FileReader를 사용해서 해당 파일의 url을 가져온 후에 리덕스로 보낸다. 

setPreview 액션크리에이터는 받아온 reader.result를 리듀서로 가져가서 전역 상태에 해당 url을 남기고

나는 다시 컴포넌트로 돌아와서 방금 저장한 preview를 가져오면 된다.

const preview = useSelector((state) => state.user?.preview);

저 preview에는 유저가 방금 선택한 파일의 url이 담겨있고, 그 url을 미리보기에서 보여줄 수 있게 되었다.

근데 유저가 아무것도 선택 안할때는?

나는 백엔드 팀원과 사전에 협의를 할 때 "아무것도 선택하지 않으면 디폴트로 이런 이미지를 띄워줍시다!"라고만 협의를 했다.

백엔드 팀원들은 "그럼 혹시 적절한 이미지를 가지고 계시나요?"라고 물었고, 나는 적절한 이미지를 전달했다.

정확히 어떤 로직으로 구현할지는 몰랐기에, 내가 뭔가 데이터를 안보내면 서버에서 디폴트 값을 줄 수 있나 보다.. 생각했다.

하지만 실제 테스트에서 에러가 나왔고 어떤 에러인지 살펴보니

백엔드 팀원들은 프론트에서 "비어있는 File객체"가 들어올 때 에러가 발생하면 그 에러를 잡아서 디폴트 사진을 붙이는 로직을 짠 것이다.

하지만 보다시피 아무것도 선택을 안 하면 나의 초기값은 undefined가 될 것이고

백엔드 쪽에선 예상했던 에러가 아니라서 로직을 수정해야 할 필요가 생겼다.

하지만 대화를 들어보니 조금 어려움을 겪고 있는 것 같았고

그럼 내가 state의 초기값을 "비어있는 File객체"를 보낼 순 없는지 생각했다.

분명히 이벤트로 만드는 것 말고 직접 파일 객체를 만드는 방법이 있을것이라고 생각했고

결과적으로 구글링을 통해 저렇게 비어있는 파일객체를 만들었다. 

 

사실 별로 대단한 코딩이 들어간 건 아니지만 백엔드 팀원들이 너무 좋아했고, 이 일을 계기로 같은 팀 프론트엔드를 완전히 믿게 되는 계기가 되었다. 그리고 이런 게 바로 협업이구나..라는 생각이 들었고 개인적으로도 오늘 가장 뿌듯한 경험이었다.