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..

영속성 전이(Cascade)와 고아 객체 제거(OrphanRemoval) JPA를 사용하다 보면, 연관된 엔티티도 함께 저장하거나 삭제하고 싶을 때가 많습니다. 예를 들어, 게시글(Post)을 저장하면서 댓글(Comment)도 함께 저장하려면 어떻게 해야 할까요?이럴 때 사용하는 기능이 바로 이것입니다.Cascade (영속성 전이) : 연관 엔티티에 대한 생명주기 자동 전파OrphanRemoval (고아 객체 제거) : 부모 객체와의 관계가 끊어진 자식 엔티티 자동 삭제 1. 영속성 전이(Cascade)란?부모 엔티티의 상태 변화(Persist, Merge, Remove 등)가 자식 엔티티에 전파되도록 하는 기능입니다.예를 들어, 부모 객체를 저장할 때, 연관된 자식 객체도 자동으로 저장되게 하려면 ..

JPA의 관계 매핑 JPA는 객체 간의 연관 관계(association)를 데이터베이스의 외래 키 관계로 변환해주는 기능을 제공합니다. 객체지향에서는 필드 참조로 관계를 표현하고, 데이터베이스에서는 외래 키(Foreign Key)로 표현하죠. 이 둘을 매끄럽게 연결해주는 것이 바로 JPA의 관계 매핑(association mapping)입니다.이 글에서는 1:1, 1:N, N:1, N:N 관계의 표현 방식과 주의사항, 실전 팁까지 모두 알아봅시다. 1. 왜 관계 매핑이 중요한가?객체 지향 프로그래밍에서는 객체 간의 참조(Reference) 를 사용하지만, 관계형 데이터베이스에서는 외래 키(Foreign Key) 를 사용해 관계를 표현합니다.즉, 다음과 같은 차이가 존재합니다. 객체 지향 세계 관계형 ..

JPA(Java Persistence API) JPA(Java Persistence API)는 자바 애플리케이션에서 데이터베이스와의 상호작용을 단순하고 직관적으로 만들어주는 ORM 기술입니다. 복잡한 SQL을 직접 작성하지 않아도 객체 중심의 프로그래밍을 통해 데이터베이스를 다룰 수 있게 해주며, 유지보수성과 생산성을 높여줍니다. 이 글에서는 JPA의 기본 개념부터 핵심 동작 원리, 주요 어노테이션, 실전 예제까지 한 번에 정리해보겠습니다. 1. JPA란 무엇인가?JPA(Java Persistence API)는 Java 애플리케이션에서 관계형 데이터베이스를 객체 지향적으로 다룰 수 있도록 도와주는 표준 API입니다. 즉, 복잡한 SQL문 없이도 객체를 DB 테이블에 매핑하고, 저장하고, 조회할 수 있게..

ORM(Object-Relational Mapping) 백엔드 개발을 하다 보면 객체 지향 언어와 관계형 데이터베이스(RDB) 사이의 언어 장벽을 실감하게 됩니다. 하나는 객체 기반이고, 다른 하나는 테이블 기반이기 때문이죠. 이 둘의 불일치를 매끄럽게 연결해주는 기술이 바로 ORM(Object-Relational Mapping)입니다. 이 글에서는 ORM의 개념, 장단점, 동작 방식, 그리고 대표적인 ORM 프레임워크를 설명합니다. 1. ORM이란?ORM(Object-Relational Mapping)은 프로그래밍 언어의 객체(Object)와 데이터베이스의 테이블(Row/Column 구조) 사이를 매핑(Mapping)해주는 기술입니다.쉽게 말해, 자바, 파이썬 같은 객체 지향 언어에서 사용하는 클래스..

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)..

시맨틱 태그(Semantic Tag) HTML로 웹 페이지를 만들다 보면 다양한 태그를 사용하게 됩니다. 이때 단순히 div나 span 같은 태그만을 사용한다면, 브라우저는 구조를 렌더링할 수 있지만 그 구조가 어떤 의미를 가지는지는 알기 어렵습니다. 시맨틱 태그(Semantic Tag)는 웹 페이지의 구조와 의미를 명확하게 정의해 주며, 검색 엔진 최적화(SEO), 접근성, 유지보수 측면에서도 큰 장점을 제공합니다. 이번 글에서는 시맨틱 태그의 정의와, 필요성, 그리고 어떻게 활용하는지를 알아보겠습니다. 1. 시맨틱 태그란?시맨틱(Semantic)이란 단어는 "의미 있는"이라는 뜻을 가집니다. 시맨틱 태그는 이름 그대로 태그 자체에 의미가 담겨 있는 HTML 태그를 말합니다.예를 들어, 는 어떤 내용..