codinglog
코딩일기
-
OAuth2 쉽게 이해하기 - 초보자를 위한 쉬운 가이드
🎯 시작하기 전에: 인증 vs 인가 보안을 이해하려면 먼저 이 두 개념을 구분해야 합니다. 인증 (Authentication) - “너 누구야?” 아파트 출입문에서 주민등록증을 확인하는 것과 같습니다. “당신이 정말 김철수가 맞나요?” 로그인할 때 아이디/비밀번호를 입력하는 과정 인가 (Authorization) - “이거 해도 돼?” 아파트 입주민이라고 모든 집에 들어갈 수 있는 건 아니죠. “당신은...
-
Spring Security 7.x HttpSecurity와 WebSecurity의 차이점
Spring Security 7.x는 단순한 버전 업그레이드가 아닌, 보안 설정 패러다임의 근본적인 전환을 의미합니다. 특히 HttpSecurity와 WebSecurity의 역할과 사용 방식이 명확히 재정의되면서, 이를 제대로 이해하지 못하면 보안 헤더 누락, 필터 미적용, 예상치 못한 인증 우회 등의 문제가 발생할 수 있습니다. 이 글에서는 Spring Security 6.4.5와 7.0.2의 차이점을 중심으로, 실무에서 반드시 알아야...
-
시리즈1.CSS 기본 원리와 렌더링 이해-번외-박스겹침현상
마진 겹침(Margin Collapse): 예상치 못한 동작 마진 겹침은 CSS의 가장 혼란스러운 동작 중 하나입니다. 수직 방향으로 인접한 블록 요소들의 마진이 하나로 합쳐지는 현상입니다. 형제 요소 간 마진 겹침 <!DOCTYPE html> <head> <style> .first { margin-bottom: 30px; background: #ff6b6b; height: 30px; } .second { margin-top: 20px; background: #4ecdc4; height: 30px; }...
-
시리즈1.CSS 기본 원리와 렌더링 이해-3편.CSS 박스 모델-모든 레이아웃의 시작점
이 포스트는 CSS 레이아웃의 가장 근본적인 개념인 박스 모델(Box Model)에 대해 다루겠습니다. 웹 페이지의 모든 HTML 요소는 사각형 박스입니다. 이 박스가 어떻게 구성되고, 크기가 어떻게 계산되는지 알아보겠습니다. 브라우저는 모든 것을 박스로 본다 브라우저 렌더링 엔진은 HTML 요소를 화면에 그릴 때 모든 것을 직사각형 박스로 처리합니다. 텍스트든, 이미지든, 심지어 둥근 버튼이든...
-
시리즈1.CSS 기본 원리와 렌더링 이해-2편.CSS 기본 개념-선택자부터 단위까지 완벽 정리
지난 글에서 브라우저가 CSS를 어떻게 렌더링하는지 알아봤습니다. HTML 파싱 → DOM 생성 → CSSOM 생성 → Render Tree → Layout → Paint → Composite 위와 같이 6단계 파이프라인을 통해 CSS가 화면에 그려진다는 것을 확인했습니다. 이제 CSS를 실제로 작성할 때 꼭 알아야 할 기본 개념들을 깊이 있게 살펴보겠습니다. 선택자는 어떻게 동작하고,...