지식루프

1. DOM이란 무엇인가요?우리가 웹사이트를 볼 때, 화면에 글자나 사진, 버튼들이 보이죠?이 모든 것들은 HTML 코드로 작성되어 있어요.하지만,브라우저는 HTML을 그대로 보여주는 게 아니라,HTML 코드를 읽어서 '나무 구조(트리 구조)'로 변환해요.이 구조를 바로 DOM(Document Object Model) 이라고 부릅니다.쉽게 말하면"HTML을 브라우저가 이해할 수 있게 만든 나무 모양의 구조"라고 생각하면 됩니다.2. DOM은 어떻게 생겼나요?DOM은 트리 모양으로 생겼어요.HTML 안에 있는 모든 태그(html, head, body, div, h1, p 같은 것들)가각각 DOM 안의 하나하나의 '객체(Object)' 가 됩니다.예를 들어, 이런 HTML이 있다면: ..

API 개념과 웹 개발에서의 역할1. API란 무엇인가API는 Application Programming Interface의 약자로,운영 체제, 애플리케이션, 기타 서비스의 기능이나 데이터에 접근할 수 있도록 도와주는 함수와 절차 모음입니다.소프트웨어 구성요소 간 다리 역할을 하며, 이를 게이트웨이 또는 미들웨어라고 부르기도 합니다.2. API는 왜 중요한가웹 개발자의 일상 업무 상당수는 API를 다루는 일과 관련되어 있습니다.다양한 정보(뉴스, 상품 구매, 소셜 미디어 활동 등)는 API를 통해 전송되고 연결됩니다.웹 개발자가 주로 사용하는 API 유형1. 브라우저(Web) API브라우저에 내장되어 있으며, 복잡한 기능을 단순화하고 고급 기능을 쉽게 구축할 수 있도록 도와줍니다.대표 예시DOM API ..

프레임워크와 라이브러리 차이배경소프트웨어 개발에서 시간 절약과 빠른 구축을 위해 프레임워크와 라이브러리를 사용.이는 이미 해결된 문제를 재사용해 개발 속도를 높이고, 오류를 줄이며, 핵심 기능에 집중할 수 있게 함.둘 다 오픈 소스(누구나 수정 가능) 또는 독점(내부 라이선스 기반)일 수 있음.프레임워크 (Framework): 청사진비유: 목수가 의자를 빠르게 만들기 위해 사용하는 의자 설계도(청사진).정의: 프로그램의 전체 구조와 흐름을 제공하는 틀.특징:프레임워크가 흐름을 제어하며, 개발자는 그 틀 안에서 코드를 작성.독단적(Opinionated): 정해진 방식으로 작업해야 함.예: 웹 개발 프레임워크(Django, Spring)는 HTTP 요청/응답 처리 등 공통 기능을 제공.개발자는 프레임워크가 ..

🌐 웹 브라우저의 작동 원리: 어떻게 콘텐츠가 화면에 보일까?1. 웹 브라우저란 무엇인가?웹 브라우저(browser): 인터넷(World Wide Web)을 탐색할 수 있게 해주는 소프트웨어 애플리케이션이다.Chrome, Safari, Edge, Firefox 등이 대표적.사용자는 브라우저를 통해 웹사이트 주소를 입력하고 원하는 정보를 얻는다.2. 웹 브라우저의 핵심 역할요청(Request): 사용자가 입력한 URL을 바탕으로 웹 서버에 요청을 보냄응답(Response): 서버로부터 HTML, CSS, JS 등의 웹 콘텐츠 데이터를 받아옴렌더링(Rendering): 받은 데이터를 사용자의 화면에 보기 좋은 형태로 시각적으로 표시3. URL의 구성웹사이트 주소(URL)는 다음과 같은 구성요소로 되어 있다..

