프로젝트에서 보기 →

프론트엔드? 백엔드? 초등학생도 이해하는 웹 개발 기초 개념

태그
기타 프로그래밍 코딩 파이썬
시작일
종료일
수정일

https://www.youtube.com/watch?v=3JjqFeDxkoo

1. 이건 꼭 알아야 한다[^1]

[? 질문] 웹 개발은 무엇이며, 프론트엔드와 백엔드는 어떻게 나뉘는가[^6]
[= 답] 웹 개발 아키텍처는 **사용자와의 접점(브라우저)**에서 실행되는 영역(프론트엔드/클라이언트)과, 사용자 눈에 보이지 않는 서버 내부에서 데이터·로직·보안을 처리하는 영역(백엔드/서버)으로 크게 나뉜다.[^24]

[? 질문] 프론트엔드(HTML/CSS/JavaScript)는 각각 무슨 역할을 하는가[^18]
[= 답] HTML은 웹페이지의 **구조(골격/시멘틱 구조)**를 만들고, CSS는 그 구조에 **시각적 스타일(레이아웃·색상·타이포그래피·반응형 등)**을 입히며, JavaScript(2026년 기준으론 TypeScript가 사실상 표준)는 동작/상호작용/로직을 담당한다.[^10][^19][^20][^21]

[? 질문] 프론트엔드와 백엔드는 무엇으로 연결되고, 웹은 어떤 흐름으로 동작하는가[^13]
[= 답] 프론트엔드(클라이언트)는 요청을 보내고 백엔드(서버)는 이를 처리해 응답하는데, 이 사이를 API가 “데이터 연결 통로”로서 이어준다.[^13][^14][^15]

2. 큰 그림[^2]

이 콘텐츠는 AI를 활용해 웹사이트를 만들려는 사람이 늘어나는 상황에서, “AI가 만들어준 결과물에서 더 나아가기 위해 필요한” 웹 개발의 **기초 개념(프론트엔드~백엔드)**을 2026년 기준으로 정리해 설명한다.[^3][^4][^5] 특히 웹 개발을 **사용자 화면(클라이언트)**과 **서버 내부(서버/DB/로직)**의 역할 분담으로 나누고, 레스토랑 비유로 전체 동작 원리를 직관적으로 연결한다.[^6][^11]

  • 프론트엔드/백엔드 분리: 사용자에게 보이는 UI·UX(프론트)와 보이지 않는 데이터 처리·보안·비즈니스 로직(백)이 구분된다.[^8][^9]
  • 레스토랑 비유로 이해: 손님-홀-주방-웨이터의 대응 관계로 HTML/CSS/JS, 서버, DB, API의 역할을 한 번에 연결한다.[^10][^12][^13]
  • 2026년 기준 기술 감각: 프론트엔드는 TypeScript가 사실상 표준이며, 백엔드는 Java/Python/Go/Node.js 등 다양한 선택지가 있음을 언급한다.[^22][^23]

3. 하나씩 살펴보기[^6]

3.1 AI로 사이트는 만들지만, “기초 부족”에서 막히는 이유[^3]

📸 0:00

영상은 인사로 시작한 뒤, 최근 AI 기술력의 증가로 “AI를 활용해 자신만의 사이트를 만드는 사람들”이 늘고 있다고 말한다.[^1][^3] 심지어 “개발을 아무것도 모르는데도” AI로 사이트를 만드는 지인도 있다고 소개한다.[^4]

하지만 화자는 많은 사람들이 공통으로 겪는 문제를 바로 짚는다: AI가 초기에 만들어 준 결과물에서 “결국 기초가 부족해서” 더 발전시키지 못하고 막힌다는 것이다.[^5] 이 문제의식이 이후 설명의 출발점이 된다.

  • AI가 생성한 코드/페이지는 “시작점”은 될 수 있지만,
  • 구조(프론트), 데이터/로직(백), 연결(API) 같은 기본 구분이 없으면
  • 어디를 어떻게 고쳐야 하는지 판단하기 어렵다는 맥락으로 전개된다.[^5][^6]

3.2 “웹 개발이 뭘까?”—오늘 설명의 목표 선언[^6]

📸 0:21

화자는 청자에게 직접 질문을 던진다.[^6]

