5차 데모데이 🚀
이번 주는 5차 데모데이가 있었다.
레벨 4의 첫 데모데이이면서도 본격적인 취직 준비 기간 전의 마지막 스프린트 기간이기도 하였다.
레벨4의 4주라는 기간동안 임시저장이라는 신기능을 한 가지 도입하고, 성능 최적화, 에러바운더리를 통한 에러 처리를 쉽게 할 수 있도록 하였다.
참고로 저번 주 포스팅에 쓴 것 중 완료한 목록이다.
- 임시저장 페이지 완성하기
- nginx 캐시 설정하기
- 리팩토링 일부
- 타입스크립트 컨벤션 리팩토링 하기
- 반응형 웹페이지 대응 범위 넓히기
임시 저장 기능 🖋
임시저장이라는 신 기능을 도입하게 된 이유는, 나의 사용 경험에서 비롯되었다.
velog를 통해서 매주 블로그를 쓸때에 일주일 동안 임시저장 기능을 활용해 글을 임시저장해놓고 계속해서 보충해서 일요일날 마무리를 하여 글을 써냈다.
이 때에, 임시기능 덕분에 글을 바로 써서 내야 한다는 압박감을 느끼지 않고 차분하게 글을 써서 낼 수 있었다.
무엇보다 새로고침이나 실수로 창을 닫아도 작성 중인 글이 날아가지 않았다 👏
이 점이 매우 중요!!
사실, 노트북으로 창을 열고 글을 쓰다가 새로고침을 누르거나 창을 닫는 등의 실수들을 한 번 쯤 겪어 봤을 것이다
(당신이 개발자라면 구글링한 목록을 습관처럼 지워본 경험이 있을지도 모르겠다)
그런데 열심히 공들여서 작성중인 글이 그런 한 순간의 실수로 모두 날아가 버린다면? 나라면 해당 서비스를 다시는 사용하지 않을 것이다.
임시저장 기능을 제공하는 서비스가 많은데 굳이 나의 글과 시간을 생각해주지 않는 서비스를 이용할 필요가 있겠는가?
우리 공식의 서비스도 5차 데모데이 전까지는 다음과 같았다.
질문 글이나 토론 글을 작성 중일 때에 실수 한 번으로 모든 내용이 날라가 버리는..!
이런 생각들 때문에 나는 이번 스프린트 때에 임시저장 기능을 신기능으로 도입해야한다고 주장하였고 다행이도 팀원들도 필요성을 느끼고 임시저장 기능을 도입하게 되었다.
그래서 5차 스프린트를 계기로 임시저장 기능도 되는 공식이 완성되었다 🎉
에러 바운더리 🚧
현재 공식에서는 커스텀 에러 코드를 활용하여 에러 처리를 하고 있다.
예를 들어, 존재하지 않는 게시글을 조회 요청을 프론트 단에서 보내줬을 때에는 400번 상태 정보만을 주는 것이 아닌 3001이라는 에러코드도 보내준다.
이러한 방식을 채택한 이유는 유저에게 보여주는 에러 메세지는 달라야하기 때문이다.
예를 들어 아이디와 비밀번호를 잘못 입력하여 로그인에 실패하였을 때를 가정해보자. 해당 경우에 유저에게 왜 로그인에 실패하였는지 '잘못된 비밀번호입니다!' 라고 에러 메세지를 서버에서 받아온 그대로 보여주게 되면 실사용 유저라면 편할 수도 있겠지만 개인정보를 해킹하고 하는 자에게는 힌트를 제공해주게 된다.
이러한 위험성과 백엔드에서도 케이스 별로 디버깅이 쉬운 자세한 에러메세지를 가지고 있어야 하는 이유들이 겹쳐 에러 케이스들을 미리 산정하고 케이스 별로 에러코드를 정해 던져 주게 되었다.
그럼 프론트 단에서는 해당 에러 코드들을 받아와 케이스별로 유저에게 다른 안내문구를 보여주거나 페이지를 이동시키게 된다.
그런데 각각의 컴포넌트 단에서 에러 코드들에 대한 에러 처리를 해주자니 에러를 관리하는데 비용이 많이 들었다. 에러 케이스 하나를 고치기 위해서 모든 컴포넌트에 방문하여 다 수정해줘야하는 번거로움이 있었기 때문이다.
그래서 해당 에러 코드들을 한꺼번에 처리할 수 있는 곳인 에러 바운더리가 필요했다.
그런데 에러 바운더리도 문제점이 하나 존재했다. 바로 에러 바운더리가 클래스 컴포넌트라는 것이다.
클래서 컴포넌트이기 때문에 커스텀 훅을 사용하지 못한다는 것이다. 클래스 컴포넌트는 Hook 이전에 만들어져서 Hook 사용을 지원하지 않기 때문이다. 하지만 공식에서 에러처리를 하기 위해서는 커스텀 훅을 활용한 useSnackBar을 꼭 써야 했기 때문에 애매한 상황에 처해버렸다.
그래서 이를 해결하기 위해서 공식에서는 HOC를 도입하게 되었다.
HOC 내부에서 useSnackBar와 같은 에러 처리에 필요한 커스텀 훅들을 선언하고 클래스 컴포넌트에 props로 넘겨주어 사용할 수 있게 하였다.
