카테고리 없음

0227 웹

getfeelingsfrom 2026. 3. 5. 15:54

웹 검색의 진화: 키워드에서 의미로

  • 기존 키워드 검색 (Syntactic Search)
    • 단순 문자열 일치(Key Matching) 방식
    • 문맥 파악 불가능 (예: '타는 차'와 '마시는 차'를 구분하지 못함)
  • 시맨틱 웹 (Semantic Web)
    • 로봇이나 AI가 웹 페이지의 내용을 사람처럼 이해하도록 구성
    • 의미론적 파싱(Semantic Parsing)이 가능하도록 메타데이터를 부여한 지능형 웹

웹 구성의 3요소와 역할 분담

  • HTML (Structure & Content)
    • 문서의 뼈대와 계층 구조 설정
    • 데이터와 내용 그 자체를 담는 역할
  • CSS (Style)
    • 레이아웃 배치 및 시각적 스타일링
    • HTML로부터 디자인 영역을 분리하여 재활용성 높임
  • JS (Interaction)
    • 사용자의 동작에 반응하는 동적 제어
    • 웹 페이지에 생동감을 부여하는 상호작용 담당

웹 기술의 세대 변화 및 특징

  • 1세대 웹
    • 데이터와 스타일이 혼재된 형태
    • 코드의 재활용성이 낮고 관리가 어려움
  • 현대적 구조
    • HTML(구조), CSS(배치), JS(제어)의 명확한 역할 분리
    • 트리 구조 기반의 HTML 파일 운용

