→ web service, web resources, web APIs를 포함하는 Web app개발을 지원하기 위해 만들어진 소프트웨어 프레임워크

• Web Framework를 사용하면 Dynamic Web Page 개발을 위해 필요한 작업들을 손쉽게 수행할 수 있음

Web Framework의 등장배경

• 1993년, user input 반영 등과 같이 사용자와 상호작용 가능한 dynamic page를 제공하기 위해서, 웹 서버에서 외부 app을 사용하기 위해 도입됨
• 하지만, CGI는 각각의 요청이 독립된 Process로 동작하기 때문에, 많은 user request가 있을 시 서버에 부하가 컸음
• 1995년, 서버와 언어가 완전히 통합된(language specific한 서버) 개발환경이 처음 등장하고, CodFusion, PHP와 같은 새로운 웹 관련 언어가 도입됨
  • 위와 같이 dynamic web page를 만들기 위한 언어들이 일반적인 task해결을 위한 libs들이 있긴 했지만, 작업을 위해선 더욱 다양한 종류의 libs들이 필요했음
• 그래서 1990년대 후반에, 웹 개발에 유용한 많은 libs들을 개발자가 사용할 수 있는 "full stack" 프레임워크들이 등장하기 시작함
  • 예시
    • JAVA EE(Servlet, JSP,...)
    • ASP.NET
    • Django
    • Ruby on Rails
    • Laravel
    • Spring MVC
    • ...

Framework 아키텍쳐의 유형

MVC(Model-Veiw-Controller)

• 대부분의 프레임워크들은 MVC 아키텍쳐 패턴을 따름
  • MVC 패턴의 중심 컴포넌트
  • app의 유저 인터페이스에 독립적인 dynamic data scturcture 임
  • conteroller로부터 user input을 받음
  • model이 직접적으로 data, logic, app의 규칙들을 관리함. app의 data 관리에 책임이 있는 부분
  View
  • model의 정보를 특정 형식으로 그림
  • 유저가 보는 화면
  Controller
  • user input에 응답하고 data model objects와 상호작용을 수행함
  • user input을 validate하고 model에 넘겨줌
• Model

Push-based VS. Pull-based

Push-based(Action-based)

• 대부분의 웹 프레임워크는 push-based 아키텍쳐를 따름
• 필요한 작업을 수행하기 위해 action을 사용하고, 그 결과를 그리기 위한 view layer에 data를 "push" 함
• 대표적인 프레임워크
  • Spring MVC, Django, Ruby on Rails, ...

Pull-based(Component-based)

• pull-based 아키텍쳐의 프레임워크들은 필요할 때 복수의 controller에서 결과를 "pull"할 수 있는 view layer에서 부터 시작함
• 하나의 view가 여러개의 controller를 포함할 수 있음
• 대표적인 프레임워크
  • JBoss Seam, JavaServer Faces, Lift, ...

Three-tier 구조

• 웹 프레임워크는 client-server 소프트웨어 아키텍쳐 패턴인 Three-tier 아키텍쳐를 따름
• MVC 패턴과 다른 개념임

Three-tier Architecture

1. Presentation tier
   • data를 표현하고 유저와 상호작용하는 계층
   • HTML, ...
2. Logic(App, business, or middle) tier
   • logic을 실행함으로써 app의 기능을 담당하는 계층
   • Spring MVC, Node.js, ...
3. Data tier
   • data를 저장하고 관리하는 계층
   • SQL, Maria DB, ...

Framework Applications 종류

• 프레임워크는 하나의 프로그래밍 언어에 기반하여 web 개발을 위한 문제 해결을 지원하기 위해 만들어짐

Server-side

• Spring MVC / node.js / Jenkins.js / Ruby on Rails, ...

Client-side

• React / Vue / Angular
  • 참고: React는 프레임워크가 아닌, 라이브러리를 표방하기는 함
  • 하지만 프레임워크와 라이브러리의 차이가 칼같이 discrete하기 어려워, 프레임워크에 포함시킴

Frameworks의 주요 특징

Inversion Of Control

• 추후 자세히 다룰 예정

Web Template System

• view 개발을 돕는 web template system(template engine + content resource + template resource) 존재

Caching

• bandwidth 사용량, server load, 사용자가 느끼는 '랙' 등을 줄이기 위해 web documents를 캐싱 가능

Security

• 일부 웹 프레임워크는 웹 서버가 app 사용자를 식별하고 정의된 기준에 따라 기능에 대한 액세스를 제한할 수 있는 authentication과 authorization 프레임워크와 함께 제공됨

Database Access, Mapping, Configuration

URL mapping

• url Rounting

AJAX

• Ajax(Asynchronous Javascript and XML) 기술 지원

Web Services

• 일부 프레임워크는 웹 서비스를 만들고 제공하기 위한 도구를 제공

