24. 07. 19 - 웹 기초 특강

웹 서비스란 무엇인가?

• 웹 이라는 공간에서 제공되는 서비스
• 그 서비스를 설계 / 제작 / 관리하는 것이 웹 서비스 개발자 (웹 개발자)

 

웹 서비스의 동작

• 클라이언트 : 요청 (클라이언트가 서버에 네이버 기사 요청)
• 서버 : 응답 (네이버 서버가 html 파일로 응답)
  • 컴퓨터
  • 카카오 데이터 센터
    • 이 안에 수 없이 많은 컴퓨터 빼곡하게 들어가 있음
    • 이 중에는 전 세계의 인터넷을 통해 접속한 클라이언트의 요청을 받고 적절한 웹 서비스를 제공하는 웹 서버가 존재
    • 그렇게 할 수 있는 이유 = 웹 서버(컴퓨터)들이 인터넷으로 연결되어 있기 때문
  • 웹 서비스 원활하게 하기 위한 도구 (AWS, Vercel, Netlify 등)
    • 컴퓨터 다 살 수 없으니 빌리는 것
    • auto scaling (사용자 몰리면 더 큰 서버 빌려주고 사용량 적어지면 줄임)
    • 과금제
• 클라이언트 <-> 서버 상호작용
  • 클라이언트 : 브라우저라는 매개를 이용하여 서버에 어떠한 요청을 함
  • 서버 : 요청에 대한 처리를 한 후 응답을 줌
  • "서버의 해당 프로그램의 내부에 설계된 요청을 캐치하는 부분 -> 각 요청에 따른 서비스를 실시 및 응답을 제공하는 부분"
  • 요청은 어떻게?
    • URL과 Method의 조합으로 실시
    • method : GET, POST, PUT, PATCH, DELETE

 

웹 서버

(웹)서버의 주요 기능은 (정적)페이지 제공, API 제공

 

• API(Application Programming Interface)?
  • 여러 소프트웨어 간에 정보나 기능을 공유하게 해주는 중간 매개체
  • 일종의 규약(약속)
  • 한 프로그램이 다른 프로그램의 기능을 사용하거나 정보를 가져올 수 있음
  • API는 클라이언트의 요청에 따라 동적으로 데이터나 정보를 제공
  • 주로 JSON이나 XML 형식으로 응답 반환 
    • RESTful API
      • 웹 서비스에서 사용하는 API 설계 방법
      • 자원(resource)을 URL로 표현 + 처리 종류를 HTTP 메서드를 통해 표현
      • XML, JSON 형태로 데이터를 주고 받음
    • GraphQL API
      • API 쿼리 언어
      • 클라이언트가 필요로 하는 데이터의 형태와 구조 요청
      • 서버가 그에 따른 데이터를 상세히 반환
      • 오버페칭 + 언더페칭 해결

 

모던 웹 서비스 구성 방법

1. 프론트엔드와 백엔드를 각각 구성하여 각각 배포 -> 웹 서버 2개

(리액트 프로젝트 만들어 Vercel 등에 별도 배포 & 스프링, 노드 프로젝트 만들어 ec2 등에 별도 배포)

• 특징
  • FE와 BE가 독립적으로 웹 서버에 배포됨
  • 주요 기능의 담당
    • 페이지 전달 : 리액트
    • API 제공 : 스프링 또는 노드
• 장점
• 프론트엔드와 백엔드를 독립적으로 스케일 아웃할 수 있음
• 한쪽에 문제가 발생해도 다른 쪽에 영향 주지 않음
• 단점
  • 배포 및 관리 복잡할 수 있음
  • FE와 BE 간의 통신 오버헤드 발생할 수 있음

 

2. 프론트엔드와 백엔드를 동시에 구성 -> 웹 서버 1개

(프로젝트 디렉토리 안에 리액트와 스프링 폴더가 각각 존재하여 한 번 배포)

• 특징
  • 하나의 웹 서버에서 프론트엔드와 백엔드 동시에 처리
  • 주요 기능의 담당
    • 페이지 전달 : 리액트
    • API 제공 : 스프링 또는 노드
• 장점
  • 배포 및 관리가 간단
  • 네트워크 통신 오버헤드가 없거나 적음
• 단점
  • 백엔드와 프론트엔드가 동일한 리소스를 공유하기 때문에 성능 이슈 발생할 수 있음
  • 스케일 아웃 어려울 수 있음
• 예) 블로그 시스템

 

3. 백엔드만 구성하여 배포 -> 웹 서버 1개

• 특징
  • 백엔드에서 정적 페이지와 API 함께 제공
  • 주요 기능의 담당
    • 페이지 전달 : 스프링 또는 node
    • API 제공 : 스프링 또는 node - express/nest
• 장점
  • 프론트엔드의 별도 배포가 필요 없음. 설정 및 관리가 상대적으로 간단
• 단점
  • 모던 프론트엔드 프레임워크의 이점을 제대로 활용하기 어려울 수 있음. 백엔드 리소스가 정적 페이지 제공에도 사용되므로 퍼포먼스 이슈가 발생할 수 있음.
• 예시 : 간단한 회사 홈페이지. 스프링 프레임워크를 사용하여 회사 소개, 연락처, 서비스 정보 등의 정적 페이지와 함께 간단한 문의 폼을 제공하는 웹사이트. 모든 페이지는 스프링의 JSP 기능을 통해 제공.

 

4. 프론트엔드만 구성하여 배포 -> 웹 서버 1개

• 특징
  • 프론트엔드만 배포하여 서비스
  • 주요 기능의 담당
    • 페이지 전달 : 리액트
    • API 제공 : 없거나 next 사용
• 장점
  • 백엔드 없이 순수한 클라이언트 사이드 렌더링 활용 가능. 프론트엔드 리소스만 관리하면 되므로 간단한 웹사이트나 앱에 적합.
• 단점
  • 데이터를 처리하거나 복잡한 기능을 구현하기 위해서는 별도의 백엔드 서비스가 필요. SEO 최적화를 위해 서버 사이드 렌더링이 필요할 경우 별도의 설정 및 구성이 필요.
• 예시 : 포트폴리오 웹사이트. React로 작성되었으며, GitHub Pages나 Netlify와 같은 정적 사이트 호스팅 서비스를 사용하여 배포. 데이터는 공개 API나 정적 데이터 파일을 사용하여 가져온다.