이번 미션의 회고
저번 로또 미션과 자동차경주 게임 미션에서 스스로 코드에 대해서 불만족스러웠기 때문에, 이번에는 더 열심히해서 저번보다는 발전해보자! 라는 마음가짐으로 미션에 들어가게 되었다.
그런데 이번 미션에서는 아직 다루는데 익숙하지 않은 youtube api, 비동기 함수, throttle 까지 구현해야 했고 게다가 3인 페어까지😱 당첨이 되어버려 '오호 이번 미션 쉽지 않겠구만...' 라는 생각 또한 같이 들었다.
그래도 다행인 것이 3인으로 만난 페어분들이 모두 좋은 분들이여서 시간내에 기능을 구현하는 것은 끝낼 수 있었다.(물론 에러가 당연히 포함된 코드였지만!)
코딩을 시작하면서 항상 느꼈던 것이지만 깊게 들어가면 들어갈 수록 공부할 양도 늘어나고 깊이 또한 깊어진다.
이번에도 역시 이걸 다시 느낄 수 있었는데 이번 미션을 공부하면서 표면적으로는 비동기 함수 구현하는 방법, webpack 에서 부터 throttle을 구현하기 위해서 사용하는 클로저라는 개념과 node환경에 대한 것 까지 공부를 했어야 했다.
사실 회고를 하고 있는 지금도 위의 언급된 해당 개념들에 대해서 완벽하게 이해를 했다고 말할 수 없다. 그래도 소크라테스가 너를 알라라고 말하지 않았는가! 몰랐다는 사실을 알았다는 것 만으로 이번 미션에서의 큰 수확이였다고 생각하고 있다.
추가적으로 공통 미션 피드백을 수업 시간에 들을 수 있었는데 검색과 api에 대응해야 하는 케이스가 정말 정~~~말 많았다. 그런데 그 케이스들 모두가 이미 내가 사용하고 있는 서비스(예를들어 유튜브 등)에서는 다 대응이 되고 있어 내가 당연하다고 생각한 경우들이였다. 그런데 막상 내가 개발을 할 때에는 생각하지 못한 것들이 대부분이였다. 내가 당연하다고 생각해놓고 대응을 못했다니 어쩐지 분한 마음도 들었다.
또 한편으로는 아 프론트 엔드는 이렇게 섬세한 핸들링이 요구되는 직업이구나 내가 더 신경써야하는 경우가 많구나를 다시 한번 깨달았다. 2단계에서는 열심히 반응해봐야지...
피드백 내용들
공통 피드백 내용들과 내가 받은 피드백, 이번에 같이 페어를 한 페어분들의 피드백 내용들을 모아서 정리해보았다.
환경설정 어디까지 알고 쓰니?
사실 환경설정을 이전 프로젝트의 것을 그대로 가져오거나, 아니면 가벼운 마음으로 페어분들과 컨벤션을 맞추는 용도로 사용했었다. 그런데 이번에 설정한 환경설정들에 대해서 의도와 사용여부를 리뷰어께서 물어보았다.
예를 들어
es2020로 선택한 이유가 있을까요?
es2020의 어떤 문법을 사용하고 계신가요?
airbnb base로 선택한 이유가 있나요?
airbnb base로 하게되면 어떤 장점이 있나요?
"arrowParens": "avoid" 는 뭘까요?
trailingComma: all 의 장점은 무엇인가요?
이런 질문들이 있었는데 바로 대답을 하지 못했다.
'내가 이걸 왜 썼더라...?🧐' 라고 조금의 생각의 시간을 거쳐야 대답을 할 수 있었다. 이 대답의 시간 텀에서 스스로 반성하게 되었다. 기초적인걸 막 쓰고 있었구만...
어렵다 어려워 Jest 테스트
이번에 테스트 관련해서 정~~~말 많은 고민을 했고 리팩토링 시간에서도 해당 부분을 반영하기 위하여 많은 시행착오를 거쳤고 지금도 최대 고민이다.
리뷰어 분께
메소드 기능들을 테스트로 만들어서 검증하는 것이 좋다
라는 피드백과
공통 피드백에서
API 자체적인 동작 확인
각 케이스에 해당하는 응답이 왔을 때 -> 의도한 대로 동작을 하는지
등의 경우에 대해 테스트를 할 수 있다 라고 하셨고 추가적으로
api를 어떻게 jest에서 테스트 할 수 있나라는 방법을 알려주셔서
시도해봤으나 일단은 1차 보류다
변명같은 이유를 조금 대보자면
jest환경에서는 fetch와 같은 비동기 함수를 사용하기 위해서는 추가적인 설정이 들어가야한다. mock함수를 사용하거나 아니면 fetch관련 라이브러리를 설치하거나 등의 단계가 필요하다. 그런데 내가 지금 작성한 코드에 바로 대응시키기에는 맞지 않아서 일단은 url이 제대로 생성되었는지 검증하는 테스트 코드와 localstorage관련 테스트 코드밖에 작성하지 못하였다.
2단계에서 구조를 조금 바꾸면서 적용해볼 예정이다.
프론트엔드 개발자가 되고 싶다면 사용성 css는 챙겨야지
기본적인 요구사항은 아니였지만 어떻게 보면 기본적인 요구사항인 모달 창 끄기를 구현하지 않아
모달창 끄는 것을 구현해보라는 피드백을 받았다.
피드백을 받고 나니 아니 이 기본적인것을 왜 구현할 생각을 안했지?
라며 스스로에게 의아했다.
그리곤 반성하게 되었다. 아 이런 기본적인 것도 안 챙기고 기능 다 구현했다고 냈구나.. 매번 해야지 해야지 하는데 왜 빼먹지 분하기도 했다.
추가적으로 css 컬러값의 경우 변수로 빼야하는데 전 과제에서는 잘 해서 제출하고선 이번 과제에서는 이 점을 챙기지 못하고 내버렸다.
아무래도 앞서 요구사항을 작성할때에 더 꼼꼼히 작성할 필요가 있을 것 같다.
기본요구사항은 끝까지 사수하자
이번 과제 요구사항 중 결과화면이 없을때 안내문구를 넣으라는 것이 있었다.
.
.
.
그런데
검색결과 없을때 안내문구 없이 빈화면으로 나온다는 피드백을 받았다! 😇
이게 무슨일인가 하고 알아보니,
분명 해당 기능을 구현하고 바로 테스트를 할 때에는 작동이 되었었는데 코드를 수정하는 과정에서 영향을 받아서 였는지 최종적으로 제출을 할때에는 해당 대응이 되지 않았다
마지막까지 확인을 하지 않고 제출한 탓에 에러상황을 잡아내지 못했다
기본적인 것은 끝까지 사수했어야 했는데 꼼꼼히 챙기지 못하였다.
이름 짓는 것은 언제 쯤 잘할 수 있을까?🤔
사람이름도 신중하게 짓듯이 변수 이름들도 신중하게 지어야 하는데 매번 나름 골똘히 생각해서 적어 낸도 빈틈은 반드시 존재한다.
매번 미션에서 받았던 피드팩 에서 공통된 피드백은 바로 네.이.밍!
이번미션에도 역시나 받았다. 이제는 섭섭할 것 같다 없으면...🥲
이름에 의도를 들어내면서도 너무 길지도 않아서 가독성이 좋게 만드는 그 중간지점! 그 적절한 부분을 찝어내는것이 어려운 것 같다.
계속해서 도전해봐야할 분야이다.
