스파르타 코딩클럽 웹(WEB)의 기초

WEB의 기본

 

개발자는 웹서비스를 만드는것이 본질이다.

---

웹서비스란?

웹이라는 공간에서 제공되는 서비스

 

서비스를 설계/제작/관리 하는 것이

웹 서비스 개발자이다.

 

웹공간의 클라이언트가 요청하면 해당 요청을 받는 서버는 웹서버(프론트엔드, 백엔드)라 한다.

출처 : 스파르타 코딩클럽

 

웹서버는 물리적으로 컴퓨터라 한다.

컴퓨터는 인터넷으로 연결되어 있기에 요청을 받고 응답을 해줄 수 있는것이다.

(웹)서버의 주요 기능은 (정적)페이지와 API를 제공한다.

---

웹서비스를 원활하게 하기 위한도구

• AWS(Amazon Web Services), Vercel, Netify 등이 존재한다.
• 웹서비스를 더 원활하게 하기위한 S3와 같은 서비스도 존재한다.

도구를 사용하는 이유

• 장점 물리적인 도구를 사용하는것보다 렌탈 시스템이 효율적이다.
• 단점 렌탈식이라 월마다 고정급이 나간다.

 

---

클라이언트란 

요청하는 주체
브라우저라는 도구를 활용하여 웹서버에 요청을 할 수 있다.

 

서버란 

클라이언트의 요청에 대한 처리를 한 후에 응답을 준다.

---

요청을 하는 방법 = REST API

URL과 Method의 조합으로 실시한다.

HTTP(통신규약)라는 서로간에 약속된 상호작용 방법 안에서 URL + Method하는것이다.

 

API(Application Programming Interface)란

여러 소프트웨어 간 정보나 기능을 공유하게 해주는 중간 매개체이다.
일종의 규약(약속)에따라 움직인다.

한 프로그램이 다른 프로그램의 기능을 사용하거나 정보를 가져올 수 있다.

API는 클라이언트의 요청에 따라서 동적으로 데이터나 정보를 제공한다.

주로 JSON형식으로 응답을 반환한다.

RESTful API, GraphQL API 이 있다.

---

프론트엔드와 백엔드를 각각 구성하여 각각 배포하는 방법 (웹 서버가 2개)

특징

FE와 BE가 독립적으로 웹 서버에 배포된다.

페이지 전달 : 리액트

API 제공 : 스프링 or node

장점

프론트엔드와 백엔드를 독립적으로 스케일 아웃할 수 있다.

한쪽에 문제가 발생해도 다른 쪽에 영향을 주지 않는다.

단점

배포 및 관리가 복잡할 수 있다.

프론트엔드와 백엔드 간 통신 오버헤드가 발생 할 수 있다.

---

프론트엔드와 백엔드를 동시에 구성하는 방법 (웹 서버가 1개)

특징

하나의 웹서버에서 프론트엔드와 백엔드를 동시에 처리할 수 있다.

• 페이지 전달 : 리액트
• API 제공 : 스프링 or node

장점 

• 배포 및 관리가 간단하다
• 네트워크 통신 오버헤드가 없거나 적다

단점 

• 백엔드와 프론트엔드가 동일한 리소스를 공유하기 때문에 성능 이슈가 발생할 수 있다.
• 스케일 아웃이 어려울 수 있다.

---

백엔드만 구성하여 배포하는 방법 (웹서버가 1개)

특징 

백엔드에서 정적 페이지와 API를 함께 제공한다.

• 페이지 전달: 스프링
• API제공 : 스프링 or node

장점

• 프론트엔드의 별도 배포가 필요없다. 설정 및 관리가 상대적으로 간단하다.

단점

• 모던 프론트엔드 프레임 워크의 이점을 제대로 활용하기 어려울 수 있다.
• 백엔드 리소스가 정적 페이지 제공에도 사용되므로 퍼포먼스 이슈가 발생할 수 있다.

---

프론트엔드만 구성하여 배포하는 방법(웹서버가 1개)

특징

프론트엔드만 배포하여 서비스

• 페이지 전달 : 리액트
• API 제공 : 없거나 next를 사용하는 경우

장점

• 백엔드 없이 순수한 클라이언트 사이드 렌더링을 활용할 수 있어 간단한 웹사이트나 앱에 적합하다.

단점

• 데이터를 처리하거나 복잡한 기능을 구현하기 위해서 백엔드 서비스가 필요하다. 
• SEO시스템 최적화를 위해 서버 사이드 렌더링이 필요한 경우 별도의 설정 및 구성이 필요하다.