실전프로젝트 3주차 일주일간의 정리📙
이번주는 프로젝트 MVP기능을 완성하고 실제 현업에 계시는 멘토님들께 중간 발표를 진행하였습니다. 그리고 피드백으로 3가지를 받았습니다.
1. 첫번째 피드백으로 우리가 진행하는 프로젝트가 웹앱이라는 특성상 사용자들이 빠르게 회원가입을 하려면 로그인, 회원가입페이지가 번들용량이 크면 로딩이 오래 걸릴 수 있으니, 번들러 툴을 이용하거나 모듈을 분리하는 것에 신경써 서버 로딩시간을 줄이는 것을 고려해보라는 피드백을 받았습니다.
제가 로그인 회원가입 페이지를 만들면서 고려했던 사항은 오직 사용자가 입력값을 누락 시키거나 중복적으로 처리요청을 할 때만을 생각 했었는데, 유저의 입장에서 개선할 수 있는 부분이 더 많다는 것을 깨닫는 순간이었습니다.
회원가입 페이지를 다시보면서 피드백으로 받은 부분 뿐만아니라 다른 부분도 개선할 부분이 있지 않을까? 라는 생각을 하며 다시보니 회원가입 페이지에서 중복확인 버튼으로 아이디 패스워드를 체크하는 것이 아닌 값을 입력만 함으로써 중복체크가 되게 할 수 있겠다는 생각이 들었습니다. 그리고 lodash의 debounce라는 것으로 구현해 낼 수 있다는 것을 찾게 되었고, 다음주에 중복체크 버튼 없이 입력만으로 중복체크가 되도록 구현 해볼 예정입니다.
2. 두번째 피드백으로 Footer를 원하는 페이지만 나타내기위해 withRouter를 사용 후 if문으로 나타내지 않는 페이지를 걸러주었는데 이러한 방법은 문제 해결은 할 수 있지만 명시적이지 않은 코드이며 나중에 유지보수하기도 쉽지 않다 하셨습니다. Footer 자체에서 어떤 페이지에 나타낼지를 정하는 것이 아닌 withFooter 같은 Hoc를 만들어서 각페이지에 명시적으로 감싸주어 인지도 쉽고 응집도가 높은 코드로 개선할 수 있는 여지가 있다는 피드백을 받았습니다.
다음주에 Hoc에 대해 찾아본 후 피드백 받은대로 개선해볼 예정입니다.
3. 세번째 피드백으로 페이지가 렌더링 때 데이터를 늦게 전달받는 경우를 if문으로 로딩 중으로 처리한 부분에 대해서 로딩 중이 아닌 서버에러인 경우는 무한 로딩이 걸릴 수 있으니 에러 스크린을 추가하는 것이 좋다고 피드백 받았습니다.
또한 조금더 깔끔한 코드를 원한다면 각페이지에 if문으로 조건을 거는 것이 아닌 api를 사용하는 부모컴포넌트에 리액트 서스펜스 api를 사용하여 콜백 url을 넣어 모든 컴포넌트 안에서 if문 처리하지 않아도 된다는 피드백도 주셨습니다.
다음주에 각 페이지에 if문으로 처리한 로딩 부분을 서스펜스 api를 공부하여 적용할 예정입니다.
피드백으로 받은 3가지 이외에 더 개선할 여지가 있는 부분도 수정할 예정입니다.
- S3에 이미지 업로드시에 이미지 압축하기
- S3 이미지를 프론트에서 진행하고있는데 보안적인 부분을 생각해보기
- 리프레쉬 토큰 활용하기
- 입양신청 정보 받을 때 유저가 입력한 데이터가 날가지 않도록 세션스토리지 활용해보기
- 리액트스럽게 컴포넌트를 잘 분리하여 활용하고있는지 전체적으로 확인하기
느낀점
이번주는 프로젝트 MVP에 대한 피드백을 받으면서 내가 진짜 리액트를 알아가면서, 내가 쓴 기술들을 이해하면서 코딩을 하고있나? 라는 생각을 해보게 되었습니다.
현재까지 프로젝트를 진행하면서 필요한 부분만 구글링하여 찾아 쓰고 어느정도 구현만되면 넘어가다보니 얕게만 알고있고 정확한 이해가 부족하다고 느껴졌습니다.
앞으로 남은기간동안에는 내가 쓴 기술 하나하나에 대한 이해도를 높이고 코드를 리액트스럽게 리팩토링 할 것입니다.
지금 당장 취업을 위해 우당탕 만드는 것도 중요하지만 스스로 성장하는 개발자가 되기 위한 기초 토대를 위해서!😀
