👇🏻보리 노트 카테고리👇🏻62 서버 상태 💞 클라이언트 상태 React Query는 주로 서버 상태를 효율적으로 관리하기 위해 설계되었다. 이전에는 서버 상태를 클라이언트 상태와 함께 관리하면서 발생하는 복잡성을 줄이는 것이 어려웠다.-> 코드의 양이 늘어나고, 데이터 동기화와 캐싱 문제 등으로 어려움을 겪었다.React Query는 이러한 문제를 해결해 주며, 서버 상태를 효과적으로 관리하고, 비동기 데이터 페칭, 캐싱, 자동 리패칭 등의 기능을 통해 개발자가 좀 더 쉽게 서버 상태를 다룰 수 있도록 한다.[🔥React 뽀개기] - React Query 왜 씀? React Query 왜 씀?리액트 쿼리를 배우기 전에는 그냥 무한스크롤 구현하는데 쓰이는 애인줄 알았다.근데 찍먹해봤더니 뭐지?? 서버 상태 불러오고, 캐싱하고, 지속적인 업데이트가 가능..?Reac.. 2024. 7. 20. React Query 왜 씀? 리액트 쿼리를 배우기 전에는 그냥 무한스크롤 구현하는데 쓰이는 애인줄 알았다.근데 찍먹해봤더니 뭐지?? 서버 상태 불러오고, 캐싱하고, 지속적인 업데이트가 가능..?React Query 도입 이전에는...서버에서 가져온 데이터를 클라이언트 상태와 함께 관리해야 했기 때문에, 상태 관리 라이브러리(Redux)를 사용해야 하는 경우가 많았다.리덕스는 상태를 변경하기 위해서는 액션을 생성해야 하고, 이를 처리하기 위한 리듀서를 작성해야 한다. 이 과정에서 각 액션에 대한 타입을 정의하고, 리듀서를 구현하는 코드가 늘어난다. 그래서 간단한 상태 변경에도 많은 코드가 필요하게 되는 경우가 많다. 결국 코드의 양이 늘어나고, 관리해야 할 상태가 많아져서 오히려 버거워지는 결과를 초래했다.비동기 데이터를 React .. 2024. 7. 20. [모던 리액트 Deep Dive] 6장. 리액트 개발 도구로 디버깅하기 https://github.com/Study-FE-Techbook/Modern-React-Deep-Dive GitHub - Study-FE-Techbook/Modern-React-Deep-Dive: 모던 리액트 딥다이브 스터디모던 리액트 딥다이브 스터디. Contribute to Study-FE-Techbook/Modern-React-Deep-Dive development by creating an account on GitHub.github.com[6장] 리액트 개발 도구로 디버깅하기6.1 리액트 개발 도구란?React Dev Tools리액트로 만들어진 다양한 애플리케이션을 디버깅하기 위해 만들어졌으며, 리액트 웹 뿐만 아니라 리액트 네이티브 등 다양한 플랫폼에서 사용할 수 있다.6.2 리액트 개발 도.. 2024. 7. 16. [모던 리액트 Deep Dive] 5장. 리액트와 상태 관리 라이브러리 https://github.com/Study-FE-Techbook/Modern-React-Deep-Dive GitHub - Study-FE-Techbook/Modern-React-Deep-Dive: 모던 리액트 딥다이브 스터디모던 리액트 딥다이브 스터디. Contribute to Study-FE-Techbook/Modern-React-Deep-Dive development by creating an account on GitHub.github.com [5장] 리액트와 상태 관리 라이브러리5.1 상태관리는 왜 필요한가?📍웹 애플리케이션에서 상태로 분류될 수 있는 것들UI: ex) 다크/라이트 모드, input요소, 알림창 노출 여부URL: 사용자 라우팅에 따른 동적 주소폼: 로딩 중인지, 현재 제출됐는지.. 2024. 7. 13. [모던 리액트 Deep Dive] 4장. 서버 사이드 렌더링 https://github.com/Study-FE-Techbook/Modern-React-Deep-Dive GitHub - Study-FE-Techbook/Modern-React-Deep-Dive: 모던 리액트 딥다이브 스터디모던 리액트 딥다이브 스터디. Contribute to Study-FE-Techbook/Modern-React-Deep-Dive development by creating an account on GitHub.github.com [4장] 서버 사이드 렌더링4.1 서버 사이트 렌더링이란?✨싱글 페이지 애플리케이션의 세상📍싱글페이지 애플리케이션이란렌더링과 라우팅에 필요한 대부분의 기능을 브라우저의 자바스크립트에 의존하는 방식최초에 첫 페이지에서 데이터를 모두 불러온 이후에는 페이지 전.. 2024. 7. 10. [모던 리액트 Deep Dive] 3장. 리액트 훅 깊게 살펴보기 https://bori-note.tistory.com/32https://bori-note.tistory.com/32https://github.com/Study-FE-Techbook/Modern-React-Deep-Dive GitHub - Study-FE-Techbook/Modern-React-Deep-Dive: 모던 리액트 딥다이브 스터디모던 리액트 딥다이브 스터디. Contribute to Study-FE-Techbook/Modern-React-Deep-Dive development by creating an account on GitHub.github.com [3장] 리액트 훅 깊게 살펴보기3.1 리액트의 모든 훅 파헤치기훅은 클래스 컴포넌트에서만 가능했던 리액트의 핵심 기능을 함수에서도 가능하게 .. 2024. 7. 2. [모던 리액트 Deep Dive] 2장. 리액트 핵심 요소 깊게 살펴보기 https://github.com/Study-FE-Techbook/Modern-React-Deep-Dive GitHub - Study-FE-Techbook/Modern-React-Deep-Dive: 모던 리액트 딥다이브 스터디모던 리액트 딥다이브 스터디. Contribute to Study-FE-Techbook/Modern-React-Deep-Dive development by creating an account on GitHub.github.com [2장] 리액트 핵심 요소 깊게 살펴보기2.1 JSX란?XML과 유사한 내장형 구문이며, 리액트에 종속적이지 않은 독자적인 문법자바스크립트 코드 내부에 HTML과 같은 트리 구조를 가진 컴포넌트를 표현할 수 있다.render() { return ( .. 2024. 6. 29. [모던 리액트 Deep Dive] 1장. 리액트 개발을 위해 꼭 알아야 할 자바스크립트 https://github.com/Study-FE-Techbook/Modern-React-Deep-Dive GitHub - Study-FE-Techbook/Modern-React-Deep-Dive: 모던 리액트 딥다이브 스터디모던 리액트 딥다이브 스터디. Contribute to Study-FE-Techbook/Modern-React-Deep-Dive development by creating an account on GitHub.github.com 리액트 책 속으로 들어가며…🥹리액트 왜 씀?왜 리액트가 지난 몇 년간 많은 개발자들이 선호하는 라이브러리가 됐을까?단방향 바인딩만약 양방향으로 바인딩되면 뷰의 변화가 컴포넌트에 영향을 미칠 수도, 반대로 컴포넌트의 상태가 변경되면 뷰의 상태도 변할 수 있다.. 2024. 6. 27. 구글 소셜 로그인 처리하기 (feat. OAuth 2.0) ❓OAuth구글, 페이스북 등 다양한 플랫폼의 특정한 사용자 데이터에 접근하기 위해 제3자가 사용자의 접근 권한 위임을 받을 수 있는 프로토콜 .구글은 OpenID Connect 프로토콜을 통해 OAuth 2.0을 구현하고 있다. ❓OAuth 2.0인증 및 권한 부여를 위한 개방형 표준 프로토콜로, 다양한 인터넷 서비스에서 사용되는 주요 프로토콜 사용자가 앱에 로그인 사용자 인증 정보를 증명하지 않아도 앱이 사용자의 보호된 리소스 (예: 은행 계좌 또는 사용자가 앱에서 액세스하려고 할 수 있는 기타 민감한 정보)에 제한적으로 액세스하도록 허용한다. ✨구글 소셜 로그인 Authorization Code 흐름 과정 사용자가 클라이언트 애플리케이션의 "구글로 로그인" 버튼을 클릭한다.클라이언트 애플리케이션은 .. 2024. 6. 18. 이전 1 2 3 4 5 6 7 다음 반응형
