리마인드 React 투두리스트 만들어본 회고+ axios통신

 

 

 

다시 리마인드....✨

이번에는 React + axios 통신의 투두리스트를 만들어보았다!

 

 

`배포` : 클릭

`깃허브` : 클릭

 

 

Next.js만 사용하다가 다시 React로 넘어와서 사용해보니 

React-router-dom 설치와 라우터 설정도 따로 해줬어야 했던 점에서, 확실히 Next.js가 편하다는 생각이 들었다😂

너무 Next.js에 편해졌었나보다...익숙함에 속아 소중함을 잃을뻔...

 

하지만 React버전으로 다시 만들어보면서 이렇게 했었지 라는 리마인드를 가지면서 두고두고 자주 봐야지! 라는 생각으로 만들어보았다.

이번에는 혼자서 이전에 짰던 코드 안보고 작성해보려고 노력했지만,, 아직은 한번에 쭉 만들기 힘들었고 최대한 안보고 짜려고 노력했다.

 

특히 이번에는 검색부분을 추가해서 전역관리로 Zustand를 사용해서 구현을 해보았는데,

검색 리스트가 왜 안뜨는지 고민하다가 하루만에 금방 완성할 줄 알았는데 투두리스트 만드는데 2일이나 소요되었다...

아직 공부가 더 필요하다!!!😂

 

 

 

axios 통신으로 구현하기

이번에는 실무에서 자주 사용하는 axios 통신을 사용해서 구현해보았다.

이전 next.js를 사용할때는 fetch를 이용해서 구현했어서,

이번에는 axios 리마인드 겸 라이브러리를 가져와서 만들어보았다.

 

간단한 투두리스트라서 인스턴스를 따로 별도로 구현하지는 않았는데

현재 JWT에 대해서 공부를 하고 axios instance에 대해서 공부해보니

앞으로 api통신을 할때 활용하는 것이 좋을 것 같다는 생각을 했다. 

투두리스트 말고 이번에는 회원가입과 로그인 페이지를 만들어보면서 axios instance를 활용해서 만들어봐야겠다...

 

 

 

 

검색 Debounce

이전에 팀 프로젝트에서 검색구현을 내가 맡아서 Debounce로 구현을 해봤어서, 이번에도 Debounce를 이용해서 구현을 해보았다.

이번에 공부를 진행하면서 Debounce와 비슷한 `useDeferredValue`의 React훅을 알게 되었다.

그 부분도 공부하고 정리하면서 새로운 훅도 적용해보고, 만들어보면서 다시 리펙터링 해봐야겠다.