어떻게든 굴러간다♻️
이번에는 지난 스프린트2 회고에 올렸던 것처럼 리팩토링을 먼저 시작하기로 했다.
팀내에서도 스프린트 1, 2 때에 리팩토링에 시간을 제대로 투자하지 못해서 리팩토링 기간을 가지는 것에 대해서 동의를 해주었다.
솔직히 말하자면, 내가 코드를 짜면서도 아 이건 아닌데.. 라는 생각을 하긴 했었다.
일단, 유저가 사용하기 편하도록 만들어야 하는데 지금 제작된 코드는 유저의 사용성이 현저히 떨어졌다.
예를 들어, window.alert를 통해서 알림 메세지를 주거나
로그아웃이 제대로 이루어지지 않거나
반응형이 구현되지 않아 모바일 화면에서는 UI가 다 깨져보이거나 하는 등의 문제점들이 존재했다.
코드 단에서의 가독성 문제 뿐만 아니라 유저의 사용성도 점검해야 할 필요가 있었다.
그래서 프론트엔드의 경우 거의 한 주를 리팩토링을 하는 데에 시간을 투자했다.
그리곤 기능 개발을 해야 할 기간이 왔을 때에, 팀원 중 한 명이 코로나 확진 판정을 받게 되었다. 그래서 팀원이 몸이 아팠던 초기에는 거의 혼자 기능 개발을 도맡게 되었다. 게다가 이번 스프린트 3 데모 발표도 내 차례여서 더 정신 없이 달렸던 것 같다.
저번 스프린트1 발표 때에는 목요일은 거의 하루를 데모 발표 준비에 쏟 곤 했는데, 이번 발표는 테스트 코드가 계속해서 정상적으로 작동되지 않아서 거의 밤이 되서야 발표 준비를 본격적으로 시작 할 수 있었다.🥲
리팩토링
- 로딩 중 화면
- Not found 페이지
- 리액트 쿼리 커스텀 훅으로 빼기
- dev dependencies 정리
- Webpack build 문제 해결하기
- 프론트엔드 자동배포
- 반응형 화면 구현하기
- 에러 바운더리
- alert -> snackbar로 처리 하기
- 작성한 시간을 몇분 전 이런식으로 표기해주기
이번 우리 프론트엔드 팀에서 진행한 리팩토링 목록들이다.
NotFound, 로딩 중 화면
기존에 유저가 잘못된 url을 입력할때에, 화면에 변화가 없었기 때문에 유저에게 혼란을 줄 수 있다고 생각하여 NotFound화면을 새롭게 만들게 되었다
NotFound화면에서 홈으로 갈 수 있는 링크를 보여주도록 하였다.
로딩 중의 경우, 기존에는 로딩 중입니다 라는 문구만이 보여졌는데
사용자의 불편을 해소하기 위해 엘리베이터에 거울을 붙여주었던 것 처럼
애니메이션이 첨가된 스피너를 보여주게 되었다
리액트 쿼리 커스텀 훅으로 빼기
컴포넌트 단에서 리액트 쿼리 로직이 혼재되어 있었는데,
이것이 UI를 구현하는 로직과 비동기 통신을 하는 로직이 혼재되어 있어서
컴포넌트의 분리를 어렵게 만든다고 생각했었다.
무엇보다, UI 로직과 비동기 통신 로직이 같은 선상에 위치하는 것이 맞나 싶기도 하여서 리액트 쿼리 부분들을 커스텀 훅으로 빼게 되었다.
에러 바운더리
비동기 통신 중에 에러가 발생하게 되면, 에러가 발생하게 된 컴포넌트 단에서 에러 처리를 각각해줘야 하는 어려움이 있었다.
그래서 리액트에서 제공해주는 에러 처리를 한 곳에서 모아서 할 수 있게 도와주는 에러 바운더리를 사용하게 되었다.
에러관련된 처리를 한 곳에서 다 할 수 있다는 점이 편리하였지만,
클래스 컴포넌트로 구현해야 해서, 에러 바운더리 내에서 훅들을 자유자재로 사용 하기 불편하다는 점을 단점으로 느끼게 되었다.
무한 스크롤 🌪
이번에, 무한 스크롤을 활용하여 게시물들을 보여주고 있는데
해당 부분은 은근히 까다로웠다.
현재, 리액트 쿼리에서 제공해주는 useInfitieQuery를 사용하여 구현하고 있는데 옵션들이 많고 은근 까다로운 부분이 있어서 공부가 많이 필요했었다.
이 부분에 대해서는 별도의 포스팅으로 다룰 생각이다.
스프린트3 주요 구현 사항들
검색 🔍
이번에 검색기능을 도입하게 되었다
현재 Header 부분에 검색 바가 존재하게 되는데 해당 부분을 클릭하게 되면 검색을 할 수 있는 화면으로 이동하게 된다.
이 부분이 상황에 따라서 보여줘야 하는 UI가 Header 부분에 혼재되어 있다. 그래서 상태를 관리하는 코드를 여러개 추가하게 되어서 리팩토링이 필요한 부분인 것 같다..💦
리코일을 본격적으로 사용하게 될 날이 온 것일지도?
마이페이지 👦🏻
마이페이지에서는 자신이 작성한 글, 댓글 그리고 깃허브에서 받아와진 유저의 닉네임과 프로필 사진이 보여지도록 하였다.
마이페이지 화면에 들어가자마자 작성한 글과 댓글이 한 번에 보이는 것은 화면이 혼잡해 보일 수 있다고 생각이 들어 해당 부분들을 접을 수 있도록 구현을 하게되었다.
test Code 🧪
테스트 코드는 항상 고민이 되는 주제이다.
이번 스프린트때에는 어디까지 테스트 코드를 짜야하는지 무엇을 짜야할지 고민이 되었다.
모든 경우에 대한 테스트 코드를 작성하면 좋겠지만, 스프린트 3이라는 제한된 시간 내에 다른 기능을 구현하면서 테스트 코드를 짜야했기 때문에 UI관련 테스트를 짤지 Hooks관련 테스트를 짤 지 정해야만 했다.
사실 나의 경우에는 UI관련 테스트를 짜는 것이 프론트엔드 쪽에서 더 유의미한 테스트 코드라고 생각한다.
유저의 행동에 따른 UI를 작성하는 과정에서 비동기 통신도 자연스럽게 녹아들어갈 것이기도 하고 프론트에서는 말그대로 유저에게 보여지는 부분을 책임지고 있기 때문에 테스트 코드도 해당 부분을 확인해야 의미있다고 생각했다.
하지만 나의 페어는 해당 의견과 달랐다. 우선은 주어진 시간이 많지 않았기 때문에 UI 요소들을 테스트 하게 되면 불필요한 시간이 많이 투자된다고 생각하였다.
그래서 일단은, 훅스 관련된 로직을 테스트 하고 추후에 UI관련 테스트 로직을 추가하기로 하였다.
테스트 도구로는
우리 팀의 경우 리액트 테스팅 라이브러리의 리액트 훅스 테스팅 라이브러리를 채택하게 되었다.
cypress, 순전히 jest 등으로 테스트를 대체할 수 있었지만 리액트 테스팅 라이브러리를 사용하게 된 이유는 리액트라는 가상돔 환경에서 테스트 하기 편리하도록 해당 라이브러리들이 환경을 제공해주었기 때문이다. 추가적으로 리액트에서 사용하기 편리한 훅스 테스트 라이브러리도 제공해주기 때문에 이 2가지를 사용하게 되었다.
