자바스크립트 인터랙션: 함수와 이벤트를 통한 작업 추가
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
- 웹 개발자 및 JavaScript 학습자
- 중급~고급 수준의 코드 구조 설계와 이벤트 핸들링에 관심 있는 개발자
핵심 요약
- 함수 유형:
function
키워드, 함수 표현식, 화살표 함수(=>
), 익명 함수, 즉시 실행 함수(IIFE)로 구성 - 이벤트 리스너:
addEventListener()
메서드로 클릭(click
) 및 키보드(keydown
) 이벤트 처리 - 동적 작업 관리:
addTask()
및renderTasks()
함수로 폼 입력을 통한 작업 추가 및 UI 자동 갱신
섹션별 세부 요약
1. 함수의 유형과 특징
- 함수 선언:
function addTask(taskName)
로 정의,return
문을 통해 값 반환 - 화살표 함수: ES6에서 도입,
const formatTask = (task) => ...
형식 사용 - 디스트럭처링:
function displayTask({ title, priority })
로 객체 속성 추출 - REST 파라미터:
function addMultipleTasks(...tasks)
로 가변 인자 처리
2. 이벤트 리스너 구현
- 이벤트 종류:
click
,keydown
등 HTML 요소에 리스너 등록 - 폼 제출 처리:
taskForm.addEventListener('submit', ...)
로 폼 입력값을addTask()
로 전달 - 메모리 누수 방지:
removeEventListener()
사용 및once
옵션 적용
3. 작업 관리 앱 구현
- 초기화 설정:
tasks
배열에 기본 작업 데이터 정의 - UI 업데이트:
renderTasks()
함수로
요소에 작업 목록 동적 렌더링 - 모듈화:
sanitizeInput()
,addTask()
,renderTasks()
함수로 역할 분리
결론
- 실무 팁: 이벤트 드리븐 아키텍처를 활용해
preventDefault()
로 폼 제출 시 UI 자동 갱신, 모듈화된 함수로 코드 유지보수성 향상 - 핵심 구현:
addEventListener()
와renderTasks()
를 통해 사용자 입력을 기반으로 작업 목록을 실시간으로 업데이트하는 웹 앱 구축