로딩 중...
로딩 중...
버튼 클릭 시 사자 명단이 추가되는 동적 효과
구현 지침 탭에서 각 단계를 클릭하여 완료 표시할 수 있습니다.
이 미션에서 무엇을 배우고 어떤 경험을 하게 되는지 확인하세요.
JavaScript로 아기사자 명단을 추가, 삭제하는 인터랙티브 대시보드 만들기
2주차 미션에서는 CSS 레이아웃과 반응형 설계를 중심으로, 여러 장의 자기소개 카드를 보기 좋게 배치하고 안정적인 화면 구조를 만드는 연습을 했습니다.
이번에는 대시보드에 JavaScript 코드를 더해서, 화면을 고정된 결과물이 아닌 사용자 동작에 따라 갱신되는 구조로 바꿉니다. 이를 위해서 아기사자 명단을 동적으로 추가, 삭제하는 컨트롤 영역을 추가하게 됩니다.
폼 UI를 직접 구성하고 간단한 반응형 디자인을 적용하면서 지금까지 배운 내용을 간단히 복습하고, JavaScript로 이벤트를 처리해 명단 데이터가 바뀌면 그 변화가 화면에 그대로 반영되는 구조를 만듭니다. 코드를 작성하는 과정에서 변수와 함수로 코드를 정리하고, 배열이나 객체에 데이터를 담아 관리하는 흐름을 자연스럽게 익히게 됩니다.
이 과정에서 ‘HTML은 동적으로 구성될 수 있으며, 데이터가 바뀌면 화면도 함께 바뀐다’는 감각을 경험하게 됩니다. 또한 ‘지금 화면에 무엇이 보여야 하는가’를 데이터 기준으로 판단하고, 그에 맞춰 DOM을 구성하고 업데이트하는 방식에 익숙해질 수 있습니다.