반응형 자바스크립트3 [React]React Query와 SWR 맛보기로 강력하고 심플한 코드 바로 적용하고 중복줄이기 React Query와 SWR의 특징을 코드를 통해 구체적으로 비교해보겠습니다. eact Query: 복잡한 캐싱 및 데이터 동기화 React Query는 세밀한 캐싱 제어와 데이터 동기화를 위한 다양한 설정을 제공합니다. import { useQuery, useMutation, useQueryClient } from 'react-query'; // 캐시 시간과 재요청 설정 const { data: todos } = useQuery('todos', fetchTodos, { staleTime: 2000, // 2초 동안 데이터를 신선(fresh)으로 간주 cacheTime: 5000, // 캐시에서 데이터가 유지되는 시간 refetchOnWindowFocus: true // 윈도우 포커스 시 재요청 });.. 2024. 1. 7. [Backend] 프론트 개발자 헷갈리지 말아야 할 런타임 환경과 백엔드 서비스 의미 런타임 환경: 정의: 프로그램이 실행되는 동안의 환경으로, 코드가 실행되는 동안 필요한 리소스와 인터페이스를 제공합니다. 이는 프로그램의 실행을 지원하고, 외부와의 상호작용을 가능하게 하는 시스템입니다. 예시: Node.js는 자바스크립트 코드를 서버 측에서 실행할 수 있는 런타임 환경입니다. Node.js는 서버 측 애플리케이션에 필요한 파일 시스템, 네트워크, 데이터베이스와의 연결 등을 제공합니다. 백엔드 서비스: 정의: 서버 측에서 작동하는 애플리케이션 또는 서비스로, 데이터베이스 관리, 서버 로직 처리, 클라이언트 애플리케이션에 API를 제공하는 등의 기능을 포함합니다. 예시: 데이터베이스와 통신하고, 사용자 인증을 관리하며, 클라이언트 측에 데이터를 전송하는 RESTful API를 포함하는 서버.. 2023. 12. 5. [Webpack]가짜 개발자 대부분이 모르는 Webpack의 역할과 원리 Webpack을 사용해야 하는 이유 Webpack을 사용하는 이유를 이해하기 위해 간단한 예시를 통해 설명해보겠습니다. 상황: 웹 애플리케이션을 개발하고 있으며, 여러 개의 JavaScript 파일과 CSS 파일이 프로젝트에 포함되어 있습니다. 각 파일은 모듈화되어 있어서 코드를 구성하고 유지 관리하기 용이하지만, 이들을 브라우저에서 로드하려면 여러 번의 HTTP 요청이 필요하고, 파일 크기가 큰 경우 로딩 시간이 길어질 수 있습니다. 이제 Webpack을 사용하는 이유를 예시로 설명해보겠습니다. 사용 전: 위 예시에서는 각 모듈과 스타일 시트를 별도의 파일로 로드하고 있으며, 각각의 파일은 별도의 HTTP 요청을 생성합니다. 사용 후(Webpack 적용): Webpack을 사용하면 이러한 파일들을 번들.. 2023. 12. 3. 이전 1 다음 반응형