네 번째 프로젝트에서는 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을 사용한 사용자 인터페이스

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

    
7
    
8
    
9
    
-

Vue의 이벤트 처리를 Bootstrap의 클래스와 결합하여 시각적으로 매력적인 및 반응형 계산기 인터페이스를 만드는 방법을 배웠습니다.

6. Edge Case 처리 및 UX 강화

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

if (calculated.value) {
    result.value = value; // Replace the result with the new value
    calculated.value = false; // Reset the calculated flag
}

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

최종 생각: 계산기를 만들면서 얻은 것

이 프로젝트에서는 Vue.js를 사용하여 동적 입력 처리, 상태 관리 및 깔끔한 사용자 인터페이스 구축에 대한 심층적인 정보를 제공했습니다. 나는 다음 분야에서 실질적인 지식을 얻었습니다:

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

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