웹 애플리케이션

웹 애플리케이션은 아래와 같은 특징이 있다.

• 데스크탑 애플리케이션처럼 상호작용 가능하다.
• 특정 기능을 가지고 있다(정보 검색 등).
• 정보나 자료 등의 콘텐츠 관리 시스템과 함께 작동한다.

웹 개발 영역에서 website라고 하면 일반적으로 정적 페이지들의 집합체를 의미한다. 예를 들면 뉴스 사이트와 같이 고정된 정보를 제공하지만 사용자가 해당 사이트에 어떠한 것도 관여 하지 못하는 사이트이다.

 

웹사이트가 정적 페이지들 뿐 아니라 동적 페이지, 즉, 사용자와 상호작용을 포함하게 된다면 이미 web application 이 되게 된다. 예를 들면 메일, 인터넷 게시판, 블로그 SNS 등이 있다.

 

웹 애플리케이션은 인터넷에 공개되는 순간부터 글로벌 네트워크의 막대한 트래픽에 노출 될 수 있기 때문에 아래와 같은 요소를 고려해야 한다.

• 신뢰성(reliability)
• 확장성(scalability)
• 보안성(security)
• 견고성(robustness)

 

웹 애플리케이션의 구현 

 

오늘날 웹 애플리케이션을 구성하는 방식은 크게 다음과 같이 세가지 방식이 있다.

• Single Page Application
• Microservice architecture
• Serverless Architectures

 

Single Page Application, SPA

이전의 웹페이지들의 경우 유저와 어떠한 상호작용을 하면 해당 웹페이지 전체를 새로고침해야 됬었다.

 

하지만 Single Page Application의 경우 AJAX등을 이용해 사용자가 원하는 정보만을 요청하여 페이지의 새로고침 없이도 최신화 할수 있다.

예를들면 구글에서 검색어를 작성할때 추천단어들이 뜬다거나 인스타그램에서 페이지를 내릴때마다 다른 소식들이 계속해서 로딩되는것들이 이에 해당된다.

 

(예전에 아무것도 모르고 GraphQL을 이용하여 코드를 작성했었는데 그때 사용한 pagination이나 subscription과 같은 기능들이 Single Page Application과 연관 되있엇다.)

 

 

Microservice architecture

마이크로서비스는 소프트웨어가 잘 정의된 API를 통해 통신하는 소규모의 독립적인 서비스로 구성되어 있는 경우의 소프트웨어 개발을 위한 아키텍처 및 조직적 접근 방식이다. 

 

위의 그림과 같이 독립적인 기능을 가진 API들을 UI에 맞게 특정한 API들만을 사용하는 구조이다.

 

Serverless Architecture

Serverless Architecture는 개발자가 웹 애플리케이션의 서버와 기타 기반 기능들에 대해 외부의 3자인 클라우드 서비스 제공자에게 의탁하는 방식이다.

 

 

 

참조

 

웹 어플리케이션 : 

https://ko.wikipedia.org/wiki/%EC%9B%B9_%EC%95%A0%ED%94%8C%EB%A6%AC%EC%BC%80%EC%9D%B4%EC%85%98#:~:text=%EC%9B%B9%20%EC%95%A0%ED%94%8C%EB%A6%AC%EC%BC%80%EC%9D%B4%EC%85%98(%EC%98%81%EC%96%B4%3A%20web%20application,%EB%95%8C%EB%AC%B8%EC%97%90%20%EC%9D%B8%EA%B8%B0%EB%A5%BC%20%EB%88%84%EB%A6%AC%EA%B3%A0%20%EC%9E%88%EB%8B%A4.

 

싱글페이지 어플리케이션 :

https://learn.microsoft.com/en-us/archive/msdn-magazine/2013/november/asp-net-single-page-applications-build-modern-responsive-web-apps-with-asp-net

 

마이크로서비스 :

https://giljae.medium.com/%EB%A7%88%EC%9D%B4%ED%81%AC%EB%A1%9C%EC%84%9C%EB%B9%84%EC%8A%A4-%EC%95%84%ED%82%A4%ED%85%8D%EC%B2%98-microservices-architecture-%EC%9D%98-%EC%9E%A5%EC%A0%90%EA%B3%BC-%EB%8B%A8%EC%A0%90-7c45615cfe1a