웹 프로젝트 기초집LESSON 09

JavaScript 시작: 변수·함수·이벤트로 화면에 반응 만들기

난이도입문

예상 시간40분

선수지식8강 이미지와 에셋

9강. JavaScript 시작: 변수·함수·이벤트로 화면에 반응 만들기

1. 이번 강의에서 해결할 문제

버튼을 눌러도 화면이 바뀌지 않습니다. DOM 요소를 한 번 찾고 상태 변경을 이름 있는 함수로 분리해 첫 상호작용을 만듭니다.

2. 학습 목표

3. 핵심 개념

이벤트 리스너는 클릭이 일어났을 때 실행할 함수를 등록합니다. 상태를 DOM 문구에서 추측하기보다 aria-expanded 같은 명시적 값으로 읽고 갱신합니다. 같은 요소를 함수마다 다시 검색하지 않고 초기화 시 참조를 저장합니다.

4. 단계별 실습

HTML · 소개 섹션 내부

game-dev-portfolio/index.html
<button id="aboutToggle" type="button" aria-expanded="false" aria-controls="aboutMore">
  소개 더 보기
</button>
<p id="aboutMore" hidden>게임플레이 시스템과 접근 가능한 UI를 공부합니다.</p>

JavaScript · 파일 경로: js/app.js

game-dev-portfolio/js/app.js
const aboutToggle = document.querySelector('#aboutToggle');
const aboutMore = document.querySelector('#aboutMore');

function setAboutExpanded(expanded) {
  aboutToggle.setAttribute('aria-expanded', String(expanded));
  aboutToggle.textContent = expanded ? '소개 접기' : '소개 더 보기';
  aboutMore.hidden = !expanded;
}

aboutToggle.addEventListener('click', () => {
  const expanded = aboutToggle.getAttribute('aria-expanded') === 'true';
  setAboutExpanded(!expanded);
});

개발자 도구 확인: Console에서 aboutToggle이 null이 아닌지 확인합니다. Elements에서 클릭 전후 aria-expanded와 hidden 변화를 비교합니다.

5. 코드가 동작하는 이유

defer 덕분에 DOM 생성 후 요소를 찾습니다. 클릭하면 현재 문자열 상태를 Boolean으로 바꾸고, 한 함수가 접근성 속성·버튼 문구·콘텐츠 표시를 일관되게 갱신합니다.

6. 자주 하는 실수와 해결법

7. 직접 실습

8. 이해 점검 질문 3개

9. 핵심 요약

MINI QUIZ