난 뭘 위해서 이걸 하고 있는지
를 명확히 해 보고자 하는 시간을 가져보자.
우리가 앞으로 하려고 하는 게 뭘까?
웹 서비스를 만드는 것
- 웹이라는 공간에서 제공되는 서비스
- 그 서비스를 설계, 제작, 관리하는 것이 웹 서비스 개발자(웹개발자)
- 서비스를 누리는 사람, 주문을 요청하는 사람 = Client
- 클라이언트가 요청을 하면 응답을 주는 게 = Server
웹 서비스의 동작
-
WEB 공간의 클라이언트 누구든지 요청
-
요청을 받는 서버 = 웹 서버
- 물리적으로 보면 컴퓨터와 가깝다.
- 카카오데이터센터
- 인터넷을 통해 접속한 클라이언트의 요청을 받고, 적절한 웹서비스를 제공하는 웹 서버가 존재함
- 웹 서비스를 원활하게 해주는 도구 : AWS / Netlify / Vercel
: 컴퓨터를 다 살 수 없으니까 씀 / auto scaling/ 과금제. 비쌈
Amazon S3 simple storage service...?
-
서버는 요청이 들어오면 요청을 처리해 응답을 주는 것이 기본 메커니즘.
-
웹 환경에서의 요청
- REST 원칙에 근거하여 정보를 주고 받는다.
- HTTP(Method) + URL
웹 서버 / 웹서비스의 기능
웹서버 구성
-
프론트엔드
-
백엔드
API 제공
-
API, application programming interface
: 소프트웨어 간의 정보나 기능을 공유하게 해주는 매개체, 일종의 약속
JSON / XML 형식의 응답을 반환 -
OpenAPI(날씨, 도로명주소, ...)
(정적) 페이지 제공
모던 웹서버의 구성 방법
예를 들어 프론트는 리액트 / 백엔드는 노드, 스프링
- 프론트 / 백엔드를 각각 구성하여 각각 배포하는 방법 -
웹서버 2개
FE, BE가 독립적으로 웹 서버에 배포됨
리액트가 페이지 전달, API 제공은 스프링 혹은 node가 담당하는 구조
장점
- 독립적인 스케일 아웃
- 한 쪽에 문제가 발생해도 다른 쪽에 영향이 가지 않는다.
단점
- 배포 및 관리가 복잡
- FE-BE 간의 통신 오버헤드 발생 가능
- 프론트 + 백엔드 동시구성 in
웹서버 1개
리액트를 스프링 내에 귀속시킴.
하나의 웹 서버에서 FE, BE를 동시에 처리하게 됨
페이지 전달 - 리액트
API 제공 - 스프링 혹은 노드
장점
- 배포 및 관리가 간단하다.
- 오버헤드 없거나 적다.
단점
- 동일 리소스 공유로 성능이슈 발생 가능
- 스케일 아웃이 어려울 수 있다.
- 백엔드만 구성해 배포 -
웹서버 1개
백엔드에서 정적 페이지 및 API를 함께 제공한다.
페이지 전달 및 API 제공 모두 스프링이나 node-express/neest
장점
- 프론트엔드의 별도 배포가 필요 없다.
- 설정 및 관리가 상대적으로 간단하다.
단점
- 모던 프론트엔드 프레임워크의 이점을 제대로 활용하기 어려울 수 있다.
- 백엔드 리소스가 정적 페이지 제공에도 사용되므로 퍼모먼스 이슈가 발생할 수 있다.
- 프론트엔드만 구성해 배포 -
웹서버 1개
프론트엔드만 배포하여 서비스함.
페이지 전달은 리액트로
API 전달이 없거나, next를 사용할 수 있음
장점
- 백엔드 없이 순수한 클라이언트 사이드 렌더링을 활용할 수 있다.
FE 리소스만 관리하면 되므로 간단한 웹사이트나 앱에 적합하다.
단점
- 데이터를 처리하거나 복잡한 기능을 구현하기 위해서는 별도의 백엔드 서비스가 필요하다. SEO 최적화를 위해 서버 사이드 렌더링이 필요할 경우 별도의 설정 및 구성이 필요하다.
예시
1) 포트폴리오 웹사이트: 개인 스킬/경험을 소개하는 웹사이트. React 작성/ Github Pages나 Netilify 등 정적 호스팅 서비스 사용하여 배포.
노트
- 오늘은 웹 개발을 배우며, 웹 개발의 세상에 어떤 큰 구조가 있는지를 살펴보았다.
- Web Server(WS)와 관련해 유사한 고차 개념으로 WAS(Web Application Server)가 있단 것도 알게 됐는데, WS는 정적 페이지( HTML, CSS, JavaScript, 이미지, 비디오와 같은 리소스들)를 제공하는 반면, WAS는 동적으로 웹 페이지를 생성하여 반환한다는 차이.
- WAS의 경우엔 DB와의 상호작용(CRUD)를 통해 데이터 처리를 수행하고, 웹 애플리케이션의 핵심 비즈니스 로직을 수행한다.
- 알면 알 수록 배워야 할 것들이 늘어나지만, 일단 많이 접해보고 익숙해지는 게 시작인 것 같다.
FrontEnd Developer