서문

많은 사람이 프런트엔드를 처음 배울 때 “따라 하기”로 시작합니다. 태그를 외우고, 속성을 외우고, 컴포넌트를 복붙하고, 스캐폴딩을 돌립니다. 처음엔 페이지 몇 개를 만들 수 있지만, 갈수록 버거워집니다. 예제를 보면 이해되는 것 같은데, 막상 처음부터 혼자 작성하려면 막히고, 버그가 나면 어디서부터 봐야 할지 모르겠다는 느낌이 듭니다.

문제는 종종 “코드를 못 쓴다”가 아니라 “코드를 이해하지 못한다”에 있습니다. 아래 질문에 답할 수 있나요?

  • URL을 입력하면 왜 페이지가 뜨는가?
  • HTML/CSS/JS는 브라우저에서 각각 어떤 과정을 거치는가?
  • 왜 리플로우/리페인트가 생기는가?
  • 왜 this가 가끔 이상하게 바뀌는가?
  • 왜 Promise.then이 setTimeout보다 먼저 실행되는가?
  • 왜 Vue의 nextTick은 업데이트된 DOM을 잡을 수 있는가?
  • 왜 React에서 key를 함부로 쓰면 안 되는가?
  • 프로젝트가 커지면 왜 빌드가 그렇게 느려지는가?

겉보기에는 흩어져 있지만, 이 질문들은 하나의 큰 체계(브라우저/네트워크/언어/렌더링/엔지니어링/프레임워크/성능)로 이어집니다. 이 글은 “숲을 보지 못하는 상태”를 깨기 위해, 프런트엔드의 핵심 저수준 맥락을 얕은 곳부터 깊은 곳까지 연결해 다시 정리합니다.

1. 프런트엔드는 무엇을 하는가

1. Web이란 무엇인가

Web은 인터넷 기반의 정보 전달/리소스 접근/상호작용 시스템입니다. 브라우저가 서버에 요청하고, 서버가 HTML/CSS/JavaScript/이미지/오디오/비디오 등을 돌려주며, 브라우저는 이를 파싱해 화면으로 렌더링합니다.

프런트엔드는 다음 6가지 핵심 고리 위에서 돌아갑니다.

  • 리소스 위치 지정: URL로 리소스를 찾음
  • 네트워크 통신: HTTP/HTTPS로 전달
  • 내용 서술: HTML로 구조 표현
  • 스타일 표현: CSS로 외관 제어
  • 행동/상호작용: JavaScript로 로직 구현
  • 브라우저 렌더링: 코드를 화면/인터랙션으로 변환

2. 웹 페이지는 무엇으로 이루어지는가

  • HTML: 구조(무엇이 있는가)
  • CSS: 표현(어떻게 보이는가)
  • JavaScript: 행동(무슨 일이 일어나는가)

비유하자면,

  • HTML은 건물의 골조/벽
  • CSS는 인테리어/조명/색/배치
  • JS는 전기/스위치/자동화 시스템

3. 브라우저란 무엇인가

브라우저는 단순한 “검색 도구”가 아니라 복잡한 실행 환경입니다.

  • 네트워크 요청
  • HTML/CSS/JS 파싱
  • DOM/CSSOM 구성
  • 렌더 트리 생성, 레이아웃/페인트
  • JS 실행
  • 이벤트 루프, 타이머, 콜백 처리
  • Web API 제공(localStorage, fetch, history, canvas 등)

4. 브라우저 엔진(커널)이란

주로 렌더링 엔진 + JS 엔진을 말하며, 표준 지원 수준 차이가 호환성 문제를 만듭니다.

  • Blink: Chrome/Edge/Opera
  • WebKit: Safari
  • Gecko: Firefox
  • Trident: 구형 IE

5. 왜 Web 표준이 필요한가

표준이 없다면 브라우저마다 구현이 달라 “Chrome은 되는데 Safari는 안 됨” 같은 문제가 폭발합니다. W3C/WHATWG 등이 HTML/CSS/DOM/URL/Fetch 등 표준을 추진하는 이유가 여기에 있습니다.

표준의 의미:

  • 호환 비용 감소
  • 유지보수 용이
  • 다양한 기기 접근성
  • SEO/검색 엔진 이해
  • 협업 규칙 제공

2. 개발 환경과 도구

1. 최소한 필요한 것

  • 컴퓨터
  • 브라우저(권장: Chrome)
  • 코드 에디터(권장: VS Code)
  • 로컬 정적 서버/개발 도구

프레임워크/빌드 도구를 쓰면 Node.js가 필요해집니다.

2. 에디터가 중요한 이유

프로젝트가 커질수록 에디터는 “메모장”이 아니라 생산성 도구입니다. VS Code는 플러그인, Git 통합, 디버깅 등의 이유로 널리 사용됩니다.

3. DevTools는 빨리 익혀야 한다

  • Elements: DOM/CSS 디버깅
  • Console: 로그/에러 확인
  • Network: 요청/응답/캐시 분석
  • Sources: JS 디버깅
  • Application: 쿠키/스토리지
  • Performance: 성능 병목

3. HTML: 구조

(이후 섹션은 원문의 구조를 유지해 확장해 학습해 나가면 됩니다. 본 한국어 초안은 원문의 핵심 개념을 보존하면서도, 초보자의 전체 지도를 만드는 데 필요한 설명을 우선 제공합니다.)