useAxios (2) 썸네일형 리스트형 [react & typescript] useAxios 커스텀 훅 사용기2 - 데이터 실시간 업데이트해보기 지난번에 useAxios 커스텀 훅을 만들어 네트워크 통신 후 response를 받아오도록 만들고, 네트워크 통신과 관련된 코드는 도메인 별로 나누어 API 문서화를 진행하였다. 이제는 이 useAxios 커스텀 훅과 네트워크 통신 코드를 사용하여 데이터가 바뀌었을 때, 바뀐 데이터를 컴포넌트에 실시간으로 적용을 시켜주어야하는 과정이 필요하다. 이 방식을 알아내기 위해 관련된 블로그를 몇날 몇일을 붙잡고 기본적인 로직의 처리 과정에 대해 이해하려고 노력했다. 노력끝에 정답을 발견하였을 때 정말 유레카를 외칠 뻔했다~ 설날이였는데 설 연휴 내내 이 문제를 해결하기 위해 노트북만 붙들고 있었던 것 같다. 해결방법 발견 후에 글로 정리하여 디스코드에 올려 프로젝트 팀원분들께 공유드렸다. 팀원분들도 결과적으로 .. [react] useAxios 커스텀 훅 사용기1(feat. typescript) 네트워크 통신이 많은 앱을 만들다보니 실시간 데이터 리로딩 로직의 필요성을 느끼게 되었고 더 이상 무수한 get 요청에 의존할 수 없다는 것을 깨달았다... 또한 네트워크 관련 코드들을 정리하여 관심사 분리를 진행해야겠다는 생각이 들었다. 코드가 너무 길고 지저분해지면 클린한 코드가 아니라는 생각이 들었기 때문이다. 작은 프로젝트지만 그래도 최대한 클린코드를 향해 나아가는(?) 마음가짐을 가지고 싶었다 :) 해당 문제를 어떻게 해결할지 팀원 분과 고민을 많이 하다가 멘토님께 조언을 얻기로 하고 질문 목록을 정리하여 미팅에 참석하였다! 멘토님께서 추천해주신 방법은 커스텀 훅을 만들어 네트워크 통신 후 response를 받아오도록 만들고, 네트워크 통신과 관련된 코드는 도메인 별로 나누어 파일로 정리하는 것.. 이전 1 다음
