요청과 응답 과정, 근데이제 간단한 예시를 곁들인

[GHeeJeon]

1. 먼저, 클라이언트(React 프론트엔드)가 실행됩니다. 이때 FetchDataComponent 컴포넌트가 마운트되면, useEffect 훅 내부의 함수가 실행되어 fetch 함수를 통해 http://localhost:8080/hello로 GET 요청을 보냅니다.

2. 이 요청은 백엔드인 Spring Boot 서버에 도달합니다. Spring Boot 서버는 내부에 설정된 요청 매핑 _{@GetMapping 등} 을 통해 이 요청이 어떤 컨트롤러와 메서드에 해당하는지 찾아냅니다. 이 경우에는 HelloController의 hello 메서드가 실행됩니다.

기본적으로 메인 클래스가 위치한 패키지와 그 하위 패키지를 스캔합니다. 이 과정에서 @controller, @service, @repository, @component 등의 애너테이션이 붙어 있는 클래스를 찾아서 이들을 Spring 컨텍스트(Application Context)에 빈(Bean, Spring이 관리하는 객체)으로 등록합니다.

3. hello 메서드는 "Hello, Spring!"이라는 문자열을 반환합니다. 이 반환값은 HTTP 응답의 본문에 들어갑니다.

4. Spring Boot 서버는 이 응답을 클라이언트로 보냅니다. 응답은 다시 fetch 함수를 호출한 곳으로 돌아오게 됩니다.

5. fetch 함수의 반환값은 Promise이며, 이 Promise가 해결되면 then 메서드의 콜백 함수가 실행됩니다. 이때, 서버로부터 받은 응답 객체를 response.text()를 통해 텍스트로 변환한 후 다음 then 메서드의 콜백 함수로 전달됩니다.

6. 마지막 then 메서드의 콜백 함수에서는 서버로부터 받은 텍스트 데이터를 setMessage를 통해 상태로 설정합니다.

7. message 상태가 변경되면 React는 FetchDataComponent 컴포넌트를 다시 렌더링합니다. 이때 message 상태의 최신값이 화면에 표시됩니다.

이 과정을 통해 클라이언트와 서버 사이에 데이터를 주고 받을 수 있습니다. 클라이언트는 서버에 요청을 보내고, 서버는 요청을 처리한 후 응답을 보냅니다. 이 응답이 클라이언트에 도달하면 클라이언트는 응답 데이터를 화면에 표시하게 됩니다.