🐯[TIL] 250718-034

byo·2025년 7월 21일

[TIL] 🐯멋쟁이사자처럼

목록 보기

34/42

💫 JAVA

🧮 Calculator with Js and Thymeleaf

📡 controller

@Controller
public class CalculatorController {

    @GetMapping("/")
    public String index() {
        // (src/main/resources/templates/index.html 을 의미, Thymeleaf 사용 시)
        return "index";
    }

    @PostMapping("/calculate")
    @ResponseBody // 결과를 JSON 형식으로 브라우저에 직접 응답한다.
    public Map<String, Double> calculate(
            // num1, num2, operator를 요청에서 받아온다.
            @RequestParam double num1,
            @RequestParam double num2,
            @RequestParam String operator
    ) {
        double result = switch (operator) {
            case "add" -> num1 + num2;
            case "subtract" -> num1 - num2;
            case "multiply" -> num1 * num2;
            case "divide" -> num2 != 0 ? num1 / num2 : Double.NaN;
            default -> Double.NaN;
        };

        // 계산 결과를 키 "result"로 갖는 Map 형태로 반환 (JSON 형식으로 자동 변환)
        return Map.of("result", result);
    }
}

🖼️ thymeleaf

<body>
<div class="calculator-container">
    <div id="display">0</div>
    <div class="calculator-grid">
        <button class="btn function" data-action="clear">C</button>
        <button class="btn function" data-action="divide">÷</button>
        <button class="btn function" data-action="multiply">×</button>
        <button class="btn function" data-action="subtract">−</button>

        <button class="btn digit" data-digit="7">7</button>
        <button class="btn digit" data-digit="8">8</button>
        <button class="btn digit" data-digit="9">9</button>
        <button class="btn function" data-action="add">+</button>

        <button class="btn digit" data-digit="4">4</button>
        <button class="btn digit" data-digit="5">5</button>
        <button class="btn digit" data-digit="6">6</button>
        <button class="btn" data-action="equals" rowspan="2">=</button>

        <button class="btn digit" data-digit="1">1</button>
        <button class="btn digit" data-digit="2">2</button>
        <button class="btn digit" data-digit="3">3</button>

        <button class="btn digit zero" data-digit="0">0</button>
        <button class="btn digit" data-digit=".">.</button>
    </div>
</div>
<script th:src="@{/main.js}"></script>
</body>

🎯 js

const display = document.getElementById('display');

let first = '';          // 첫 번째 숫자
let second = '';         // 두 번째 숫자
let operator = null;     // 선택한 연산자(+, -, *, /)
let resultDisplayed = false;  // 결과가 화면에 표시되었는지 여부

// 숫자 버튼에 클릭 이벤트 추가
document.querySelectorAll('.digit').forEach(
    btn => {
        btn.addEventListener('click', () => {
            // 결과가 이미 표시된 상태라면, 새 숫자 입력을 위해 첫 번째 숫자 초기화
            if (resultDisplayed) {
                first = '';
                resultDisplayed = false;
            }

            // 클릭한 버튼의 data-digit 속성 값 가져오기
            const digit = btn.dataset.digit;  

            if (!operator) {  // 연산자가 선택되지 않은 상태(첫 번째 숫자 입력 중)
                if (!(digit === '.' && first.includes('.'))) first += digit; // 소수점(.)이 중복 입력되지 않도록 조건 확인 후 숫자 추가
                display.textContent = first || '0'; // 화면에 첫 번째 숫자 표시, 값이 없으면 0 표시
                display.scrollLeft = display.scrollWidth;  // 숫자가 길어지면 오른쪽 끝으로 스크롤 이동
            } else {  // 연산자가 선택된 상태(두 번째 숫자 입력 중)
                if (!(digit === '.' && second.includes('.'))) second += digit; // 소수점(.) 중복 입력 방지 후 두 번째 숫자 추가
                display.textContent = second || '0'; // 화면에 두 번째 숫자 표시, 값 없으면 0 표시
                display.scrollLeft = display.scrollWidth; // 오른쪽 끝으로 스크롤 이동
            }
        });
    }
)

// 기능 버튼(클래스 'function') 모두에 클릭 이벤트 추가
document.querySelectorAll('.function').forEach(
    btn => {
        btn.addEventListener('click', () => {
            const action = btn.dataset.action;  // 클릭한 버튼의 data-action 값 가져오기

            if (action === 'clear') {  // 'clear' 버튼 클릭 시
                first = '';            // 첫 번째 숫자 초기화
                second = '';           // 두 번째 숫자 초기화
                operator = null;       // 연산자 초기화
                display.textContent = '0';  // 화면에 0 표시
                return;                // 함수 종료
            }

            if (action === 'equals') return;  // '=' 버튼 클릭 시 여기서는 처리하지 않고 아래 별도 이벤트로 이동

            operator = action;     // 연산자 저장 (add, subtract, multiply, divide 중 하나)
            resultDisplayed = false;  // 결과 표시 상태 초기화
        })
    }
)

// '=' 버튼 클릭 이벤트 등록
document.querySelector('[data-action="equals"]').addEventListener(
    'click',
    () => {
        // 서버에 보낼 파라미터를 key=value 형식으로 생성
        const params = new URLSearchParams({
            num1: first,
            num2: second,
            operator
        });
        // fetch API로 POST 요청 보내기
        fetch('/calculate', {
            method: 'POST',  // POST
            headers: { 'Content-Type': 'application/x-www-form-urlencoded'},  // 폼 데이터 형식 지정
            body: params  // 보낼 데이터
        }).then(res => res.json())  // 응답을 JSON으로 변환
        .then(data => {
            display.textContent = data.result; // 서버에서 받은 결과를 화면에 표시
            first = data.result.toString(); // 결과를 첫 번째 숫자로 저장하여 이어서 계산 가능하게 함
            second = '';       // 두 번째 숫자 초기화
            operator = null;   // 연산자 초기화
            resultDisplayed = true;  // 결과 표시 완료 상태로 변경
        })
        .catch(error => {
            console.error(error);  // 오류 콘솔 출력
            display.textContent = 'Error';  // 화면에 에러 메시지 표시
        })
    }
);

▶️ demo

byo

🗂️ hamstern

이전 포스트

🐯[TIL] 250717-033

다음 포스트

🐯[TIL] 250718-034

[TIL] 🐯멋쟁이사자처럼

💫 JAVA

🧮 Calculator with Js and Thymeleaf

📡 controller

🖼️ thymeleaf

🎯 js

▶️ demo

🐯[TIL] 250717-033

🐯[TIL] 250721-035

0개의 댓글