프론트엔드와 백엔드의 과정

안녕하세요!! 제가 아직 개발에 대한 개념이 부족한지라..

계속 프론트엔드와 백엔드가 어떻게 연동되는 지와 동작과정이 너무 궁금해서 이렇게 질문드립니다.

만약 프론트엔드 개발자와 백엔드 개발자가 따로 있다고 생각해보겠습니다!!

저희의 library-app을 예시로 들면 프론트엔드 개발자가 React를 이용해 JS파일을 만들고 그거를 build해서 JS앱으로 만든 것을

백엔드 개발자에게 전달해서 스프링부트 안에 집어 넣은거라고 이해하고 있습니다.

그리고 당연히 CSR 방식이니까 처음 클라이언트가 페이지를 요청했을 때 서버는 빈 뼈대인 HTML에 JS에 접근할 수 있는 링크만을 포함해서 브라우저에 전달하고 브라우저는 다시 서버에 JS링크를 이용해 JS파일을 가져와서 그때부터 동적으로 UI를 만들어 클라이언트에 보여주는 것으로 알고있습니다. 여기서

1) JS링크라는 것이 아까 프론트엔드 개발자가 백엔드 개발자에게 전달한 JS파일에 접근하는 링크인 것 같은데 맞을까요?

2) 제가 위에 설명한 과정이 전반적으로 맞을까요? 아 그리고 HTML이나 CSS같은 파일들도 React를 이용해 만드는 건가요??

그리고 제가 조금 찾다보니 nginx같은 웹 서버가 따로 있더라고요.. 웹 서버가 정적인 파일 (HTML, CSS, JS)을 클라이언트에 전달하는 역할이라고 알고있습니다. 물론 WAS에서도 정적인 파일도 전달할 수 있지만 웹서버와 WAS로 나누는 게 더 낫다고 하더라고요.

3) 그럼 저희의 library-app은 nginx나 apache같은 웹 서버를 이용하지 않고 WAS에서 바로 화면을 클라이언트에 전달하는 건가요??

뭔가 강의랑 동 떨어진 질문같긴한데..ㅜ

그래도 답변 부탁드리겠습니다...!!

안녕하세요! JMJ님! 🙂

아이고 얼마든지 질문 주셔도 괜찮습니다~ 👍

하나씩 답변 드려 볼게요!!

[1. JS링크라는 것이 아까 프론트엔드 개발자가 백엔드 개발자에게 전달한 JS파일에 접근하는 링크인 것 같은데 맞을까요?]

제가 JS링크라는 용어에 익숙하지는 않지만, 아마 <script> 태그를 통해 다시 한 번 JS 코드를 불러오는 것을 의미하는 것 같아요!
그렇다면 이 JS링크는, 프론트엔드 개발자가 백엔드 개발자에게 전달한 여러 파일들 중 한 파일에 접근하는 링크가 맞습니다.
다만, 만약 react 빌드 결과물을 스프링 부트에 넣는 방식을 사용하려면 보통 그 방식을 자동화 하는 편이에요!
- 구글에 <스프링 react 프로젝트>로 검색해보시면 많은 자료가 있을겁니다! 🙂
또한 만약 프론트엔드 개발자가 별도로 있다면, 프론트엔드를 서버와 별도로 배포하기도 합니다.
- 이는 <react S3 배포>와 같은 내용을 찾아보시면 됩니다!

[2. 제가 위에 설명한 과정이 전반적으로 맞을까요? 아 그리고 HTML이나 CSS같은 파일들도 React를 이용해 만드는 건가요??]

과정에 대해서는 위에서 더 답변 드린 것 같아요! 👍
react를 이용해서 HTML이나 CSS도 만들게 되는 것이 맞습니다!

[3. 그럼 저희의 library-app은 nginx나 apache같은 웹 서버를 이용하지 않고 WAS에서 바로 화면을 클라이언트에 전달하는 건가요??]

네 맞습니다!
react의 결과물을 nginx 혹은 apache 같은 웹 서버를 이용해 배포할 수도 있어요!
- (아까 말씀드린 S3 라는 것을 이용해 배포할 수도 있고요! 여러가지 방법 중 하나입니다. 참 방법이 다양해서 오히려 더 헷갈리죠! 🥲)
다만 현대적인 애플리케이션은 말씀드린 것처럼 프론트 따로 / 백엔드 따로 배포를 진행하고 이때는 또 nginx나 apache 같은 방법 대신 S3 혹은 vercel (<-- react를 사용한 프레임워크 next.js를 쓰는 경우) 을 이용한 방식을 더 많이 사용하는 편입니다.
저희가 WAS에서 바로 화면을 전달하는 방식을 쓴 이유는, 서버를 처음 배우시는 분들께 화면을 쉽게 제공해드리기 위해서입니다. 🙂

감사합니다! 🙏

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