브라우저(클라이언트)에서 데이터 요청시 흐름 질문있씁니다.

Question

안녕하세요. 웹 공부할때 헷갈리는 부분이 있어 질문합니다. 일단 전체적인 개념 자체는 이해가 됬습니다. 웹을 구성할때 프론트서버, 백엔드서버 나눠서 구성한다고 할때SSR방식이라면, 클라이언트 -> 프론트서버 -> 백엔드 서버 순으로 프론트서버에서 정적파일을 다운받고, 클라이언트에서 최종 html 을 전송받아 정적파일들을 이횽하여 렌더링 처리가 되고, CSR 방식이라면, 클라이언트 -> 프론트서버 순으로 클라이언트가 프론트 서버에서 HTML,CSS, JS 파일을 받고 그 후 렌더링에 필요한 데이터를 백엔드 서버에 요청하고 난뒤 데이터를 받고나서 최종적으로 보여질 수있게 렌더링 할텐데 이부분에서 아무리 찾아봐도 모호해서 헷갈립니다. 제가 헷갈리는 부분은 데이터를 요청하는 부분에서 서버 url을 호출할텐데.. 프론트서버가 중개느낌으로 작동하여서 클라이언트 -> 프론트서버 -> 백엔드 서버 순으로 요청하나요? 아니면 다이렉트로 클라이언트 -> 백엔드 서버 로 데이터 요청후 js로 처리후에 렌더링하나요? 혹시 위 개념이 틀렸다면 지적도 부탁드립니다. 감사합니다.

siva6 · Answer

보통은 전자구요. 후자로도 구성 가능합니다.사실 프론트서버라는 용어도 이 글에서 처음보내요. WEB / WAS 로 구분하기는 합니다.

낫개발자 · Answer

혹시 목적이 외부 API 호출을 원하시는건가요?클라이언트 -> 프론트서버 -> 백엔드 서버 이 흐름을 이야기하시는거면 Rest 방식을 사용하실거 같은데간단하게 알고 있는 방식을 말씀드리면사용자가 클라이언트에 요청을 하면 AJAX를 통해 말씀하신대로 URL 방식이면 URL을 통해WAS(1) 로 요청을 보내면 Controller에서 그 요청을 받고 넘겨줄 parameter를 담아서 WAS(2)로 넘겨주면 이제 WAS(2)에서 뭐 예를 들어 외부API호출이면 API값을 return 시켜주겠죠? 그럼 이제 다시 WAS(1)이 return 받고 또 return 시켜주면 jquery method 를 통해서 최종적으로 다시 클라이언트까지 전달을 한다고 보면 될 것 같습니다

장독깨기 · Answer

완성된 html 문서를 어디서 처리하느냐에 따라 SSR, CSR 을 구분할 수 있습니다. SSR은 서버에서 html 문서를 완성하고 반환합니다.보통 jsp, jstl, 기타 템플릿 등으로 html 문서를 완성합니다.브라우저 입장에서 보면 반환받은 html 문서를 화면에 뿌려주면 됩니다. CSR 은 브라우저(클라이언트)에서 html 문서를 완성합니다.서버로 부터는 받는 데이터는 html 문서가 아니라 보통 json 입니다.자바스크립트로 json 데이터와 엘리먼트를 조합해서 html 문서를 완성합니다. CSR 만 구성할 경우 json 데이터를 받는 (백앤드)서버와 정적파일 또는 자바스크립트 모듈 등을 받는 (프런트)서버로 분리 할 수 있습니다.이때 브라우저에서 백앤드 서버로 직접 api 를 호출하면 CORS 문제가 발생합니다.이럴 경우, 브라우저(클라이언트) -> 프런트서버 -> 백앤드서버 경로로 데이터를 받아 오는 거죠.이 경우 프런트서버는 프록시 역할을 하면 됩니다.그니까, 브라우저에서 /api/test 호출하면 프런트 서버로 가고,프런트 서버는 이를 백앤드서버아이피:8080/api/test 로 포워딩해서 결과를 받은 후 브라우저로 반환합니다.프런트 서버(nginx) 설정을 살펴보면 url 패턴에 따라 포워딩하는 방법이 있을 겁니다.대략 이런 개념이고 검색해서 알아보면 더 나은 다른 방법이 있을 겁니다.자세한건 검색해서 알아보는게 좋겠습니다. :)

브라우저(클라이언트)에서 데이터 요청시 흐름 질문있씁니다.

3개의 답변

Q&A 목록