본문 바로가기

전체 글18

로컬 개발을 모바일에서 확인하기 프로젝트를 진행하면서 화면 구성을 모바일에 맞춰 작업하던 중 문득 생각이 들었다. "모바일 브라우저의 사이즈에 맞추어 화면을 제작하고 있는데, 크롬의 개발자 도구를 이용한 확인만으로 충분할까?" 위와 같은 의문점이 들어 배포를 거치지 않고 현재 개발 상태의 화면을 호스팅하여 확인할 수 있는 방법이 없는지 찾아보았고 내가 찾은 방법은 locultunnel을 이용하는 방법이었다. https://github.com/localtunnel/localtunnel GitHub - localtunnel/localtunnel: expose yourself expose yourself. Contribute to localtunnel/localtunnel development by creating an account on .. 2023. 3. 29.
리액트-쿼리 / TanStack Query(@tanstack/react-query) - 2 5. Mutations - Mutations는 무엇일까? Mutation은 개발자가 서버에서 데이터를 생성하거나 수정하거나 삭제하는 등의 데이터 변경/수정 작업을 처리할 수 있도록 해주는 React-Query의 핵심 개념이다. 리액트 애플리케이션에서 위의 작업들에 해당하는 Side-effect를 수행하고 로컬 캐시를 업데이트하여 클라이언트 측의 데이터가 서버와 동기화 상태를 유지하도록 하는 데 사용된다. Mutation을 이해하기에 앞서 Mutation은 Query와 어떻게 다른 지 알아보면 다음과 같다. - 데이터 연산: Query는 데이터를 가져오고 읽는 데 중점을 두고 있으나 Mutation은 생성, 업데이트, 삭제와 같은 작업을 통해 데이터를 수정하는 역할을 담당한다. - Idempotence(멱.. 2023. 3. 16.
리액트-쿼리 / TanStack Query(@tanstack/react-query) - 1 https://tanstack.com/query/v4 TanStack Query | React Query, Solid Query, Svelte Query, Vue Query Powerful asynchronous state management, server-state utilities and data fetching for TS/JS, React, Solid, Svelte and Vue tanstack.com 1. React-Query란? 리액트 쿼리는 리액트 애플리케이션의 데이터 fetching(이하 불러오기), 캐싱, 업데이트 및 동기화를 간소화하는 라이브러리이다. 리액트 쿼리의 직관적이며 유연한 API를 통해 pagination, 실시간 업데이트, 최적화 업데이트 등과 같이 복잡한 로직을 직접 작성.. 2023. 3. 14.
GraphQL GraphQL은 무엇일까? GraphQL은 몇 가지 특징을 갖는 API용 쿼리 언어이자 런타임이다. 2012년 Facebook(현 Meta)에서 만들었고, 많은 회사에서 기존의 REST API를 대체하는 방식으로 채택하고 있다. 1. GraphQL이 갖는 특징 - 효율적인 Data Fetching: GraphQL을 이용할 시 클라이언트가 한 번의 요청으로 필요한 데이터만을 요청하고 수신할 수 있다. 이를 통해 Underfetching, Overfetching 이슈가 해결되어 불필요한 네트워크 트래픽을 줄일 수 있으며 애플리케이션의 성능 향상 또한 이룰 수 있다. 또한, GraphQL을 사용할 시 데이터베이스, 마이크로서비스, 외부 API 등을 포함하는 여러 소스에서 데이터를 검색하여 단일 응답으로 클라이.. 2023. 2. 23.

티스토리툴바