[? 질문] 그렇다면 웹 개발이 뭘까요?[^6]
[= 답] (영상의 전개상) 웹 개발을 프론트엔드부터 백엔드까지 핵심 개념으로 나눠, 머릿속을 “명쾌하게 정리”하는 것이 오늘의 목표다.[^7]

또한 “2026년 최신 기준”을 바탕으로 차근차근 설명하겠다고 못 박는다.[^7] 즉, 단순 역사 소개가 아니라 현재 실무에서 통용되는 관점(예: TypeScript 표준화 같은 흐름)을 함께 얹겠다는 선언이다.[^22]

3.3 학습 중 포기의 현실과 ‘파이썬 코칭’ 홍보(영상 내 안내 파트)[^7]

📸 0:26

설명에 들어가기 전, 화자는 하나를 짚고 넘어간다며 학습자의 심리를 다룬다.[^7]

  • “내 손으로 코드를 짤 때 계속 막히고 에러가 나면” 결국 “나랑은 안 맞나 봐” 하고 포기하게 되는 현실을 말한다.[^8]
  • 혼자 공부할 때의 “막막함과 외로움”을 본인도 잘 안다고 공감한다.[^9]

그 해결책으로 화자는 파이썬 코칭/실전 압축 파이썬이라는 프로그램을 소개하며 본인이 “전담 트레이너”가 되겠다고 말한다.[^10] 그리고 3가지 특징을 조목조목 제시한다.[^11]

  1. 밀착 관리(페이스메이커): “절대 포기할 수 없는 환경”을 만들고, 옆에서 끝까지 함께하겠다는 약속.[^11][^12]
  2. 군더더기 제거/4주 단기 집중: 목표에 필요한 핵심 기초를 “단 4주”에 끝내는 구조로, 시간 낭비를 줄이고 빠르게 다음 단계로 가도록 설계했다는 주장.[^13][^14]
  3. 실전 코칭(현업 개발자 에러 해결): 책/컴퓨터로 해결이 어려운 “내 컴퓨터에서 발생하는 에러”를 현업 개발자가 직접 해결해 준다고 설명.[^15]

마무리로 “불안해하지 마라”, 코칭이 “코드의 온전한 주인”이 되게 할 수 있다고 말하며, 자세한 내용은 고정 댓글을 보라고 안내한다.[^16][^17]

[!NOTE] 영상 구성상 의미[^10]
이 파트는 웹 개발 개념 설명에 앞서, “혼자 하다 포기하는 문제”를 전제로 솔루션(유료/프로그램)을 제시하는 전환 구간으로 배치되어 있다.[^8][^10]

3.4 웹 개발 아키텍처의 2분할: 프론트엔드 vs 백엔드[^18]

📸 1:46

이제 본격적으로 “웹 개발 핵심 개념” 설명에 들어간다.[^18] 화자는 웹 개발 아키텍처를 나누는 기준을 “데이터가 처리되는 위치”와 “사용자와의 접점”이라고 제시한다.[^19]

3.4.1 프론트엔드(=클라이언트, 클라이언트 사이드)[^19]

프론트엔드는 “클라이언트라고도” 하며, 클라이언트 사이드 개발을 의미한다고 설명한다.[^20][^21]

  • 사용자가 웹 브라우저로 “직접 마주하는” UI와 UX를 구축한다.[^22]
  • 그리고 이것은 브라우저 엔진에 의해 “해석되고 실행”된다고 덧붙인다.[^23]

여기서 프론트엔드의 핵심 정의는 “사용자가 보는 것/경험하는 것”이며, 실행 환경이 브라우저라는 점이다.[^22][^23]

3.4.2 백엔드(=서버 사이드)[^24]

두 번째 영역으로 백엔드를 제시한다.[^24]

  • 백엔드는 “서버 사이드”이며[^24]
  • 사용자의 눈에 보이지 않는 서버 내부에서
    • 데이터베이스 관리[^25]
    • 비즈니스 로직 실행[^25]
    • 보안 인증[^25]
      등을 처리하고, 클라이언트의 요청에 응답한다고 말한다.[^26]

즉 백엔드는 “보이지 않는 곳에서의 처리”와 “요청-응답”이 핵심 기능으로 설정된다.[^25][^26]

3.5 레스토랑 비유로 이해하는 웹사이트 동작 방식(프론트/백/DB/API)[^27]

📸 2:19

