⭐️ 클라이언트 상태와 서버 상태클라이언트 상태(Client State)클라이언트 상태는 서버와의 통신 없이 웹 브라우저 내부에서만 관리되는 데이터를 의미한다.메뉴 열림/닫힘 여부모달 on/off 상태사용자가 폼에 입력한 값위와 같은 UI 관련 상태를 클라이언트 상태라고 하며,이 데이터들은 사용자 행동에 의해 즉시 변경되고, 서버와는 완전히 독립적으로 동작한다. 서버 상태(Server State)서버 상태는 서버에서 받아오는 데이터를 의미한다.서버 데이터는 받아오는데 시간이 걸리기 때문에 비동기처리가 필수적이고,데이터를 받아오기 전/후로 로딩 상태 표시, 에러 처리, 재요청 등의 로직 처리가 필요하다. 특히 서버 데이터는 여러 사용자가 동시에 수정할 수 있기 때문에가능한 최신 상태로 데이터를 유지해야 한..

Authorization Code Flow를 중심으로 구글 소셜 로그인 전체 흐름을 정리한 글입니다. 🔑 접근 권한 위임이란?접근 권한 위임은 한 서비스가 다른 서비스의 보호된 리소스에 접근할 수 있도록권한을 대신 받아 수행하는 기능이다.예를 들어, A 서비스가 유저의 구글 캘린더 일정을 가져오고 싶다고 가정했을 때A 서비스가 유저의 구글 이메일과 비밀번호를 직접 받아 사용한다면 보안 문제가 발생한다.→ 이러한 문제를 해결하기 위해 등장한 표준이 바로 OAuth이다. 🔐 OAuth - 접근 권한 위임 표준OAuth는 민감한 인증 정보를 제3자에게 전달하지 않으면서도제3자가 보호된 리소스에 접근할 수 있도록 해주는 표준 프로토콜이다.참고OAuth 2.0은 OAuth의 개선 버전으로 현재 대부분의 서비스..

🍪 세션(Session) 기반 인증세션은 서버가 직접 관리하는 사용자 상태 정보이다.사용자가 웹사이트에 처음 요청을 보내면 서버는 이 방문자를 구별할 수 있는 세션 ID를 생성하고,해당 ID를 기반으로 사용자 정보를 서버 메모리 혹은 저장소에 보관한다.💾 서버에 저장되는 정보 예시아이디, IP 주소, 브라우저 정보, 마지막 방문일자 등로그인 시에는 해당 유저를 식별할 수 있는 user_id 등을 추가로 저장한다.🔄 세션 기반 인증 흐름서버는 응답(Response)의 Set-Cookie 헤더에 세션 ID를 포함해 클라이언트로 보낸다.브라우저는 쿠키에 이 세션 ID를 저장한다.이후 클라이언트는 모든 요청에 쿠키를 자동으로 포함해 세션 ID를 전달한다.서버는 세션 저장소에서 이 ID를 조회해 사용자를 식..

더보기01. 15주차 ~ 16주차 (10/27 ~ 11/8)✅ 15 ~ 16주차 진행데일리 팀 미팅멘토링보충학습위클리 페이퍼 작성커리어 미션 제출강의 - Next.js로 웹사이트 만들기강의 - Next.js API 만들기스프린트 미션 6코딩 테스트 문제 풀이리액트 공식 문서 정리팀 미니 프로젝트👀 후기강의 - Next.js로 웹사이트 만들기15주차부터 Next.js에 대해 배우기 시작했다.page router의 기본 기능들 (파일 경로 기반 라우팅, useRouter)을 학습했는데,예전 버전의 강의라 App Router는 다루지 않았다.App Router 관련 내용은 따로 학습이 필요할 것 같다. 강의 - Next.js API 만들기Next.js의 내장 기능인 API Route를 활용해서 mongoDB..

👀 SEO란?SEO는 Search Engine Optimization의 약자로 검색 엔진 최적화를 의미한다.웹사이트를 최적화하여 검색 엔진 결과 페이지에서 상위 순위를 차지할 수 있도록 하는 전략이다.→ 쉽게 말하면 검색 엔진에서 내 사이트를 더 찾기 쉽도록 개선하는 것이다. ⚙️ 최적화 방법🏗️ 사이트 구조 및 HTML 최적화검색 엔진은 웹사이트를 크롤링하고 인덱싱하기 때문에,구조화된 HTML과 의미 있는 태그 사용이 중요하다. 1. 메타 태그 활용하기: 페이지 제목, 검색 결과의 클릭률에 영향을 준다.: 페이지 설명, 검색 결과 스니펫에 표시된다.2. 헤딩 태그 구조 지키기헤딩 태그를 사용할 때는 계층 구조에 유의해서 사용해야 한다.: 페이지의 핵심 주제, : 콘텐츠 계층 구조 명확화3. 시맨틱 ..

백엔드 API를 사용하다 보면 가끔 CORS 에러 때문에 막히는 경우가 있다.이번 글에서는 SOP와 CORS가 무엇인지 이해하고, CORS 에러 해결 방법까지 정리해보려고 한다. 🛡️SOP동일 출처 정책(SOP:Same-origin policy)은 한 출처에서 불러온 문서나 스크립트가다른 출처의 리소스와 상호 작용하는 것을 제한하는 중요한 보안 메커니즘이다. SOP는 잠재적으로 위험할 수 있는 문서를 분리함으로써 공격받을 수 있는 경로를 줄여준다.→ 사용자 보안을 위해 브라우저에 기본 적용되는 정책이다. 대표적으로 fetch()와 XMLHttpRequest가 SOP를 따른다. 🌐 출처?여기서 말하는 출처가 무엇일까?출처(origin)는 프로토콜(protocol), 포트(port), 호스트(host)가..