코딩자율학습단 19기 | 4주차 총정리 - JS 내장객체·DOM/이벤트 + 최종프로젝트 완성(반응형·검증)

4주차 한 줄 결론

이번 주는 자바스크립트의 내장 객체(String/Array/Date/Math)와 BOM(window)로 기능을 빠르게 뽑아쓰는 방법을 익히고, DOM(선택→조작→추가/삭제) + 폼/이벤트 처리로 브라우저 상호작용을 완성한 뒤, 마지막에는 최종 프로젝트를 반응형+JS 효과까지 붙여 끝내고 유효성 검증으로 마무리한 주였습니다.

이번 주 진행 범위

범위: JS 16~18일차(내장 객체/BOM, DOM, 폼·이벤트) + 최종 프로젝트 19~20일차(레이아웃/반응형/JS 적 용/검증)
교재: 「코딩 자율학습 HTML + CSS + 자바스크립트」(김기수 지음, 길벗)

일일 학습일지 인덱스

이번 주 핵심 개념 TOP 5

TOP 1) 표준 내장 객체로 기본 기능을 빨리 꺼내 쓰기

String: includes, indexOf, split, replace, trim처럼 실전에서 바로 쓰는 메서드 위주로 정리
Array: push/pop 같은 파괴적 메서드 vs forEach/filter 같은 비파괴적 메서드를 구분해서 버그를 줄이는 흐름
Date/Math: 날짜 생성 시 month(0부터 시작) 주의 + getTime()으로 날짜 차이 계산 / 난수 범위 공식까지 함 께 정리

TOP 2) BOM(window)로 브라우저를 제어하는 감각 잡기

window가 최상위고 location/history/navigator/screen이 연결된 구조를 먼저 잡아두면, 이후 콘솔 테스트가 훨씬 쉬움
open/close, scrollTo/scrollBy, setTimeout/setInterval 등 “브라우저에서만” 체감되는 기능들이 이 주차의 포 인트

TOP 3) DOM 트리 관점: 선택 → 조작 → 추가/삭제가 한 흐름

선택: getElementById는 id만, querySelector(All)은 CSS 선택자 기반
조작: 텍스트/HTML(textContent/innerText/innerHTML), 스타일(style), 클래스(classList), 데이터(dataset), 속성(get/set/removeAttribute)
추가/삭제: createElement/createTextNode로 만들고 appendChild로 연결, 삭제는 항상 “부모에서 자식을 제 거”( parentNode.removeChild )

TOP 4) 폼과 이벤트: 입력값 처리 + 이벤트 등록 + 기본 동작 제어

폼 값/상태: value, checked, selected, files(FileList)로 사용자 입력을 읽고 제어
이벤트 등록 3종: 인라인 / 프로퍼티 / addEventListener(권장)
이벤트 객체: 좌표/키 입력 정보 확인, 기본 동작은 preventDefault()로 차단
this 포인트: 일반 함수에서는 this가 “이벤트가 발생한 요소”로 잡히지만, 화살표 함수는 달라질 수 있어 e.target을 함께 습관화

TOP 5) 최종 프로젝트 완성: 레이아웃 → 반응형 → JS 인터랙션 → 유효성 검증

레이아웃: 헤더는 flex로 정렬, 섹션은 패턴화해서 반복 구성 / 필요 구간에서 float+clearfix로 안정화
배경 연출: linear-gradient + url 합성으로 히어로 오버레이, background-attachment: fixed로 고정 배경 효 과
반응형: @media (max-width: …) 기준점 + rem 스케일링으로 전체 비율 조정
JS 효과 3종: 타이핑 효과(문자 배열 처리 + 타이머), 스크롤 헤더 클래스 토글, data-* 기반 부드러운 스크롤 이 동
마무리: HTML/CSS Validator로 표준 문법 점검 루틴까지 확정

한 주간의 학습을 통해 배우거나 느낀 점

이번 4주차는 문법을 아는 것에서 끝나는 게 아니라, 브라우저에서 실제로 움직이게 만드는 데 필요한 흐름을 한 번에 묶어서 익힌 느낌이었습니다. 내장 객체로 문자열/배열/날짜/난수 같은 기본 처리를 빠르게 하고, DOM으로 화면 요소를 잡아 바꾸고, 이벤트로 사용자 입력을 연결하니까 웹이 갑자기 ‘프로그램’처럼 느껴지더라고요. 특히 DOM은 기능을 외우기보다 “선택 → 변경 → 추가/삭제” 순서로만 생각해도 정리가 되고, 이벤트는 this/target, preventDefault 같은 실수 포인 트를 미리 잡아두는 게 시간을 정말 아껴줬습니다. 최종 프로젝트까지 연결하면서는 반응형과 JS 효과가 들어가야 결과물이 확 살아난다는 것도 체감했고, 마지막에 Validator로 검증하는 루틴까지 만들어두니 “제출/배포 전 체크리스트”가 생긴게 가장 큰 수확이었습니다.

코딩자율학습단 19기 | 4주차 총정리 – JS 내장객체·DOM/이벤트 + 최종프로젝트 완성(반응형·검증)