Vue.js로 계산기를 구축하면서 배운 것

네 번째 프로젝트에서는 Vue.js를 사용하여 계산기 앱을 개발했습니다. 사용자 입력을 처리하고, 동적 결과를 표시하고, JavaScript로 계산을 수행하는 방법을 이해하는 귀중한 경험이었습니다. 다음은 이 앱을 구축하면서 배운 주요 교훈을 요약한 것입니다.

1. 사용자 입력 처리 및 디스플레이 업데이트

계산기는 사용자 입력(숫자 및 연산자)을 수용하고 디스플레이를 동적으로 업데이트해야 합니다. 현재 입력과 결과를 추적하기 위해 Vue의 반응형 속성을 사용했습니다. Vue의 ref 함수를 사용하면 다음 값을 쉽게 저장하고 수정할 수 있습니다.

const result = ref('');
const calculated = ref(false);

사용자가 숫자나 연산자를 클릭할 때마다 결과 속성이 업데이트되어 디스플레이에 가장 최근 입력이 표시됩니다. 함수 handlerClick은 결과에 값을 추가하는 데 사용됩니다.

const handleClick = (value) => {
    if (calculated.value) {
        result.value = value; // Reset the result if a calculation was just completed
        calculated.value = false;
    } else {
        result.value += value;
    }
}

이것은 사용자 상호작용 처리와 반응형 속성을 기반으로 인터페이스를 업데이트하는 데 있어 필수적인 교훈이었습니다.

2. 운영자 관리: 중복 입력 방지

계산기를 만들 때 중요한 과제 중 하나는 여러 연산자가 연속적으로 추가되지 않도록 하는 것입니다(예: 3 4와 같은 입력 방지). 이 문제를 해결하기 위해 마지막 문자가 이미 연산자인 경우 연산자를 바꾸는 검사를 추가했습니다.

const handleOperatorClick = (operator) => {
    if (/[+*/-]$/.test(result.value)) {
        result.value = result.value.slice(0, -1) + operator; // Replace the last operator
    } else {
        result.value += operator; // Add the new operator
    }
    calculated.value = false; // Reset flag
};

이 방법을 사용하면 입력 문자열 끝에 연산자가 하나만 존재하므로 계산기의 강건성이 향상됩니다.

3. 입력 지우기 및 삭제

계산기는 모든 입력을 지우거나(AC 버튼 사용) 마지막 입력 문자를 삭제(DEL 버튼 사용)하는 기능을 제공해야 합니다. 저는 ClearAll 및 Clear 메소드를 사용하여 다음 두 가지 작업을 구현했습니다.

• 모두 지우기 (AC): 전체 입력을 재설정합니다.

const clearAll = () => {
    result.value = '';
    calculated.value = false;
};

• 마지막 문자 삭제 (DEL): 입력 문자열의 마지막 문자를 제거합니다.

const clear = () => {
    if (result.value && result.value.length > 0) {
        result.value = result.value.slice(0, -1); // Remove the last character
        if (result.value.length === 0) {
            clearAll(); // If the input is empty, reset everything
        }
    } else {
        clearAll();
    }
};

문자열 조작을 처리하고 원활한 사용자 경험을 제공하는 데 유용한 연습이었습니다.

4. 계산 수행

계산기의 핵심 기능 중 하나는 사용자가 입력한 수식을 평가하는 것입니다. JavaScript에 내장된 eval() 함수를 사용하여 입력 표현식의 결과를 계산했습니다.

const calculate = () => {
    let stringifiedResult = new String(result.value);
    result.value = eval(String(stringifiedResult)); // Evaluate the expression
    calculated.value = true; // Set flag to indicate the calculation is done
};

이 기본 계산기에서는 eval()이 간단하고 효과적이지만 임의의 사용자 입력을 처리할 때 발생할 수 있는 잠재적인 보안 위험에 대해 배웠습니다. 향후 프로젝트에서는 향상된 안전성과 유연성을 위해 사용자 정의 파서를 작성하는 방법을 모색할 것입니다.

5. Vue와 Bootstrap을 사용한 사용자 인터페이스

계산기 인터페이스를 구축하기 위해 빠르고 반응성이 뛰어난 디자인을 위해 부트스트랩을 사용했습니다. 버튼은 숫자와 연산자에 대해 적절한 색상 코딩을 사용하여 그리드에 배열되어 있습니다.

const result = ref('');
const calculated = ref(false);

Vue의 이벤트 처리를 Bootstrap의 클래스와 결합하여 시각적으로 매력적인 반응형 계산기 인터페이스

6. Edge Case 처리 및 UX 강화

계산기를 만드는 동안 여러 가지 극단적인 경우를 만났습니다. 예를 들어, 계산을 수행한 후 사용자가 새 숫자를 입력하면 계산기는 이전 결과를 재설정해야 합니다. 이는 계산된 플래그를 확인하여 처리되었습니다.

const handleClick = (value) => {
    if (calculated.value) {
        result.value = value; // Reset the result if a calculation was just completed
        calculated.value = false;
    } else {
        result.value += value;
    }
}

또 다른 유용한 기능은 사용자가 마음을 바꾸면 마지막 연산자를 자동으로 교체하여 사용자 경험을 개선하는 등 디스플레이를 보다 직관적으로 구성하는 것이었습니다.

마지막 생각: 계산기를 만들면서 얻은 것

이 프로젝트에서는 Vue.js를 사용하여 동적 입력 처리, 상태 관리, 깔끔한 사용자 인터페이스 구축에 대해 자세히 알아봤습니다. 저는 다음 분야에서 실용적인 지식을 얻었습니다.

• 상태 관리: 사용자의 입력과 결과를 동적으로 추적하고 업데이트하는 방법
• 이벤트 처리: 사용자 동작(숫자 클릭, 운영자 클릭, 결과 계산)에 응답합니다.
• UI/UX 고려 사항: 계산기가 극단적인 경우를 우아하게 처리하고 명확하고 직관적인 사용자 인터페이스를 제공하는지 확인합니다.
• 문자열 조작: 입력 문자열을 구문 분석하고 조작하여 유효한 수학 표현식을 생성합니다.

이 계산기를 구축하는 것은 Vue.js를 사용하여 사용자 입력을 관리하고 동적인 대화형 웹 애플리케이션을 만드는 능력을 강화한 보람 있는 경험이었습니다. 이러한 기술을 더욱 복잡한 프로젝트에 적용할 수 있기를 기대합니다!

위 내용은 Vue.js로 계산기를 구축하면서 배운 것의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!