Study
프론트엔드 스터디 대면 9주차: Next.js 렌더링 진화와 웹.
Next.js가 무엇이고 왜 필요한지 React와 비교해 이해한 뒤, CSR부터 SSR, SSG, ISR, PPR까지 렌더링 전략과 Web Vitals를 정리하며 스터디를 마무리합니다.
프론트엔드스터디웹개발커리어기술스택
프론트엔드 스터디 대면 0주차: 프론트엔드 개발자란? 그리고 우리가 배울 것들
14분 읽기
0주차 스터디 개요
프론트엔드 스터디 첫 시간입니다. 이번 주에는 프론트엔드 개발자가 실무에서 어떤 일을 하는지, 기술 스택은 어떻게 변하고 있는지, 그리고 우리가 앞으로 뭘 배울 건지 전체적인 그림을 잡아보겠습니다.
스터디 자료 구조 안내
다음 주부터 매주 올라가는 스터디 자료는 아래와 같은 구조로 되어 있습니다.
- 영상 링크: 해당 주차에 시청해야 할 영상 구간과 링크가 있습니다.
- 스킵 진단 문제: 10문제 정도의 퀴즈입니다. 이걸 막힘없이 풀 수 있다면 해당 주차 영상을 건너뛰어도 됩니다. 이미 아는 내용을 또 볼 필요는 없으니까요.
- 추가 설명: 영상에서 다루지 않았지만 실무에서 알아두면 좋은 개념들을 정리해뒀습니다. 영상 범위와 관련된 내용으로 구성됩니다.
- 스터디 인증 미션: 주차별 과제입니다. 단순 암기보다는 조금 생각해봐야 하는 문제를 낼 예정이에요.
대면 스터디 진행 방식
매주 대면 스터디는 아래 순서로 진행됩니다.
- 저번 주 복습: 지난주에 배운 핵심 개념을 간단히 되짚어봅니다.
- 저번 주 과제 정답 및 풀이: 스터디 인증 미션의 정답을 공개하고, 풀이 과정을 함께 살펴봅니다. 다른 사람의 접근 방식도 공유하면서 이해를 넓혀봅니다.
- 면접 질문: 해당 주차 범위와 관련된 실제 면접 질문을 다뤄봅니다. 답변을 직접 생각해보고 서로 피드백하는 시간입니다.
- 다음 주 범위 소개: 다음 주에 학습할 내용과 영상 구간을 안내합니다.
1. 프론트엔드 개발자란?
1-1. 실무에서 하는 일
프론트엔드 개발자가 하는 일을 기본 업무부터 심화 업무까지 정리해봤습니다.
- UI 마크업 및 디자인 구현 (기본): 피그마(Figma) 같은 디자인 시안을 보고 HTML, CSS로 브라우저에 그대로 구현합니다.
- 반응형 및 크로스 브라우저 대응 (기본): 모바일, 태블릿, PC 등 다양한 화면 크기에서 레이아웃이 깨지지 않도록 만들고, 크롬·사파리 등 브라우저별 차이도 보정합니다.
- 사용자 인터랙션 및 상태 관리 (기본~심화): 버튼 클릭, 모달 띄우기 같은 이벤트를 처리하고, 장바구니 수량처럼 수시로 바뀌는 데이터(상태)를 관리합니다.
- 라우팅 설계 (심화): 페이지를 이동할 때 새로고침 없이 필요한 부분만 갈아끼우는 SPA(Single Page Application) 구조를 설계합니다.
- 디자인 시스템 구축 (심화): 버튼, 폰트, 컬러 등 재사용 가능한 UI 컴포넌트를 표준 규격으로 만들어 사내 라이브러리화합니다.
- PWA 최적화 (심화): 웹페이지인데도 앱처럼 설치되고, 푸시 알림이나 오프라인 동작이 가능한 Progressive Web App을 만듭니다.
- AI 도구 활용 (최신 트렌드): AI가 생성한 코드를 검토하고, 개발자는 더 복잡한 비즈니스 로직과 시스템 설계에 집중하는 흐름이 생기고 있습니다.
1-2. 2025-2026 기술 스택
프론트엔드 생태계는 변화가 빠릅니다. "자바스크립트 피로감(JS Fatigue)"이라는 말이 있을 정도예요. State of JS 2024 설문에 따르면 응답자의 67%가 JavaScript보다 TypeScript를 더 많이 쓴다고 답했고, Vite와 Vitest가 빌드·테스트 도구 만족도 1위를 차지했습니다.
- 언어- JavaScript: 프론트엔드의 기본 언어입니다. 전 세계 개발자의 61%가 웹 페이지 빌드에 사용합니다. - TypeScript: 대규모 서비스에서는 사실상 표준입니다. 변수나 함수의 타입을 지정해서 런타임 에러를 줄여줍니다.
- 프레임워크- React +Next.js : 시장 점유율 1위입니다. Next.js는 React 기반의 메타 프레임워크로 실무에서 기본값처럼 쓰이고 있습니다. - Vue.js (Nuxt.js): 직관적인 구조 덕분에 스타트업에서 많이 채택합니다. State of JS 2024에서 사용률 2위를 유지했습니다. - Astro, Qwik, Remix 등 차세대 프레임워크도 주목받고 있습니다.
- 상태 관리 및 데이터 페칭- 클라이언트 상태 관리는 Zustand, 서버 데이터 페칭·캐싱은 TanStack Query가 대세입니다.
- 스타일링- Tailwind CSS가 유틸리티 CSS 중 압도적입니다. Storybook과 결합해서 컴포넌트를 문서화하는 방향으로 발전하고 있습니다.
- 빌드 & 테스트- Vite (빌드 도구 만족도 1위), Vitest (테스트 도구 재사용 의향 98%), Playwright (E2E 테스트, 94% 만족도)가 주요 도구입니다.
- 배포 인프라- GitHub Actions + Vercel, Cloudflare Pages 같은 엣지 기반 배포가 주류입니다.
이걸 다 배워야 하나 싶겠지만, 도구는 계속 바뀌어도
자바스크립트의 동작 원리와 브라우저가 화면을 그리는 원리는 변하지 않습니다.
그래서 기초가 중요합니다.
2. 커리어 방향
프론트엔드를 배우고 나면 갈 수 있는 방향은 여러 가지입니다.
| 방향 | 설명 |
|---|---|
| 웹 프론트엔드 | 가장 일반적인 경로입니다. 기본기와 성능 최적화 경험이 차별 포인트가 됩니다. |
| 디자인 시스템 엔지니어 | 디자인과 개발의 간극을 줄이는 역할입니다. UI 아키텍처를 전문적으로 설계합니다. |
| PWA / 웹앱 전문가 | 앱스토어 없이 브라우저만으로 네이티브 앱 수준의 경험을 제공하는 영역입니다. |
| 풀스택 | Next.js 덕분에 프론트엔드 개발자가 서버 로직까지 다루기 쉬워졌습니다. 스타트업에서 선호합니다. |
| PM / PO | 기획·디자인·기술을 모두 이해하는 프로덕트 오너로 전향하는 경우도 있습니다. |
3. 연봉 및 채용 트렌드 (2025 기준)
아래 수치는 그룹바이, 코드트리 등 여러 채용 플랫폼의 2025년 데이터를 종합한 것입니다.
| 구분 | 평균 연봉 (추정치) | 비고 |
|---|---|---|
| 신입 ~ 1년차 | 약 3,200 ~ 4,000만 원 | 대기업·빅테크는 6,000만 원 이상에서 시작하기도 합니다. |
| 2 ~ 4년차 | 약 4,500 ~ 7,000만 원 | 이직을 통한 연봉 점프가 가장 활발한 구간입니다. |
| 5 ~ 10년차 | 약 7,000만 원 ~ 1억 이상 | 시니어는 코드만 잘 짜는 게 아니라 시스템을 설계하는 역할입니다. |
채용 시장 분위기
최근 IT 채용 시장은 신규 채용 규모가 줄고, 신입보다 경력직을 선호하는 경향이 뚜렷합니다. 2025년 네카라쿠배당토 가운데 네이버를 제외한 나머지 기업들은 올해 신입 IT 개발자 공개 채용 계획이 없다고 밝혔습니다. AI가 단순 코딩 업무를 대체하면서 3년 이상 경력자에 대한 수요는 유지되지만, 신입 채용의 문턱은 높아지고 있습니다.
그래서 자신만의 기술적 고민과 트러블슈팅 경험, 문서화 역량, 탄탄한 자바스크립트 기본기를 꾸준히 보여주는 것이 중요합니다. 프로젝트 경험이 가장 핵심적인 평가 요소라는 점도 기억해두세요.
4. 앞으로 나올 질문들
매주 스터디 자료 마지막에는 조금 고민이 필요한 질문을 하나씩 낼 예정입니다. 단순 암기가 아니라, 왜 그런지 스스로 생각해보는 과정이 중요하거든요. 맛보기로 하나 내보겠습니다.
Q. JavaScript에서 1 + 1 === 2의 결과가 false가 될 수 있습니다. 어떤
경우에 그럴까요?
(힌트: 자바스크립트에서 숫자를 다루는 방식, 특히 소수점과 관련이 있습니다.
0.1 + 0.2 === 0.3을 콘솔에 찍어보세요.)
이런 식으로 "당연하다고 생각했는데 왜?" 같은 질문을 낼 거예요. 정답보다는 고민하는 과정이 중요합니다.
0주차 질문
Q. 웹 페이지에서 시각적으로 완전히 똑같이 굵게 보이는 두 단어가 있습니다. 하나는 CSS로 굵기만 준 것이고, 다른 하나는 HTML의
<strong> 태그를 사용한 것입니다. 눈에는 똑같이 보이는데, 왜 실무에서는 <strong> 같은 시맨틱 태그를 써야 한다고 할까요?(힌트: 검색 엔진과 스크린 리더기가 이 둘을 다르게 인식합니다.)
5. 읽어볼 만한 자료
전부 읽을 필요는 없습니다. 제목 보고 끌리는 것부터 하나씩 읽어보세요.
브라우저 렌더링 원리 (MDN 공식 문서): Critical Rendering Path를 깊이 알고 싶다면. 한국어 번역이 되어 있습니다.
State of JavaScript 2024: 전 세계 개발자들이 어떤 도구를 쓰는지 데이터로 확인할 수 있습니다. 영어지만 차트만 봐도 트렌드가 보입니다.
개발자 연봉 및 채용 관련: 연봉이 궁금하거나 취업 준비 방향을 잡고 싶을 때 참고하세요.
프론트엔드 트렌드: 기술 스택 변화와 AI 시대의 프론트엔드 흐름을 정리한 글들입니다.
웹 렌더링 방식 비교 (web.dev): SSR, CSR, SSG 같은 용어가 나중에 나올 때 참고할 구글 공식 가이드입니다. 지금 당장은 안 읽어도 됩니다.
6. 관련 포스팅
7. 다음 주 안내 & 사전 과제
다음 주부터는 HTML 기초 문법과 구조를 배웁니다. 각 태그의 역할과 웹 페이지를 구성하는 기본 원리를 다룰 예정입니다.
사전 과제
아래 영상의 1주차 진도 구간(00:00:00 ~ 01:36:21)을 시청해주세요. 개발 환경 세팅부터 표(Table) 만들기까지의 내용입니다.
- 영상: 제대로 파는 HTML & CSS
- 구간: 00:00:00 ~ 01:36:21 (약 1시간 36분)
- 링크:
제대로 파는 HTML & CSS - 1주차 구간 시청하기
Post Q&A
오케이징에게 물어보기
프론트엔드 스터디 대면 0주차: 프론트엔드 개발자란? 그리고 우리가 배울 것들 전체를 기준으로 질문과 피드백을 받아요.답을 본 뒤에는 이 내용을 댓글로 달아서 서징에게도 물어볼 수 있어요. 작성자가 직접 볼 수 있어요!
0/500
포스트 목록
/study/clab-26-1/in-person
파일 9개, 폴더 0개
프론트엔드 스터디 대면 0주차: 프론트엔드 개발자란? 그리고 우리가 배울 것들프론트엔드 스터디 대면 1주차: HTML 마크업과 폼, 그리고 CSS의 시작프론트엔드 스터디 대면 2주차: 폼(Form), CSS 선택자, 그리고 박스 모델프론트엔드 스터디 대면 3주차: 박스 모델 실전, Position과 Flexbox프론트엔드 스터디 대면 6주차(1): HTML/CSS/JS 리마인드와 브라우저 렌더링프론트엔드 스터디 대면 6주차(2): AI 시대의 개발 방식과 프론트엔드 개발자의 위치프론트엔드 스터디 대면 7주차: React 입문과 프로젝트 구조프론트엔드 스터디 대면 8주차: API와 통신 — 프론트엔드와 백엔드의 계약프론트엔드 스터디 대면 9주차: Next.js 렌더링 진화와 웹 퍼포먼스
같은 섹션의 대표 이미지
9 posts · latest firstStudy
프론트엔드 스터디 대면 8주차: API와 통신 — 프론트엔드와.
비동기와 async/await를 배운 뒤, 대면에서는 API를 단순 호출 방법이 아니라 프론트엔드와 백엔드 사이의 계약으로 바라봅니다. HTTP, REST, CORS, 프록시, API 클라이언트 구조, TanStack Query와 파일 배치까지 연결합니다.
Study
프론트엔드 스터디 대면 7주차: React 입문과 프로젝트 구조.
바닐라 JS의 한계에서 React가 등장한 이유까지, 컴포넌트와 렌더링 방식을 이해하고 프로젝트 구조 감각을 만들어가는 대면입니다.
Study
프론트엔드 스터디 대면 6주차(1): HTML/CSS/JS.
4~6주차 공백 이후 진행하는 첫 번째 대면입니다. HTML/CSS/JS 핵심을 가볍게 다시 연결하고, 브라우저가 코드를 실제 화면으로 바꾸는 과정을 통해 렌더링 파이프라인과 성능 감각을 잡습니다.
Study
프론트엔드 스터디 대면 6주차(2): AI 시대의 개발 방식과.
길어진 6주차 대면의 두 번째 차시입니다. AI 시대에 개발자가 실제로 어떻게 일하는지, 그리고 프론트엔드 개발자가 디자이너·백엔드·PM 사이에서 어떤 연결과 리딩 역할을 하는지 다룹니다.
Study
프론트엔드 스터디 대면 3주차: 박스 모델 실전,.
3주차 박스 모델과 스타일링 복습, 과제 풀이, 4주차 Position과 Flexbox 레이아웃까지 다룬 대면 스터디 정리입니다. 면접에서 자주 나오는 마진 겹침, box-sizing, Flexbox 관련 질문도 함께 준비합니다.
Study
프론트엔드 스터디 대면 2주차: 폼(Form), CSS.
2주차 폼과 CSS 선택자 복습, 과제 풀이, 3주차 박스 모델과 스타일링까지 다룬 대면 스터디 정리입니다. 면접에서 자주 나오는 GET vs POST, CSS 우선순위, 박스 모델 관련 질문도 함께 준비합니다.
Study
프론트엔드 스터디 대면 1주차: HTML 마크업과 폼, 그리고.
1주차 HTML 핵심 복습과 과제 풀이, 2주차 폼(Form)과 CSS 선택자까지 다룬 대면 스터디 정리입니다. 면접에서 자주 나오는 시맨틱 HTML, img alt 속성 관련 질문도 함께 준비합니다.
Study
프론트엔드 스터디 대면 0주차: 프론트엔드 개발자란? 그리고.
프론트엔드 개발자가 실무에서 하는 일, 2025-2026 기술 스택, 현실적인 연봉과 채용 트렌드를 정리했습니다. 스터디 자료 구조와 앞으로의 방향도 함께 안내합니다.