코딩 배우기: 60세 컴퓨터 초보자를 위한 쉬운 가이드 - 여섯 번째 날
JavaScript 함수와 이벤트 핸들링 고급 기술
여섯 번째 날에는 JavaScript 함수와 이벤트 핸들링에 대한 고급 기술을 다루어 보겠습니다. 이를 통해 더 동적이고 유연한 웹 애플리케이션을 만들 수 있게 됩니다.
콜백 함수
콜백 함수란 무엇인가요?
콜백 함수는 다른 함수의 인자로 전달되어 특정 이벤트나 조건이 발생했을 때 호출되는 함수입니다. JavaScript에서 비동기 작업을 처리할 때 자주 사용됩니다.
function fetchData(callback) {
// 비동기적으로 데이터를 가져오는 작업 수행
setTimeout(function() {
let data = '데이터가 도착했습니다!';
callback(data);
}, 2000);
}
function processData(data) {
console.log(data);
}
fetchData(processData);
위의 코드에서 fetchData 함수는 일정 시간이 지난 후 데이터를 가져오고, 데이터가 도착하면 processData 함수를 호출합니다.
클로저
클로저란 무엇인가요?
클로저는 함수와 함수가 선언된 렉시컬 환경의 조합입니다. 클로저를 사용하면 함수가 선언된 위치의 환경에 접근할 수 있습니다.
function outerFunction() {
let outerVariable = '외부 변수';
function innerFunction() {
console.log(outerVariable);
}
return innerFunction;
}
let innerFunc = outerFunction();
innerFunc(); // 외부 변수 출력
위의 코드에서 innerFunction은 외부 함수인 outerFunction의 변수에 접근할 수 있습니다.
이벤트 위임
이벤트 위임이란 무엇인가요?
이벤트 위임은 부모 요소에 이벤트 리스너를 추가하여 자식 요소의 이벤트를 처리하는 기법입니다. 동적으로 생성된 요소에 대한 이벤트 처리에 유용합니다.
<ul id="list">
<li>항목 1</li>
<li>항목 2</li>
<li>항목 3</li>
</ul>
<script>
document.getElementById('list').addEventListener('click', function(event) {
if(event.target.tagName === 'LI') {
console.log('클릭된 항목:', event.target.textContent);
}
});
</script>
위의 코드에서는 ul 요소에 이벤트 리스너를 추가하여 클릭된 li 요소를 식별하고 해당 항목을 출력합니다.
프로미스
프로미스란 무엇인가요?
프로미스는 비동기 작업의 결과를 나타내는 객체로, 성공 또는 실패 상태를 가질 수 있습니다. 프로미스를 사용하면 비동기 코드를 더 쉽게 관리할 수 있습니다.
function fetchData() {
return new Promise((resolve, reject) => {
// 비동기적으로 데이터를 가져오는 작업 수행
setTimeout(() => {
let success = true;
if(success) {
resolve('데이터가 도착했습니다!');
} else {
reject('데이터를 가져오는데 실패했습니다.');
}
}, 2000);
});
}
fetchData()
.then(data => console.log(data))
.catch(error => console.error(error));
위의 코드에서 fetchData 함수는 프로미스를 반환하고, 성공 시 데이터를 resolve하고 실패 시 에러를 reject합니다.
제너레이터
제너레이터란 무엇인가요?
제너레이터는 함수의 실행을 중간에 멈추고 재개할 수 있는 함수입니다. 이터레이터를 직접 만들 때 유용하게 사용됩니다.
function* generateSequence() {
yield 1;
yield 2;
yield 3;
}
let generator = generateSequence();
console.log(generator.next().value); // 1
console.log(generator.next().value); // 2
console.log(generator.next().value); // 3
위의 코드에서 generateSequence 함수는 제너레이터를 생성하고, next 메서드를 사용하여 각 값을 순차적으로 가져옵니다.
학습 계획
새로운 개념 학습: 콜백 함수, 클로저, 이벤트 위임, 프로미스, 제너레이터 등의 개념을 익히고 이해합니다.
실습: 각 개념을 활용한 예제 코드를 작성하고 실행해 봅니다.
추가 학습: MDN Web Docs나 다른 온라인 자료를 참고하여 더 깊이있는 학습을 진행합니다.
여섯 번째 날에는 JavaScript 함수와 이벤트 핸들링에 대한 고급 기술을 다뤘습니다. 콜백 함수, 클로저, 이벤트 위임, 프로미스, 제너레이터 등의 개념을 익히고, 각각을 활용하여 실제로 코드를 작성하고 실행해 보는 것이 중요합니다. 이러한 기술들을 익숙하게 사용할 수 있게 되면, 더 다양하고 유연한 웹 애플리케이션을 개발할수 있습니다.