[트러블슈팅] "is"로 시작하는 boolean 타입의 JSON 변환

 

 

Backend 자바 스프링부트를 실습하던 와중 발생한 boolean 타입의 JSON 변환에 대한 트러블 슈팅이다. 

 

---

 

1. 문제 상황 

dashboard.html 파일에 간단하게 주식 시장 대시보드를 구현하였다.

이때 거래내역을 불러올 경우 주식을 구매했음에도 판매라고 뜨는 문제를 발견했다. 

 

 

2. 원인 추론

문제의 원인은 1) 백엔드 구현 문제, 2) 값 전달 시 오류 문제, 3) 프론트엔드 구현 문제  

이렇게 3가지로 가정하고 차근차근 문제의 원인을 살펴보았다. 

 

 

1) 백엔드 구현 문제 확인 

먼저 `StockMarketService.java` 파일에서 isPurchase 값 (구매: true, 판매: false)이

정확히 들어갔는지 확인하고자 log를 찍어보았다. 

// 거래 내역 기록
StockTransaction transaction = StockTransaction.builder()
        .player(player)
        .stock(stock)
        .quantity(quantity)
        .price(stock.getStockPrice())
        .isPurchase(false)
        .timestamp(LocalDateTime.now())
        .balanceAfterTransaction(player.getPlayerMoney())
        .build();

player.addTransaction(transaction);

// *** 오류 확인을 위한 log 추가
log.info("판매 오류 확인: {}", transaction.isPurchase());

터미널에서 값을 확인해보았을때, boolean 형태로 잘 전달된 것을 볼 수 있었다. 

 

 

2) 값 전달 시 오류 문제 확인 

따라서 도메인 클래스나 서비스 클래스에서는 문제가 없음을 판단하였고,

H2-console을 통해 데이터베이스에 값이 잘못 전달된건지 확인하였다. 

 

url에 `localhost:8080/h2-console`을 입력하고, 

내가 설정한 application.properties에 맞추서 h2 데이터베이스에 접근한다. 

# 데이터베이스 설정
spring.datasource.url=jdbc:h2:mem:stockmarketdb
spring.datasource.driverClassName=org.h2.Driver
spring.datasource.username=sonjiyeong
spring.datasource.password=

* 이때까지 password를 설정해서 계속 귀찮게 들어갔는데, 내짝꿍 민주가 설정 안해도 된다고 알려줬다~><

 

 

거래 내역이 저장된 STOCK_TRANSACTIONS를 확인하면,

대시보드 (위의 프론트엔드 이미지)와 달라 TRUE (구매)와 FALSE (판매)가 옳게 들어간 것을 확인할 수 있었다. 

 

따라서 백엔드 쪽 문제가 아닌 프론트엔드 단의 문제라고 판단할 수 있는데.. 

 

 

3) 프론트엔드 구현 문제 확인 

해당 페이지는 dashboar.html에서 거래 내역 값을 불러오는 값의 코드는 아래이다. 

transactions.forEach(tx => {
    const row = document.createElement('tr');
    const timestamp = new Date(tx.timestamp).toLocaleString();
    const type = tx.ispurchase ? '구매' : '판매';
    const totalAmount = tx.price * tx.quantity;

    row.innerHTML = `
        <td>${timestamp}</td>
        <td>${type}</td>
        <td>${tx.stockName}</td>
        <td>${tx.quantity}주</td>
        <td>${tx.price.toLocaleString()}원</td>
        <td>${totalAmount.toLocaleString()}원</td>
        <td>${tx.balanceAfterTransaction.toLocaleString()}원</td>
    `;
    transactionList.appendChild(row);
});

 

여기서 오류를 확인하고자 `const type = tx.ispurchase ? '구매' : '판매';` 의 코드를

`const type = tx.ispurchase ? '판매' : '구매';`로 바꿔보았다. 

 

그 결과 무조건 판매로 표시되다가 `구매`로만 표시되는 것을 확인할 수 있다. 

따라서 html 파일에서 isPurchase 값이 무조건 false로 인식되는 문제가 핵심 원인임을 알 수 있었다. 

 

이 문제를 짝꿍한테 상담하던 중 isPurchase의 필드명이 문제인 것 같다는 의견을 들을 수 있었다. 

 

 

3. 해결 방안

isPurchase 변수명을 수정해서 확인해본 결과, 

문제의 원인은 JSON의 boolean 필드를 직렬화할 때 필드명에 `is` 접두사를 잘못 붙인 문제였다. 

 

현재 나는 Java 엔티티 클래스에서 `isPurchase`라는 필드를 사용했는데, 

이 객체가 JSON으로 직렬화될 때, Jackson이 이를 자동으로 `purchase`라는 이름의 JSON 속성으로 변환한다. 

 

따라서 프론트엔드에서 `tx.isPurchase`로 접근하여 했지만, 

실제 JSON 객체에는 purchase라는 이름으로 있었기 때문에 `undefined`가 반환된 것이다 

 

 

4. 결과 확인 

따라서 코드를 아래와 같이 수정하면, 

const type = tx.purchase ? '구매' : '판매';

 

결과가 제대로 출력되는 것을 확인할 수 있다. 

 

 

문제의 핵심 원인을 알려준 내 짝꿍 땡꾸~!