클라이밍하는 개발자

웹 브라우저는 단순히 HTML 텍스트를 받아오는 것에서 끝나지 않습니다. 우리가 보는 네이버, 구글 같은 멋진 화면은 브라우저 렌더링(Browser Rendering)이라는 복잡한 과정을 통해 만들어집니다. 이 과정을 전문 용어로 CRP (Critical Rendering Path)라고 부르며, 프론트엔드 개발자에게는 성능 최적화의 핵심 포인트이기도 합니다.🏗️ 1. 설계도 분석 (Parsing: DOM & CSSOM)브라우저는 HTML과 CSS를 읽어 트리(Tree) 구조로 변환합니다.DOM (Document Object Model): HTML 태그들을 분석해 페이지의 뼈대를 만듭니다.예: 안에 가 있고, 그 안에 가 있구나. (집의 구조)CSSOM (CSS Object Model): CSS를 분석..

웹 브라우저가 주소창에 www.google.com을 입력했을 때 어떤 일이 벌어질까요?DNS로 서버 위치를 알아내고, TCP로 연결을 맺은 뒤, 이제 본격적인 대화가 시작됩니다. 바로 HTTP 통신입니다. 🍽️ 식당에 비유하는 HTTPHTTP(HyperText Transfer Protocol)는 브라우저와 서버가 서로 대화하는 약속된 언어입니다.마치 식당에서 손님(브라우저)이 주문서를 내밀고, 서버(주방)가 음식을 만들어 내어주는 과정과 똑같습니다. 1. 주문서 넣기: HTTP 요청 (Request)브라우저는 원하는 것을 아주 구체적으로 적어 서버에 전달합니다. 이것이 Request Message입니다.GET / HTTP/1.1Host: www.google.comUser-Agent: Mozilla/5...

지난 시간에는 DNS를 통해 구글 서버의 집 주소(IP)를 알아냈습니다.하지만 주소를 알았다고 해서 곧바로 용건부터 말하는 건 실례겠죠. 상대방이 대화할 준비가 되었는지 확인하고, 서로 인사부터 나누는 과정이 필요합니다. 네트워크에서는 이 과정을 TCP 3-way Handshake라고 부릅니다.📞 전화 통화로 이해하는 TCP HandshakeTCP 연결 과정은 우리가 전화를 거는 상황과 아주 비슷합니다.SYN – (따르릉) "여보세요? 내 목소리 들려?"SYN/ACK – "어, 잘 들려! 너도 내 목소리 들리니?"ACK – "응, 잘 들려! 이제 본론 시작하자."이렇게 서로 듣고 말할 수 있다는 것이 확인되어야 비로소 연결(Connection)이 성립됩니다.🛠️ 기술적인 동작 과정실제 네트워크에서는 ..

개발자 면접을 준비해 본 분이라면 한 번쯤 들어봤을 질문이 있습니다."브라우저 주소창에 URL을 입력하고 엔터를 쳤을 때, 화면이 나오기까지의 과정을 설명해 보세요."이 질문이 '면접의 바이블'처럼 여겨지는 이유는 단순합니다.겉보기엔 간단한 동작이지만, 그 안에는 네트워크, 서버, 브라우저 렌더링 등 웹 개발의 핵심 원리가 모두 담겨 있기 때문이죠. 이 과정을 제대로 설명할 수 있다면, 웹의 큰 그림을 이해하고 있다는 증거가 됩니다.오늘은 그 긴 여정의 첫 관문, 바로 DNS(Domain Name System)에 대해 알아보겠습니다.1. 컴퓨터는 영어를 모른다 (IP와 도메인)브라우저가 구글 서버를 찾아가기 위해서는 서버의 위치인 IP 주소가 필요합니다.예를 들어 142.250.217.78 같은 숫자 형..

멀티 태스킹 시스템의 한계에 대해서 설명해주세요.백엔드와 관련된 질문이에요.멀티 태스킹 시스템을 사용하더라도 아래와 같은 문제점이 남아 있습니다.하나의 프로세스가 동시에 여러 작업을 수행하지 못함여러 프로세스를 생성하여 문제를 해결할 수는 있으나, 프로세스가 많아지면 관리와 자원 소모 측면에서 여러 가지 단점이 발생합니다.무거운 프로세스 간 컨텍스트 스위칭컨텍스트 스위칭은 CPU가 한 프로세스에서 다른 프로세스로 전환할 때 발생하며, 이 작업은 상대적으로 무겁고 비용이 큽니다.프로세스 간 데이터 공유의 어려움각 프로세스는 독립적인 메모리 공간을 사용하기 때문에, 서로 다른 프로세스 간에 데이터를 공유하는 것이 까다롭습니다.스레드(Thread)의 등장과 특징이러한 문제점을 해결하기 위해 등장한 것이 스레드..

