1. onBlur Event
상황
- 파이널 프로젝트에서 만든 대시보드에서 프로필을 수정하는 기능에 닉네임 중복 기능을 추가해야 했습니다.
- 다만 기본적으로 대시보드에서의 프로필 수정이기 때문에 '닉네임 중복확인' 과 같은 버튼을 만들고 싶지 않았습니다.
- 그래서 해당
Input태그에서 빠져나갈때 바로 '닉네임 중복확인' 을 하는 함수가 동작하면 좋겠다고 생각이 들었습니다.
해결
- 바로 구글링을 해보았습니다.
- 한 번도 써본적이 없었지만 onBlur 라는 이벤트가 있다는 것을 알았습니다 동시에 onFocus 도 같이요.
- 따라서 대시보드 페이지 내에서 닉네임 체크 기능을 보다 캐주얼하게 구현할 수 있었고 그에 따라서 사용자 경험도 더 향상되었다고 생각합니다.
예시
화면
-
중복확인 구현 전,
-
중복확인 구현 후,
코드 조각 (Next.js, TypeScript, Axios)
const onBlurNickname = async () => {
try {
await axios.post('/api/auth/nickname', {
nickname: editNickname,
});
} catch (error) {
const customError = error as IError;
switch (customError.response.data.status) {
case 400:
alert('닉네임은 최소 1글자, 최대 7글자, 자음, 모음 불가입니다');
break;
case 409:
alert('죄송합니다 중복된 닉네임이네요 😭');
break;
default:
alert('알 수 없는 오류가 발생했습니다 다시 시도해 주세요 😭');
}
}
};
느낀점
- '아싸 오늘도 하나 배웠다!' 입니다 ㅎㅎㅎ 앞으로 정말 자주 쓰게 될 것 같습니다.
- 이렇게 하나하나 배우게 되면서 생각의 폭과 조금씩 실력이 좋아지게 되는 것이 너무 즐겁고 앞으로도 겸손하게 계속 개발에 임해서 언젠가는.... 한국 최고의 개발자가 되어 보겠습니다!
2. try ... catch 의 error 타입 지정
상황
- 위의 코드에서 try ... catch 문을 사용하고
catch(error)의error를 이용하여 응답 상태코드에 따라 알림문을 다르게 유저에게 보여주려고 했습니다. - 근데
error는 무조건unknown혹은any여야만 한다는 에러가 출력되었습니다.
해결
- 그래서 위처럼 customError 를 변수로 선언하고
as문을 사용하여 타입을 지정해주어야 합니다.
느낀점
- 보통 비동기 데이터 처리할때
(data | null)이런식으로 처리하거나if(error) ...처럼 수동으로 처리해주면 해결되었었는데 아예unknown이나any여야만 한다고 지정된 타입이 있는 것은 처음 봐서 낯설었습니다. - 다만 언제나 그랬듯이 선배 개발자 분들도 똑같은 상황에 처해 보셨을 것이기 때문에 침착하게 정보를 찾아보았고 해결 했습니다.
- 타입스크립트에서
as문의 사용, 강제 지정된 type 등의 처리법을 적용하며 공부해볼 수 있어서 좋았습니다
Aim for the TOP, Developer