인프런 커뮤니티 질문&답변

메모장님의 프로필 이미지

작성한 질문수

스프링 MVC 1편 - 백엔드 웹 개발 핵심 기술

HTML, HTTP API, CSR, SSR

SSR CSR 의 차이에 대해서 질문이 있습니다.

작성

·

722

0

강의 내용중, SSR은 서버단에서 동적으로 HTML생성해서 타임리프를 통해서 만들어 웹브라우저로 뿌려주고, CSR은 자바스크립트 요청을 하여 서버단에서 관련 데이터들만 뿌려주고 웹 브라우저 자체에서 자바스크립트를 통해 HTML결과를 렌더링 한다고 인지하였습니다.

그런데 13:50정도의 내용에서는 SSR은 정적인 페이지, CSR은 동적인 페이지에서 사용된다고 하셨습니다.

(여기서 질문입니다)

1. 제가 인지한 정적페이지는 정말 사용자마다의 정보없이 모든사용자에게 똑같이 내려줄법한 페이지를 의미하고 동적페이지는 사용자마다 정보다 다르기에 DB를 통해 가져와 동적으로 자용자마다 큰틀은 비슷하지만 정보표시 자체가 다르게 되어서 동적페이지라고 인지하였습니다. 맞나요?

2. 저같은 경우 UI를 비쥬얼 스튜디오 코드 같은곳에서 이쁘게 꾸민후 해당 프론트코드 와 인텔리제이에서 만든 백앤드 코드를 합치고싶은데 이럴땐 어떻게 연동을 해주나요?

3. 또한 저는 개인 프로젝트를 할때 리엑트 같은 CSR기술을 사용해보려고 하는데, 이럴땐 리엑트로 HTML렌더링 웹사이트를 만들어준후, 정보를 작업하는 백엔드쪽은 인텔리제이같은 툴을 이용하여 데이터를 만든후 제가 만든 리엑트 웹사이트에 뿌려주게 되는건가요? 방식이 궁금합니다.

답변 1

1

안녕하세요. 메모장님, 공식 서포터즈 David입니다.

.

1. 제가 인지한 정적페이지는 정말 사용자마다의 정보없이 모든사용자에게 똑같이 내려줄법한 페이지를 의미하고 동적페이지는 사용자마다 정보다 다르기에 DB를 통해 가져와 동적으로 자용자마다 큰틀은 비슷하지만 정보표시 자체가 다르게 되어서 동적페이지라고 인지하였습니다. 맞나요?

=> 네, 맞습니다.

 

2. 저같은 경우 UI를 비쥬얼 스튜디오 코드 같은곳에서 이쁘게 꾸민후 해당 프론트코드 와 인텔리제이에서 만든 백앤드 코드를 합치고싶은데 이럴땐 어떻게 연동을 해주나요?

=> 인텔리제이를 통해 웹 애플리케이션 프로젝트를 생성한 후 VS Code로 프로젝트 내 UI 파일들을 불러와 작업하시면 됩니다.

 

3. 또한 저는 개인 프로젝트를 할때 리엑트 같은 CSR기술을 사용해보려고 하는데, 이럴땐 리엑트로 HTML렌더링 웹사이트를 만들어준후, 정보를 작업하는 백엔드쪽은 인텔리제이같은 툴을 이용하여 데이터를 만든후 제가 만든 리엑트 웹사이트에 뿌려주게 되는건가요? 방식이 궁금합니다.

=> 리액트에서 백엔드쪽 API를 호출하게 될 것입니다. 그러면 API를 통해 전달받은 데이터를 리액트에서 가공하여 사용자에게 보여줄 것입니다.

.
감사합니다.

메모장님의 프로필 이미지
메모장
질문자

바쁘신와중에 정말 답변 감사드립니다. 2번 질문에 대한 주신답변중 헷갈리는게 있습니다.

인텔리제이로 웹 애플리케이션 프로젝트를 생성한 후, VS CODE로 만든 프론트 UI들을 인텔리제이 프로젝트 프론트쪽 패키지에 넣은후 작업을 하신다는 말씀이실까요? 

기본 강의에서본 Spring에서 지원하는 타임리프를 이용한 방식만 봐서,

프론트쪽은 비쥬얼스튜디오같은 프론트에 특화된 프로그램을 쓸테고 백엔드는 인텔리제이같은 백엔드에 특화된 프로그램을 쓴다고 생각되기 때문에,

실제 업무에서 백엔드와 프론트가 어떤식으로 연결이 되는지 루트과정이 궁금합니다

 

 

위 답변은 혼자서 작업하시는 상황을 생각하고 그에 맞게 답변드렸습니다.

실제 업무에서는 프론트와 백엔드가 분리되어 개발됩니다. IDE는 사용자에 따라 다르겠죠.

개발 완료시 프론트에서 개발된 것은 정적파일을 위한 웹 서버, 백엔드에서 개발된 것은 웹 애플리케이션 서버에 배포됩니다.