🔥 문제 상황이전 글에서 서버 → 클라이언트(localhost)로 쿠키 전송 문제를 해결했었다그런데 클라이언트 → 서버로 POST 요청을 보냈는데 쿠키가 전송되지 않고 있었다. 왜냐하면 서버(https://custom-domain.com)에서 생성한 쿠키의 도메인은 [ custom-domain.com ] 이고, 클라이언트 도메인은 [ localhost ] 로 같은 도메인이 아니기 때문에 전송되지 않았던 것이다. (+ SameSite: Lax) 로그인 인증을 구현하기 위해선 도메인을 일치시킬 필요가 있었다.✅ (개발 환경) 백엔드 서버를 로컬에서 띄우자개발 환경에서 위 문제를 해결하기 위해 백엔드 서버를 로컬에서 띄우기로 했다. 그러면 클라이언트는 http://localhost:5173 이고, 서버는 h..
Web Fundamentals
🧷 출처이미지 출처: 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 (해당 주소는 실제 서버 아이피가 아님)백엔..
🔥 문제 상황스와이프 동작을 통해 snackbar를 없애는 Pointer 이벤트 로직을 구현했다. 데스크탑에서는 정상적으로 스와이프가 되었지만, 모바일에서는 snackbar가 화면 밖으로 이동하지 못하는 현상이 있었다.데스크탑모바일 ✅ 문제 해결모바일 브라우저는 터치 이벤트를 감지하면 스크롤 동작, 줌 등 기본 동작을 우선 처리하려고 해서 직접 구현한 스와이프 터치 반응이 제한될 수 있다고 한다. touch-action: none 속성을 추가하여 브라우저의 기본 터치 동작을 차단하고 직접 구현한 터치 동작을 우선적으로 처리하도록 변경했다. touch-action: https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action auto: 브라우저가 터치 ..
📌 transform-origin 속성은?transform의 기준점을 설정하는 속성이다. 기준점을 변경하면 회전, 확대/축소 등의 변환 효과가 어디를 기준으로 발생할지 결정할 수 있다.기본값은 요소의 중앙(50% 50%)이다. 이미지 출처https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin See the Pen Untitled by presentKey (@reduaaws-the-styleful) on CodePen.
🛴 개선 전 애니메이션 'xxx마리' 숫자 영역 애니메이션 애니메이션 동작 방식은 css top 속성을 이용하여, 멈출 숫자의 위치로 이동합니다. css top을 이용해 요소의 위치를 변경했기 때문에, animation이 발생하는 동안 reflow가 계속 실행되는 것을 볼 수 있습니다. reflow: 브라우저 렌더링 과정 중 Layout → Paint → Composite 과정 재실행 🔧 성능 개선하기 성능 개선을 위해 reflow 대신 repaint를, repaint 대신 composite 과정만 발생되도록 하여 렌더링 비용을 줄일 수 있습니다. 요소 위치를 조정하기 위해 top 대신 transform 속성을 이용하면, 애니메이션 동작은 같지만 reflow가 발생하지 않고 composite 과정만 발생..
📝 태그의 의미 브라우저는 서버가 응답한 HTML 파일을 바이트(2진수) 형태로 응답받는데, 브라우저에게 어떤 인코딩 방식을 사용할 지 알려주는 태그이다. html 문서를 지정된 인코딩 방식(UTF-8)을 기준으로 문자열 변환 UTF-8 인코딩 방식은 대부분의 문자를 표현하기에 적합하여 많이 사용되고, 다른 인코딩 방식(euc-kr 등)을 사용하면 일부 문자가 깨져보일 수 있다. 📝 인코딩 이란? 문자나 기호들을 컴퓨터가 이용할 수 있는 신호로 만드는 것이다. ASCII 코드 예를 들면 문자 십진법 이진법 A 65 1000001 Z 92 1011010 a 97 1100001 z 122 1111010 문자열 세트(표)에 따라 'A' 문자를 컴퓨터가 이해할 수 있는 '1000001' 변환하고, 다시 사용자에..
📝 렌더링이란? HTML, CSS, 자바스크립트로 작성된 문서를 파싱하여 브라우저에 시각적으로 출력하는 것 파싱(parsing, 구문 분석): 프로그래밍 언어의 문법에 맞게 작성된 텍스트 문서를 읽어 들여 실행하기 위해 텍스트 문서의 문자열을 토큰으로 분해하고, 토큰에 문접적 의미와 구조를 반영하여 트리 구조의 자료구조인 파스 트리를 생성하는 일련의 과정 📝 렌더링 과정 1. 서버로부터 HTML 파일을 받는다. 2. HTML을 파싱하면서 CSS, 자바스크립트, 이미지 등 필요한 리소스를 요청. 3. DOM 트리 생성 4. CSSOM 트리 생성 5. DOM 트리와 CSSOM트리를 결합하여 Render 트리 생성 6. Layout - HTML 요소의 레이아웃(위치와 크기) 계산 7. Paint - 화면에 H..
🚩 object-position https://developer.mozilla.org/en-US/docs/Web/CSS/object-position 대체 요소(img, iframe, video, embed)의 content를 정렬합니다. 기본값은 50%, 50%으로 가운데 정렬입니다. HTML 삽입 미리보기할 수 없는 소스
