Dachae's DevLogs

DOM과 가상 DOM 웹 페이지는 사용자의 상호작용에 따라 콘텐츠가 실시간으로 바뀌는 경우가 많습니다. 이런 변화는 브라우저가 DOM(Document Object Model)을 내부적으로 조작하는 방식으로 일어납니다. 하지만 DOM은 생각보다 무겁고 느릴 수 있기 때문에, 이를 최적화하기 위한 아이디어로 가상 DOM(Virtual DOM) 이 등장했습니다.이 글에서는 실제 DOM과 가상 DOM이 무엇인지, 어떻게 다르고, 왜 필요한지를 자세히 설명합니다. 1. DOM이란 무엇인가?DOM(Document Object Model) 은 HTML 문서를 브라우저가 구조화한 트리 형태의 객체 모델입니다. 자바스크립트는 이 DOM을 이용해 웹 페이지의 내용을 동적으로 제어할 수 있습니다.예시 : Hello자바스크..

브라우저 동작 원리 웹 브라우저의 주소창에 https://www.example.com과 같은 URL을 입력했을 때, 그 단순한 동작 뒤에는 수많은 복잡한 일이 일어납니다. 이 과정을 이해하면 HTTP, DNS, 브라우저 렌더링 등 핵심 웹 기술들의 동작 원리를 자연스럽게 익힐 수 있습니다. 이 글에서는 사용자가 주소창에 URL을 입력한 순간부터 웹사이트가 화면에 나타나기까지 어떤 일들이 발생하는지 단계별로 설명합니다. 1. URL 분석 및 구성 요소 분해먼저 브라우저는 사용자가 입력한 URL (Uniform Resource Locator) 을 분석합니다.예시 URL : https://www.example.com:443/path/index.html?search=query#sectionhttps – 프..

WebSocket과 WebRTC 웹에서 실시간 기능을 구현하려면 가장 먼저 떠오르는 기술이 WebSocket과 WebRTC입니다. 이 둘은 모두 실시간을 지원하지만, 사용하는 목적과 동작 방식이 크게 다릅니다.이 글에서는 WebSocket과 WebRTC의 개념, 차이점, 사용 목적, 기술적 특징을 비교해보고, 실제로 어떤 상황에서 어떤 기술을 선택해야 하는지에 대한 가이드를 제공합니다. 1. WebSocket과 WebRTC a. WebSocketWebSocket은 서버와 클라이언트 간의 지속적인 연결을 유지하며, 양방향으로 데이터를 주고받을 수 있게 해주는 프로토콜입니다. HTTP 요청처럼 요청-응답 방식이 아니라, 연결 한 번으로 실시간 송수신이 가능하다는 점이 가장 큰 특징입니다.주로 실시간 채팅,..

WebRTC 화상 회의, 음성 채팅, 실시간 화면 공유 같은 기능을 웹에서 구현하고 싶다면? 그럴 때 사용하는 기술이 바로 WebRTC입니다.WebRTC는 브라우저와 브라우저 간에 서버를 거치지 않고도 직접 통신이 가능하게 해주는 P2P(피어 투 피어) 기반의 실시간 통신 기술입니다. 단일한 통신 프로토콜이라기보다는, 실시간 미디어 전송을 위해 STUN, TURN, SRTP, ICE 등 여러 네트워크 프로토콜을 조합한 기술 스택 또는 통신 프레임워크에 가깝습니다.이 글에서는 WebRTC의 개념, 동작 구조, 실제 예제, 그리고 WebSocket과의 차이까지 개발자가 쉽게 이해할 수 있도록 정리해드립니다. 1. WebRTC란?WebRTC(Web Real-Time Communication)는 웹 브라우저..

WebSocketHTTP로는 실시간 채팅, 알림 서비스 등을 구현하기 어렵다는 얘기를 들어본 적 있으신가요? 그럴 때 등장하는 기술이 바로 WebSocket입니다. WebSocket은 웹에서 클라이언트(브라우저)와 서버가 끊기지 않는 연결 상태를 유지하며 양방향으로 실시간 통신할 수 있게 해주는 프로토콜입니다.이 글에서는 WebSocket의 기본 개념, HTTP와의 차이점, 동작 방식, 예제 코드, 활용 사례까지 정리해드립니다. 1. WebSocketWebSocket은 클라이언트와 서버 간에 지속적인 양방향 통신이 가능한 프로토콜입니다. 초기 연결은 HTTP로 시작되지만, 이후 WebSocket 프로토콜로 업그레이드되어 풀-듀플렉스 통신을 제공합니다.WebSocket과 HTTP, 뭐가 다른가요?항목HT..