화자는 이해를 돕기 위해 “웹사이트 작동 방식”을 레스토랑 시스템에 비유한다.[^27] 이 비유는 영상의 중심 설명 도구로, 각 구성요소를 대응시켜 전체 구조를 직관적으로 그리게 한다.[^27]

3.5.1 프론트엔드 = 식당 홀 (손님이 경험하는 공간)[^28]

레스토랑에는 손님이 직접 경험하는 공간인 “식당 홀”이 있다고 말한다.[^28] 여기서 홀은 프론트엔드에 해당한다.[^40]

(1) HTML = 뼈대/구조 정의[^29]

화자는 식당의 벽·바닥·천장 등 “기본적인 뼈대를 세우는 작업”, 그리고 메뉴판/테이블이 어디 있는지의 “구조를 정의”하는 일을 든다.[^29][^30]
이를 프론트엔드의 HTML이 담당한다고 연결한다.[^31]

  • HTML은 “무엇이 어디에 있는가”를 결정하는 구조물
  • 식당으로 치면 공간의 구성 요소와 배치를 정해 “골격”을 세우는 역할[^29][^31]

(2) CSS = 분위기/스타일(색·조명·재질)[^32]

다음으로 벽지 색, 조명 밝기, 테이블 재질 등 “분위기”를 결정하는 요소를 말한다.[^32]
이것이 CSS의 역할이라고 한다.[^33]

  • CSS는 구조 자체를 바꾸는 게 아니라
  • 시각적 표현(분위기/디자인)을 부여하는 역할이라는 메시지[^32][^33]

(3) JavaScript = 상호작용/동적 움직임[^34]

마지막으로 “벨을 누르면 직원이 오거나”, “메뉴판을 넘길 때 발생하는 상호작용”처럼, 식당 내 “모든 동적인 움직임”을 자바스크립트가 담당한다고 말한다.[^34]
결론적으로 프론트엔드는 “사용자가 직접 경험하는 모든 시각적 공간”이라고 다시 강조한다.[^35]

[!TIP] 비유로 한 번에 구분하는 법[^31]
HTML(구조) → CSS(스타일) → JS(동작) 순서로 “홀을 꾸미고 움직이게 만든다”고 떠올리면, 프론트엔드 3요소가 덜 헷갈린다는 흐름으로 설명한다.[^29][^34]

3.5.2 백엔드 = 주방 (보이지 않는 곳에서 ‘진짜 요리’)[^36]

하지만 “진짜 요리”는 보이지 않은 곳, 즉 “주방”에서 만들어진다고 말하며 백엔드로 전환한다.[^36] 주방에는 두 가지 핵심이 있다고 한다.[^37]

(1) 서버 = 요리사[^37]

첫 번째 핵심은 “요리사”이며, 이것이 서버라고 설명한다.[^37][^38]
주문이 들어오면 “레시피에 따라 실제 데이터를 가공하고 요리를 완성”하는 “핵심 주체”라고 정의한다.[^39]

  • 주문(요청)을 받으면
  • 레시피(비즈니스 로직)에 따라
  • 데이터(재료)를 가공해서 결과(요리)를 만들어낸다는 구조[^39]

(2) 데이터베이스(DB) = 식재료 창고[^40]

두 번째 핵심은 “식재료 창고”로, 이것이 데이터베이스라고 말한다.[^40][^41]
식재료가 보관된 저장소이며, 요리사가 필요할 때마다 식재료(=데이터)를 꺼내 쓴다고 설명한다.[^41][^42]

  • DB는 저장소
  • 서버는 DB에서 데이터를 꺼내 쓰고 가공한다는 관계를 명확히 한다.[^41][^42]

3.5.3 API = 홀과 주방을 이어주는 점원/웨이터(연결 통로)[^43]

이제 화자는 “홀과 주방은 어떻게 소통할까요?”라고 질문을 던지고, 그 답으로 API를 소개한다.[^43][^44]

[? 질문] 그렇다면 홀과 주방은 어떻게 소통할까요?[^43]
[= 답] 그것이 바로 API의 역할이다.[^44]

API를 “식당의 API인 점원”으로 비유한다.[^45] 점원은 손님의 주문을 주방에 전달하고, 완성된 요리를 다시 손님에게 가져다주는 “데이터의 연결 통로”라고 정의한다.[^45][^46]

이후 화자는 “사용자 눈에 보이지 않는 곳에서 백엔드가 요청된 정보를 처리하고 결과물을 산출”하는 방식이 “웹이 작동하는 방식”이라고 정리한다.[^47][^48]

