react-query를 통한 프로젝트 개선기

1. 개요 현재 프로젝트에서는 컴포넌트에서 직접 api를 호출해서 데이터를 받아오거나 요청을 처리하고 있습니다. 다만 위 방식의 경우 중복된 요청과 캐싱 등의 성능 이슈가 발생하며, 코드의 복잡성과 유지 보수에 어려움을 겪는등의 문제점이 있었습니다. 이러한 성능적 이슈와 서버의 데이터관리를 보다 용이하게 처리하...

axios와 fetch

1. 개요 React에서는 api를 요청할때 일반적으로 axios와 fecth방법을 사용합니다. 저같은 경우 큰 이유 없이 axios만 사용해왔지만 이 글에서는 axios와 fetch를 소개하고, 두 방법의 특징과 장단점을 비교하여 어떤 상황에서 어떤 것을 선택해야 하는지 정리해보고자 합니다 동시에 axios의...

Lottie를 활용한 애니메이션 추가

1.Lottie란? Lottie는 Airbnb에서 개발한 오픈소스 라이브러리로, 벡터 애니메이션을 간편하게 추가할 수 있는 도구입니다. JSON 형식으로 저장된 애니메이션 데이터를 불러와 웹, iOS, Android 등 다양한 플랫폼에서 높은 품질의 애니메이션을 구현할 수 있습니다. Lottie는 2017년에 ...

함수 vs 클래스 컴포넌트

1. React 컴포넌트 React 컴포넌트란 UI를 구성하는 최소 단위이며, React에서는 컴포넌트를 통해 UI를 작성하고 조합하여 하나의 완성된 어플리케이션을 만들기 위해 사용합니다. 특정 페이지에서 표현되는 버튼들과 글, 이미지는 모두 이러한 컴포넌트들로 구성이 되어있겠죠. 이러한 컴포넌트의 작성방식은 ...

브라우저의 렌더링 과정

브라우저란? 웹 브라우저는 인터넷을 통해 웹 페이지를 탐색하고 사용할 수 있도록 도와주는 소프트웨어입니다. 브라우저는 HTML, CSS, JavaScript 등의 웹 기술을 이용하여 웹 페이지를 해석하고 렌더링합니다. 또한, 사용자 인터페이스를 제공하며, 이미지, 비디오 및 텍스트 데이터를 가져오고 처리하고 보안...