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

웹(Web)개발

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

H.S-Backend 2024. 4. 22. 19:08

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시스템 최적화를 위해 서버 사이드 렌더링이 필요한 경우 별도의 설정 및 구성이 필요하다.