3.6 비유를 다시 대응표로 재정리(손님/홀/주방/서버/DB/API)[^48]

📸 3:48

화자는 앞에서 설명한 레스토랑 비유를 대응 관계로 다시 한번 정리한다.[^48]

  • 사용자는 손님[^49]
  • 프론트엔드는 식당 홀[^49]
  • 주방은 백엔드[^49]
  • 요리사는 서버[^51]
  • 식재료 창고는 데이터베이스[^51]
  • 웨이터/점원은 API[^52]

그리고 흐름은 다음처럼 다시 말한다.

  1. 손님(사용자)은 홀(프론트)에서 음식을 제공받는다(직접 보이는/경험하는 영역).[^^50]
  2. 요리사(서버)는 식재료 창고(DB)에서 재료(데이터)를 가져와 음식을 만든다.[^51]
  3. 웨이터(API)가 음식을 손님에게 제공한다(요청/응답 전달).[^^52]

이 재정리는 “구조를 이해했는지” 확인하는 복습 역할을 한다.[^48]

3.7 실제 웹 표준 기술 3종(HTML/CSS/JS) 역할을 ‘정의’로 정확히 잡기[^53]

📸 4:26

화자는 “이번에는 실제 웹에서 어떤 식으로 동작하는지”를 “다시 한번 자세하게” 알아보자며, 프론트엔드를 구성하는 “세 가지 표준 기술”을 제시한다.[^53][^54] 그리고 이들은 “독립적인 역할을 수행하며 상호작용”한다고 말한다.[^54]

3.7.1 HTML: 시멘틱 구조(문서 의미/요소 배치) 정의[^55]

HTML은 웹 문서의 “의미론적 구조”, 즉 시멘틱 스트럭처를 정의한다고 설명한다.[^55] 또한 텍스트/하이퍼링크/멀티미디어 요소의 배치를 결정하는 “웹사이트의 골격”이라고 말한다.[^56]

  • 여기서 포인트는 HTML을 단순히 “태그”가 아니라
  • 문서의 의미와 구조를 담당하는 계층으로 설명한다는 점이다.[^55][^56]

3.7.2 CSS: 시각적 스타일 부여(레이아웃·색상·타이포·반응형)[^57]

CSS는 HTML 요소에 “시각적 스타일을 부여”한다고 말한다.[^57] 구체적으로 레이아웃, 색상, 타이포그래피, “반응(반응형)” 등을 제어해 브라우저에 표시되는 결과물의 “외형을 완성”한다고 한다.[^58]

  • CSS의 역할을 “예쁘게” 수준이 아니라
  • 레이아웃/타이포/반응형까지 포함한 표시 결과의 완성으로 정의한다.[^58]

3.7.3 JavaScript: 브라우저 실행, 동적 기능, API 통신, 이벤트 처리, DOM 조작[^59]

자바스크립트는 브라우저 환경에서 실행되는 프로그래밍 언어라고 정의한다.[^59] 정적인 웹페이지에 “동적 기능”을 부여한다고 말하며, 구체 항목으로 다음을 든다.[^60]

  • API 통신[^60]
  • 이벤트 처리[^60]
  • DOM(Document Object Model) 조작[^60]

이를 통해 사용자와 상호작용하며, “웹의 동적인 움직임과 로직”을 담당한다고 정리한다.[^61][^62]

[!IMPORTANT] 프론트엔드에서 JS가 맡는 범위[^60]
영상은 JS를 단순 애니메이션이 아니라, **API 통신(서버 연결)**과 이벤트/DOM 기반 UI 로직까지 포함하는 “동작/로직 계층”으로 설명한다.[^60][^62]

3.8 2026년 기준: TypeScript 언급(“JS만 쓰던 과거”에서 변화)[^63]

📸 5:16

화자는 과거에는 “자바스크립트만 썼지만” 2026년 현재는 자바스크립트의 “슈퍼셋”이며 안정성이 뛰어난 **타입스크립트(TypeScript)**가 사실상 표준이라고 말한다.[^63]

  • “슈퍼셋”이라는 표현으로 TS가 JS를 포함/확장한다는 뉘앙스를 주고[^63]
  • “안정성”을 이유로 표준이 되었다고 설명한다.[^63]

3.9 백엔드에서 쓰는 언어들 + 백엔드가 하는 일(HTTP, DB CRUD, 보안)[^64]

