현재 개인 프로젝트는 외부 api 요청을 tanstack-query를 이용하여 요청하고 있었습니다. 이에 따라 tanstack-query 공식 문서를 보면서 어떤 새로운 기능을 찾아서 리팩토링할까 고민하던 중 공식 문서의 COMMUNITY RESOURCES 탭에 있는 Query Key factory 라는 라이브러리를 찾게 되었는데 이 도구로 query...

파이썬으로 알고리즘 시뮬레이션을 공부하던 중 가장 기본이 되는 문제를 소개하려고 합니다. 처음에는 잘 이해가 가지 않았지만 열심히 이해해 보기 위해서 정리한 글 입니다. 문제 이해하기 달팽이 수열은 1부터 시작하여 시계방향으로 증가하는 수를 배열에 담는 방법으로 처음에는 오른쪽으로 이동하며 수를 채우고, 그 다음은 아래쪽으로 이동하며 수를 채우고...

개인 프로젝트를 리팩토링하기 위해 리액트 공식 문서를 살펴보던 중 useDeferredValue 훅을 발견했습니다. 이 훅은 제 프로젝트의 검색 기능의 useDebounce 훅과 비슷한 역할을 하는 것 같아, 오늘은 useDeferredValue의 기능과 사용법, 그리고 저의 개인 프로젝트에 적용할 수 있을 지를 고민한 내용을 소개하고자 합니다. ...

이전 글에서는 Create React App(CRA)을 사용해 구축한 React 프로젝트를 Vite로 마이그레이션 하는 과정을 다뤘습니다. Vite는 다양한 플러그인을 지원한다고 언급했었는데, 이번에는 그 중에서도 프로젝트에 Progressive Web App (PWA)를 쉽게 적용할 수 있는 vite-plugin-pwa를 소개하려 합니다. 따라서 ...

CRA(Create React App)은 React 개발자들 사이에서 가장 널리 사용되는 React 빌드 방법 중 하나입니다. 그러나 최근 다른 프로젝트에서 Vite로 빌드된 React 애플리케이션을 설정했는데 이 때, CRA와 비교하여 좋은 점이 훨씬 많아 Vite로 마이그래이션 하기로 결정했습니다. 오늘은 CRA와 Vite의 간단한 비교와 Vit...

프로젝트를 완료한 이후, 사용자 경험을 향상시키기 위해 성능 최적화에 집중했습니다. 이 과정에서 다양한 성능 측정 도구 중 가장 쉽게 측정할 수 있고 무료로 사용할 수 있는 Google의 Lighthouse가 큰 도움이 되었습니다. 이번 글에서는 Lighthouse를 활용한 성능 측정 및 최적화 경험에 대해 소개하고자 합니다. 이 글은 2024...

개인 프로젝트 완료 후 vercel을 통해 배포를 시도하였으나, API 호출 과정에서 예상치 못한 CORS(Cross-Origin Resource Sharing) 오류가 발생하였습니다. 이 오류는 웹 애플리케이션에서 자주 발생하는 보안 이슈로, 다른 도메인 간의 리소스 공유 시 표준 교차 출처 보안 정책을 준수하지 못했을 때 나타납니다. 이러한 CO...

최근 한 프로젝트에서 검색 기능을 구현하던 중 사용자가 입력을 할 때마다 서버에 불필요하게 많은 요청이 발생하는 문제를 발견했습니다. 이러한 비효율적인 처리는 서버 부하를 증가시키고, 전반적인 사용자 경험을 저하시키는 원인이 되었습니다. 이 문제를 해결하기 위해 검색 기능의 로직을 리팩토링하여 debounce 기술을 적용하기로 결정했습니다. 따라서 ...

개인 프로젝트를 마무리하던 도중 React SEO를 최적화 하는 부분을 처리하게 되었는데, 생각보다 할게 많고 중요한 내용이 많은 것 같아 SEO에 대해 간단한 소개를 하고 저의 프로젝트에서는 스탭별로 어떤 부분을 적용했는지 정리 하였습니다. 이 글은 2024-04-08 에 업데이트 되었습니다. 이 글은 HTML, CSS , JavaS...

타입스크립트로 사이드 프로젝트 리팩토링 중 같은 컴포넌트이지만 타입만 다른 경우에 사용할 패턴을 찾아야 헀습니다. 그래서 열심히 구글링 하던 도중 가장 유용하게 사용한 제네릭 컴포넌트 패턴을 소개해 보겠습니다. 이 글은 2024-03-19 에 업데이트 되었습니다. 이 글은 HTML, CSS , JavaScript, TypeScript,...