프로필 수정페이지 유효성검사 및 에러핸들링

1. 프로필을 수정할떄 이미지는 수정하지않고 닉네임만 수정하여 요청을 보냈을시 수정되지않은 현상.

문제발생 이유

• 서버에서 프로필 이미지를 처리할떄 파일객체형태로 이미지를 받아 처리를 하고있는데, 이를 클라이언트에선 문자열 파일경로를 통해 보여주고있었다. 그래서 파일을 추가적으로 선택하지않는이상 문자열의 url경로를 그대로 보내주고있어서 에러가 발생했었다.

해결 (관련 커밋 링크)

• 기존에 사용중이던 url경로를 다시 파일 객체형태로 변형시키는 방법을 찾아봤으나 찾지를못해 기존의 문자열을 객체형태로 다시 변경하여보내는 방법은 포기했고 닉네임만 수정하는 api를 새로 만들어 프로필을 수정하지 않았을때 버튼에 적용된 api를 수정하려했으나 서버측에서 이미지파일을 보내지않을시 기존의 프로필 이미지를 사용하는것으로 판단하여 처리하는것으로 해결했다.

2. 프로필 편집시 프로필과 닉네임 둘다 수정을하지 않았을떄도 수정버튼이 활성화되어있음.

문제

• 기존의 프로필 이미지와 닉네임이 동일한데 굳이 불필요한 서버요청을 보낼 필요가 없다생각함.

해결 (관련 커밋 링크)

• 선택한 이미지파일이 없거나, 닉네임이 변경되지않았다면 버튼에 수정 요청 api가아닌 alert메세지를 띄우게 처리했다.

3. 프로필 편집시 닉네임을 수정하지않았는데도 중복확인버튼이 활성화되어있음

문제

• 중복확인 api는 서버요청에해당한다. 따라서 굳이 변경되지않은 닉네임을 요청을보내 비교하는것인 불필요한 요청에 해당한다.

해결 (관련 커밋 링크)

• 인풋에 입력된 닉네임이 로그인한 유저의 닉네임과일치하다면 눌렀을떄 중복체크 api요청을 보내지않고 동일한 닉네임이라는 alert창 보여주면서 return문으로 함수를 종료시킨다.

4. 프로필변경 버튼을 누른후 alert창을 보여줄떄 수정버튼을 계속누르게되면 api요청이 보내짐

해결 (관련 커밋 링크)

• 서버요청을 보내고 응답을 받기전상태를 isloding상태로 관리하고 그떄의 버튼에 onClick이 없는 버튼을 보여줌.

5. 입력을 받을떄마다 유효성 검사를 실시하여 렌더링이 지속적으로 발생.

해결 (관련 커밋 링크)

• debounce 라이브러리를 활용하여 마지막 이벤트를 기준으로 유효성 검사 함수를 실행시킴.