Yeon’s Dev Log

리액트를 개발할때 컴포넌트를 어떤 기준으로 작성하시나요? SOLID원칙을 통해 어떻게 컴포넌트를 작성할지에 대해서 살펴보도록하겠습니다. 본격적으로 시작하기전에 리액트 가이드문서에서 계층을 분리하는 과정을 먼저 보고가겠습니다. 리액트 계층분리과정 https://react.dev/learn/thinking-in-react 글을 요약하였습니다. 실제예시가 본문에 잘나와있으므로 참고하시기바랍니다. 1. UI를 컴포넌트 계층으로 쪼개기 컴포넌트를 하위 컴포넌트들로 쪼개야하는데 나누는 관점에는 차이가 있을수있습니다. 이미 디자인팀에서 정해놓은 계층이 있다면 그것을 기준으로 분리해도되고, 개발관점에서는 SRP원칙에따라 분리를 할수도있습니다. JSON이 잘구조화되어있다면, 응답값을 기준으로 컴포넌트 구조를 분리해볼수도..

드디어 TanStack Query v5가 릴리즈되었습니다! v4보다 용량은 더작게, 하지만 더 직관적이게 변화했는데요, 변경사항과 마이그레이션시의 주의사항을 살펴보도록 하겠습니다. 1. Breaking Change 가장 큰 변화에는 코드베이스로부터의 overload를 제거하여 useQuery와같은 훅을 더 직관적으로 만들었다는 것입니다. 사실 v4부터 하려고 기획했던것이지만 타입스크립트에서의 제약으로 인해 할수가없었는데요, TS 4.7에서 이부분이 보완되었고, 훅을 호출할때의 다양한 매개변수를 이제는 신경쓰지 않아도되게 변화하였습니다. v5에서는 객체만을 지원합니다. 이 부분은 DX측면에서 큰 성과라고 할수있습니다. 일일히 overload를 고려하지않아도되며, 하나의 객체만을 전달하면되기때문에 일관성이 ..

'unload' 이벤트는 이제 크롬에서 점차 실행되지 않도록 변경된다고 합니다. 도대체 왜 사라지는것이며, unload 이벤트를 대체할수있는 이벤트에는 무엇이 있을까요? 1. Background unload 이벤트는 말그대로 페이지가 unload 될때 실행되도록 설계되었습니다. 이론적으로 사용자가 페이지에서 다른페이지로 이동할때마다 실행되었습니다. unload 이벤트가 가장 일반적으로 사용되는 시나리오는 다음과 같습니다. Saving user data: 페이지에서 나가기전에 데이터를 저장한다. Performing cleanup tasks: 페이지를 끝내기전에 열려있는 리소스를 제거한다. Sending analytics: 페이지 종료시 사용자 상호작용과 관련된 데이터를 전송한다. 하지만 unload 이벤트..