웹 심화 이해 / 앱과 서버의 차이점, 웹 보안, 웹 프레임워크

웹 서버와 데이터베이스

웹 서버

• 클라이언트(주로 웹 브라우저)에서 요청한 웹 페이지, 이미지, 동영상 등 웹 콘텐츠를 제공하는 서버 소프트웨어 또는 하드웨어를 의미
• 클라이언트의 HTTP 요청을 수신하고, 요청된 콘텐츠를 찾아 응답하는 역할 (http 헤더, 응답코드 붙여서 보냄)

웹 서버 소프트웨어 엔진

• Apache HTTP Server: 가장 널리 사용되는 웹 서버 소프트웨어 중 하나로, 다양한 운영체제에서 동작하며 높은 유연성과 확장성을 제공
• Nginx: 경량화된 고성능 웹 서버로, 높은 동시 연결 처리 능력을 가지고 있으며 주로 리버스 프록시와 로드 밸런싱에 사용
• Microsoft IIS(Internet Information Services): Windows Server 운영체제에서 동작하는 웹 서버 소프트웨어로, Microsoft 제품과의 높은 호환성을 가짐

서버 설정 및 작동 원리

• 가상 호스트
  • 하나의 웹 서버에서 여러 도메인을 호스팅 할 수 있도록 하는 기술
  • 이를 통해 동일한 서버에서 다양한 웹 사이트를 운영 가능
• 포트
  • 네트워크에서 서비스를 식별하는 번호
  • 웹 서버는 기본적으로 80 포트(HTTP)와 443 포트(HTTPS)를 사용하여 클라이언트 요청을 처리
    (www.naver.com 은 https이므로, 네이버를 접속하면 url에 443이 안붙어있어도 443포트임)
• 라우팅
  • 요청 URL을 분석하여 적절한 응답을 반환하는 과정
  • 웹 애플리케이션의 특정 경로로 요청을 전달하고, 해당 경로에 맞는 콘텐츠나 데이터를 제공하는 역할

데이터베이스

관계형 데이터베이스(RDMBS)

• 데이터를 테이블 형태로 저장
• **SQL(Structured Query Language)**을 사용하여 데이터를 관리하고 쿼리함
• 데이터 간의 관계를 정의할 수 있으며 정규화된 데이터 구조를 갖춤
• 예시: MySQL, PostgreSQL, Oracle Database, Microsoft SQL Server

NoSQL 데이터베이스

• 관계형 데이터베이스와 달리 비정형 데이터를 저장하고 처리할 수 있는 데이터베이스
• 스키마가 없거나 유연한 구조를 가짐
• 대규모 분산 시스템에서 높은 성능과 확장성을 제공
• 예시: MongoDB(문서 지향형), Redis(키-값 저장소), Cassandra(칼럼 페밀리 저장소), Neo4j(그래프 데이터베이스)

서버 - 클라이언트 통신

API

• 소프트웨어 간의 상호작용을 가능하게 하는 인터페이스
• 웹 API는 HTTP를 통해 클라이언트와 서버 간의 데이터 교환 가능
• 예시: Twitter API, Google Maps API, OpenWeather API

RESTful API

• 웹 서비스 디자인 아키텍처로, 클라이언트와 서버 간의 상호작용을 정의
• RESTful API는 자원을 URI로 표현하며, HTTP 메서드(GET, POST, PUT, DELETE)를 사용하여 자원에 대한 작업을 수행
• 원칙: 무상태성, 캐시 가능성, 계층화된 시스템, 통일된 인터페이스

AJAX

• **AJAX(Asynchronous JavaScript and XML)**는 웹 페이지를 새로 고침하지 않고 서버와 비동기적으로 데이터를 주고받는 기술
• 이를 통해 사용자 경험을 개선하고, 페이지 응답 속도를 향상시킴
• 사용 예시: 채팅 애플리케이션, 실시간 검색 기능, 비동기 데이터 로딩

프론트엔드 vs 백엔드

 

프론트엔드

• 설명: 프론트엔드는 사용자와 직접 상호작용하는 웹 애플리케이션의 부분으로, 사용자 인터페이스(UI)와 사용자 경험(UX)을 담당
• HTML, CSS, JavaScript 등을 사용하여 웹 페이지를 구성하고 스타일을 적용하며, 동적인 기능을 구현합니다.
• 기술: HTML, CSS, JavaScript, 프론트엔드 프레임워크(React, Angular, Vue.js)

