---
<strong>영상 링크</strong>: 해당 주차에 시청해야 할 영상 구간과 링크가
있습니다.
<strong>스킵 진단 문제</strong>: 10문제 정도의 퀴즈입니다. 이걸 막힘없이 풀
수 있다면 해당 주차 영상을 건너뛰어도 됩니다. 이미 아는 내용을 또 볼 필요는 없으니까요.
<strong>추가 설명</strong>: 영상에서 다루지 않았지만 실무에서 알아두면 좋은
개념들을 정리해뒀습니다. 영상 범위와 관련된 내용으로 구성됩니다.
<strong>스터디 인증 미션</strong>: 주차별 과제입니다. 단순 암기보다는 조금
생각해봐야 하는 문제를 낼 예정이에요.
---
<strong>저번 주 복습</strong>: 지난주에 배운 핵심 개념을 간단히 되짚어봅니다. <strong>저번 주 과제 정답 및 풀이</strong>: 스터디 인증 미션의 정답을
공개하고, 풀이 과정을 함께 살펴봅니다. 다른 사람의 접근 방식도 공유하면서 이해를 넓혀봅니다.
<strong>면접 질문</strong>: 해당 주차 범위와 관련된 실제 면접 질문을
다뤄봅니다. 답변을 직접 생각해보고 서로 피드백하는 시간입니다.
<strong>다음 주 범위 소개</strong>: 다음 주에 학습할 내용과 영상 구간을
안내합니다.
---
<strong>UI 마크업 및 디자인 구현 (기본)</strong>: 피그마(Figma) 같은 디자인
시안을 보고 HTML, CSS로 브라우저에 그대로 구현합니다.
<strong>반응형 및 크로스 브라우저 대응 (기본)</strong>: 모바일, 태블릿, PC 등
다양한 화면 크기에서 레이아웃이 깨지지 않도록 만들고, 크롬·사파리 등 브라우저별 차이도 보정합니다.
<strong>사용자 인터랙션 및 상태 관리 (기본~심화)</strong>: 버튼 클릭, 모달
띄우기 같은 이벤트를 처리하고, 장바구니 수량처럼 수시로 바뀌는 데이터(상태)를 관리합니다.
<strong>라우팅 설계 (심화)</strong>: 페이지를 이동할 때 새로고침 없이 필요한
부분만 갈아끼우는 SPA(Single Page Application) 구조를 설계합니다.
<strong>디자인 시스템 구축 (심화)</strong>: 버튼, 폰트, 컬러 등 재사용 가능한
UI 컴포넌트를 표준 규격으로 만들어 사내 라이브러리화합니다.
<strong>PWA 최적화 (심화)</strong>: 웹페이지인데도 앱처럼 설치되고, 푸시
알림이나 오프라인 동작이 가능한 Progressive Web App을 만듭니다.
<strong>AI 도구 활용 (최신 트렌드)</strong>: AI가 생성한 코드를 검토하고,
개발자는 더 복잡한 비즈니스 로직과 시스템 설계에 집중하는 흐름이 생기고 있습니다.
<strong>언어</strong>- <strong>JavaScript</strong>: 프론트엔드의 기본
언어입니다. 전 세계 개발자의 61%가 웹 페이지 빌드에 사용합니다. - <strong>TypeScript</strong>: 대규모 서비스에서는 사실상 표준입니다. 변수나 함수의 타입을 지정해서 런타임 에러를 줄여줍니다.
<strong>프레임워크</strong>- <strong>React</strong> +<strong>Next.js</strong>
: 시장 점유율 1위입니다. Next.js는 React 기반의 메타 프레임워크로 실무에서 기본값처럼 쓰이고 있습니다. - <strong>Vue.js</strong> (Nuxt.js): 직관적인 구조 덕분에 스타트업에서 많이 채택합니다. State of JS 2024에서 사용률 2위를 유지했습니다. - <strong>Astro</strong>, <strong>Qwik</strong>, <strong>Remix</strong> 등 차세대 프레임워크도 주목받고 있습니다.
<strong>상태 관리 및 데이터 페칭</strong>- 클라이언트 상태 관리는
<strong>Zustand</strong>, 서버 데이터 페칭·캐싱은 <strong>TanStack Query</strong>가 대세입니다.
<strong>스타일링</strong>- <strong>Tailwind CSS</strong>가 유틸리티 CSS 중
압도적입니다. <strong>Storybook</strong>과 결합해서 컴포넌트를 문서화하는 방향으로 발전하고 있습니다.
<strong>빌드 & 테스트</strong>- <strong>Vite</strong> (빌드 도구 만족도 1위),
<strong>Vitest</strong> (테스트 도구 재사용 의향 98%), <strong>Playwright</strong> (E2E 테스트, 94% 만족도)가 주요 도구입니다.
<strong>배포 인프라</strong>- <strong>GitHub Actions</strong> +
<strong>Vercel</strong>, <strong>Cloudflare Pages</strong> 같은 엣지 기반 배포가 주류입니다.
---
| 방향 | 설명 |
|---|---|
| <strong>웹 프론트엔드</strong> | 가장 일반적인 경로입니다. 기본기와 성능 최적화 경험이 차별 포인트가 됩니다. |
| <strong>디자인 시스템 엔지니어</strong> | 디자인과 개발의 간극을 줄이는 역할입니다. UI 아키텍처를 전문적으로 설계합니다. |
| <strong>PWA / 웹앱 전문가</strong> | 앱스토어 없이 브라우저만으로 네이티브 앱 수준의 경험을 제공하는 영역입니다. |
| <strong>풀스택</strong> | Next.js 덕분에 프론트엔드 개발자가 서버 로직까지 다루기 쉬워졌습니다. 스타트업에서 선호합니다. |
| <strong>PM / PO</strong> | 기획·디자인·기술을 모두 이해하는 프로덕트 오너로 전향하는 경우도 있습니다. |
---
| 구분 | 평균 연봉 (추정치) | 비고 |
|---|---|---|
| <strong>신입 ~ 1년차</strong> | 약 3,200 ~ 4,000만 원 | 대기업·빅테크는 6,000만 원 이상에서 시작하기도 합니다. |
| <strong>2 ~ 4년차</strong> | 약 4,500 ~ 7,000만 원 | 이직을 통한 연봉 점프가 가장 활발한 구간입니다. |
| <strong>5 ~ 10년차</strong> | 약 7,000만 원 ~ 1억 이상 | 시니어는 코드만 잘 짜는 게 아니라 시스템을 설계하는 역할입니다. |
---
---
브라우저 렌더링 원리 (MDN 공식 문서)
State of JavaScript 2024 Survey Results
그룹바이 - 2025 개발자 연차별 평균연봉
코드트리 - 2025년 개발자 취업 현실과 연봉
라이언스쿨 - 2025 프론트엔드 로드맵
프론트엔드 로드맵(제가 제일 자주 보는 로드맵입니다.)
갓대희의 작은공간 - AI 시대 웹 개발자가 살아남는 법
web.dev - Rendering on the Web
---
프론트엔드 스터디 1주차 학습 자료: 마크업 그 이상, 실무를 위한 중급 HTML 가이드
---
<strong>영상</strong>: 제대로 파는 HTML & CSS <strong>구간</strong>: 00:00:00 ~ 01:36:21 (약 1시간 36분) <strong>링크</strong>:
Post Q&A
프론트엔드 스터디 대면 0주차: 프론트엔드 개발자란? 그리고 우리가 배울 것들 전체를 기준으로 질문과 피드백을 받아요.답을 본 뒤에는 이 내용을 댓글로 달아서 서징에게도 물어볼 수 있어요. 작성자가 직접 볼 수 있어요!
비동기와 async/await를 배운 뒤, 대면에서는 API를 단순 호출 방법이 아니라 프론트엔드와 백엔드 사이의 계약으로 바라봅니다. HTTP, REST, CORS, 프록시, API 클라이언트 구조, TanStack Query와 파일 배치까지 연결합니다.