DNS(Domain Name System) 브라우저에 www.naver.com을 입력하면 어떻게 정확한 서버에 연결될 수 있을까요? 이 과정의 핵심에는 DNS(Domain Name System)가 있습니다. DNS는 사람이 기억하기 쉬운 도메인 이름을, 컴퓨터가 이해할 수 있는 IP 주소로 바꿔주는 시스템입니다.이 글에서는 DNS의 기본 개념, 작동 원리, 종류, 캐싱, 그리고 개발자가 알아야 할 핵심 포인트를 정리해드립니다. 1. DNS란?DNS(Domain Name System)는 www.example.com 같은 도메인 이름을 93.184.216.34 같은 IP 주소로 변환해주는 시스템입니다.왜 필요한가요?사람은 IP 주소보다 도메인 이름을 기억하기 쉽습니다.인터넷은 실제로는 IP 주소 기반으로 ..

데이터 정렬 웹 애플리케이션을 개발하다 보면 흔히 겪는 고민 중 하나가 바로 "데이터 정렬(sort)은 프론트에서 처리할까, 백엔드에서 처리할까?"입니다. 사용자에게 보여줄 데이터를 어떤 기준으로 정렬할 것인지, 그리고 그 처리를 어느 쪽에서 맡는 것이 더 효율적인지를 이해하는 것은 성능과 사용자 경험 모두에 큰 영향을 미칩니다. 1. 데이터 정렬이란?데이터 정렬이란 특정 기준(예: 이름순, 날짜순, 가격순 등)에 따라 데이터를 오름차순 또는 내림차순으로 배열하는 작업입니다. 흔히 사용하는 예시는 아래와 같습니다.게시글 목록을 최신순으로 정렬상품 리스트를 가격순으로 정렬사용자 목록을 이름순으로 정렬정렬은 단순해 보이지만, 처리 위치에 따라 시스템 성능과 사용자 경험에 큰 차이를 만들 수 있습니다. 2...

MutationObserver 현대 프론트엔드 프레임워크는 대부분 가상 DOM을 통해 효율적인 UI 업데이트를 제공합니다. 하지만 가상 DOM만으로는 감지할 수 없는 직접적인 DOM 변경도 존재합니다. 예를 들어,외부 라이브러리(jQuery, D3 등)가 DOM을 직접 조작할 때슬롯(slot)이나 iframe처럼 프레임워크 외부에서 변경이 일어날 때사용자 입력이나 비동기 처리로 DOM 구조가 바뀔 때이럴 때 사용할 수 있는 도구가 바로 MutationObserver입니다.이 글에서는 MutationObserver의 기본 개념부터 Vue, React에서 실전 적용하는 방법까지 자세히 다뤄보겠습니다. 1. MutationObserver란?MutationObserver는 브라우저가 제공하는 표준 Web AP..

Access Token과 Refresh Token JWT 기반 인증 시스템에서 가장 많이 나오는 개념 중 하나가 바로 Access Token과 Refresh Token입니다. 이 두 토큰은 모두 인가(Authorization)와 관련이 있지만 역할과 사용 목적이 분명히 다릅니다.이 글에서는 Access Token과 Refresh Token의 차이, 각각의 동작 방식, 사용 예제와 함께 보안적으로 어떻게 구성해야 하는지까지 자세히 설명합니다. 1.  Access Token이란?Access Token은 사용자가 인증된 상태임을 증명하는 토큰으로, 실제 API 요청 시 서버에 전달되는 인증 정보입니다.특징보통 JWT 형식으로, 사용자 ID, 권한, 만료 시간 등의 정보 포함유효 시간이 짧아 탈취되더라도 피해 ..

JWT - Header, Payload, Signature  JWT(JSON Web Token)는 사용자 인증과 권한 부여를 위한 대표적인 토큰 기반 방식입니다. 많은 개발자들이 JWT를 사용하면서도 "헤더, 페이로드, 서명이 각각 무슨 역할을 하는지"는 모호하게 아는 경우가 많습니다.이 글에서는 JWT를 구성하는 세 요소인 Header, Payload, Signature를 하나씩 뜯어보며, 구조, 역할, 보안상의 유의점까지 완벽하게 이해할 수 있도록 설명합니다. 1.  JWT의 전체 구조JWT는 .으로 구분된 세 개의 문자열로 구성됩니다...eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9. ← HeadereyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkFsaWNl..

