[Spring Boot] controller를 2개 사용하는 이유(+js와 java 연결 시 url을 사용하는 이유

컨트롤러 A(Fast Firt Paint)
- 단지 화면만 띄워주는 컨트롤러이며 return html 이름을 작성한다.
- @GetMapping 만을 사용한다.(화면만 보여주는 것이므로)
- 이때의 url이 사용자가 실제로 사용할 때 볼 수 있는 url이다.
컨트롤러 B(Lazy Loading)
- 실제 비즈니스 로직(서비스)를 호출하여 db에서 데이터를 가져온다.(그 안에 과정 촤르륵)
- json으로 리턴하여 데이터를 페이지에 뿌려준다.
- @ 상황에 맞는 Mapping 사용
- B 컨트롤러에 적혀있는 url은 사용자가 볼 수 없는 url로 js와 소통하는 url

💡 컨트롤러 A가 먼저 동작해서 HTML이 화면에 뜨지 않으면, 그 안의 JS가 실행될 수 없으므로 컨트롤러 B는 절대로 먼저 호출될 수 없는 구조이다.

사용자 체감 속도: 데이터가 100만 건이라 조회에 3초가 걸린다고 가정해 봅시다. 레거시 방식은 3초 동안 하얀 화면만 보이지만, 이 방식은 0.1초 만에 화면 틀이 먼저 뜨고 "로딩 중..." 표시를 보여줄 수 있습니다.
유연성: 컨트롤러 B(API)는 나중에 웹뿐만 아니라 모바일 앱(iOS/Android)에서도 그대로 가져다 쓸 수 있습니다. 앱은 HTML이 필요 없고 JSON 데이터만 필요하니까요.
에러 격리: 데이터 조회에 실패하더라도 화면 자체는 깨지지 않고 "데이터를 불러오지 못했습니다"라는 깔끔한 메시지를 보여줄 수 있습니다.

❓궁금증: 어차피 B 컨트롤러 url은 사용자가 볼 수 없는 데 함수가 아닌 url주소를 사용하는 이유

⇒ 브라우저와 서버는 ‘남’이다.

브라우저와 서버는 “다른 컴퓨터”에 존재
a. 브라우저(사용자 컴퓨터): js 파일이 실행되는 곳
b. 서버(회사 서버 또는 클라우드): java 컨트롤러와 서비스가 실행되는 곳
- js에서 java 함수를 직접 부르는 건, 마치 한국에 있는 사람이 미국에 있는 집 스위치를 한국에서 직접 누르려는 것과 같다. 그러므로 직접 손이 닿지 않으니 전화(network)를 걸어야 하고 그 전화를 걸기 위한 전화번호가 url이다.
왜 “함수”가 아니라 “URL”을 쓰나?(전화번호 비유)
a. 만약 url없이 함수 이름만 안다면 서버는 수많은 요청 중에 이게 누구의 요청인지 어디로 전달해야 할지 모른다. 그래서 아래와 같은 약속을 정한다.
- 주소(URL): 서울시 강남구 역삼동 1번지인 @PostMapping("/api/zone") 로 찾아가라
- 내용(DATA): 가서 ‘A구역 추가’라는 편지(JSON)을 전달해라.
  ⇒ 이렇게 url로 지정해두면 브라우저가 인터넷망(http)를 타고 서버의 해당 주소로 정확히 찾아가서 함수를 실행시킬 수 있다.
사용자의 눈에 보이지 않는다는 것은?
a. 화면이 바뀌지 않는데 새로운 데이터가 계속 생기네? (UX 향상)
b. js가 뒤에서 몰래 /api/zone/create 라는 url로 데이터를 쏴서 DB에 넣고 온 것 (시스템 효율성)

동작방식: 리액트 화면이 브라우저에 먼저 뜨고, 리액트가 스프링 서버에 데이터를 달라고 비동기 요청(axios or fetch)
- 이때 스프링 컨트롤러에 적힌 mapping url이 리액트 axios가 찾아오는 전화번호이다.
- 그러므로 실제 스프링에 적힌 url이 사용자에게 보여지지 않는다.

현재는 화면 전달을 스프링의 또 다른 컨트롤러가 하지만 리액트는 화면 전달을 리액트 서버가 담당한다.
- 즉, 리액트프로젝트는 컨트롤러가 1개이다.
- 또한 서버도 2개이다. 프론트, 백엔드 각각 서버가 존재한다.

이것저것 개발자