전체 글125 zustand 리액트 프로젝트를 진행하면서 상태 관리를 어떻게 해야 할지 고민이 많았습니다.초기에는 리액트 자체 상태 관리 도구인 useContext와 useState를 사용하려 했지만, 페이지가 복잡해지고 부모 컴포넌트가 비대해지는 문제를 겪게 되었습니다.그래서 상태 관리 라이브러리를 도입하기로 결심했습니다.이번 글에서는 제가 Zustand를 선택한 이유와 사용 후기를 공유하겠습니다~~ 왜 Zustand를 선택했는가?상태 관리 도구로 널리 알려진 Redux를 사용할까 고민도 했지만, Zustand를 선택하게 된 이유는 다음과 같습니다.단순한 구조Redux처럼 store, slice, action 등을 따로 관리하는 복잡한 구조 대신, 하나의 store 파일에서 모든 상태를 관리할 수 있습니다. 이 점이 Zustand.. 2025. 1. 20. TypeScript와 동적 Key 값 처리 오랜만에 블로그를 재개하게 되었습니다! 😊긴 휴가로 인해 활동이 뜸했지만, 이제 다시 열심히 작성하겠습니다.이번 글에서는 JSON 데이터를 다룰 때, 동적인 Key 값 처리 방법에 대해 다뤄보려고 합니다.개발자라면 객체 형태의 데이터를 API를 통해 받는 일이 흔하지만, Key가 동적으로 변화하는 상황에서는 당황스러울 수 있죠.저 역시 크롤링 데이터를 시각화하는 과정에서 이런 문제를 마주치게 되었습니다."Key 값이 동적일 때, 어떻게 처리해야 할까?" 이 고민을 해결했던 경험을 공유합니다. 문제 상황크롤링을 통해 아래와 같은 데이터를 수집한 후, 프론트엔드로 전달했습니다.문제는 Key 값이 계절처럼 동적으로 변한다는 점이었습니다.{ "겨울": [ { "temperature": -10, "wea.. 2025. 1. 20. 단위 테스트 서론유지보수를 하다보면 코드는 왜 이렇게 만들었을까? 요구사항은 왜 이럴까? 하는 경우가 종종 아니... 조금 많이 있는 것 같다.특히, 오래전에 만들어진 코드라 구조자체가 그때 만든 사람만이 알 수 있고 에러가 나는 부분을 뜯어내고 새로 살을 붙여야하는데 이게 뭔 땜빵만해놔서 결국 별거아닌 부분 하나 수정하려고하면 땜빵난 전체 부분을 수정해야해서 결국 나도 땜빵을하게된다....그에따라, 우리 팀은 새롭게 진행하는 프로젝트에 테스트코드를 만들어서 사전에 테스트 코드를 작성해서 불필요한 업무를 줄이고자 진행하게 되었습니다..! 본론react-testing-library테스트코드 패키지 jest는 당연히 사용하고 react가 가상 돔을 이용하기에 testing-library 패키지와 jest를 같이 사용합니.. 2025. 1. 8. 이전 1 2 3 4 ··· 42 다음