← 목록

ES6 Arrow Functions를 활용한 간단한 웹 애플리케이션 만들기

작성: 2024년 07월 11일읽기: 약 3분
GPTLLMES6

웹 개발에 관심이 있는 주니어 개발자 여러분, 오늘은 ES6의 Arrow Functions를 사용하여 간단한 웹 애플리케이션을 만드는 방법을 배워볼 거예요. Arrow Functions는 코드를 더 깔끔하고 간결하게 만들어 줍니다. 복잡한 용어는 잠시 잊고, 실제 예제를 통해 이해해 봅시다.

Arrow Functions란 무엇인가요?

Arrow Functions(화살표 함수)는 함수를 좀 더 짧은 문법으로 쓸 수 있는 ES6의 새로운 기능입니다. 기존의 function 키워드 대신 => 기호를 사용합니다. 이것은 특히 this 키워드의 바인딩 방식이 기존 함수와 다르기 때문에 유용합니다.

간단한 예제로 배워보기

기존 함수 방식

function add(x, y) {
    return x + y;
}
console.log(add(2, 3)); // 출력: 5

Arrow Functions 방식

const add = (x, y) => x + y;
console.log(add(2, 3)); // 출력: 5

보시다시피, Arrow Functions를 사용하면 function 키워드 없이 함수를 선언할 수 있고, 코드가 훨씬 간결해집니다.

웹 애플리케이션 예제

이제, Arrow Functions를 활용하여 간단한 웹 애플리케이션을 만들어 볼게요. 사용자로부터 입력받은 두 숫자를 더하는 간단한 계산기를 만들어 보겠습니다.

HTML 파일

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>간단한 계산기</title>
</head>
<body>
    <input id="number1" type="number" placeholder="숫자를 입력하세요">
    <input id="number2" type="number" placeholder="숫자를 입력하세요">
    <button id="calculate">계산하기</button>
    <div id="result"></div>

    <script src="app.js"></script>
</body>
</html>

JavaScript 파일 (app.js)

document.getElementById('calculate').addEventListener('click', () => {
    const num1 = parseInt(document.getElementById('number1').value);
    const num2 = parseInt(document.getElementById('number2').value);
    const result = num1 + num2;
    document.getElementById('result').innerText = `결과는 ${result}입니다.`;
});

이 코드는 두 개의 숫자를 입력받아, '계산하기' 버튼을 클릭하면 그 결과를 화면에 표시합니다. 여기서 Arrow Functions가 사용된 부분은 이벤트 리스너를 추가할 때입니다. 이 방식으로 코드를 작성하면, 함수의 목적이 명확해지고, 코드가 더 간결해집니다.

마무리

Arrow Functions는 ES6에서 도입된 훌륭한 기능 중 하나입니다. 간결한 문법으로 코드의 가독성을 높이고, this 키워드와 관련된 일반적인 문제를 해결해 줍니다. 오늘 배운 내용을 통해 여러분의 웹 개발 프로젝트에 Arrow Functions를 적극 활용해 보세요. Happy coding!