에러에 대응하자 🚧
이번주는 에러 대응을 하는 데에 힘을 쏟았다.😃
이번 주에 우리 팀의 서버를 업그레이드 하는 과정에서 잠시동안, 개발 서버가 작동이 되지 않았었다. 그래서 일정 시간동안 서버 동작이 제대로 이루어지지 않아서 개발 프론트 서버가 계속해서 흰 화면만 보여지고 있었다. 총 두 번의 사례가 있었는데 이를 소개하고자 한다.
첫번째로, 로그인 관련 에러를 처리하지 않아서였다
현재 유저의 편의성을 위해서 리프레쉬 토큰을 이용하여 계속해서 유저가 보유한 리프레쉬 토큰이 유효할 경우 로그인을 유지할 수 있게 하고 있다.
그런데, prod 버전에서 로그인을 한 후 리프레쉬 토큰을 발급 받아 저장하고 develop 버전에서 로그인을 하게 되면 develop 에서 발급된 리프레쉬 토큰이 prod의 리프레쉬 토큰을 덮어 씌워지는 문제가 발생하였다.
이로 인해서, prod에서 리프레쉬토큰의 유효성을 확인하는 과정에서 develop의 리프레쉬 토큰을 가지고 유효성을 검사하였기 때문에 리프레시 토큰이 유효하지 않다는 에러와 엑세스 토큰이 유효하지 않다는 에러가 발생하게 되었다.
기존에는 리프레쉬 토큰이 유효하지 않거나 엑세스 토큰이 유효하지 않은 경우 홈으로 페이지를 이동시켰다. 그런데 이 과정에서 유효하지 않은 엑세스 토큰이 지워지지 않아서 계속 해서 서버에 리프레쉬 토큰 유효성 확인 요청을 보내는 문제가 발생하였다. 그로 인해 유저는 계속해서 흰 화면만 보여지게 된 것이다.
그래서 리프레쉬 토큰 유효성 확인 과정이나 인증 관련 확인 과정에서 에러가 발생할 경우, 유저가 가진 엑세스 토큰을 지우고 로그인 화면으로 이동시키는 것으로 대응하게 되었다. 이 덕분에 유저는 흰 화면만 보는 것이 아닌 로그인을 다시 해야한 다는 것을 인지할 수 있는 로그인 화면으로 이동 될 수 있었다.
두 번째 사례로는, 서버가 완전히 죽었을 때에 대한 케이스를 생각하지 못하였던 것이다.
서버가 일정한 이유로 다운이 되어서 프론트 측에서 네트워크 요청을 전혀 보내지 못하였을 때, 프론트 측에서 보내는 비동기 통신 요청이 모두 에러가 발생하게 된다. 기존에는 이러한 경우에 흰 화면만 보여주고 있었다. 그리고는 대응을 해야지 해야지 하고 뒤로만 미루고 있었다.
그런데 목요일쯤 다이소 웹페이지에 들어 갔을 때에 일시적으로 서버 쪽에 에러가 났는지 500번 에러가 나면서 통신을 못하고 있었고 일정 시간이 지나자 500에러 대응 페이지를 나에게 보여주었다. 그 화면 속에는 귀여운 이미지와 홈으로 갈 수 있는 버튼이 나와져 있었다. 해당 버튼을 누르자 다시 다이소 홈페이지로 이동할 수 있었다.
이런 경험을 하고 나니, 서버 장애에 대한 페이지를 만드는 것이 중요하다는 것을 깨닫게 되었다. 나 스스로가 서버 장애에 대해서 바로 서비스를 나가는 것이 아니고 홈으로 가는 버튼을 누르면서 다이소라는 서비스를 계속해서 머무를 수 있었기 때문이다. 중요성을 깨닫고 나니 당장 서버 에러 대응 페이지를 만들어야겠다는 생각이 들었다.
마침? 우리 팀 서버도 일시적으로 통신이 아예 안 되고 있었기 때문에 좋은 기회다라고 생각하고 빠르게 대응 페이지를 만들고 적용해 볼 수 있었다.
*참고로 서버에 아예 통신이 안되면 500번 에러 코드도 안 오고 그냥 빈 값이 오더라...
공식 upgrade🛠 할 때가 왔다
5,6 차 스프린트만 남겨놓은 이 시점에서 코드의 리팩토링에 전력을 가할 때가 왔다. 1차 부터 4차 까지는 2주간의 짧은 스프린트 반복 주간 동안 목표 기능을 완성하여야 했기 때문에 일단 굴러가도록 만들자 라는 마음이 더 앞섰었다.
그런데 지금 우리의 코드를 보고 있자니 눈물이 눈 앞을 가렸다. 🥲
일단, 초반에 컨벤션 약속을 했다보니 꽤 오랜 기간 분업을 하여 코딩을 하였음에도 스타일 주는 방식 등은 통일이 되어 있었다.
하지만, 폴더 구조라던지 컴포넌트 정리, 테스트 커버리지를 높이는 일들에 대해서는 나중으로 미루고 있었다. 초반에 프로젝트 규모가 작았을 때에는 해당 주제들이 큰 문제가 되지 않았지만 프로젝트 규모가 꽤 커진 지금은 꼭 필수적인 일이였다.
자 이제 시작해볼까 하고 코드를 보고 있자니, 막막해졌다.
어쩔 수 없다. 이제는 코드를 다시 꼼꼼히 뜯어봐야 할 시간이 온 것이다.
마침 같은 프론트엔드 페어도 근로로 바쁜 와중이라 일단 간단한 폴더 정리는 (storybook, hooks, test에 관한) 내가 하기로 하고 주말동안 어디를 리팩토링 해올지 각자 적어 오기로 하였다.
토요일 동안 리팩토링 할 목록들을 적어보았다.
- Home 컴포넌트에서 Loading 컴포넌트가 중복되어 사용되고 있어 하나를 제거한다.
- Loading 컴포넌트가 전체 페이지를 꽉 채우는 사이즈 만이 존재하는데 작은컴포넌트들을 위한 사이즈 다양화가 필요하다
- mobileTitleSecondary 와 같은 css 재활용성 높이기
- Error 페이지의 경우 네이밍이 다른 사람들이 보기에 오해를 부를 수 있으니 네이밍 변경하기
- 상태 관리가 재정비가 필요하다
- Inquire에 대한 stoyrbook 제작하기
....
등등 한 20개 정도는 적어보았다.
월요일날 페어와 이야기를 해보면서 하나씩 처리해나갈 예정이다.
일주일 남은 5차 데모데이 전에 마무리 할 것!📍
데모 데이 발표까지 일주일이라는 시간 밖에 남지 않았다. 그 전에 해내고 싶은 것들을 적어보고자 한다.
- 임시저장 페이지 완성하기
- nginx 캐시 설정하기
- 리팩토링 진행하기
- 타입스크립트 컨벤션 리팩토링 하기
- 반응형 웹페이지 대응 범위 넓히기