Web Resources

• 많은 수의 Web 2.0 RESTful 프레임워크들는 현재RDF(Resource Description Framework)의 개념을 기반으로 일종의 Semantic Webontology에서 리소스 모음을 구축하기 위한 리소스 지향 아키텍처(ROA) 인프라를 제공

출처

Web framework - Wikipedia

Model-view-controller - Wikipedia

Multitier architecture - Wikipedia

• Static VS Dynamic Page 과 Web Server와 (Web) Application Server 에서 언급한 Static page와 Web Server의 한계(개인화된 페이지 제공 어려움, DB 사용 어려움 등)이 해결이 필요했음

이를 해결하기 위해 CGI(Common Gatgeway Interface)라는 규약이 제안됨

CGI(Common Gateway Interface)

• 유저의 요청을 처리하기위해 Web server가 외부 app에 어떻게 data를 전달할 것인가를 명시한 interface
  • CGI Specification 예시
    • request information(request type, remote IP address)이 환경변수로 어떻게 전달될 것인가
    • request body가 어떻게 standard input으로 전달될 것인가
    • response가 어떻게 standard output으로 전달될 것인가
  • 웹 서버가 프로그램을 CGI로 실행하도록 해, 웹 서버가 request를 받으면 환경 변수를 설정하고 standard input & output을 통해 parameter를 모아 프로그램이 어디에서 무엇을 찾아야 하는지 알 수 있게 함
• CGI Scripts(Program)
  • CGI Specification에 따라 작동하는 Server Software에 의해 호출되는 웹페이지(HTML) 생성 프로그램
• 위 그림만 보면 CGI가 App Server의 역할을 하는 것 같은데 맞음
• Web Server는 HTTP Request가 올 때마다 새로운 CGI Process를 실행하고, 응답이 끝나면 CGI Process를 파괴함
  • 이렇게 process를 실행하고 종료하는게 CPU와 메모리를 많이 사용하기에, 많은 수의 HTTP 요청을 처리하기에는 적절하지 않음
• CGI Process의 생성과 종료 시 발생하는 오버헤드를 줄이기 위해서 여러 방법 중 하나로, JAVA EE는 Web Container에서 JAVA Servlet을 실행하여 Process를 Thread로 대체함
• Web Frameworks를 사용하면, CGI Script를 대체할 수 있음

출처

Common Gateway Interface - Wikipedia

What is Common Gateway Interface (CGI)?

CGI와 웹서버

Static Page와 Dynamic Page

Static Page

특징

• Web Server에 저장되어 있는 HTML, Script 등을 Client에 전송
• 모든 사용자에게 동일한 내용의 페이지 응답

장점

• 동적인 요소가 없기에 DB가 필요 없어 환경 구성이 매우 쉬움
• 단순 문서로만 구성되므로 HTML만 전송하면 되기에 서버간 통신이 거의 없어 전송 속도가 매우 빠름
• FMP(First Meaningful Paint)를 보기까지 시간이 매우 짧음
• 변하지 않는 static data를 다뤄, Caching을 매우 적극적으로 활용 가능

단점

• 사용자별 개인화된 페이지 제공 불가
• 사용자의 입력을 저장하거나 그에 맞는 페이지 제공 불가

Dynamic Page

특징

• (Static) Web Server + Application Server인 WAS(Web App Server) 사용
  • Application Server
    • Web Server에서 처리하지 못하는 동적 데이터에 대응하기 위해 만들어짐
      • DB 조회, 로직 처리 등

장점

• 유져별 개인화된 화면 제공 가능
• 유저와 상호작용에 용이

단점

• 환경, 구조 등 매우 복잡
• page 용량이 큼
• dynamic data를 보여주기에 Cache 활용이 어려움

개인적인 생각

• Static page와 Dynamic page 중, 더 뛰어난 기술이란 없다
  • Dynamic page가 static page의 한계를 보완하기 위해 나온 것은 맞다
  • 하지만 그 사실이 dynamic page가 모든 상황에서 우수하다는 뜻은 아니다
  • 단지, 목적과 상황에 따라 선택하여 사용하면 된다

출처

LINE에서 하루 만에 정적 웹 페이지 개발해서 배포하는 방법 - LINE ENGINEERING

Web Server(HTTP Server)