1. 웹 페이지 vs 웹 사이트웹 페이지: 텍스트, 이미지, 비디오 등을 표시하는 하나의 문서.웹 사이트: 여러 웹 페이지가 서로 연결된 페이지 모음.예: 백과사전 사이트의 홈페이지 → 여러 기사로 연결된 링크 → 각 링크는 다른 웹 페이지 → 모두 같은 주소를 공유하면 하나의 웹 사이트로 간주.2. 인터넷과 웹의 규모수천만 개의 웹사이트가 존재.매일 수십만 개의 웹사이트가 새로 생김.인터넷의 웹페이지 수는 어마어마하며, 전부 다운로드하는 데 수백만 년 걸릴 수준.3. 웹 페이지의 구성 요소 (3대 핵심 기술) 예시: 로그인 입력 오류 표시, 비디오 스트리밍 중 실시간 추천 등은 JavaScript 덕분.4. 웹 페이지 작동 방식 (렌더링 흐름)웹 브라우저 요청 → 웹 서버는 HTML, CSS, JS ..

서버란?서버는 웹사이트, 메신저 등 다양한 서비스를 실행하는 컴퓨터이다.클라이언트(사용자 디바이스)에 서비스를 제공하므로 서버(server)라고 부른다.서버의 위치: 데이터 센터대부분의 서버는 데이터 센터라는 곳에 설치된다.데이터 센터는 수백~수천 대의 서버를 보관하며, 24시간 전원, 인터넷 연결, 냉각 시스템 등을 갖춘 인프라이다.전 세계에 분산되어 있어, 사용자에게 가장 가까운 서버에서 빠르게 콘텐츠를 전달할 수 있다.서버의 목적에 따라 달라지는 하드웨어이미지 저장용 서버는 큰 하드디스크 용량이 필요.연산용 서버는 고성능 CPU와 많은 메모리가 필요.이런 물리적 장비 구성을 서버 하드웨어라고 한다.하드웨어와 소프트웨어의 차이하드웨어: 만질 수 있고 물리적으로 바꾸기 어려움.소프트웨어: 서버에서 실행..

인터넷이 작동하는 방식 핵심!검색과 응답의 빠른 처리인터넷에서 무언가를 검색하면 거의 즉시 결과가 제공된다.이 빠른 응답의 원리가 어떻게 가능한지 살펴보는 것이 이 영상의 핵심이다.기기 간 연결과 네트워크의 형성스마트폰이나 컴퓨터 등 기기가 앱을 실행하면 즉시 외부 세계와 연결된다.이는 기기들이 유선 또는 무선으로 연결되어 네트워크를 형성하기 때문이다.그러나 여러 장치가 직접 서로 연결되기엔 복잡도가 증가한다.네트워크 스위치와 인터넷여러 장치를 효율적으로 연결하기 위해 네트워크 스위치가 사용된다.네트워크 스위치는 다른 스위치와도 연결되어 점점 더 큰 네트워크를 만든다.이렇게 스위치들이 서로 연결되며 형성된 거대한 네트워크를 인터넷이라고 부른다.클라이언트-서버 구조웹사이트나 영상 스트리밍 서비스는 서버라는..

🌐 웹 개발이란?우리가 매일 사용하는 웹사이트와 앱(예: 유튜브, 쿠팡, 네이버)은 그냥 만들어지는 게 아니다.마치 식당에서 요리사가 각자 다른 요리를 만들 듯, 웹 개발도 역할을 나눠서 진행한다.웹 개발자는 이 역할을 맡아 사람들이 편리하게 인터넷을 쓸 수 있도록 도와주는 사람이다.요즘은 IT 업계에서 가장 연봉도 높고 수요도 많은 직업 중 하나다.💼 웹 개발자의 대표적인 3가지 역할1️⃣ 프론트엔드 개발자 (Front-end Developer)사용자가 눈으로 보는 모든 부분을 만드는 사람예를 들어:버튼, 메뉴, 색상, 폰트, 이미지, 애니메이션 등사용자가 클릭하거나 스크롤할 때의 반응사용하는 주요 기술:HTML: 화면에 보일 구조를 만든다 (예: 텍스트 상자, 버튼)CSS: 꾸미는 역할 (색, 위..