React

https://kentcdodds.com/blog/optimize-react-re-renders 예전부터 리스트를 만들때 주로 React.memo를 사용해서 렌더 부분의 rerender를 막는 용도로 사용해왔다. 하지만 여러곳에서 {children}을 정의해서 렌더

리액트 프로젝트에서 데이터 페칭에 필수적인 지위를 차지하는 Tanstack Query의 장점은 무엇일까에 대한 쓸모있는 아티클을 찾아서 내용을 정리한다. https://ui.dev/why-react-query 어떤 기술이 유명해진다면 그 이유는 다양하겠지만 이

저번 아티클을 번역하면서 간단한 get 요청이지만 어떻게 UI적으로 신경쓸 수 있는 구성을 만들 수 있는지 확인해 보았었다.해당 코드로 만들어낼 수 있는 화면은 다음과 같다.여전히 무언가 아쉬운 점이 보인다.일부러 개발자 콘솔로 인터넷 속도에 제약을 걸고 본다면 이미지

저번까지 React-query가 왜 좋은지, 그리고 지금 실험용 코드들을 올리는 Next14 App router에서 React-query를 써도 괜찮은지에 대해서 알아 보았었다. 이제 사용만 하면 괜찮은데, 여기서 재발견하고 싶은 것은 React-query가 하나의 컴

이전부터 계속 context를 한번 제대로 써보고 싶다는 마음은 있었지만 제대로 찾아보거나 하지는 않았었다. 하지만 사이드프로젝트를 진행하기에 앞서서, 스토어 라이브러리를 쓰려고 하자니 사이즈가 너무 작을 것 같고, 그렇다고 그냥 prop을 내리자니 너무 귀찮으니까 다

리액트의 useContext를 State managing하는데 쓸 수 없을까? 에 대한 질문을 해결하기 위한 방법을 정리한다.저번에 이어서.. react docs에서는 useContext의 리렌더를 막기 위해 1.하나의 context provider는 오브젝트가 아니어

현재 작업중인 포모도로 공부법 사이드 프로젝트를 만들고 있는데, 이전부터 해보고 싶었던 svg로 원을 그리고 여기에 타이머 애니메이션 이펙트를 주는 것을 작업하고 있다.크게 생각할 것 없이, 인터벌 주기에 맞게 오프셋을 1씩 깎아서 svg가 조금씩 그려지도록 잡아준다

현재까지 사이드 프로젝트를 만들면서 두 가지의 애니메이션을 구현했었는데, 조금 더 라이브러리에 맞게 써보고자 고쳐보고 싶은 마음이 있었다.탭 쪽의 코드는 다음과 같다.너무 코드가 많아 보이는지? 그렇다면 더욱 라이브러리에 맞는 코드를 써볼 수 있겠다.https&#x3A