코드잇스프린트8 서버 상태 💞 클라이언트 상태 React Query는 주로 서버 상태를 효율적으로 관리하기 위해 설계되었다. 이전에는 서버 상태를 클라이언트 상태와 함께 관리하면서 발생하는 복잡성을 줄이는 것이 어려웠다.-> 코드의 양이 늘어나고, 데이터 동기화와 캐싱 문제 등으로 어려움을 겪었다.React Query는 이러한 문제를 해결해 주며, 서버 상태를 효과적으로 관리하고, 비동기 데이터 페칭, 캐싱, 자동 리패칭 등의 기능을 통해 개발자가 좀 더 쉽게 서버 상태를 다룰 수 있도록 한다.[🔥React 뽀개기] - React Query 왜 씀? React Query 왜 씀?리액트 쿼리를 배우기 전에는 그냥 무한스크롤 구현하는데 쓰이는 애인줄 알았다.근데 찍먹해봤더니 뭐지?? 서버 상태 불러오고, 캐싱하고, 지속적인 업데이트가 가능..?Reac.. 2024. 7. 20. React Query 왜 씀? 리액트 쿼리를 배우기 전에는 그냥 무한스크롤 구현하는데 쓰이는 애인줄 알았다.근데 찍먹해봤더니 뭐지?? 서버 상태 불러오고, 캐싱하고, 지속적인 업데이트가 가능..?React Query 도입 이전에는...서버에서 가져온 데이터를 클라이언트 상태와 함께 관리해야 했기 때문에, 상태 관리 라이브러리(Redux)를 사용해야 하는 경우가 많았다.리덕스는 상태를 변경하기 위해서는 액션을 생성해야 하고, 이를 처리하기 위한 리듀서를 작성해야 한다. 이 과정에서 각 액션에 대한 타입을 정의하고, 리듀서를 구현하는 코드가 늘어난다. 그래서 간단한 상태 변경에도 많은 코드가 필요하게 되는 경우가 많다. 결국 코드의 양이 늘어나고, 관리해야 할 상태가 많아져서 오히려 버거워지는 결과를 초래했다.비동기 데이터를 React .. 2024. 7. 20. 구글 소셜 로그인 처리하기 (feat. OAuth 2.0) ❓OAuth구글, 페이스북 등 다양한 플랫폼의 특정한 사용자 데이터에 접근하기 위해 제3자가 사용자의 접근 권한 위임을 받을 수 있는 프로토콜 .구글은 OpenID Connect 프로토콜을 통해 OAuth 2.0을 구현하고 있다. ❓OAuth 2.0인증 및 권한 부여를 위한 개방형 표준 프로토콜로, 다양한 인터넷 서비스에서 사용되는 주요 프로토콜 사용자가 앱에 로그인 사용자 인증 정보를 증명하지 않아도 앱이 사용자의 보호된 리소스 (예: 은행 계좌 또는 사용자가 앱에서 액세스하려고 할 수 있는 기타 민감한 정보)에 제한적으로 액세스하도록 허용한다. ✨구글 소셜 로그인 Authorization Code 흐름 과정 사용자가 클라이언트 애플리케이션의 "구글로 로그인" 버튼을 클릭한다.클라이언트 애플리케이션은 .. 2024. 6. 18. 세션 기반 인증 vs. 토큰 기반 인증 (feat. 인증+인가) HTTP는 클라이언트(프론트)와 서버(백엔드) 간의 통신을 가능하게 한다. HTTP는 상태를 저장하지 않기 때문에 각 요청은 이전에 수행된 작업에 대해 전혀 인지하지 못한다.예) 구글 계정에 로그인하고 설정 페이지로 이동했다면, 기본 HTTP 동작에서는 서버가 우리가 방금 로그인했는지 할지 못해 다시 로그인해야 할 것이다. 하지만, 세션이나 토큰 인증을 사용하면 서버에 우리가 이미 로그인했음을 알리고 해당 페이지에 접근할 수 있도록 허용할 수 있다!!!❓인증사용자가 누구인지 확인하는 과정사용자가 이메일과 비밀번호를 입력서버는 입력된 이메일과 비밀번호가 데이터베이스에 저장된 정보와 일치하는지 확인일치하면 사용자에게 인증 토큰이나 세션 ID를 발급하여 로그인에 성공❓인가확인된 사용자가 어떤 자원에 접근할 수.. 2024. 6. 12. 개발자가 SEO(검색 엔진 최적화)를 신경써야 하는 이유 SEO는 Google 검색 상단에 웹사이트나 컨텐츠의 순위를 매기는 단계를 포함하는 체계적이 프로세스다. 기업이 소비자에게 노출되고 인기를 얻으려면 소비자에게 노출되어야 한다. 오늘날은 모든 것이 디지털이기 때문에 디지털 미디어와 애플리케이션을 활용하고 브랜드를 홍보해야 한다. SEO는 그 중 하나고 매우 중요하다. SEO를 통해 웹사이트의 검색 순위를 높이면 유기적인 프래픽이 증가하고, 매출 향상이 될 것이다. ❓SEO란SEO는 웹사이트가 유기적인(무료) 검색 방식을 통해 검색 엔진에서 상위에 노출될 수 있도록 최적화하는 과정검색 엔진이 콘텐츠를 이해하고 사용자에게 더 잘 노출될 수 있도록 돕는 것이 SEO의 핵심 목적이다.✨SEO 핵심 전략기술적 SEO (Technical SEO)웹사이트의 기술적 .. 2024. 6. 3. CORS 오류 해결하기 팀프로젝트 하다 처음 발견한 cors 오류....! ❓왜 일어났지백엔드는 3001포트, 프론트엔드는 3000포트를 쓰고있었다. cors 설치 후, 백엔드와 프론트엔드 데이터를 통신을 할 때 오류가 떴다. 오류 내용은 인증헤더가 없어서 3001포트가 막혔다는 것...! ❓CORS 오류란 웹 애플리케이션에서 다른 도메인으로 리소스를 요청할 때 발생할 수 있는 보안 정책 CORS(Cross-Origin Resource Sharing) 오류는 웹 페이지가 다른 도메인의 리소스에 접근하려고 할 때 발생하는 보안 문제다. 웹은 기본적으로 동일 출처 정책(Same-Origin Policy)을 따르기 때문에, 한 출처(origin)에서 로드된 문서나 스크립트가 다른 출처의 리소스에 접근하는 것이 제한다. ✨해결법 ⚠.. 2024. 6. 3. Next.js 왜 씀? ❓Next.js란...React 기반의 오픈소스 JavaScript 웹 프레임워크리액트의 확장판 = 리액트 + 페이지 라우팅 + 빌트인 최적화 기능 + 다양한 렌더링 전략✨React와의 차이리액트로 충분한 것 같은데 Next가 왜 나왔을까? 비교를 해보자.Next.js는 검색 엔진 최적화, 렌더링에 중점을 둔 웹사이트에 특히 적합하다.📍렌더링 방식React: 클라이언트 측 렌더링(CSR)을 사용하여 페이지 전환이 부드러워지지만, 초기 로딩 속도가 느리고 SEO에 불리하다.Next.js: 서버 측 렌더링(SSR)을 사용하여 초기 로딩 속도를 높이고 SEO 친화적인 웹 애플리케이션을 구축할 수 있다.[🔥CS 뽀개기] - 렌더링 사형제 CSR, SSR, SSG, ISR 자바스크립트와 스타" data-og-.. 2024. 5. 30. 타입스크립트 왜 씀? 자바스크립트에 익숙해질 쯤... 갑자기 타입스크립트가 내 인생에 들어왔다..타스 강의 들으면서 느낀점) 엥 이거 왜 쓰지.. 너무 불편하다 자스가 더 편한데 왜 타스 쓰지? 라는 생각밖에 안 들었다. 도대체 왜!!!! 개발자들이 타입스크립트는 쓰는가...에 의문을 품고 끄적여본다.. 👊🏻❓타입스크립트가 뭔데타입스크립트는 마이크로소프트에서 개발한 자바스크립트의 상위 확장자(Superset) 프로그래밍 언어타입스크립트는 자바스크립트에 정적 타입 시스템을 추가하여 개발자의 생산성과 코드 품질을 높이는 것을 목표로 한다.실행 전 검사를 통해 타입 안정성 확보한다.자동으로 변수의 타입을 추론한다.👊🏻자바스크립트 VS 타입스크립트1. 타입 시스템자바스크립트: 동적 타입 언어로, 변수의 타입을 명시적으로 정의.. 2024. 5. 23. 이전 1 다음 반응형
