🔥 문제 상황이전 글에서 서버 → 클라이언트(localhost)로 쿠키 전송 문제를 해결했었다그런데 클라이언트 → 서버로 POST 요청을 보냈는데 쿠키가 전송되지 않고 있었다. 왜냐하면 서버(https://custom-domain.com)에서 생성한 쿠키의 도메인은 [ custom-domain.com ] 이고, 클라이언트 도메인은 [ localhost ] 로 같은 도메인이 아니기 때문에 전송되지 않았던 것이다. (+ SameSite: Lax) 로그인 인증을 구현하기 위해선 도메인을 일치시킬 필요가 있었다.✅ (개발 환경) 백엔드 서버를 로컬에서 띄우자개발 환경에서 위 문제를 해결하기 위해 백엔드 서버를 로컬에서 띄우기로 했다. 그러면 클라이언트는 http://localhost:5173 이고, 서버는 h..
Web
🧷 출처이미지 출처: https://www.devyummi.com/page?id=66934f448a005e7d8f32213a🔥 문제 상황로그인 책임을 백엔드가 맡고 있는 카카오, 구글 소셜 로그인을 구현중이였다.소셜 로그인 성공 시, 백엔드에서 생성한 jwt 토큰 쿠키가 브라우저(localhost)에 저장되어야 하는데 저장이 되고 있지 않았다.🏃♀️ 첫 번째 시도개발 환경프론트엔드http://localhost:5173window.location.href = 'http://1.11.111.11:8080/oauth2/authorization/kakao';소셜 로그인 버튼 클릭 시, 페이지 이동http프로토콜서버 주소(아이피): 1.11.111.11:8080 (해당 주소는 실제 서버 아이피가 아님)백엔..
🛴 개선 전 애니메이션 'xxx마리' 숫자 영역 애니메이션 애니메이션 동작 방식은 css top 속성을 이용하여, 멈출 숫자의 위치로 이동합니다. css top을 이용해 요소의 위치를 변경했기 때문에, animation이 발생하는 동안 reflow가 계속 실행되는 것을 볼 수 있습니다. reflow: 브라우저 렌더링 과정 중 Layout → Paint → Composite 과정 재실행 🔧 성능 개선하기 성능 개선을 위해 reflow 대신 repaint를, repaint 대신 composite 과정만 발생되도록 하여 렌더링 비용을 줄일 수 있습니다. 요소 위치를 조정하기 위해 top 대신 transform 속성을 이용하면, 애니메이션 동작은 같지만 reflow가 발생하지 않고 composite 과정만 발생..
📝 렌더링이란? HTML, CSS, 자바스크립트로 작성된 문서를 파싱하여 브라우저에 시각적으로 출력하는 것 파싱(parsing, 구문 분석): 프로그래밍 언어의 문법에 맞게 작성된 텍스트 문서를 읽어 들여 실행하기 위해 텍스트 문서의 문자열을 토큰으로 분해하고, 토큰에 문접적 의미와 구조를 반영하여 트리 구조의 자료구조인 파스 트리를 생성하는 일련의 과정 📝 렌더링 과정 1. 서버로부터 HTML 파일을 받는다. 2. HTML을 파싱하면서 CSS, 자바스크립트, 이미지 등 필요한 리소스를 요청. 3. DOM 트리 생성 4. CSSOM 트리 생성 5. DOM 트리와 CSSOM트리를 결합하여 Render 트리 생성 6. Layout - HTML 요소의 레이아웃(위치와 크기) 계산 7. Paint - 화면에 H..
🚩 Local Storage 저장된 데이터는 브라우저를 닫아도 계속 유지됩니다. 오리진(domain·port·protocol)이 같은 탭, 창 전체에서 공유 한 창의 데이터를 설정하면 다른 창에서 변동 사항을 볼 수 있습니다. 🚩 Session Storage 저장된 데이터는 브라우저를 닫거나 탭을 닫으면 삭제됩니다. 오리진이 같은 브라우저 탭, iframe에서 공유 현재 떠 있는 탭 내에서만 데이터가 유지됩니다. 🚩 API 두 스토리지 객체는 동일한 메서드와 프로퍼티를 제공합니다. Storage.setItem() setItem(key, value): 키-값 쌍을 보관합니다. getItem(key): 키에 해당하는 값을 받아옵니다. removeItem(key): 키와 해당 값을 삭제합니다. clear():..