백엔드

• 설명: 백엔드는 웹 애플리케이션의 서버 측 부분으로, 데이터베이스와 서버 로직을 관리
• 클라이언트 요청을 처리하고, 데이터베이스와 상호작용하며, 필요한 데이터를 클라이언트에 반환
• 기술: 서버 사이드 언어(Python, Java, Node.js), 데이터베이스(MySQL, MongoDB), 백엔드 프레임워크(Django, Spring, Express.js)

---

웹 서버와 웹 애플리케이션

웹 서버(Web Server)

• 클라이언트(주로 웹 브라우저)에서 요청한 웹 페이지, 이미지, 동영상 등 웹 콘텐츠를 제공하는 서버 소프트웨어 또는 하드웨어를 의미
• 주로 HTTP(S) 프로토콜을 사용하여 클라이언트의 요청을 수신하고, 요청된 콘텐츠를 찾아 응답하는 역할을 수행

웹 서버의 주요 구성 요소

1. Listener (수신기):
   • 네트워크에서 들어오는 클라이언트의 요청을 수신하는 컴포넌트
   • 지정된 포트를 열어 클라이언트의 연결을 대기
2. Request Handler (요청 처리기):
   • 수신된 요청을 분석하고, 요청에 따라 필요한 작업을 결정
   • 정적 파일을 찾거나, 동적 콘텐츠를 생성하기 위해 적절한 스크립트를 실행
3. Response Generator (응답 생성기):
   • 요청 처리 결과를 바탕으로 클라이언트에게 보낼 HTTP 응답을 생성
   • 응답은 상태 코드, 헤더, 바디(컨텐츠)로 구성
4. Cache (캐시):
   • 자주 요청되는 데이터나 페이지를 저장하여 빠르게 제공할 수 있도록 함. 이는 서버의 부하를 줄이고, 응답 속도를 향상시킴
5. Logging (로깅):
   • 요청 및 응답, 오류 등의 정보를 기록. 이를 통해 관리자는 서버 상태를 모니터링하고 문제 해결 가능
6. Security Manager (보안 관리자):
   • 클라이언트의 요청을 검증하고, 접근 권한을 확인
   • HTTPS를 통해 데이터 암호화를 관리하고, 인증 및 권한 부여를 수행
7. Configuration Manager (설정 관리자):
   • 서버의 설정 파일을 관리하고, 가상 호스팅, 라우팅, 포트 등의 설정을 유지

---

웹 애플리케이션(Web Application)

• 웹 서버에서 동작하는 소프트웨어로, 사용자의 입력을 처리하고 동적인 웹 페이지를 생성하는 데 사용됨
• 주로 특정 비즈니스 로직이나 기능을 구현하며, 데이터베이스와 상호 작용하여 정보를 저장하고 불러오는 역할 수행

 

웹 애플리케이션의 주요 구성 요소

1. User Interface (사용자 인터페이스):
   • 사용자와 상호 작용하는 화면이나 페이지
   • HTML, CSS, JavaScript 등을 사용하여 구성
2. Business Logic (비즈니스 로직):
   • 애플리케이션의 핵심 기능과 처리 로직을 구현
   • 사용자의 요청을 처리하고, 필요한 데이터를 조작하여 응답을 생성
3. Data Access Layer (데이터 접근 계층):
   • 데이터베이스와 상호 작용하여 데이터를 저장하고 불러옴
   • 데이터베이스 쿼리를 생성하고, 결과를 반환
4. Web API (웹 API):
   • 다른 서비스나 애플리케이션과 상호 작용할 수 있도록 API를 제공
   • RESTful API, GraphQL, SOAP 등
5. Session Management (세션 관리):
   • 사용자의 로그인 상태를 관리하고, 각 사용자의 세션을 유지
   • 쿠키나 세션 토큰을 사용하여 구현
6. Error Handling (오류 처리):
   • 애플리케이션에서 발생하는 오류를 감지하고 처리
   • 오류 로그를 남기고, 사용자에게 적절한 메시지를 표시
7. Security (보안):
   • 애플리케이션의 보안을 관리
   • 사용자 인증, 권한 부여, 입력 검증, 데이터 암호화 등의 기능을 포함
     
     

