Week 1 · 웹이 작동하는 방식 Day 7 / 42

JavaScript 최소 이해 — 클릭하면 뭔가 일어난다

Week 1의 마지막 조각: 정적인 화면에 반응을 붙이는 법

10초 핵심 요약

⏱️ 코드 읽는 법 30초 — JS 문장의 생김새

btn.addEventListener('click', () => { ... });
• 함수이름(재료) 형태는 "이 함수에게 괄호 안 재료를 넘겨서 실행해라"는 뜻입니다.
• () => { ... }는 "이름 없는 함수"입니다. "괄호 안 재료를 받아서, 중괄호 안 일을 처리해라"는 뜻이고, 요즘 JS에서 가장 흔하게 쓰는 형태입니다.
• JS도 CSS처럼 한 문장이 끝나면 보통 세미콜론(;)을 붙입니다.
01

HTML · CSS · JS의 역할 분담

HTML은 목수입니다. 방과 문을 어디에 둘지 뼈대를 짭니다. CSS는 인테리어 디자이너입니다. 벽 색과 가구 배치를 정합니다. JS는 전기 기사입니다. 스위치를 누르면 불이 켜지듯, "무언가를 하면 무언가가 바뀌는" 동작을 담당합니다.

렌더링 시점의 한계 — 화면에 채워지는 데이터 자체(어떤 글을 보여줄지)는 브라우저가 파일을 받기 전에 이미 서버에서 정해진 상태입니다. JS는 그 이후 시점에 실행되므로, 데이터 자체는 건드릴 수 없습니다. JS는 이미 채워진 화면 위에서 보이기/숨기기, 스크롤 반응 같은 연출만 담당합니다.
02

script 태그는 어디에 둘까

JS는 HTML을 위에서 아래로 읽으며 실행됩니다. HTML 요소가 아직 만들어지기 전에 JS가 그 요소를 찾으려 하면 실패합니다. 그래서 보통 </body> 바로 위, 즉 페이지의 다른 요소들이 다 만들어진 뒤에 script를 둡니다.

<body>
  <header>...</header>
  <main>...</main>
  /* 다른 요소들이 이미 다 만들어진 뒤에 script 실행 */
  <script defer>...</script>
</body>
defer 속성을 붙이면 script를 head에 두더라도 "HTML을 다 읽은 뒤에 실행하라"고 브라우저에게 미리 예약해둘 수 있습니다. script 위치를 자유롭게 옮기기 어려운 환경에서 특히 유용합니다.
03

요소 찾기 + 반응 붙이기, 딱 두 문장

JS로 화면을 조작하는 흐름은 결국 "① 어떤 요소를 ② 어떤 사건이 일어났을 때 ③ 어떻게 바꿀지"의 3단 구조입니다.

// ① 요소 찾기
const btn = document.querySelector('.toggle-btn');
const box = document.querySelector('.panel');

// ② 사건 + ③ 반응
btn.addEventListener('click', () => {
  box.classList.toggle('open'); // 있으면 빼고, 없으면 붙이고
});

querySelector

CSS 선택자와 똑같은 문법으로 요소를 1개 찾습니다. querySelectorAll은 여러 개를 찾습니다.

addEventListener

addEventListener로 "이 사건이 일어나면 이 함수를 실행해라"를 등록합니다. 'click', 'scroll' 등이 대표적입니다.

classList.toggle

classList.toggle은 클래스를 있으면 빼고 없으면 붙입니다. show/hide, 메뉴 열고 닫기의 기본 패턴입니다.

04

오늘의 실습 + AI 프롬프트

1버튼 클릭 → 요소가 보였다 숨었다 하는 토글을 위 코드로 직접 만들어봅니다.
2스크롤이 300px 이상 내려가면 "맨 위로" 버튼이 나타나게 만들어봅니다.
AI에게 이렇게 지시해 보세요: "스크롤이 300px 이상 내려가면 우측 하단에 '맨 위로' 버튼이 나타나고(fade-in), 클릭하면 부드럽게 맨 위로 스크롤되게 해줘. script는 defer로 body 하단에 넣어줘."
안 될 때 확인하세요 콘솔(F12 → Console)에 Cannot read properties of null 같은 빨간 오류가 보인다면, querySelector가 그 요소를 아직 못 찾았을 때 script가 실행된 것입니다. script 위치를 </body> 바로 위로 옮기거나 defer를 붙이세요.
스스로 설명해보기 — script를 body 하단에 두거나 defer를 쓰는 이유를 설명할 수 있나요?
05

Day 7 완료 체크리스트

HTML/CSS/JS의 역할 차이(뼈대/옷/근육)를 설명할 수 있다.
script를 </body> 위에 두거나 defer를 쓰는 이유를 이해했다.
버튼 클릭 토글과 스크롤 감지 버튼을 직접(또는 AI 도움으로) 만들어봤다.

오늘의 용어

querySelector
CSS 선택자와 같은 문법으로 요소 1개를 찾는 JS 함수
addEventListener
특정 사건(클릭, 스크롤 등)이 일어나면 함수를 실행하도록 등록
classList.toggle
클래스가 있으면 빼고 없으면 붙이는 show/hide 기본 패턴
defer
HTML을 다 읽은 뒤에 script를 실행하라는 예약 속성