🔥CS 뽀개기6 구글 소셜 로그인 처리하기 (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. 렌더링 사형제 CSR, SSR, SSG, ISR ✨CSR (Client-Side Rendering)클라이언트에서 렌더링이 일어나는 방식클라이언트가 React와 개발자 코드를 다운로드해 DOM을 구성하고 화면에 렌더링처음에 빈 HTML 파일을 로드 -> 자바스크립트와 스타일은 웹 브라우저에서 전체 사용자 친화적인 페이지를 렌더링 함 장점 👍🏻 빠른 사용자 경험(UX)과 반응성 제공구동속도가 빠르고 서버 부하가 적음단점 👎🏻 초기 로딩 속도가 느림검색 엔진 최적화(SEO)가 어려움✨SSR (Server-Side Rendering)서버에서 렌더링된 HTML을 클라이언트에 전송하는 방식해당페이지에 대한 전체 HTML을 동적으로 렌더링하고 제공하는 앱 서버에 대한 요청을 시작 -> 사용자가 요청할 때마다 페이지를 요청하고 렌더링하므로 페이지 이동 시 속.. 2024. 5. 28. 웹페이지가 렌더링되는 과정 ✨웹 페이지 렌더링 과정HTML 파싱 및 DOM 트리 생성:브라우저는 수신한 HTML 문서를 파싱하여 DOM(Document Object Model) 트리를 생성한다.(DOM 트리는 HTML 문서의 구조를 나타내는 트리 구조)CSS 파싱 및 CSSOM 트리 생성:브라우저는 CSS 파일을 파싱하여 CSSOM(CSS Object Model) 트리를 생성한다.(CSSOM 트리는 CSS 규칙과 속성을 나타내는 트리 구조)렌더 트리 생성: 브라우저는 DOM 트리와 CSSOM 트리를 결합하여 렌더 트리를 생성한다.(렌더 트리는 실제로 화면에 표시될 요소들의 구조)레이아웃 계산:브라우저는 렌더 트리를 기반으로 각 요소의 크기와 위치를 계산한다.페인팅:브라우저는 레이아웃 정보를 바탕으로 실제 화면에 요소들을 그린다. 2024. 5. 23. 브라우저 주소창에 www.google.com을 입력하면 어떤 일이 일어날까? DNS 조회:사용자가 브라우저에 www.google.com을 입력하면, 브라우저는 해당 도메인의 IP 주소를 알아내기 위해 DNS(Domain Name System)에 쿼리를 보낸다.DNS 서버 검색:브라우저는 운영체제에 등록된 DNS 서버에 DNS 쿼리를 전송한다.(DNS 서버는 도메인에 해당하는 IP 주소를 반환)IP 주소 획득:DNS 서버가 www.google.comIP 주소를 찾으면 해당 IP 주소를 브라우저에게 전달한다.서버 연결:브라우저는 획득한 IP 주소를 사용하여 웹 서버에 TCP/IP 연결을 시도한다.HTTP 요청:브라우저는 웹 서버에게 HTTP GET 요청을 보낸다.(이 요청에는 브라우저의 사용자 에이전트 정보와 다양한 헤더가 포함될 수 있음)서버 응답:웹 서버는 브라우저의 요청에 대한.. 2024. 5. 23. 이전 1 다음 반응형
