Dachae's DevLogs

브라우저 렌더링 과정 웹사이트에 접속하면 눈앞에 멋진 UI가 펼쳐지죠. 하지만 그 화면이 실제로 만들어지기까지는 수많은 과정이 숨어 있습니다. 브라우저는 HTML, CSS, JS 같은 리소스를 해석하고, DOM과 CSSOM을 만들고, 렌더 트리를 통해 화면에 그려줍니다.이 글에서는 브라우저가 어떻게 웹 페이지를 렌더링하는지, 전체 과정을 단계별로 정리하고, 성능 최적화 포인트도 함께 소개합니다. 1. 브라우저 렌더링 흐름 요약HTML 파싱(DOM 생성) → CSS 파싱(CSSOM 생성) → Render Tree 생성 → Layout → Paint → Compositinga. HTML 파싱 → DOM 트리 생성브라우저는 서버로부터 받은 HTML 문서를 파싱(parser) 하여 DOM(Document..

CSRF와 XSS 웹 애플리케이션을 개발하면서 반드시 고려해야 할 것이 바로 보안입니다. 특히 CSRF(Cross-Site Request Forgery)와 XSS(Cross-Site Scripting)는 자주 언급되지만, 정확한 차이나 방어 방법이 헷갈리기 쉬운 주제입니다. 이 글에서는 두 공격의 개념과 차이점, 실제 예시, 그리고 효과적인 대응 방안을 상세히 정리해 보겠습니다. 1. CSRF (Cross-Site Request Forgery)란?CSRF는 사용자가 인증된 상태를 악용해, 사용자의 의도와 무관하게 서버에 요청을 보내는 공격입니다. 보통 사용자가 로그인된 사이트의 세션 쿠키를 이용해 악성 사이트가 서버에 요청을 보내는 방식으로 이루어집니다.예시 위와 같은 코드를 포함한 피싱 페이지에 접..

SOP와 CORS Access to XMLHttpRequest at 'https://api.example.com/data' from origin 'http://localhost:3000' has been blocked by CORS policy...무슨 말인지 모를 긴 오류 메시지. 이건 바로 SOP(Same-Origin Policy, 동일 출처 정책) 와 CORS(Cross-Origin Resource Sharing, 교차 출처 리소스 공유) 때문에 발생하는 것입니다.이 글에서는 웹 브라우저의 보안 모델 중 핵심 개념인 SOP와 CORS를 쉽게 설명하고, 실무에서 마주치는 문제들을 어떻게 해결할 수 있는지 알아보겠습니다. 1. SOP (동일 출처 정책)란?Same-Origin Policy (SOP)..