스텝3에서는 서버를 이용해 상태를 관리하는 것이 미션이었다. 웹 API를 써서 서버와 통신하는 것이 처음이어서 많이 헤맸다.🥲
구현하면서 느낀 것
API를 사용해 서버와 통신하는 법을 몰랐기 때문에 강의부터 들었다. 그런데 개념을 가르쳐주는 강의가 아니다 보니 이해가 잘 안갔다. 그래서 먼저 유튜브에 드림코딩의 js강의에서 promise나 비동기 통신에 해당하는 개념을 공부했다. 그렇게 일단 어떤거구나 하는 감을 잡고 다시 문벅스 강의를 들었고 여전히 다 이해되지 않았지만 'fetch를 저렇게 작성하는 거구나' 정도만 파악해 사용했다. 예외처리 같은 부분들은 생각하지 않았다.
그래도 예전같았으면 멘붕에 빠져 있었을 텐데 내가 할 수 있는 부분을 파악하고 간단하게라도 사용해보는 내 모습에 좀 발전한 거 같아서 기분이 좋았다.😎
병목현상
이번 미팅에서는 소회의실에서 다른 분들과 소통할 기회가 생겼다. 서로의 병목현상에 대해 얘기해보고 그걸 해결할 수 있는 방법들을 생각해 보는 것이었다.
많이 언급된 병목현상
- DOM Node 접근 방법
- 상태관리에 대한 개념
- 비동기 에러 처리
- Promise 비동기 통신
- 모르는 개념의 사용
- 컴포넌트 나누는 기준
- 디자인 패턴
나도 서버를 사용하는 것이 처음이어서 모르는 개념의 사용에 대해 병목현상으로 얘기를 했다. 그런데 사실 모르는 개념의 사용은 해결법이 공부라서...이건 짧게 얘기하고 다른 분의 병목현상에 대해 얘기했다. 그분은 코드를 나누는 부분에 대해서 말씀하셨는데 '한 함수에 한 기능'에서 한 기능이라는 기준이 어렵다고 하셨다. 이 부분은 코딩하는 사람이면 누구나 고민하는 주제일 것이다. 클린 코드나 리팩터링 책에 대한 얘기도 나왔고, 나는 유데미에 문벅스 강의에서 요구사항을 나누는 것을 봤다고 언급하며 요구사항에서 기능을 최대한 잘게 나눠 요구사항을 함수의 기준으로 사용하는 것이 어떻냐는 의견을 제시했다. 고민이라 하신 분도 긍정적으로 대답을 해주셔서 도움이 된 것 같아 좀 뿌듯했다.👏
이번주 보다 좋은 코드가 나올 수 밖에 없는 체크 리스트
마지막으로 이번주보다 나은 코드를 작성하기 위한 체크 리스트를 작성했다. 병목현상에서도 많이 언급되듯이 좋은 코드는 추상적이다. 그래서 스텝 3코드를 기반으로 최대한 구체적으로 내가 고칠 수 있는 부분을 고려해 봤다.
- 서버와 통신하는 내용 공부하기 (async, await, fetch)
- api 다루는 부분은 다른 함수로 분리하기
- api 다루는 부분은 다른 파일로 옮기기
- 중복 코드 찾아서 리 팩터링 하기
- this 적용해보기
공부하는 부분이야 당연한 것이고, 2,3번은 강의에서는 api를 다루는 부분은 따로 분리하고 파일에서도 따로 분리를 해줬다. 나는 코드를 작성하면서 헷갈려서 따로 빼지않고 기존에 작성된 함수 내부에다가 fetch를 작성했다. 그래서 비동기 통신을 공부하고 저 부분들을 따로 분리해 주려한다.