리액트에서 변수 관리 시 useRef를 사용하는 것은 let을 사용하는 것과 어떤 차이가 있나요?프론트엔드와 관련된 질문이에요.useRef()와 let의 가장 큰 차이점은 리렌더링 시의 동작방식입니다.let으로 선언한 변수는 컴포넌트가 리렌더링될 때마다 초기화되어서 이전 값을 잃어버리는 반면, useRef()로 만든 변수는 리렌더링되어도 값이 유지됩니다. 더불어 useRef()는 useState()와 다르게 상태 값이 변경되어도 컴포넌트가 리렌더링이 유발되지 않는다는 특징이 있습니다.실제 사용 사례를 보면, useRef()는 주로 DOM 요소에 접근할 때 사용합니다. 예를 들어 input에 focus를 주거나 스크롤 위치를 조정하는 경우에 ref를 활용합니다.그리고 useRef()는 setTimeout(..

단일 프로세스 시스템에 대해서 설명해주세요.백엔드와 관련된 질문이에요.단일 프로세스 시스템은 한 번에 하나의 프로그램만 실행합니다. 또 다른 프로그램을 실행하려면, 먼저 실행 중이던 프로그램을 종료시키고 그 다음 프로그램을 실행해야 합니다.단일 프로세스의 단점은 무엇이고 어떻게 개선할 수 있나요?CPU 사용률이 좋지 않습니다. 프로세스가 CPU를 사용하는 작업을 처리하다가, IO 작업을 하게 되면 CPU는 그 때 마다 아무런 일을 하지 않는 상태로 대기합니다. 이 문제를 개선하기 위해 멀티 프로그래밍을 사용할 수 있습니다.멀티 프로그래밍은 단일 프로세스 시스템과 달리 하나의 프로세스가 IO 작업을 하게 되어 대기하게 되면, 다른 프로세스가 실행되어 CPU가 아무 일도 하지 않는 시간을 줄입니다. 멀티 프..

🔐 인증과 인가: 웹 보안의 핵심 개념프론트엔드 개발하면서 로그인 기능 구현할 때 꼭 알아야 할 인증과 인가에 대해 알아보겠습니다! 😊🆔 인증 (Authentication) - "너 누구야?"일상 예시로 이해하기인증은 신분증 확인과 같아요! 🪪클럽 입장할 때 신분증으로 본인 확인은행에서 통장 만들 때 신원 검증아파트 출입할 때 주민 확인다양한 인증 방식 🔑비밀번호 기반: 가장 기본적인 방식생체 인증: 지문, 얼굴 인식OTP: 문자나 앱으로 받는 일회성 번호MFA: 여러 방식을 조합한 다중 인증소셜 로그인: 구글, 카카오 등 OAuth 🚪 인가 (Authorization) - "너 들어가도 돼?"일상 예시로 이해하기인가는 출입 권한 확인이에요! 🎫영화관에서 티켓 확인 (VIP석 vs 일반석)회..

📞 회선 교환 방식 (Circuit Switching)일상 예시로 이해하기회선 교환은 옛날 유선 전화를 생각하면 쉬워요! 📞전화를 걸면 교환원이 두 사람을 연결하는 전용 선로를 만듦통화하는 동안 그 선로는 오직 두 사람만 사용 가능통화가 끝나면 선로 연결 해제특징 ✨안정적인 속도: 전용 도로처럼 일정한 품질 보장예측 가능한 지연시간: 항상 같은 경로 사용자원 낭비: 대화하지 않는 순간에도 선로 점유연결 설정 시간: 통화 전 연결 과정 필요 📦 패킷 교환 방식 (Packet Switching)일상 예시로 이해하기패킷 교환은 택배 시스템과 비슷해요! 📦큰 물건을 여러 박스로 나누어 발송각 박스마다 주소 라벨 (헤더) 부착각 박스는 다른 경로로 배송 가능목적지에서 모든 박스를 모아 원래 물건으로 조립특..

Content-Type 헤더란? 📨 데이터 타입을 알려주는 중요한 표지판Content-Type의 기본 개념 📋Content-Type 헤더는 HTTP 요청과 응답에서 전송되는 데이터의 타입을 명시하는 헤더예요! 📮일상 예시로 이해해보기 📦택배 상자에 "깨지기 쉬움", "냉동보관" 같은 표시를 붙이는 것처럼HTTP 데이터에도 "이건 JSON이에요", "이건 이미지예요" 라고 알려주는 표지판이 Content-Type이에요!받는 사람(서버/브라우저)이 올바르게 처리할 수 있도록 도와줘요 🎯주요 Content-Type 종류 📝텍스트 기반 데이터 ✍️text/html - HTML 문서text/css - CSS 파일 text/javascript - JavaScript 파일text/plain - 일반 텍스..