📸 5:22

3.9.1 백엔드 언어 선택지(예시 나열)[^64]

백엔드는 “다양한 언어”를 사용해 데이터를 가공하고 시스템의 안정성을 관리한다고 말한다.[^64] 그리고 예시를 든다.[^65]

  • 대규모 시스템: 자바(Java)[^65]
  • AI와 데이터: (문장상) 자바와 함께 “AI와 데이터” 맥락을 언급[^65]
  • 빠른 개발: 파이썬(Python)[^65]
  • 고성능 병렬 처리: 고(Go)[^65]
  • 브라우저와 서버 언어 통일: 노드 JS(Node.js)[^65]

즉 백엔드 언어는 “하나로 고정”이 아니라, 목적(규모/개발속도/성능/스택 통일)에 따라 달라진다는 관점을 준다.[^64][^65]

3.9.2 백엔드의 구체 업무 목록[^66]

화자는 백엔드가 포함하는 작업을 항목 형태로 제시한다.[^66]

  • 클라이언트로부터의 HTTP 요청 수신[^66]
  • 데이터베이스 CRUD 작업 수행[^66]
  • 암호화 및 권한 제어[^66]

여기서 중요한 건 백엔드가 단지 “데이터 보내주는 곳”이 아니라, 요청을 받고(HTTP), 데이터를 다루며(CRUD), 보안(암호화/권한)까지 책임지는 계층으로 설명된다는 점이다.[^66]

3.10 마무리: 시청자 참여 유도와 채널 클로징[^67]

📸 5:45

끝으로 화자는 “지금까지 프런트엔드와 백엔드에 대해 자세하게 알아봤다”고 말하며 정리를 선언한다.[^67] 그리고 시청자에게 추가 질문이나 “여러분만의 개발 공부 방식”이 있다면 댓글로 남겨달라고 요청한다.[^68] 이후 “좋아요와 구독”을 부탁하고 감사 인사로 마무리한다.[^69][^70]

4. 핵심 통찰[^6]

  1. [h AI로 만든 웹사이트도 ‘기초 개념’이 없으면 확장/수정 단계에서 막히기 쉽다.] AI가 초안을 만들어 주더라도, 프론트/백/DB/API의 역할 분리를 이해해야 어디를 고쳐야 하는지 판단할 수 있다는 문제의식으로 시작한다.[^5][^6]

    • 실행: AI가 만든 결과물을 볼 때 “이건 HTML 구조인가?”, “CSS 스타일인가?”, “JS 동작인가?”, “서버/DB/API 문제인가?”를 먼저 분류해보는 습관을 갖는다.[^19][^54]

  2. [c 웹 개발은 ‘사용자와의 접점(클라이언트)’과 ‘서버 내부 처리(서버/DB/보안/로직)’의 협업 구조다.] 단일 덩어리 기술이 아니라, 실행 위치와 책임이 나뉜 아키텍처라는 점이 핵심이다.[^19][^24]

    • 실행: 기능을 만들 때 “프론트(화면/입력) + API(요청/응답) + 백(처리/검증) + DB(저장)” 4단으로 설계도를 그려본다.[^43][^45]

  3. [h HTML/CSS/JS는 ‘구조-스타일-동작’으로 독립 역할을 갖고 상호작용한다.] 이 3요소를 분리해서 이해하면 프론트엔드 학습/디버깅이 쉬워진다는 메시지다.[^54][^56][^58][^62]

    • 실행: 화면 문제를 만났을 때 (1) 구조(HTML) (2) 스타일(CSS) (3) 동작(JS/TS) 순서로 원인을 분리 점검한다.[^55][^57][^60]

  4. [m API는 프론트와 백엔드를 잇는 ‘전달자/통로’라는 관점이 이해를 단순화한다.] 레스토랑 비유에서 점원이 주문과 요리를 옮기듯, API가 요청과 응답을 전달한다는 설명이 핵심 연결 고리다.[^45][^46]

  5. [m 2026년 기준 프론트엔드는 TypeScript를 사실상 표준으로 본다.] 자바스크립트만 쓰던 과거 대비 “안정성”을 이유로 TS의 표준성을 언급한다.[^63]

