⚓항해99 7주차를 돌아보자
📌 7.29~8.4: 클론코딩📌
이번 주차는 클론 코딩 주차였는데, 우리 조는 airbnb를 클론하였다.
팀원들과 여러 주제를 같이 의논해보고 결정하였기 때문에 팀원들과 의견 충돌 없이 설계가 진행되었다.
API 설계도 지난 주와는 다르게 처음 부터 공을 들여서 설계하였다. 우리 팀원들도 정말 열심히 설계를 하였다. 이 부분에서 나는 만족한다. 저번 주 보다 조금 더 성장했다고 느껴지기 때문이다. 실제로 구현 도중 API가 추가되거나 수정되는 일은 있긴 있었지만 지난 주 보다 80%정도 줄었다.
앞으로도 설계를 조금 힘들더라도 자세하게, 공들여서 해야겠다는 생각이 들었다.
이번 7주차에는 뭐 배웠어❓
클론코딩을 하면서 트러블슈팅 한 것을 적어봐야겠다.
👉 발생했던 오류
컴포넌트가 마운트 되자마자 서버에서 데이터를 fetch 해와서 state에 저장하고, 그 state에 저장된 데이터를 화면에 보여주는데 에러가 발생해서 보여주지 못했다.
👉 오류 원인
데이터를 fetch해오는 것은 비동기 요청이기 때문에 컴포넌트가 마운트 되고 난 직후에는 state가 의미없는 데이터를 가지고 있다. 그렇기 때문에 그 순간에 에러가 발생하는 것이다. 하지만 무조건 에러가 발생하는 것은 아니다.
state에 저장된 여러 값들 중에 리스트 형태의 데이터가 있었는데, state.tempList[0], state.tempList[1]과 같은 형태로 사용하였다.
만약 인덱스 참조 없이 state.tempList의 형태로 사용할 수 있었다면 undefined이기 때문에 에러가 나지 않는데, state.tempList[0]의 형태로 인덱스를 참조 했기 때문에 undefined[0] 즉, undefined의 0 인덱스를 참조하게 되어 에러가 나는 것이었다.
👉 해결 방법
옵셔널 체이닝을 사용하여 값이 없으면 undefined가 되게 하여 에러를 막고, 비동기 통신이 끝난 후 state가 바뀌면 제대로 된 값을 보여주도록 구현하였다.
7주차를 마치며👨🎓
이번 주차는 사실 굉장히 아쉬운 부분도 많았다.
react-query도 사용해보고 싶었는데 그러지 못했다.
설계 시간을 제외한 개발시간은 5일 정도 밖에 안 되기 때문에 클론코딩이지만 구현하지 못할 기능들은 많이 덜어내었는데, 그래도 생각보다 기능들이 많았고, 스코프가 컸다.
우리 조 프론트엔드 조원이 개발을 시작한 지 얼마 되지 않아 자바스크립트, 리액트의 이해도가 많이 낮았기 때문에 회원가입, 로그인 기능 정도를 맡기고 나머지는 내가 다 하는 것으로 하였다. 그리고 회원가입, 로그인 기능을 빨리 구현해낸다면 다른 기능을 추가로 맡아 달라고 하려고 했었다.
하지만 내 생각대로 되지는 않았다.
우리는 redux-toolkit을 사용하기로 얘기가 다 된 상태였고, redux-toolkit에 대해서 첫 날에 내가 작성했던 코드를 공유하면서 redux-toolkit 사용법, 개념 설명을 조금 해드렸다. 강의이지만 조금 허접한 강의.
그런데 나중에 코드를 merge하려고 보니, 조원이 작성한 코드에는 redux-toolkit 코드는 어디에도 없고, 깡 redux 코드가 있었다. 그리고 컴포넌트 내부에 액션 생성함수, 액션 정의 등 redux 코드가 있었다.
조금 당황스러웠다. 한숨이 절로 나왔다.
분명 redux-toolkit을 사용한다고 얘기가 다 됐었고, 허접한 강의도 했지만 막상 구현하다보니 redux-toolkit 사용 못할 것 같아서 예전 코드 참고해서 했다고 한다.
하지만 그마저도 컴포넌트 내부에 redux 코드가 존재한다니,,
모르는게 있으면 나한테 질문이라도 했으면 좋았을 텐데,,
이 부분에서 조금 실망했다.
그리고 컴포넌트 명과 일반 함수 명의 이름을 같게 사용하여(애초에 이게 왜 오류없이 돌아갔는지 나도 잘 모르겠다.) 코드를 처음 읽을 때 이게 무슨 코드인가 계속 봤다.
하지만 내가 조원의 코드를 중간중간에 체크하지 못했기 때문에 발생한 일이라고 생각한다. 또 조장으로서 팀원의 진행 상황을 잘 파악했어야했는데 나도 내 기능 구현한다고 조금 소홀했던 것 같기도 하다.
시간이 부족하여 조원에게는 UI만 맡겼다. 그리고 다른 나머지 기능들을 다 내가 구현했다.
그렇게 하여 마감 시간 내에 기능을 구현하여 제출할 수 있었다.
이번 주차에서는 개인적으로 react-query를 사용해보지 못했다는 점과 조원의 진행 상황을 정확하게 파악하지 못했다는 것에 조금 아쉬움이 남는다.