웹 자원 활용 및 네트워크 기초

  • CDN (Content Delivery Network)
    • 외부 웹 서버에 저장된 자원(예: W3.css)을 네트워크를 통해 실시간으로 호출
    • 라이브 서버가 외부 CDN 서버에 접속하여 라이브러리를 가져오는 방식
  • 주소 체계와 프로세스
    • URL: 브라우저에서 자원 위치를 확인하는 주소 형식 (http://...)
    • IP 주소: 127.0.0.1 (localhost, 본인 컴퓨터를 지칭)
    • Port: 컴퓨터 내에서 특정 서비스나 프로세스를 식별하는 번호

전송 프로토콜: TCP vs UDP

  • TCP (Transmission Control Protocol)
    • 연결 지향형: 데이터를 보내기 전, 상대방이 받을 준비가 되었는지 먼저 확인
    • 연결 과정 (Connection): 통신 전 상호 동의 하에 연결을 설정하는 단계
    • 안전성 확보: 패킷 유실 시 재전송을 요청하며, 데이터의 전달 순서와 신뢰성을 보장
    • 세션 관리: 서버와 클라이언트 사이에서 연결을 수립(Establish)하고 해지(Terminate)하는 전체 과정을 직접 제어
  • UDP (User Datagram Protocol)
    • 비연결형: 사전 확인 과정(Connection) 없이 데이터를 일방적으로 전송
    • 속도 우선: 확인 절차가 생략되어 TCP보다 빠르지만, 데이터의 도착 여부를 보장하지 않음
    • 주요 용도: 실시간 스트리밍이나 온라인 게임처럼 신뢰성보다 연속적인 속도가 중요한 서비스에 활용
    •  

 

요청 단위와 주체

  • 목록에 보이는 각 행(Name)은 클라이언트(브라우저)가 웹 서버에 보낸 개별적인 요청을 의미함
  • 브라우저가 페이지를 온전하게 띄우기 위해 필요한 자원들을 하나씩 서버에 호출한 결과임

Client ↔ Web Server(CDN) 상호작용

  • 요청 주체: 사용자 기기의 브라우저(Client)
  • 요청 대상: - 로컬 서버: 127.0.0.1:5500 주소의 본인 PC 내부 서버 (day02.html 등)
    • 외부 CDN: w3.css와 같이 외부 경로로 지정된 라이브러리 서버

웹 자원의 공개성 (Public Accessibility)

  • 접근 권한의 필요성
    • 브라우저(Client)가 특정 URL을 통해 HTML, CSS, JS를 요청할 때, 서버는 이 요청을 거부하지 않고 파일을 내어줄 수 있어야 함
    • 따라서 웹 서비스에 사용되는 정적 자산(Static Assets)은 기본적으로 Public(공개) 상태로 설정되어야 브라우저가 읽어갈 수 있음
  • 파일별 공개 역할
    • HTML: 브라우저가 전체 구조를 파악하기 위해 가장 먼저 공개적으로 수신해야 하는 문서
    • CSS: 브라우저가 화면을 그리기(Rendering) 위해 누구나 다운로드할 수 있는 경로에 존재해야 함
    • JS: 사용자의 브라우저 환경에서 실행되어야 하므로, 서버가 클라이언트에 코드를 공개적으로 전달해야 함
  • 보안 및 제한 (Private vs Public)
    • 서버 내부의 기밀 데이터나 DB 접속 정보는 Private 영역에 숨겨두어야 함
    • 반면, 사용자에게 보여지는 화면을 구성하는 HTML/CSS/JS는 Public 영역(주로 public 또는 static 폴더)**에 위치시켜 브라우저의 접근을 허용함
  • CDN 활용의 전제 조건
    • 외부 라이브러리(예: W3.css)를 가져다 쓰는 이유도 해당 파일이 전 세계 어디서든 접근 가능한 Public URL을 가지고 있기 때문임
    • 만약 해당 파일이 권한이 필요한 Private 상태라면 브라우저는 이를 로드하지 못하고 에러를 발생시킴

 

CSS 박스 모델 (Box Model)

  • 구성 요소
    • Content: 요소의 실제 내용이 담기는 영역
    • Padding: 내용(Content)과 테두리(Border) 사이의 안쪽 여백
    • Border: 요소의 테두리 (경계선)
    • Margin: 테두리 밖의 공간으로, 다른 요소와의 거리를 조절하는 바깥 여백

HTML 요소의 표시 방식 (Display)

  • Block 요소 (<div>)
    • 특징: 내용의 유무와 상관없이 가로 한 줄 전체를 차지하는 성격
    • 수직 쌓임: 다음 요소는 무조건 아래 줄에 배치됨
    • 영역 확보: 내용이 없더라도 높이(height)나 너비(width)를 지정하면 그만큼의 영역을 차지함
  • Inline 요소 (<span>)
    • 특징: 딱 내용의 크기만큼만 영역을 차지하는 성격
    • 수평 쌓임: 가능한 한 같은 줄에 나란히 배치됨 (예: B, B1, B2가 한 줄에 출력)
    • 제한: width나 height 값을 직접 주어도 영역이 변하지 않는 경우가 많음
        <div>A</div> <!--block 요소-->
        <span>B</span><span>B1</span><span>B2</span>
        <div>c</div>

이벤트 기반 프로그래밍 (Event-Driven Programming)

  • 컴포넌트 (Component)
    • 사용자가 실행 도중 GUI(그래픽 사용자 인터페이스) 기반으로 요구사항을 발생시킬 수 있는 요소
    • 웹 환경에서는 주로 '폼(Form)' 또는 버튼, 입력창 등의 컨트롤을 의미함
  • 이벤트 소스 (Event Source)
    • 실제 이벤트가 시작되는 지점
    • 사용자가 클릭하거나 입력하는 행위를 통해 이벤트를 발생시키는 폼 요소 그 자체
  • 이벤트 (Event)
    • 시스템 내에서 일어나는 유의미한 사건 (예: click, submit, keyup, mouseover 등)
  • 콜백 함수 (Callback Function)
    • 특정 이벤트가 발생했을 때 자동으로 호출되도록 예약된 함수
    • "이 이벤트가 터지면(Trigger) 이 코드를 실행해줘"라고 시스템에 미리 전달해두는 역할

웹에서의 동작 흐름

  1. 준비: 개발자가 특정 컴포넌트(이벤트 소스)에 콜백 함수를 연결함 (Event Listener 등록)
  2. 발생: 사용자가 웹 페이지의 폼 요소를 클릭함 (Event 발생)
  3. 실행: 브라우저가 이를 감지하고 미리 연결된 콜백 함수를 실행하여 사용자 요구사항을 처리함

대표적인 이벤트 속성 (Event Attributes)

  • onclick
    • 이벤트 소스: 버튼, 링크, 이미지 등 클릭 가능한 모든 요소
    • 발생 시점: 사용자가 마우스 왼쪽 버튼으로 해당 요소를 클릭했을 때
    • 주요 용도: 데이터 전송(Submit), 페이지 이동, 팝업 창 열기 등 결정적인 동작 실행
    <h1 onclick="alert('h1클릭');">Footer</h1>
  • onmouseover
    • 이벤트 소스: 마우스 커서가 올라갈 수 있는 모든 영역
    • 발생 시점: 사용자의 마우스 커서가 해당 요소의 영역 안으로 진입했을 때
    • 주요 용도: 툴팁(설명창) 표시, 이미지 확대, 버튼 색상 변경 등 시각적인 피드백 제공
    <img src="public/img/img_car.jpg" onmouseover="alert('이미지클릭');">

스크립트(<script>)의 개념과 역할

  • 정의 및 실행 위치
    • 웹 브라우저가 해석하고 실행할 수 있는 명령문(코드)의 집합체
    • 서버가 아닌 사용자의 브라우저(Client-side)에서 실시간으로 동작함
  • 동적 제어 (Dynamic Control)
    • 정적인 HTML(구조)과 CSS(디자인)에 생동감을 불어넣는 역할
    • 페이지를 새로고침하지 않고도 내용을 바꾸거나, 특정 조건에 따라 화면을 변화시킴
  • 이벤트 대응 (Event Handling)
    • 사용자의 행동(클릭, 마우스 이동, 키보드 입력 등)을 감지하고 그에 맞는 반응을 수행함
    • 함수(Function)를 미리 정의해두고, 특정 사건이 터졌을 때만 실행되도록 예약하는 구조

스크립트의 주요 특징

  • 절차적 실행과 함수 호출
    • 기본적으로 위에서 아래로 순차적으로 읽히지만, function으로 묶인 코드는 호출되기 전까지 대기함
    • 이벤트 속성(예: onclick)을 통해 필요할 때만 특정 코드 블록을 실행함
  • 브라우저 객체 모델(BOM) 활용
    • 브라우저 창 자체를 제어할 수 있는 도구들을 제공함
    • 예: window.alert()는 브라우저 시스템의 알림창 기능을 빌려 쓰는 명령임
  • HTML과의 연결 방식
    • 내부 스크립트: HTML 파일 안에 직접 작성하여 빠른 제어가 가능함
    • 외부 스크립트: 별도의 .js 파일을 만들어 연결하며, 코드의 재사용성과 유지보수성을 높임
 <script>
            function paint_border(){
                
            }
            function remove_border(){
                
            }
</script>

<img src="public/img/img_car.jpg" 
            onmouseenter = "paint_border();"
            onmouseleave = "remove_border();"
>

브라우저의 웹 페이지 해석 과정 (Parsing)

  • 브라우저의 역할
    • 서버로부터 전달받은 텍스트 형태의 .html 소스 코드를 읽어 사람이 볼 수 있는 화면으로 변환
    • 내부적으로 세 가지 핵심 파서(Parser)와 엔진이 협업하여 동작함
  • HTML 파서 (HTML Parser)
    • 역할: HTML 태그를 위에서 아래로 읽으며 문서의 계층 구조를 분석함
    • 결과물: DOM(Document Object Model) 트리를 생성함
    • 특징: 텍스트에 불과한 소스 코드를 브라우저가 이해할 수 있는 객체(Object) 구조로 탈바꿈시킴
  • CSS 파서 (CSS Parser)
    • 역할: <style> 태그나 외부 .css 파일의 스타일 정보를 분석함
    • 결과물: CSSOM(CSS Object Model) 트리를 생성함
    • 특징: 어떤 태그에 어떤 색상, 크기, 여백(Margin/Padding)을 줄지 결정함
  • JS 엔진 (JavaScript Engine)
    • 역할: <script> 태그 안의 자바스크립트 코드를 해석하고 실행함
    • 동작: HTML 파싱 도중 스크립트를 만나면 파싱을 잠시 멈추고 JS 코드를 먼저 실행하기도 함
    • 특징: DOM과 CSSOM을 동적으로 조작하여 화면의 내용을 실시간으로 바꿈

최종 화면 렌더링 (Rendering)

  • 렌더 트리 (Render Tree)
    • HTML 파서가 만든 구조와 CSS 파서가 만든 디자인이 합쳐진 최종 지도
    • 실제 화면에 그려질 요소들만 선별하여 배치함
  • 레이아웃 및 페인트 (Layout & Paint)
    • Layout: 각 요소가 화면의 어느 좌표에 위치할지 계산함
    • Paint: 계산된 위치에 실제 픽셀을 채워 넣어 화면을 그림

자바스크립트의 역할과 진화

  • 기본 구성 요소
    • 기본적인 프로그래밍 문법 + 브라우저 실행 환경
    • DOM(Document Object Model): HTML 구조를 제어하는 도구
    • AJAX: 서버와 데이터를 주고받는 통신 기술
  • 초창기 자바스크립트
    • 웹 페이지의 보조적인 기능(단순 효과 등)을 수행하는 한정적인 용도
    • 대부분의 핵심 로직은 웹 서버에서 실행됨
    • 브라우저는 서버가 완성해서 보내준 HTML/CSS를 단순히 화면에 출력(렌더링)하는 역할에 그침

웹의 패러다임을 바꾼 AJAX

  • 개념
    • Asynchronous JavaScript and XML: 자바스크립트를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환하는 통신 기능
    • 최초에는 XMLHttpRequest라는 객체를 통해 등장함
  • 이전 방식 (Traditional Web)
    • 서버로부터 <html>로 시작해 </html>로 끝나는 전체 페이지 코드를 매번 전송받음
    • 화면이 조금만 바뀌어도 페이지 전체를 처음부터 다시 렌더링함
    • 단점: 불필요한 데이터 통신이 많고 성능에 불리하며, 화면 전환 시 순간적으로 '깜빡이는 현상' 발생
  • AJAX 방식의 등장
    • 서버로부터 전체 페이지가 아닌, 필요한 데이터만 전송받음
    • 페이지 전체가 아닌 변경이 필요한 부분만 한정적으로 렌더링함
    • 장점: 데스크톱 애플리케이션처럼 부드러운 화면 전환과 빠른 성능 구현 가능

자바스크립트의 도약과 생태계 확장

  • jQuery의 등장
    • DOM 제어의 단순화: 까다롭고 복잡했던 DOM 조작을 직관적인 명령어로 처리할 수 있게 됨
    • 크로스 브라우징 해결: 브라우저마다 달랐던 자바스크립트 동작 방식을 통일하여 개발 편의성을 대폭 높임
  • V8 엔진과 웹 애플리케이션의 발전
    • 압도적인 속도: 2008년 구글이 출시한 V8 엔진은 자바스크립트 실행 속도를 혁신적으로 끌어올림
    • UX의 혁신: 데스크톱 프로그램에 밀리지 않는 사용자 경험을 웹에서도 구현 가능해짐
    • 프런트엔드의 부상: 과거 서버에서 처리하던 복잡한 로직들이 브라우저(클라이언트)로 이동하며 프런트엔드 영역이 핵심으로 자리 잡음
  • Node.js: 브라우저를 넘어선 자바스크립트
    • 실행 환경(Runtime)의 독립: V8 엔진을 브라우저 밖으로 꺼내어 어디서든 자바스크립트를 실행할 수 있게 만든 환경임
    • 서버 사이드 개발: 웹 서버 개발에 주로 사용되며, 이를 위한 전용 API를 제공함
    • 비동기 I/O & 단일 스레드: 이벤트 루프 기반으로 동작하여 데이터 요청 처리 성능이 매우 뛰어남
    • 적합성: 데이터 입출력이 빈번한 SPA(Single Page Application)와 실시간 데이터 처리에 최적화되어 있으나, CPU 연산량이 과도한 작업에는 권장되지 않음

범용 프로그래밍 언어로의 정착

  • 범용성 확보
    • Node.js의 등장으로 자바스크립트는 단순 웹 도구를 넘어 전 분야에서 쓰이는 범용 언어가 됨
  • 크로스 플랫폼 활용 분야 (2-5)
    • 웹/모바일: 하이브리드 앱 (PhoneGap, Ionic)
    • 서버: Node.js 기반 서버 애플리케이션
    • 데스크톱: Electron (예: VS Code, Discord 등)
    • 신기술: 머신러닝 (TensorFlow.js), 로보틱스 (Johnny-Five)

'카테고리 없음'의 다른글

  • 현재글0227 웹

티스토리툴바