• 아래의 역할을 하는 소프트웨어 및 하드웨어역할
  • HTTP
    • Client가 보낸 HTTP Request를 accept하고, 적절한 HTTP Response를 주는 서버
      1. Static contents 요청 시
         • 정적 컨텐츠(html, jpeg, css, ...)를 제공
      2. Dyanamic contetns 요청 시
         • (Web) Application Server로 전달하여, WAS가 처리한 결과를 client에 전달
  • Load Balancing
    • 요청 분산
    • health check
      • n초에 한번 씩 WAS에 요청을 보내, 해당 WAS가 정상 작동하는지 확인
  • 기타
    • Logging
      • Client의 요청과 Server의 응답에 관한 정보를 로깅함
    • Authentication
      • 웹사이트의 자원에 접근하기 전에 해당 요청의 유효함 검증을 지원함
    • Large File Support
      • 큰 파일을 serving하기 위한 지원
    • Bandwidth Throttling
      • 많은 client 요청을 처리하기 위해 content responses 속도를 제한함
    • Virtual Hosting
      • 하나의 IP 주소에 많은 웹사이트를 serving하기 위한 지원
  예시
  • NginX
  • Apache
  • Cloudflare Server

(Web) Application Server

• Web Server + Web Container
  • WAS는 웹서버가 할 수 있는 것 다할 수 있음
  • Web Container가 동적 컨텐츠 요청을 처리함
• web application이 실행되는 서버
  ** java 계열에서는 WAS를 Web App Container라고 부르기도 함

역할

• Web Server와 통신
• 비즈니스 로직 처리
• DB 연결 및 사용
• HTTP Protocol이 아닌 서버와 통신 등

구성

• Web Server Connectors
• 프로그래밍 언어로 만들어진 Business Logic Programs
• Runtime Libraries
• Datbase Connectors 등

종류

Java

• Tomcat
• Jetty
• JEUS
• ...

JavaScript

• Node.js
• Deno

C#

• .NET

WAS 앞 단에 따로 Web Server를 두면 좋은 이유!

1. 각 서버의 역할을 나눠, 서버의 부하 방지 가능
   • 정적 컨텐츠(image, css, ...)는 Web Server가, 동적 컨텐츠는 WAS가 담당하게 함
     ** tomcat 5.5부터는 정적 처리를 다 tomcat으로 보내도 성능이 크게 떨어지지 않는다고 함
2. 여러 대의 WAS Load Balancing
   • WAS 처리가 필요한 요청을 여러 WAS가 나눠 처리할 수 있도록 할 수 있음

• 여러 대의 WAS Health Check 가능
  • Health Check이란?
    • 서버에 주기적으로 HTTP 요청을 보내, 서버의 상태를 확인하는 것
  • 여러 대의 WAS Health Check을 해, 특정 WAS에 이상이 생기면 해당 서버로 가는 요청을 다른 서버로 돌릴 수 있음

  3.  Reverse Proxy를 통해 실제 서버를 외부에 노출하지 않을 수 있음

• server가 공격당해도, 공격의 여파가 web server로만 끝나고 DB 등의 중요한 정보에 접근하는 WAS에 전파를 막음

참고

• 한국에서는 Web Application Server, 영어권에선 Application Server라고 부름
• Java EE(Enterprise Editon)은, Java (Web) Application Server의 주요 기능과 핵심 API set을 정의해둠
  • Java EE에 정의된 Java App Server의 핵심 특징 → Logical Containers로 Java EE의 인프라를 나눠둠
    • EJB Container
      • EJB(Enterprise JavaBeans)는 Transaction을 관리하는데 사용됨
    • Web Container(=Servlet Container)
      • Servlets과 JSP를 포함하는 웹 모듈
      • e.g., Apache Tomcat
    • JCA Container
    • JMS Provider
  • 어떤 Java App Server는 EJB나 JMS와 같은 Java EE의 주요 특징을 버림. 대신 Web Container에 집중하는 것도 있음

출처

Web server - Wikipedia

Application server - Wikipedia

List of application servers - Wikipedia

Difference between web server, web container and application server

[10분 테코톡] 👳‍♂️ 알리의 Web Server vs WAS

[10분 테코톡] 🎙티거의 Web server vs WAS

pc와 mobile은 그 환경이 hadware 수준부터 다르다.

페이지의 로딩 시간이나 애니메이션 정상 작동 여부 등을 확인하기 위해서 pc에서 mobile view로 보는걸 넘어 진짜 mobile phone에서 app을 확인할 필요가 있을 수 있다.

pc의 localhost에 접근하기 위해 1) 서버를 만들고 포트 포워딩을 하고 등등을 직접하는 방법 2) ngrok과 같은 sw를 이용하는 방법 등이 있을 수 있다.

하지만, 1번 방법은 너무 복잡하고 2번은 free plan에서는 connections 요청에 제한이 있기 때문에 프로젝트에 따라 사용이 불가할 수도 있다.

이 때 아주 손쉽게 수행할 수 있는 방법이 있다.

1) PC & Mobile 모두 똑같은 wifi에 접속하고,

2) PC의 사설ip와 localhost의 port number를 mobile browswer에서 입력하면 끝!

사설 ip를 확인했으면 mobile browser에서 포트번호와 함께 입력하면 끝!