웹 서버와 웹 애플리케이션의 차이점

구분	웹 서버	웹 애플리케이션
역할	웹 콘텐츠 제공 (정적 파일, HTTP 응답 처리)	비즈니스 로직 구현, 사용자 입력 처리, 동적 콘텐츠 생성
구성 요소	Listener, Request Handler, Cache, Logging, Security	User Interface, Business Logic, Data Access Layer, API
주요 기능	HTTP 요청 수신, 응답 생성, 캐싱, 로깅, 보안	사용자 상호 작용, 데이터 처리, 비즈니스 로직, 세션 관리
사용 기술	HTTP, HTTPS, SSL/TLS, 캐싱	HTML, CSS, JavaScript, 서버 측 언어 (Python, PHP 등)
작동 방식	클라이언트 요청을 처리하고 정적/동적 콘텐츠 제공	사용자의 입력에 따라 동적으로 콘텐츠 생성, 데이터베이스와 상호 작용

웹서버의 구조

웹 서버엔진(Apache 등): 요청 URL 주소(http://domain.com:443/image?query=abc)를 보고 요청에 맞게 
해당 포트, 해당 폴더 위치로 이동, 보안
(서버로 만들어주기 위한 인프라 ex. 경로, 포트, 보안)

 

웹앱 : (프론트엔드, 백엔드 ex. 회원가입, 글작성, 글수정, 글삭제)
웹 상에서는 폴더 위치를 알수가 없다.

➡️ 프론트엔드에서 /imgage로 가고싶을때를 대비하여 연결하는 버튼을 만들어둠.

* 정적페이지만 있다면, 웹앱은 굳이 필요없을 것! 동적 페이지가 있기 때문에 웹앱이 필요한 것이다.

❓html과 같은 프론트엔드쪽 파일들도 웹앱에 해당하는거아니야?

 

HTML, CSS, JavaScript와 같은 프론트엔드 파일들은 웹 애플리케이션(Web Application)의 일부일 수 있지만, 이러한 파일들은 웹 서버와 웹 애플리케이션 서버의 역할에 따라 다르게 취급됩니다

 

정적 웹 서버에서의 요청 처리

1. 정적 파일 요청:
   • 요청: 클라이언트(브라우저)가 https://example.com/index.html을 요청합니다.
   • 웹 서버의 역할: 웹 서버는 이 요청을 수신하고, 요청된 파일 index.html이 서버의 파일 시스템에 존재하는지 확인합니다. 예를 들어, 파일 시스템의 /var/www/html/index.html 경로에 해당 파일이 위치해 있을 수 있습니다.
   • 파일 제공: 파일이 존재하면 웹 서버는 이 파일을 클라이언트에게 HTTP 응답으로 반환합니다. 이 과정에서 웹 애플리케이션 서버는 관여하지 않습니다.
2. 웹 서버의 파일 탐색:
   • 웹 서버는 파일 시스템에서 index.html을 찾습니다. 이 파일이 서버의 특정 디렉토리에 위치하고 있으며, 웹 서버의 설정에 따라 이 파일의 경로를 알고 있습니다.

동적 웹 애플리케이션 서버에서의 요청 처리

1. 동적 요청 처리:
   • 요청: 클라이언트가 https://example.com/users/123 같은 동적 URL을 요청합니다.
   • 웹 애플리케이션 서버의 역할: 이 요청을 수신하여 필요한 비즈니스 로직을 수행합니다. 예를 들어, 데이터베이스에서 사용자 ID가 123인 사용자의 정보를 조회합니다.
   • 템플릿 렌더링: 웹 애플리케이션 서버는 템플릿 엔진을 사용하여 HTML 페이지를 동적으로 생성합니다. Django의 경우, views.py에서 특정 요청에 대해 어떤 템플릿을 렌더링할지 지정할 수 있습니다.

 

프론트엔드 파일은 웹 애플리케이션의 구성 요소일 수 있지만, 정적 파일로서 웹 서버에서 직접 제공되기도 하고, 웹 애플리케이션 서버에서 동적으로 생성되기도 합니다.

 

결론적으로, 프론트엔드 파일들이 웹 애플리케이션의 일부일 수 있지만, 정적 파일은 웹 서버에서 직접 제공될 수 있으며, 동적 콘텐츠와 비즈니스 로직을 처리하는 웹 애플리케이션 서버는 필요하지 않을 수 있습니다.

---

 

웹 애플리케이션 서버 (Web Application Server)

 

웹 애플리케이션 서버는 동적 콘텐츠를 생성하고 처리하는 서버입니다. 웹 애플리케이션 서버는 주로 다음과 같은 작업을 수행합니다:

• 비즈니스 로직 처리: 서버 측에서 데이터 처리, 사용자 인증, 데이터베이스 쿼리 등을 수행하여 동적 콘텐츠를 생성합니다.
• 템플릿 렌더링: 서버 측에서 템플릿 엔진을 사용하여 HTML 페이지를 동적으로 생성합니다. 예를 들어, Django의 템플릿 시스템을 사용하여 동적으로 페이지를 생성할 수 있습니다.
• 데이터베이스 상호작용: 데이터베이스와 연결하여 데이터를 조회하거나 수정하는 작업을 수행합니다.
• API 처리: RESTful API와 같은 동적 요청을 처리하고, JSON 등의 데이터를 반환합니다.

예시:

• Django: Python 기반의 웹 애플리케이션 프레임워크로, 웹 애플리케이션 서버 역할을 합니다. 요청에 따라 동적으로 HTML 페이지를 생성하고, 데이터베이스와 상호작용합니다.
• Ruby on Rails: Ruby 기반의 웹 애플리케이션 프레임워크로, 동적 웹 페이지를 생성하고, 비즈니스 로직을 처리합니다.
• Node.js: JavaScript 런타임 환경으로, 서버 측에서 동적 웹 애플리케이션을 구현할 때 사용됩니다.

 

웹 서버와 웹 애플리케이션 서버의 관계

• 웹 서버와 웹 애플리케이션 서버는 서로 협력하여 웹 애플리케이션을 구성할 수 있습니다. 웹 서버는 정적 파일을 제공하고, 웹 애플리케이션 서버는 동적 요청을 처리합니다.
• 예를 들어, 웹 서버(Nginx)는 클라이언트의 요청을 받아 정적 파일을 제공하거나, 동적 요청을 웹 애플리케이션 서버(Django, Node.js 등)로 전달합니다. 웹 애플리케이션 서버는 동적 콘텐츠를 처리하고 생성한 후, 웹 서버를 통해 클라이언트에게 응답을 반환합니다.

 

1. 클라이언트 요청

• 사용자가 브라우저에서 URL을 입력하거나 HTML 폼을 제출합니다. 예를 들어, https://example.com/search?q=keyword와 같은 요청이 클라이언트에서 전송됩니다.

2. 웹 서버의 역할

• 요청 수신: 웹 서버는 클라이언트로부터 요청을 수신합니다.
• 정적 파일 처리: 요청된 자원이 정적 파일(예: index.html, style.css)이라면, 웹 서버는 파일 시스템에서 해당 파일을 찾아 클라이언트에게 직접 반환합니다.
• 동적 요청 전달: 요청이 동적 콘텐츠를 요구하거나 웹 애플리케이션 서버가 필요할 때, 웹 서버는 요청을 웹 애플리케이션 서버로 전달합니다.

3. 웹 애플리케이션 서버의 역할

• 요청 처리: 웹 애플리케이션 서버는 요청을 수신하고, 비즈니스 로직을 실행하거나 데이터베이스와 상호작용하여 필요한 데이터를 처리합니다.
• 동적 콘텐츠 생성: 처리 결과를 기반으로 동적으로 콘텐츠를 생성합니다. 예를 들어, 데이터베이스에서 검색 결과를 조회하여 HTML 페이지를 생성합니다.
• 응답 반환: 생성된 콘텐츠(예: HTML 페이지, JSON 데이터 등)를 웹 서버에게 반환합니다.

4. 웹 서버의 최종 응답

• 응답 전달: 웹 서버는 웹 애플리케이션 서버로부터 반환된 응답을 수신하고, 이를 클라이언트에게 전달합니다.
• 클라이언트 렌더링: 클라이언트(브라우저)는 웹 서버가 반환한 응답을 렌더링하여 사용자가 볼 수 있도록 합니다.

요청 처리 과정 요약

1. 클라이언트: 브라우저에서 URL 요청 또는 폼 제출.
2. 웹 서버: 요청을 수신하고, 정적 파일 요청 시 직접 제공하거나, 동적 콘텐츠 요청 시 웹 애플리케이션 서버로 전달.
3. 웹 애플리케이션 서버: 요청을 처리하고 동적 콘텐츠를 생성하여 웹 서버에 반환.
4. 웹 서버: 웹 애플리케이션 서버로부터 응답을 수신하고 클라이언트에게 전달.

이러한 구조에서 웹 애플리케이션 서버는 비즈니스 로직과 동적 콘텐츠 생성을 담당하고, 웹 서버는 요청과 응답을 관리하며 클라이언트와 웹 애플리케이션 서버 간의 중개 역할을 수행합니다.

---

웹 보안

주요 웹 보안 위협 요소

• XSS(교차 사이트 스크립팅)
• 악의적인 스크립트를 삽입하여 사용자 정보를 탈취하거나 웹 페이지를 변조
• CSRF(교차 사이트 요청 위조)
• 사용자가 의도하지 않은 요청을 보내게 하여 피해를 입힘
• SQL Injection(SQL 인젝션)
• SQL 쿼리에 악의적인 코드를 삽입하여 데이터베이스를 조작하거나 데이터를 탈취
• Click Jacking(클릭 재킹)
• 사용자가 의도하지 않은 클릭을 하도록 유도하여 악성 사이트로 이동시키거나 악성 행위를 수행하게 함

기본 보안 실천

비밀번호 관리

• 강력한 비밀번호 생성 규칙(대문자, 소문자, 숫자, 특수 문자 조합)과 2단계 이상의 인증

소프트웨어 업데이트

• 패치 관리와 취약점 관리를 통해 소프트웨어를 최상 상태로 유지

백업

• 정기적인 데이터 백업 전략과 백업 주기 설정 필요 (데이터 손실 시 신속하게 복구 가능)

---

현대 웹 기술과 트렌드

반응형 웹 디자인

반응형 디자인 중요성 및 기본 원칙

• 반응형 디자인은 다양한 기기와 화면 크기에 적응하는 웹 디자인을 의미 (웹 모바일 둘 다 가능하게 함)
• 미디어 쿼리, 유동형 그리드 레이아웃, 유연한 이미지

모바일 퍼스트 디자인

• 모바일 환경을 우선적으로 고려한 디자인 접근법
• 모바일 사용자가 증가함에 따라 중요성이 커짐

프론트엔드 프레임워크

주요 프레임워크

• React
  • Facebook에서 개발한 JavaScript 라이브러리로, 사용자 인터페이스(UI)를 구축하는 데 사용
  • 컴포넌트 기반 아키텍처 제공 → UI를 독립적인 컴포넌트로 나누어 관리할 수 있음
  • 상태 관리 라이브러리(예: Redux)와 함께 사용 가능
  • 가상 DOM을 통해 빠른 렌더링 성능 제공
  • 예시: Facebook, Instagram, Airbnb
• Angular
  • Google이 개발한 프론트엔드 프레임워크로, 모듈화와 양방향 데이터 바인딩을 지원
  • 전체적인 애플리케이션 구조를 제공
  • TypeScript를 사용하여 더 강력한 타입 검사를 지원
  • Angular CLI를 이용해 효율적인 개발 환경을 제공
  • 강력한 라우팅과 폼 처리 기능을 갖추고 있음
  • 예시: Googld Ads, Microsoft Office Online
• Vue.js
  • 직관적이고 경량화된 프론트엔드 프레임워크로, 컴포넌트 기반 아키텍처와 반응형 데이터 바인딩 제공
  • 학습 곡선이 낮아 빠르게 개발을 시작할 수 있으며 Vue Router와 Vuex를 통해 상태 관리와 라우팅 기능 제공
  • 예시: Alibaba, Xiaomi, Laravel

프레임워크 선택 기준과 활용

• 컴포넌트 기반 아키텍처
  • UI를 독립적인 컴포넌트로 나누와 관리하는 접근 방식
  • 각 컴포넌트는 독립적으로 재사용 가능하며, 유지보수가 용이
  • 대규모 애플리케이션을 더 효율적으로 개발 가능
  • 예시: React의 JSX 컴포넌트, Angular의 NgModules
• 상태 관리
  • 애플리케이션의 상태(데이터)를 중앙에서 관리하는 기법
  • React는 Redux나 Context API를 사용해 상태를 관리
  • Angular는 RxJS와 NgRx를 활용
  • Vue.js는 Vuex를 제공하여 상태 관리를 효율적으로 지원
  • 예시: Redux(React), Vuex(Vue.js), NgRx(Angular)
• 라우팅
  • 애플리케이션 내에서 다양한 경로를 관리하고 URL에 따라 올바른 컴포넌트를 렌더링하는 기능
  • 각 프레임워크는 자체적인 라우팅 솔루션을 제공하여 사용자 경험을 개선
  • 예시: React Router(React), Vue Router(Vue.js), Angular Router(Angular)

---

백엔드 프레임워크

주요 프레임워크

• Django

• Python으로 작성된 고급 웹 프레임워크로, MTV(Model-Template-View) 패턴을 따름
• 강력한 어드민 인터페이스와 ORM(Object-Relational Mapping)을 제공하여 데이터베이스와의 상호작용을 용이하게 함
• 서버사이드 렌더링으로 사용자 환경 개선
• 보안 기능이 내장되어 있어 안전한 웹 애플리케이션을 구축하는 데 적합
• 예시: Instagram, Pinterest, Mozilla

 

• Node.js

• 서버 측에서 JavaScript를 실행할 수 있는 런타임 환경으로, 비동기 I/O를 통해 높은 성능을 제공
• Express.js와 같은 프레임워크와 함께 사용되며, RESTful API를 쉽게 구축할 수 있음
• NPM(Node Package Manage)을 통해 다양한 패키지 활용 가능
• 예시: LinkedIn, Netflix, Uber

 

• Spring

• Java 기반의 엔터프라이즈 애플리케이션 프레임워크로 DI(Dependency Injection)와 AOP(Aspect-Oriented Programming)를 지원
• MVC(Model-View-Controller) 패턴을 제공
• 강력한 보안과 트랜잭션 관리 기능 제공
• 예시: eBay, Baeldung
  

• Flask

• Python으로 작성된 경량 웹 프레임워크로, 간단한 구조와 유연성을 제공
• 기본적인 웹 서버 기능을 제공하며 필요한 기능을 플러그인 형태로 추가 가능
• 소규모 애플리케이션이나 프로토타입에 적합
• 예시: LinkdedIn, Pinterest, Netflix

백엔드 아키텍처 개요

• RESTful API 설계
  • REST(Representational State Transfer) API는 HTTP를 통해 클라이언트와 서버 간의 상호작용을 정의하는 설계 스타일
  • RESTful API는 자원을 URI로 표현하며, HTTP 메서드(GET, POST, PUT, DELETE)를 사용하여 자원에 대한 작업을 수행
  • RESTful API는 무상태성, 캐시 가능성, 계층화된 시스템 등의 원칙을 따름
  • 예시: Twitter API, GitHub API
• MVC 패턴
  • MVC(Model-View-Controller) 패턴은 애플리케이션의 구조를 모델, 뷰, 컨트롤러로 나누어 관리하는 디자인 패턴
  • 모델은 데이터와 비지니스 로직을 처리하며, 뷰는 사용자 인터페이스를 구성, 컨트롤러는 모델과 뷰 간의 상호작용을 조정
  • 예시: Spring MVC, ASP.NET, MVC
• MTV 패턴
  
  

• MTV(Model-Template-View) 패턴은 Django에서 사용하는 패턴으로, 모델, 템플릿, 뷰로 구성
• 모델은 데이터베이스와의 상호작용을 담당하고, 템플릿은 HTML과 같은 사용자 인터페이스를 정의하며, 뷰는 요청을 처리하고 모델과 템플릿을 연결
• 예시: Django 웹 애플리케이션
  
  

클라우드 컴퓨팅과 호스팅

클라우드 서비스의 종류와 특징

• 클라우드 컴퓨팅은 인터넷을 통해 컴퓨팅 자원(서버, 스토리지, 데이터베이스 등)을 제공하는 서비스
  • IaaS(Infrastructure as a Service): 기본적인 인프라를 제공하며, 사용자에게 서버, 스토리지, 네트워크를 가상화된 형태로 제공
  • 예시: AWS EC2, Google Compute Engine
  • Paas(Platform as a Service): 애플리케이션 개발 빛 배포를 위한 플랫폼을 제공하며, 서버 관리 및 인프라를 신경 쓸 필요가 없음
  • 예시: Heroku, Google App Engine
  • SaaS(Software as a Service): 소프트웨어를 서비스 형태로 제공하며, 사용자는 인터넷을 통해 소프트웨어에 접근하고 사용할 수 있음
  • 예시: Google Workspace, Salesforce

서버리스 아키텍처

• 개발자가 서버 인프라를 관리하지 않고 코드를 실행할 수 있는 컴퓨팅 모델
• 이벤트 기반으로 작동하며, 특정 이벤트(예: HTTP 요청, 데이터베이스 변경)가 발생했을 때 자동으로 코드를 실행
• 클라우드 제공 업체가 서버 관리, 스케일링, 유지보수를 처리하기 때문에 개발자가 비즈니스 로직에 집중 가능
• 서버리스의 장점
  • 확장성: 트래픽이 증가하면 자동으로 확장되며, 필요하지 않을 때는 리소스를 줄여 비용 절감 가능
  • 비용 효율성: 사용한 만큼만 비용을 지불하는 Pay-as-you-go 모델을 사용하여, 리소스를 효율적으로 사용 가능
  • 개발 속도 향상: 인프라 관리가 필요 없기 때문에 개발자는 비즈니스 로직 구현에 집중이 가능하여 개발 속도 향상 가능

미래 웹 기술

Progressive Web Apps(PWAs)

• PWA란
  • 웹 애플리케이션과 모바일 애플리케이션의 장점을 결합하여 사용자가 오프라인에서도 앱을 사용할 수 있게 하고, 모바일 장치에서 네이티브 앱처럼 동작
  • 서비스워커, 웹 애플리케이션 매니페스트, HTTPS를 사용
  • 예시: Twitter Lite, Pinterest
• 서비스 워커
  • 백그라운드에서 실행되는 스크립트로, 네트워크 요청을 가로채고 캐시하여 오프라인에서의 작업을 지원
• 웹 애플리케이션 매니페스트
  • 웹 애플리케이션의 메타데이터를 포함한 JSON파일로, 홈 화면에 아이콘을 추가하고 전체 화면 모드와 같은 네이티브 앱 기능을 제공하는 데 사용
• HTTPS
  • 보안 강화 및 데이터 전송의 무결성을 보장하기 위해 사용

WebAssembly(Wasm)

• Wasm이란
  • 웹 브라우저에서 고성능 애플리케이션을 실행할 수 있도록 하는 이진 형식의 코드
  • C, C++, Rust와 같은 언어로 작성된 코드를 브라우저에서 실행할 수 있게 해 주며, 네이티브 애플리케이션과 비슷한 성능을 제공
  • 자바스크립트와 함께 작동하여 웹 애플리케이션 성능을 극대화
  • 예시: Figma, AutoCAD 웹 버전
• 성능 향상
  • 네이티브 머신 코드에 가까운 성능을 제공, 복잡한 계산 작업이나 게임, 비디오 편집 등에서 성능을 향상
  • 다양한 프로그래밍 언어를 지원, C/C++, Rust, Go 등으로 작성된 코드를 브라우저 상에서 실행 가능
• 호환성
  • 최신 브라우저에서 지원, 기존 자바스크립트 코드와 상호작용 가능

AI 웹 통합

• AI 웹 통합
  • 웹 애플리케이션에 인공지능 기술을 통합하여 사용자 경험을 향상시키고 더 지능적인 기능을 제공
  • 자연어 처리(NLP), 이미지 인식, 추천 시스템 등 다양한 AI 기술을 접목
  • 예시: ChatGPT, Google Assistant 웹 버전
• 자연어 처리(NLP)
  • 텍스트 분석, 챗봇, 음성 인식 등을 통해 사용자와의 상호작용을 개선
• 이미지 인식
  • 이미지와 비디오 분석을 통해 객체 인식, 얼굴 인식 등의 기능을 제공
• 추천 시스템
  • 사용자 행동 데이터를 분석하여 개인화된 추천을 제공하고 콘텐츠 추천, 상품 추천 등의 다양한 분야에서 활용