5. 헷갈리는 용어 정리[^18]

  • 프론트엔드(클라이언트): 사용자가 브라우저에서 직접 마주하는 UI/UX를 만들고, 브라우저 엔진에서 해석/실행되는 영역.[^20][^22][^23]
  • 백엔드(서버 사이드): 서버 내부에서 DB 관리, 비즈니스 로직, 보안 인증 등을 수행하고 클라이언트 요청에 응답하는 영역.[^24][^25][^26]
  • 서버(Server): (비유에서 요리사) 요청을 받아 로직(레시피)에 따라 데이터를 가공해 결과를 만들어내는 주체.[^37][^39]
  • 데이터베이스(DB): (비유에서 식재료 창고) 데이터가 저장되어 있고 서버가 필요할 때 꺼내 쓰는 저장소.[^40][^41][^42]
  • API: (비유에서 점원/웨이터) 클라이언트 요청을 서버에 전달하고 처리 결과를 다시 클라이언트로 가져오는 연결 통로.[^45][^46]
  • HTML: 웹 문서의 의미론적 구조(시멘틱 구조)와 요소 배치를 정의하는 골격.[^55][^56]
  • CSS: HTML 요소의 시각적 스타일(레이아웃/색상/타이포/반응형 등)을 제어해 외형을 완성.[^57][^58]
  • JavaScript: 브라우저에서 실행되며 정적 페이지에 동적 기능을 부여(이벤트/DOM 조작, API 통신 등).[^59][^60][^62]
  • TypeScript: JavaScript의 슈퍼셋으로, 2026년 기준 안정성이 뛰어나 사실상 표준이라는 언급.[^63]
  • CRUD: 백엔드에서 DB에 대해 수행하는 생성/조회/수정/삭제 작업을 지칭하는 표현으로 영상에서 DB 업무로 언급.[^66]
  • HTTP 요청: 클라이언트가 서버에 보내는 요청으로, 백엔드가 이를 수신한다고 설명.[^66]
  • DOM(Document Object Model): 자바스크립트가 조작해 사용자 상호작용을 구현하는 대상으로 언급.[^60]

참고(콘텐츠 정보)[^1]

  • 제목: 프론트엔드? 백엔드? 초등학생도 이해하는 웹 개발 기초 개념[^1]
  • 채널: 원투코딩 OneTwoCoding[^1]
  • 길이: 6분 1초[^1]
  • 키워드(제공): 프로그래밍, 코딩, 파이썬, 자바스크립트, 자바, 개발[^1]
  • 링크: https://www.youtube.com/watch?v=3JjqFeDxkoo[^1]

