웹 풀사이클 데브코스 3월 회고

💬 3월에 나는 무엇을 했나

■ 부트캠프 스프린트3 프로젝트 (북스토어 프론트엔드)

• 2월부터 진행했던 스프린트3 북스토어 프론트엔드 파트를 개발하는 프로젝트가 종료되었다. 이번 프로젝트를 진행하며 react-query를 처음 사용해봤는데, axios를 사용해서 서버에서 받아온 데이터를 useState() 훅을 사용해서 관리하는 방식보다 효율적이라는 생각이 들었다. useQuery와 useMutation을 사용해 서버에서 응답 받은 데이터를 바로 꺼내서 사용할 수 있는 부분과 데이터관련 코드를 한 곳에 모아서 관리할 수 있다는 점이 좋았다. 그리고 useInifiniteQuery를 사용하여 다음 페이지의 데이터를 쉽게 가져오고, 마지막 페이지 여부를 쉽게 확인할 수 있어서 나중에 프로젝트를 진행할 때도 react-query를 사용해보려고 한다.
• 스프린트3이 종료되고 리팩토링을 하고 리팩토링한 것에 대해 멘토님께 코드리뷰를 받았다.
  • 컴포넌트 모듈화를 하지 않았을 때는 import 해올 때 코드가 길어져 가독성이 떨어진다는 느낌을 받았고, 컴포넌트 폴더에서 index.ts를 생성하고 컴포넌트들을 모듈화 시켜보았다. 현업에서도 많이 사용하는 방식이고, 추적할 때 index.ts 파일을 걸쳐서 추적하기 때문에 디버깅이 어렵다는 단점에 대해서도 알게되었다.
  • 이번 프로젝트에서는 이미지 url을 사용해서 큰 이미지를 받아오기때문에, 이미지가 로드될 때까지 시간이 걸려서 빈 화면이 출력되었다. 이 부분을 개선하고 싶어서 lazyImage 컴포넌트를 만들어, 로드될 동안은 로딩화면을 보여주고자 하였다. 멘토님께서 로딩이 실패했을 때에 보여줄 더미 이미지를 설정해두는 것도 코멘트 해주셨다.
  • 한 파일에 구조와 스타일 코드가 모두 적혀있으니 코드를 작성하거나 수정할 때 불편함을 느꼇고 이를 해결하기 위해 코드가 긴 파일에 한하여 스타일 코드를 별도의 스타일 파일(@@@.styles.ts)로 분리해주었다.
  • 회원가입/로그인/비밀번호 찾기 페이지에서 이메일, 비밀번호를 입력하는 폼이 비슷해서 이를 회원 정보 폼 양식(AuthForm) 컴포넌트로 묶어서 사용하였다. 이 방법도 좋지만, 현업에서는 똑같은 코드를 작성하는 일이 적기 때문에 Fieldset, Form과 자주 사용되는 요소들은 공통 컴포넌트로 작성하는게 좋다는 코멘트를 받았다. 나중에 개인 프로젝트를 하거나 팀 프로젝트를 할 때 적용해 볼 예정이다.

■ 부트캠프 스프린트4 프로젝트 (도커 + 쿠버네티스 + AWS를 사용한 자동화 학습 프로젝트)

• 스프린트3이 종료되고 docker, 쿠버네티스, 젠킨스에 대한 강의를 들었고, 이를 바탕으로 스프린트4가 시작되었다. 생각보다 프로젝트가 어려워서 진도가 많이 밀렸다.

😁 잘한점

• 스프린트3을 마치고, 리팩토링 해본 점

😢 아쉬운점

• 스프린트 4가 시작되고 강의 진도가 많이 밀려서, 강의 진도를 따라가느라 개인 공부하거나 개인 프로젝트를 진행할 시간이 부족하다…
• 또한 docker + 쿠버네티스 + 백엔드 개발 서버 + 프론트엔드 개발 서버를 사용해서 스프린트4를 진행하다 보니 노트북이 부하가 걸려서 프로젝트 진행이 더 오래걸리고 있는 점이 답답하다…

🔥 마무리 다짐

• 프로그래머스 데브코스가 정말 몇 달 안남았는데, 남은 기간동안 힘내서 잘 마무리하자!!!