리액트 심화 1일 차 @강의

오늘은 리액트 심화 강의를 처음부터 끝까지 완주했다. 동기/비동기, json server, axios, tanstack query, zustand, 지연(throttling, debounce, lodash), 인증인가(쿠키, 세션, 토큰), tailwind, 반응형 웹에 대해 배웠다. 

 

먼저 tailwind는 css 라이브러리로 className으로 css를 설정할 수 있는 기능이었고, 반응형 웹은 대충 알고 있기도 했고, 일단 설명만 들었다. 

 

지연 (throttling, debounce, lodash) 에 대해서도 전에 챌린지반에서 들어서 어느정도 알고 있었는데, 직접 코드를 짜본 적은 없어서 실습을 하면서 설명을 듣게 되어 구조를 좀 이해하게 된 것 같다. 

 

json server는 서버 데이터를 임의로 내가 만들어내서 사용하는 것이었다. 

 

그리고 남은 것들은

 

동기/비동기, axios,

tansatck query - 서버상태관리 라이브러리

 

zustand - 전역 상태관리 라이브러리

 

인증과 인가

 

로 나눌 수 있는 것 같다. 

 

먼저 인증과 인가에 대해 언급하자면 이전 팀프로젝트에서 내가 로그인/회원가입을 맡으면서 어떻게 돌아가는 구조인지는 대강 이해하기는 했다. 하지만 처음 접하는 개념이라 나 자신의 활용성이 떨어졌고, 팀원들이 이러한 데이터를 어떻게 가져가게 할 수 있을지에 대해 생각할 시간이 부족해서 많이 부족한 결과를 냈다는 것을 실감하게 되었다. 다행히 이번 개인 프로젝트에서도 로그인/회원가입 기능을 사용하여 프로젝트를 진행하니 이번에 전체적인 구조를 이해할 수 있을 것 같다. 이와는 별개로 항상 내가 모든 구조를 잘 이해하고 있는 상태에서 팀 프로젝트를 진행할 수는 없으니 다른 사람들과 어떻게 원활하게 협업할 수 있을지 생각해보아야할 것이다. 

 

zustand는 전역 상태관리 라이브러리로 이전에 배운 context API, Redux와 결이 같았다. 사용방법은 redux와 비슷했고 상태값과 상태값을 변화시키는 함수를 불러와서 사용할 수 있었다. 다만 구조가 조금 달랐는데, 이러한 특징 때문에 zustand는 빠르고 설정이 쉽지만 상태가 커지면 관리가 어렵다는 단점이 있다고 한다. 때문에 보통은 redux를 잘 쓴다고 한다. 사실 한 번에 많은 내용을 받아들이느라 깊게 이해하지는 못한 것 같지만, 내일 챌리지반 튜터님께서 zustand를 직접 만들어보는 과제를 내주실 것 같아서 이 부분은 당장에 넘어가도 될 것 같다. 

 

남은 것들은 대충 tansatck query라고 퉁칠 수 있을 것 같다. tansatck query는 서버상태관리 라이브러리로 여태껏 async await나 fetch 등으로 서버와 통신하던 것들을 한결 편리하게 할 수 있도록 한다. 구체적으로 말하자면 { 데이터, is펜딩, 에러 } 처리를 쉽게 해주는 것으로 데이터를 불러오는 Read를 포함한 CRUD에 더불어 데이터 다시 불러오기를 핸들링 할 수 있도록 하는 refresh에 서버에서 데이터를 전역으로 관리하여 통신 지연을 개선해주는 캐시데이터 기능도 갖추고 있는 매우 편리한 라이브러리이다. 

 

일단 이 정도로 오늘 배운 리액트 심화주차 개념들을 정리할 수 있었다. 앞으로 개인 프로젝트를 진행하며 이것들을 잘 다룰 수 있게 되고, 보다 자세한 설명을 할 수 있게 될 것이다.