# 프론트엔드와 백엔드에서 각각 시간 포맷 처리하는 이유 (Spring Boot + JS)

Spring Boot 프로젝트를 하다 보면 날짜/시간 처리를 프론트(JS)와 백엔드(Java) 양쪽에서 각각 처리하는 경우가 많다.
"어라? 한쪽에서 처리하면 되는 거 아냐?" 싶지만, 사실은 각자의 역할이 다르기 때문에 둘 다 필요한 것.
아래에서 실제 코드를 기준으로 각각 어떤 역할을 하는지 정리해보자.

 

1. 백엔드에서 시간 포맷 처리 (Controller)

DateTimeFormatter formatter = DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm:ss");
LocalDateTime startDateTime = LocalDateTime.parse(startDate, formatter);

 

• 프론트에서 넘겨준 문자열(String)을 LocalDateTime 객체로 변환하기 위해 사용
• 예: "2025-05-12 00:00:00" → LocalDateTime 객체
• @RequestParam으로 받은 날짜가 비었을 경우 기본 날짜 범위 설정도 함께 처리

문자열 → LocalDateTime 파싱 + 기본값 처리

 

2. 프론트엔드(js)에서의 시간 포맷 처리

function formatDate(dateStr) {
    const date = new Date(dateStr);
    date.setHours(date.getHours() + 9); // KST 보정
    return date.toISOString().replace('T', ' ').substring(0, 19);
}

 

• Date 객체는 기본적으로 UTC 기준 → 한국시간(KST)으로 맞춰줘야 함
• .toISOString()은 T 포함된 포맷이라 사용자 입장에서 보기 어려움
• 그래서 KST 보정 + "yyyy-MM-dd HH:mm:ss" 형식으로 보기 좋게 바꿈

UTC → KST 변환 + 예쁘게 포맷해서 UI에 표시

 

백엔드 (Spring Boot Controller)	날짜 문자열을 LocalDateTime으로 변환 + 비었을 경우 기본 날짜 설정
프론트엔드 (JS)	UTC → KST 보정 + 사용자에게 보기 좋은 형태로 포맷

 

백엔드는 데이터를 처리하기 위해 포맷하고,
프론트는 사람 눈에 보기 좋게 보여주려고 포맷한다.