[^1]: @[00:00]~@[06:00] 영상 전체(원투코딩 OneTwoCoding, 「프론트엔드? 백엔드? 초등학생도 이해하는 웹 개발 기초 개념」, https://www.youtube.com/watch?v=3JjqFeDxkoo). [^2]: @[00:26] “웹 개발의 핵심 개념을 2026년 최신 기준을 바탕으로 차근차근 설명”. [^3]: @[00:07] “AI의 기술력이 늘어감에 따라 AI를 활용해 자신만의 사이트를 만드는 사람들이… 늘어”. [^4]: @[00:11] “개발을 아무것도 모르는데도 AI로 자신만의 사이트를 만들어”. [^5]: @[00:14] “기초가 부족해서… 더 나아가지 못”. [^6]: @[00:21] “그렇다면 웹 개발이 뭘까요?” [^7]: @[00:26] “프론트엔드부터 백엔드까지… 명쾌하게 정리… 설명”. [^8]: @[00:39] “계속 막히고 에러가 나면… 포기”. [^9]: @[00:46] “막막함과 외로움 저도…”. [^10]: @[00:52] “파이썬 코칭, 실전 압축 파이썬… 전담 트레이너”. [^11]: @[01:03] “첫째, 페이스메이커처럼 밀착 관리…”. [^12]: @[01:05] “옆에서 끝까지 함께…”. [^13]: @[01:10] “둘째, 모든 군더더기를 걷어냈습니다.” [^14]: @[01:12] “핵심적인 기초를 단 4주 만에…”. [^15]: @[01:24] “내 컴퓨터에서 발생하는 에러를 현업 개발자가 직접 해결”. [^16]: @[01:28] “불안해 하지 마세요.” [^17]: @[01:36] “자세한 내용은 고정 댓글…”. [^18]: @[01:46] “웹발(웹개발)의 핵심 개념을 설명”. [^19]: @[01:49] “데이터가 처리되는 위치와 사용자와의 접점… 두 가지 영역”. [^20]: @[01:56] “클라이언트라고도”. [^21]: @[02:00] “클라이언트 사이드 개발”. [^22]: @[02:04] “UI와 UX를 구축”. [^23]: @[02:04]~@[02:07] “브라우저 엔진에 의해 해석되고 실행”. [^24]: @[02:07] “두 번째는 백핸드… 서버 사이드”. [^25]: @[02:15] “데이터베이스 관리, 비즈니스 로직 실행, 보안 인증”. [^26]: @[02:15]~@[02:19] “클라이언트의 요청에 응답”. [^27]: @[02:19] “레스토랑 시스템에 비유”. [^28]: @[02:24] “식당 홀이 있습니다.” [^29]: @[02:29] “벽, 바닥, 천장… 뼈대를 세우는 작업”. [^30]: @[02:34] “메뉴판… 테이블… 구조를 정의”. [^31]: @[02:39] “프론트엔드의 HTML”. [^32]: @[02:44] “벽지의 색상, 조명의 밝기, 테이블의 재질… 분위기”. [^33]: @[02:49] “이것이 CSS의 역할”. [^34]: @[02:54] “벨… 상호작용… 모든 동적인 움직임… 자바스크립트”. [^35]: @[03:01] “사용자가 직접 경험하는 모든 시각적 공간”. [^36]: @[03:03] “진짜 요리는… 주방”. [^37]: @[03:06] “주방에는 두 가지 핵심… 첫 번째는 요리사”. [^38]: @[03:11] “이것이 서버”. [^39]: @[03:15] “주문… 데이터를 가공… 요리를 완성”. [^40]: @[03:19] “두 번째는 식재료 창고… 데이터베이스”. [^41]: @[03:22] “식재료가 보관된 저장소”. [^42]: @[03:27] “필요할 때마다… 데이터를 꺼내어 사용”. [^43]: @[03:30] “홀과 주방은 어떻게 소통할까요?” [^44]: @[03:35] “그것이 바로 API의 역할”. [^45]: @[03:38] “점원은… 주문을… 전달… 완성된 요리를… 가져다”. [^46]: @[03:43] “데이터의 연결 통로”. [^47]: @[03:43] “백핸드는 요청된 정보를 처리하고 결과물을 산출”. [^48]: @[03:48] “이것이 웹이 작동하는 방식”. [^49]: @[03:54] “사용자는 손님, 프론트엔드는 식당 홀, 주방은 백핸드”. [^50]: @[03:59] “손님은… 홀에서 음식을 제공받습니다.” [^51]: @[04:04] “서버는… 데이터베이스에서… 가져와… 만듭니다.” [^52]: @[04:12] “API를 통해… 제공합니다.” [^53]: @[04:26] “실제 웹에서 어떤 식으로 동작… 자세하게”. [^54]: @[04:26]~@[04:33] “HTML, CSS, 자바스크립트… 독립적인 역할… 상호 작용”. [^55]: @[04:33] “HTML은… 시멘틱 스트럭처를 정의”. [^56]: @[04:40] “텍스트, 하이퍼링크, 멀티미디어… 배치… 골격”. [^57]: @[04:40] “CSS는… 시각적 스타일을 부여”. [^58]: @[04:49] “레이아웃, 색상, 타이프그래피, 반응… 외형을 완성”. [^59]: @[04:56] “자바스크립트는… 브라우저… 실행되는 프로그래밍 언어”. [^60]: @[05:04] “API 통신, 이벤트 처리… DOM 조작”. [^61]: @[05:10] “사용자와 상호 작용”. [^62]: @[05:10] “동적인 움직임과 로직”. [^63]: @[05:16] “2026년 현재… 타입스크리트… 표준”. [^64]: @[05:22] “백엔드는 다양한 언어… 데이터를 가공… 안정성”. [^65]: @[05:27] “자바… 파이썬… 고우… 노드 JS…”. [^66]: @[05:40] “HTTP 요청 수신, 데이터베이스 CRUD, 암호화 및 권한 제어”. [^67]: @[05:45] “지금까지… 자세하게 알아봤습니다.” [^68]: @[05:51] “궁금한 점… 공부 방식… 댓글”. [^69]: @[05:58] “좋아요와 구독”. [^70]: @[06:00] “감사합니다.”

← 프로젝트에서 보기