JWT (JSON Web Token) 웹 애플리케이션에서 로그인 후 사용자 인증 상태를 어떻게 유지할까요? 세션? 쿠키? 이 외에도 현대적인 방식으로 널리 사용되는 것이 바로 JWT(JSON Web Token)입니다.이 글에서는 JWT의 구조, 동작 원리, 장단점, 그리고 실제 코드 예제까지 포함하여, 실전에서 JWT를 활용할 수 있도록 체계적으로 정리합니다.  1.  JWT란?JWT(JSON Web Token)는 사용자의 인증 정보를 JSON 형식으로 안전하게 전달하기 위한 토큰 기반 인증 방식입니다.서버는 사용자가 로그인에 성공하면 JWT를 생성해 클라이언트에 전달하고, 클라이언트는 이후 요청마다 이 토큰을 HTTP 헤더에 담아 서버에 전송합니다. 서버는 이 토큰을 검증해 사용자 인증을 처리합니다.J..

OSI 7계층과 TCP/IP 4계층 네트워크 통신이 어떻게 이루어지는지를 체계적으로 설명하기 위해 등장한 개념이 바로 OSI 7계층 모델과 TCP/IP 4계층 모델입니다. 이 글에서는 각 계층의 역할과 주요 프로토콜, 그리고 두 모델 간의 관계를 시각적으로 정리해드립니다. 개발자, 시스템 관리자, 보안 엔지니어 등 모두에게 필수 개념입니다. 1. OSI 7계층이란?OSI(Open Systems Interconnection) 7계층 모델은 국제표준화기구(ISO)에서 만든 이론적인 통신 모델로, 통신을 7단계로 나누어 각 계층이 특정 기능만을 담당하도록 구조화한 것입니다.OSI 7계층 정리계층이름설명예시 프로토콜 / 기술7응용 계층 (Application)사용자와 가장 가까운 계층, 앱 수준 통신HTTP,..

TCP(Transmission Control Protocol) 와 UDP(User Datagram Protocol) 웹 브라우저로 웹사이트를 열든, 화상 회의를 하든, 온라인 게임을 하든 인터넷에서 데이터가 전송되는 방식에는 반드시 전송 계층 프로토콜이 필요합니다. 그 중심에 있는 두 가지 방식이 바로 TCP와 UDP입니다.이 글에서는 TCP와 UDP의 구조와 차이점, 각각의 장단점, 그리고 언제 어떤 프로토콜을 선택해야 하는지를 자세히 설명합니다. 1. 전송 계층이란?OSI 7계층 모델의 4번째 계층인 전송 계층(Transport Layer)은 컴퓨터 간 데이터 전송의 신뢰성과 순서를 보장하는 역할을 합니다.여기서 대표적으로 사용하는 두 가지 프로토콜은 아래와 같습니다.TCP (Transmission..

HTTP와 HTTPS 브라우저 주소창을 보면 어떤 웹사이트는 http:// 로 시작하고, 어떤 곳은 https:// 로 시작합니다. 둘 다 웹 페이지를 여는 데 사용되지만, 실제로는 웹의 보안성과 신뢰성에 매우 큰 차이가 있습니다.이 글에서는 HTTP와 HTTPS의 구조적 차이, 왜 HTTPS를 써야 하는지, 그리고 SSL/TLS와 인증서의 역할까지 자세히 설명합니다. 1. HTTP란?HTTP (HyperText Transfer Protocol) 는 웹에서 클라이언트(브라우저)와 서버가 문서, 이미지, 데이터 등을 주고받기 위한 표준 프로토콜입니다.가장 큰 특징은 텍스트 기반이며, 암호화되지 않은 상태로 데이터를 주고받는다는 점입니다.예시 : HTTP 요청GET /login HTTP/1.1Host: e..

프로토콜(Protocol) 인터넷은 어떻게 서로 다른 컴퓨터끼리 정보를 주고받을 수 있을까요? 브라우저에서 주소를 입력하면 어떻게 웹사이트가 열릴까요? 그 모든 과정의 중심에는 바로 프로토콜(Protocol)이라는 개념이 있습니다.이 글에서는 컴퓨터 네트워크에서 사용되는 프로토콜의 개념과 역할, 종류와 예시, 그리고 개발자가 꼭 알아야 할 핵심 프로토콜에 대해 쉽게 정리해보겠습니다. 1. 프로토콜(Protocol) 이란?프로토콜은 네트워크에서 데이터를 송수신하기 위한 규칙과 약속을 의미합니다. 사람이 언어를 통해 소통하듯, 컴퓨터나 장치들도 데이터를 주고받기 위해 공통된 규칙이 필요합니다.쉽게 말해, "같은 규칙으로 말하고 듣자"는 것이 프로토콜의 핵심입니다.일상 속 비유 : 전화 통화의 예전화가 울리면..