프론트 서버와 벡엔드 서버의 의미

Yuri Lee·2022년 3월 22일
10

Intro

현재 회사에서 진행하고 있는 프로젝트에서는 프론트 서버와 백엔드 서버를 분리하여 배포하고 있다. 그 이유가 무엇이며, 왜 분리하여 사용하고 있는지 이유를 알아보자. 🙂

서버

클라이언트에게 네트워크를 통해 서비스하는 컴퓨터를 의미한다. 어떤 요청을 원하는 대상에게 요청에 대한 응답을 넘겨주는 모든 것들을 서버라고 한다.

웹에서의 서버

웹 환경에서는 브라우저가 클라이언트 역할을 한다. 주소에 어떤 도메인이나 컴퓨터 주소를 치면 해당 컴퓨터(서버)가 요청에 대한 응답을 하는데 이때 보통은 프론트 서버와 백엔드 서버로 나눠진다.

프론트 서버

프론트 서버는 어떤 주소에 대한 요청을 보냈을 때, markup language (html, css)를 보내줘서 사용자에게 GUI 환경을 제공해준다.
→ react, next, styled component, redux 등

백엔드 서버

백엔드 서버는 프론트 서버와 통신하는 컴퓨터로도 볼 수 있는데, 사용자가 프론트 서버에서 어떤 동작을 하였을 때, 사용자 정보나 데이터에 접근하는 것을 가능하게 해준다.
→ DB, express, react API(통신방식) 등등

프론트, 백엔드 분리 이유

사실, GUI 환경을 제공하는 컴퓨터와 어플리케이션 데이터들을 제공하는 컴퓨터를 한 곳에 둘 수도 있지만, 데이터가 많아지면 분리해서 따로 컨트롤 하는 것이 좋다.
문자가 아닌 그래픽 위주로 이루어진 방식을 말하며 현재의 우리가 쓰고있는 환경을 말한다.(GUI : 운영체제에서 작업할때 명령어 대신 아이콘을 더블클릭하여 사용하는 등 그래픽으로 데이터를 처리하는 환경)

1. 속도

서버를 한 곳에 모아둘 경우 속도가 느리다.

2. 관리

화면을 그려주는 방식과 데이터를 제공하는 방식은 많이 달라서 따로 분리해서 관리한다. 서버를 추가할 때도 프론트와 백엔드 중 필요한 부분만 추가할 수 있다.

프론트와 백엔드 서버 분리 시 문제점

CORS(Cross-Origin Resource Sharing) 이슈

프론트와 백엔드를 분리해서 통신하게 되면 각자 다른 컴퓨터가 서로 통신을 하는 것이기 때문에 CoORS 문제가 발생한다. 서버에서 프론트의 요청을 허용해주는 작업을 해줘야 한다.

프론트 엔드와 백엔드 분리 배포 예

Q. 요즘 프론트엔드와 백엔드를 분리해서 개발하고 배포한다고 알고있는데 그 방식이 궁금해서 질문드립니다. 개발을 spring+jsp 이용해서 하나로(?) 개발을 해봤는데 요즘 공부하기 위해 React + Spring Boot를 이용해 프론트와 백을 분리해서 개발중에 있습니다. 개발할 때는 리액트는 3000포트로 스프링 부트는 8080포트로 이용하게 되는데요. 만약 이 프로젝트를 실제 서비스한다고하면 어떻게 배포를 하는건가요? 하나의 서버가 아닌 두 개의 서버에 각각 프론트와 백을 배포해서 사용해야 하나요? 아니면 하나의 서버에 프론트와 백을 포트만 다르게해서 배포하는건가요?아니면 다른 방식으로 이루어지는건가요?

→ 서버 두개를 두고 배포합니다. 하나는 프론트 서버로 웹페이의 정적파일(html,js 등등)만 제공하고 스프링 서버를 따로둬서(api 서버라고 부릅니다) 프론트에서 스프링서버 주소 호출해서 여러가지 로직 처리합니다. 그리고 리액트라면 보통 SPA를 쓸텐데(사실 저도 리액트 안써봐서 모름) spa에 관해서도 한번 검색해보세요 대충 어떤식으로 동작하나 알 수 있습니다.

Conclusion

속도와 관리 측면 때문에 프론트/백엔드 서버를 분리한다는 점 기억하기 :)


https://okky.kr/article/874573
https://velog.io/@kimtaeeeny/%EC%9B%B9%EC%97%90%EC%84%9C%EC%9D%98-%ED%94%84%EB%A1%A0%ED%8A%B8-%EC%84%9C%EB%B2%84-%EB%B0%B1%EC%97%94%EB%93%9C-%EC%84%9C%EB%B2%84-%EA%B0%9C%EB%85%90-%EB%84%A4%ED%8A%B8%EC%9B%8C%ED%81%AC-study6
https://sowon-dev.github.io/2020/06/18/200619dbi/

profile
Step by step goes a long way ✨

0개의 댓글