React Redux를 어떻게 적용했는지, Context API와 React Redux는 무엇이 다른지 정리해봤다. React Redux를 적용할 때 Redux Toolkit 을 함께 사용했다. React Redux 공식문서에서도 Redux Toolkit을 사용하길 권장하며, 실제로 사용해보니 작성해야할 코드가 줄어들어 편했다. React Redux Redux는 action이라고 불리는 이벤트를 사용해 상태를 관리하는 패턴이며, React Re

React에서 props drilling을 피하고 싶거나 변수를 전역적으로 사용하고 싶을 때 상태 관리 라이브러리를 사용하곤 한다. React는 상태 관리가 가장 중요한 만큼 관련된 다양한 라이브러리들이 있다. 가장 대중적인 React Redux 부터 Recoil, Justand, Jotai, MobX 등등. 하지만 라이브러리를 사용하기 전에 React 자체 기능을 사용할 줄 알아야 한다고 생각한다. 라이브러리도 React 기능을 사용해서 만들

React 프로젝트에 이미지를 사이즈 생각 안하고 넣었더니 로드하는 데 시간이 오래 걸려 이미지 사이즈를 최적화했다. 이미지 사이즈 줄이기 이미지 크기가 너무 크면 로드하는 데 시간이 걸리고 이미지 크기가 너무 작다면 화질이 저하된다. 그렇다면 이미지는 어느 정도 크기여야 적당할까? 나는 다음 말에 설득되어 이미지가 화면에서 차지하는 픽셀의 두 배 정도 크기로 이미지 사이즈를 조절했다. 단순히 화면에 표시되는 사이즈로 만들어야 한다고 생각할 수

React 프로젝트를 최적화하는 방법 중 코드 분할과 지연 로딩에 대해 알게 되었다. 💡 코드 분할 Code splitting 이란? 하나의 빌드 파일을 한 번에 다운로드하는 대신 여러 파일로 분할해 필요할 때만 다운로드하는 것이다. 초기 리소스 다운로드 시간을 줄일 수 있다. 불필요한 코드 또는 중복되는 코드 없이 적절한 사이즈의 코드가 적절한 타이밍에 로드되는 것이 중요하다. 💡 지연 로딩 Lazy loading 이란? 처음 페이지가 로

번역 Tailwind CSS에서 혼란을 방지하기 위한 5가지 모범 사례 https://velog.io/@lky5697/5 best practices for preventing chaos in tailwind css 를 읽으면서 Tailwind CSS를 사용할 때 @apply 지시문을 남용하는 게 좋지 않다는 것을 알게 되었다. Tailwind CSS를 사용하던 프로젝트의 @apply 지시문을 줄이면서 느낀 것을 적어보려 한다. Bad Pract