Quality_Information Shadow DOM이란? 웹 페이지를 개발하다 보면 CSS 클래스 이름이 겹쳐서 스타일이 깨지는 경험을 한 번쯤 해봤을 것이다. 특히 여러 명이 함께 작업하거나 외부 라이브러리를 가져다 쓸 때, 내가 만든 ‘.button’ 스타일이 다른 곳의 ‘.button’과 충돌해버리는 문제가 자주 발생한다. Shadow DOM은 이런 문제를 해결하기 위해 브라우저가 제공하는 기능으로, 특정 DOM 요소 내부에 그림자처럼 독립된 DOM 트리를 … 더 읽기
SameSite 쿠키란 무엇인가 웹 브라우저는 로그인 정보나 세션 값을 쿠키에 저장해 서버와 주고받습니다. 그런데 이 쿠키가 ‘내가 요청하지 않은 사이트’로도 자동 전송된다는 점이 문제입니다. 공격자가 만든 페이지에서 은행 사이트로 요청을 보내면, 브라우저는 별생각 없이 은행 쿠키를 함께 실어 보냅니다. 이것이 CSRF(Cross-Site Request Forgery) 공격의 핵심 원리입니다. SameSite는 이런 상황을 막기 위해 쿠키에 붙이는 속성입니다. 쉽게 … 더 읽기
Virtual DOM의 정의 Virtual DOM(가상 돔)은 실제 브라우저의 DOM을 그대로 흉내 낸 ‘가상의 트리 구조’를 메모리 안에 만들어두는 기술입니다. React는 화면을 그릴 때 실제 DOM을 직접 조작하지 않고, 먼저 자바스크립트 객체로 이루어진 가상의 DOM을 만들고 이를 기준으로 변경 사항을 계산합니다. 쉽게 비유하면, 실제 DOM은 ‘완성된 집’이고 Virtual DOM은 ‘설계 도면’입니다. 집을 고칠 때마다 벽을 부수고 … 더 읽기
Web Worker란 무엇인가 자바스크립트는 기본적으로 싱글 스레드에서 동작합니다. 즉 화면을 그리는 작업, 사용자 클릭을 처리하는 작업, 무거운 연산을 처리하는 작업이 모두 하나의 스레드(메인 스레드)에서 순서대로 실행됩니다. 만약 복잡한 연산이 오래 걸리면 그 시간 동안 화면이 멈추고 버튼도 눌리지 않는 현상이 발생합니다. Web Worker는 이런 문제를 해결하기 위해 브라우저가 제공하는 API로, 메인 스레드와는 별개의 백그라운드 스레드에서 … 더 읽기
RBAC와 ABAC란 무엇인가 서비스가 커지면 ‘누가 무엇을 할 수 있는가’를 관리하는 일이 점점 복잡해진다. 이를 체계적으로 다루는 대표적인 두 가지 모델이 RBAC(Role-Based Access Control)와 ABAC(Attribute-Based Access Control)다. RBAC는 사용자에게 ‘역할(Role)’을 부여하고, 그 역할에 권한을 매핑하는 방식이다. 예를 들어 ‘관리자’ 역할에는 ‘게시글 삭제’ 권한을, ‘일반회원’ 역할에는 ‘게시글 작성’ 권한만 부여하는 식이다. 회사 조직도를 떠올리면 이해하기 쉽다. … 더 읽기
Tree Shaking이란? Tree Shaking은 자바스크립트 번들러(Webpack, Rollup, esbuild 등)가 실제로 사용되지 않는 코드를 찾아내 최종 번들에서 제거하는 최적화 기법입니다. 이름 그대로 나무를 흔들면 마른 잎이 떨어지듯, 코드 전체를 흔들어서 ‘쓰이지 않는 죽은 코드(Dead Code)’만 털어낸다는 의미에서 붙여진 이름입니다. 예를 들어 유틸리티 라이브러리에서 함수 10개 중 2개만 사용한다면, Tree Shaking은 나머지 8개 함수를 번들에서 제외시켜 파일 … 더 읽기
Zero Trust란 무엇인가 Zero Trust(제로 트러스트)는 ‘절대 신뢰하지 말고, 항상 검증하라(Never Trust, Always Verify)’는 원칙을 기반으로 한 보안 아키텍처입니다. 과거 보안 모델은 회사 내부 네트워크에 접속했다는 이유만으로 사용자나 기기를 신뢰하는 ‘성벽형 보안(Castle-and-Moat)’이었습니다. 하지만 이 방식은 성벽 안으로 한 번 침입하면 내부는 무방비 상태가 되는 치명적인 약점이 있었죠. 재택근무와 클라우드 서비스가 보편화되면서 ‘내부 네트워크’라는 경계 자체가 … 더 읽기
Monorepo와 Polyrepo란 무엇인가 여러 프로젝트를 관리하는 방식은 크게 두 가지로 나뉩니다. Monorepo는 하나의 저장소(repository) 안에 여러 서비스나 모듈의 코드를 모두 담는 방식이고, Polyrepo는 서비스나 모듈마다 별도의 저장소를 만들어 독립적으로 관리하는 방식입니다. 예를 들어 프론트엔드, 백엔드, 공용 라이브러리를 각각 다른 깃 저장소로 관리한다면 Polyrepo, 이 세 가지를 하나의 저장소 안에 폴더로 나눠 관리한다면 Monorepo라고 할 수 … 더 읽기
컨시스턴트 해싱(Consistent Hashing)의 개념과 해시 링 동작 원리를 예시로 쉽게 설명하고, 분산 캐시가 노드 변경에도 안정적인 이유를 알아봅니다.
왜 비밀번호를 그냥 저장하면 안 될까 많은 서비스에서 데이터 유출 사고가 발생합니다. 만약 비밀번호를 평문(그대로) 저장했다면, 해커는 별다른 노력 없이 모든 사용자의 비밀번호를 손에 넣게 됩니다. 그래서 비밀번호는 반드시 ‘해시(hash)’라는 방식으로 변환해서 저장해야 합니다. 해시는 원래 값을 알 수 없는 고정 길이의 문자열로 바꾸는 단방향 함수입니다. 예를 들어 ‘1234’라는 비밀번호를 해시하면 ‘a3f5c9…’처럼 전혀 다른 값이 … 더 읽기