점검 페이지 구현

Daniel·2025년 5월 23일

Java React Springboot 백엔드

들어가며

어떻게 할까?

@Value, @ConfigurationProperties

Back-End

목록 보기

53/56

들어가며

이번 프로젝트를 진행하며 시스템 점검 페이지를 띄워주는 기능을 구현해보고 싶어 기능 구현까지의 과정을 정리해보려한다.

어떻게 할까?

해당 프로젝트는 프론트(리액트) - 백(스프링부트) 로 이루어져있는 평범한 프로젝트다.
해당 서비스가 Live 중 어떠한 트리거에 의해 서버 점검 페이지를 띄우고 요청을 막아야한다.

구글링 해본 결과 application.yaml 의 설정을 동적으로 업데이트 할 수 있는 기능이 있어
서비스가 돌아가고 있는 도중 환경 변수를 변경해주고, 프론트에서는 그 환경 변수의 상태에 따라 점검 페이지를 보여주면 되지 않을까? 생각했다.

@Value, @ConfigurationProperties

스프링 프로젝트는 .yaml , .properties 등을 통해 설정등을 하게된다.
위 어노테이션들은 그러한 설정들의 구성 및 바인딩에 사용되는 어노테이션인데, 지금 상황에서는 개별 속성 값(서버점검모드의 on/off) 에만 사용할 것 같아
@Value 를 사용하기로 했다.

위 server.inspection.mode 가 false 면 평상시 서비스 상태이고 true 이면 점검 페이지를 띄우도록 할 예정이다.
위처럼 설정한 후 프론트에서 주기적으로 호출해 점검 모드를 확인할 수 있는 컨트롤러를 만들어줬다.

BackEnd 구현

public class Example {
	@Value("${server.inspection.mode}")  
	private boolean isMode; // 현재 서버 점검 모드
	
	@GetMapping("/server-mode-inquiry")  
	public ResponseEntity<사용자 정의 응답 객체> inquiryServerInspectionMode() {  
		return 사용자 정의 응답 객체.ok(isMode);  
	}
	
	@PostMapping("/server-mode-change")  
	public ResponseEntity<사용자 정의 응답 객체> changeServerInspectionMode(@RequestBody Map<String, Object> body) {  
		String name = (String)body.get("name");  
		Object value = body.get("value");  
		
		if (!"server.inspection.mode".equals(name) || !(value instanceof Boolean)) {  
			throw new 사용자 정의 에러;  
		}  
		
		isMode = (boolean)body.get("value");  
		
		return 사용자 정의 응답 객체.ok("서버 점검 모드 트리거 변경 완료");  
	}
}

/server-mode-inquiry 를 호출하면 현재 서버 점검 모드를 조회할 수 있다. -> inquiryServerInspectionMode()

/server-mode-change 를 호출해 서버 점검 모드를 동적으로 변경할 수 있다. -> changeServerInspectionMode()

FrontEnd 구현

서버의 준비는 거의 끝난것 같다. 프론트에서는 어떻게 해야할까?
/server-mode-inquiry 를 호출해 지속적으로 점검 모드를 확인하고 변경 시 점검 페이지를 띄워주면 될 것 같다.

필자가 생각한 방법은 프론트는 리액트로 이루어져있으니
리액트의 전역 구성인 App.jsx 에 useEffect 를 사용해 페이지 진입 시, url 변경 시, 새로고침 시 /server-mode-inquiry 를 호출해 변경 시
서버 점검 페이지를 렌터링 하도록 했다.
(필자는 프론트엔드 개발자가 아니라서...생각나는대로 했는데 더 좋은 방법이 있을 것 같다...)

export const App = () => {  
    const [isServerInspectionMode, setIsInspectionMode] = useState(false);
    const location = useLocation();
    // ... 다른 코드들
    
    useEffect(() => {  
        (async () => {  
            const url = "/server-mode-inquiry";  
            const response = await call(url, "GET");  
            if (response !== undefined && response.status === 200) {  
                setIsInspectionMode(response.data); // 응답값의 서버 점검 모드 값을 꺼내 설정함
            }  
        })();  
    }, [location.pathname, location.reload])  
	  
    if (isServerInspectionMode) {  
        return <서버 점검 페이지/>;  
    }  
	  
    return (  
        // 서버 점검 모드가 false 일 때, 정상 컴포넌트 반환
    );  
}  
  
export default App;