입문
42 / 42 완료
웹 개발 실전 입문
코드 한 줄 몰라도 정적 웹페이지 하나 완성하기 — 42일, 순서대로 따라가는 과정
W1
Week 1 · 웹이 작동하는 방식
Day 1
웹이 작동하는 방식
Day 2
DOM Tree와 시맨틱 태그
Day 3
실전 코드 읽는 법 — 레이아웃 블록 찾기
Day 4
CSS 기초 — 선택자, Box Model, Display
Day 5
Flexbox — 1차원 정렬 완전 정복
Day 6
CSS Grid — 2차원 카드 레이아웃
Day 7
JavaScript 최소 이해
W2
Week 2 · 컴포넌트와 빌드타임 데이터
Day 8
컴포넌트 변수란 무엇인가
Day 9
포스트 카드 HTML — 더미 데이터로 먼저 만들기
Day 10
배열과 .map() — 카드 여러 개를 한 번에 렌더링
Day 11
동적 필드 확장 — 날짜·썸네일·요약·링크
Day 12
Astro의 파일 기반 라우팅
Day 13
목록 페이지 vs 상세 페이지, 그리고 조건 렌더링
Day 14
Week 2 통합 테스트
W3
Week 3 · 레이아웃과 컴포넌트 조립
Day 15
컴포넌트 사고 — UI를 조립 단위로 보기
Day 16
Post Card 컴포넌트 완성형
Day 17
Sidebar 컴포넌트
Day 18
Header + Nav, 모바일 햄버거 메뉴
Day 19
Grid 전체 레이아웃 — grid-template-areas
Day 20
반응형 완성 — 3 Breakpoint
W4
Week 4 · 통합 점검과 디버깅
Day 21
Week 1~3 통합 테스트 — 1차 완성본
Day 22
DevTools 완전 이해 — F12의 모든 것
Day 23
CSS 디버깅 — 적용 안 되는 5가지 원인
Day 24
JS 디버깅 — TypeError를 두려워하지 마라
Day 25
빌드 데이터 오류 디버깅 — 3증상 대응표
Day 26
console.log 전략적 사용법
Day 27
복합 오류 해결 — 연쇄 오류 끊기
Day 28
디버깅 자력 해결 테스트
W5
Week 5 · 데이터 통신과 동적 기능
Day 29
JSON — 데이터가 오가는 형식
Day 30
데이터 → 화면: JSON을 카드로 렌더링
Day 31
fetch 기초 — 서버에서 데이터 가져오기
Day 32
Promise와 async/await 제대로 이해하기
Day 33
Cloudflare Pages Functions로 나만의 API 만들기
Day 34
폼 제출과 POST 요청
Day 35
에러 핸들링과 로딩 상태
W6
Week 6 · 완성도 다지기와 배포
Day 36
이미지 최적화와 레이아웃 밀림 방지
Day 37
접근성(a11y) 기초
Day 38
SEO 기초 — 검색엔진과 소셜 공유 최적화
Day 39
Git과 배포 워크플로
Day 40
성능 최적화 실전
Day 41
전체 사이트 최종 통합 테스트
Day 42
마무리 — 42일 회고와 다음 단계