본문으로 이동

웹 프레임워크

위키백과, 우리 모두의 백과사전.

웹 프레임워크(web framework, WF) 또는 웹 애플리케이션 프레임워크(web application framework, WAF)는 동적인 웹 페이지나, 웹 애플리케이션, 웹 서비스 개발 보조용으로 만들어지는 애플리케이션 프레임워크의 일종이다. 웹 페이지를 개발하는 과정에서 겪는 어려움을 줄이는 것이 주 목적으로 통상 데이터베이스 연동, 템플릿 형태의 표준, 세션 관리, 코드 재사용 등의 기능을 포함하고 있다.

역사

[편집]

월드 와이드 웹은 설계 시 태생적으로 동적이지 않았으며 웹 서버에 게시된, 손으로 코딩한 HTML로 이루어진 초기의 하이퍼텍스트로 이루어졌다. 게시된 문서를 수정하려면 페이지를 만든 사람이 직접 수행해야 했다. 1993년, 공통 게이트웨이 인터페이스(CGI) 표준이 외부 애플리케이션과 웹 서버 간 통신을 위해 도입되었고, 사용자의 입력을 반영한 동적 웹 페이지를 제공할 수 있게 되었다.[1]

CGI 인터페이스의 초기 구현은 각 요청이 별도의 프로세스를 시작했기 때문에 일반적으로 서버 부하에 악영향을 미쳤다.[2] 최근 구현에서는 서버 자원의 점유율을 줄이고 전반적인 성능 향상을 위해 지속적인 프로세스 등의 기술을 활용한다.

1995년, 완전 통합된 서버/언어 개발 환경이 처음 등장했으며, 콜드퓨전, PHP, 액티브 서버 페이지와 같은 새로운 웹 특정 언어가 도입되었다.

동적 웹 페이지를 생성하기 위한 대다수의 언어에는 공통 작업을 돕는 라이브러리가 있지만, 웹 애플리케이션은 HTML 생성(예: 자카르타 페이스)과 같은 특정 작업을 위해 특별한 라이브러리를 필요로 하는 경우가 많다.

1990년대 후반에 웹 개발자가 사용할 수 있도록 웹 개발에 유용한 여러 라이브러리를 단일 통합 솔루션 스택으로 모아 놓은 성숙한 "풀 스택" 프레임워크가 등장하기 시작했다.

프레임워크 아키텍처 유형

[편집]

대부분의 웹 프레임워크는 모델-뷰-컨트롤러 (MVC) 패턴을 기반으로 한다.

모델-뷰-컨트롤러 (MVC)

[편집]

많은 프레임워크는 MVC 아키텍처 패턴을 따르며, 데이터 모델을 사업 규칙("컨트롤러")과 사용자 인터페이스("뷰")로 분리한다. 이는 일반적으로 코드를 모듈화하고 코드 재사용을 촉진하며 여러 인터페이스를 적용할 수 있게 해주므로 좋은 관행으로 간주된다. 웹 애플리케이션에서는 이를 통해 모바일 및 데스크톱 브라우저에 다른 웹 페이지를 제공하거나 기계가 읽을 수 있는 웹 서비스 인터페이스를 제공하는 등 다양한 뷰를 제시할 수 있다.

푸시 기반 대 풀 기반

[편집]

대부분의 MVC 프레임워크는 "액션 기반"이라고도 불리는 푸시 기반 아키텍처를 따른다. 이 프레임워크는 필요한 처리를 수행하는 액션을 사용한 다음, 결과를 렌더링하기 위해 데이터를 뷰 계층으로 "푸시"한다.[3] 이에 대한 대안은 풀 기반 아키텍처이며, 때로는 "컴포넌트 기반"이라고도 불린다. 이 프레임워크는 뷰 계층에서 시작하여 필요에 따라 여러 컨트롤러에서 결과를 "풀"할 수 있다. 이 아키텍처에서는 여러 컨트롤러가 단일 뷰와 관련될 수 있다.

3계층 구성

[편집]

3계층 구성에서 애플리케이션은 클라이언트, 애플리케이션, 데이터베이스의 세 가지 물리적 계층을 중심으로 구성된다.[4][5][6][7] 데이터베이스는 일반적으로 RDBMS이다. 애플리케이션은 서버에서 실행되는 비즈니스 로직을 포함하며 HTTP를 사용하여 클라이언트와 통신한다.[8] 웹 애플리케이션의 클라이언트는 애플리케이션 계층에서 생성된 HTML을 실행하는 웹 브라우저이다.[9][10] 이 용어는 MVC와 혼동해서는 안 된다. MVC에서는 3계층 아키텍처와 달리 비즈니스 로직을 컨트롤러인 "중간 계층"에서 멀리 떨어뜨려 놓는 것이 좋은 관행으로 간주된다.[11][12]

프레임워크 적용

[편집]

프레임워크는 단일 프로그래밍 언어를 기반으로 인터넷 애플리케이션을 구축하도록 지원하며, 특정 언어의 기능을 향상시키는 Zend Framework 및 루비 온 레일즈와 같은 범용 도구부터 저작물 관리 시스템(CMS), 일부 모바일 개발 도구 및 일부 포털 도구와 같이 특정 사용자 애플리케이션을 중심으로 구축된 네이티브 언어 프로그래밍 가능 패키지에 이르기까지 그 초점이 다양하다.[13]

범용 웹사이트 프레임워크

[편집]

웹 프레임워크는 브라우저와 통신 프로토콜인 HTTP와 같은 무상태의 아키텍처 규칙에 따라 작동해야 한다. 웹 페이지는 서버에서 제공되며 자바스크립트를 사용하여 브라우저에서 수정될 수 있다. 각 접근 방식에는 장단점이 있다.

서버 측 페이지 변경은 일반적으로 페이지 새로 고침을 필요로 하지만, 모든 언어를 사용할 수 있고 더 많은 컴퓨팅 성능을 활용할 수 있다. 클라이언트 측 변경은 페이지를 작은 덩어리로 업데이트하여 데스크톱 애플리케이션과 같은 느낌을 주지만, 자바스크립트에 제한되며 사용자의 브라우저에서 실행되므로 컴퓨팅 성능이 제한될 수 있다. 일반적으로 둘을 혼합하여 사용한다.[14] 자바스크립트를 많이 사용하고 페이지의 일부만 새로 고치는 애플리케이션을 싱글 페이지 애플리케이션이라고 하며, 일반적으로 클라이언트 측 자바스크립트 웹 프레임워크를 사용하여 코드를 구성한다.

서버 측

[편집]

클라이언트 측

[편집]

예시로는 Backbone.js, AngularJS, Angular, Ember.js, ReactJS, JQuery UI, Svelte, Vue.js 등이 있다.[15]

현대 프레임워크의 기능과 절충

[편집]

리액트 및 뷰와 같은 자바스크립트 기반 웹 애플리케이션 프레임워크는 광범위한 기능을 제공하지만 그에 따른 절충이 따른다. 이러한 프레임워크는 라우팅, 컴포넌트 기반 개발, 상태 관리와 같이 네이티브 웹 기술을 통해 제공되는 기능을 확장하거나 향상시키는 경우가 많다. 웹 컴포넌트, Fetch 및 ES Modules와 같은 최신 자바스크립트 API, Shadow DOM과 같은 브라우저 기능을 포함한 네이티브 웹 표준이 크게 발전했지만, 프레임워크는 개발자 생산성 향상, 대규모 애플리케이션을 위한 구조화된 패턴 제공, 엣지 케이스 처리 간소화, 성능 최적화 도구 제공 능력 때문에 여전히 널리 사용된다.[16][17][18]

프레임워크는 성능 오버헤드, 더 큰 번들 크기, 복잡성 증가에 기여할 수 있는 추상화 계층을 도입할 수 있다. React 18 및 Vue 3와 같은 최신 프레임워크는 동시 렌더링, 트리 쉐이킹, 선택적 하이드레이션과 같은 기능으로 이러한 문제에 대응한다. 이러한 발전은 렌더링 효율성과 리소스 관리를 개선하지만, 그 이점은 특정 애플리케이션 및 구현 컨텍스트에 따라 달라진다. Svelte 및 Preact와 같은 경량 프레임워크는 다른 아키텍처 접근 방식을 취한다. Svelte는 효율적인 자바스크립트 코드로 컴포넌트를 컴파일하기 위해 가상 DOM을 완전히 제거하며, Preact는 React의 최소한의 호환 가능한 대안을 제공한다. 프레임워크 선택은 팀의 전문성, 성능 목표, 개발 우선순위를 포함한 애플리케이션의 요구 사항에 따라 달라진다.[16][17][18]

enhance.dev, Astro, Fresh를 포함한 새로운 범주의 웹 프레임워크는 추상화 및 개발 도구를 최소화하면서 네이티브 웹 표준을 활용한다.[19][20][21] 이러한 솔루션은 점진적 향상, 서버 사이드 렌더링, 성능 최적화를 강조한다. Astro는 기본적으로 정적 HTML을 렌더링하면서 상호 작용하는 부분만 하이드레이트한다. Fresh는 런타임 오버헤드 없이 서버 측 렌더링에 중점을 둔다. Enhance.dev는 웹 컴포넌트를 사용하여 점진적 향상 패턴을 우선시한다. 이러한 도구는 빌드 시간 또는 서버 측 실행으로 로직을 전환하여 클라이언트 측 자바스크립트 의존도를 줄이지만, 상호 작용을 위해 필요한 경우 여전히 자바스크립트를 사용한다. 이러한 접근 방식은 성능에 중요하고 콘텐츠 중심적인 애플리케이션에 특히 적합하다.[16][17][18]

기능

[편집]

프레임워크는 일반적으로 프로그램의 제어 흐름을 설정하고 프레임워크 사용자가 다양한 이벤트를 노출함으로써 해당 흐름에 "연결"할 수 있도록 한다.[22] 이러한 "제어 반전" 설계 패턴은 프레임워크의 정의 원칙으로 간주되며, 팀이 유사한 방식으로 사용자 정의할 수 있는 공통 흐름을 강제함으로써 코드에 이점을 제공한다.[22] 예를 들어, 루비의 시나트라(Express.js에 영감을 준)와 같은 일부 인기 있는 "마이크로프레임워크"는 HTTP 요청 전후에 "미들웨어" 훅을 허용한다. 이러한 미들웨어 함수는 무엇이든 될 수 있으며, 사용자가 로깅, 인증, 세션 관리 및 리다이렉션을 정의할 수 있도록 한다.[23]

웹 템플릿 시스템

[편집]

캐싱

[편집]

웹 캐싱은 웹 전자 문서의 캐싱으로, 대역폭 사용량, 서버 부하 및 인지되는 "지연"을 줄이기 위한 것이다. 웹 캐시는 통과하는 문서의 사본을 저장한다. 특정 조건이 충족되면 후속 요청은 캐시에서 처리될 수 있다. 일부 애플리케이션 프레임워크는 문서 캐싱 및 데이터베이스 액세스 또는 템플릿 해석과 같은 페이지 준비의 다양한 단계를 우회하는 메커니즘을 제공한다.

보안

[편집]

일부 웹 프레임워크는 인증 및 허가 프레임워크와 함께 제공되어 웹 서버가 애플리케이션 사용자를 식별하고 정의된 기준에 따라 기능에 대한 액세스를 제한할 수 있도록 한다. 드루팔은 페이지에 대한 역할 기반 액세스를 제공하고 사용자를 생성하고 역할을 할당하기 위한 웹 기반 인터페이스를 제공하는 한 예이다.

데이터베이스 액세스, 매핑 및 구성

[편집]

많은 웹 프레임워크는 데이터베이스 백엔드에 대한 통합 API를 생성하여 웹 애플리케이션이 코드 변경 없이 다양한 데이터베이스와 작동할 수 있도록 하고 프로그래머가 더 높은 수준의 개념으로 작업할 수 있도록 한다. 또한 일부 객체 지향 프로그래밍 프레임워크에는 객체 관계형 매핑을 제공하는 매핑 도구가 포함되어 객체를 튜플에 매핑한다.[24]

일부 프레임워크는 자기 성찰 및 잘 알려진 설정보다 관습을 사용하여 웹 애플리케이션 구성을 최소화한다. 예를 들어, 많은 자바 프레임워크는 하이버네이트를 지속성 계층으로 사용하며, 이는 필요한 정보를 지속할 수 있는 데이터베이스 스키마를 런타임에 생성할 수 있다. 이를 통해 애플리케이션 설계자는 데이터베이스 스키마를 명시적으로 정의할 필요 없이 비즈니스 객체를 설계할 수 있다. 루비 온 레일즈와 같은 프레임워크는 역으로, 즉 데이터베이스 스키마를 기반으로 런타임에 모델 객체의 속성을 정의할 수도 있다.[24]

웹 프레임워크가 제공할 수 있는 다른 기능에는 트랜잭션 지원[25] 및 데이터베이스 마이그레이션 도구가 있다.[24]

URL 매핑

[편집]

프레임워크의 URL 매핑 또는 라우팅 기능은 프레임워크가 URL을 해석하는 메커니즘이다. 드루팔 및 장고와 같은 일부 프레임워크는 정규 표현식을 사용하여 제공된 URL을 미리 정의된 패턴과 일치시키는 반면, 다른 일부 프레임워크는 재작성 기술을 사용하여 제공된 URL을 기본 엔진이 인식할 수 있는 URL로 변환한다. 또 다른 기술은 Zope에서 사용되는 그래프 순회이며, URL은 객체 그래프(모델 및 뷰)를 순회하는 단계로 분해된다.

패턴 일치 또는 재작성을 사용하여 요청을 라우팅하고 처리하는 URL 매핑 시스템은 더 짧고 "친근한 URL"을 사용할 수 있도록 하여 사이트의 단순성을 높이고 검색 엔진에 의한 더 나은 인덱싱을 가능하게 한다. 예를 들어, "/page.cgi?cat=science&topic=physics"로 끝나는 URL은 단순히 "/page/science/physics"로 변경될 수 있다. 이렇게 하면 URL이 사람들이 기억하고 읽고 쓰기 쉬워지고 검색 엔진에 사이트의 구조적 레이아웃에 대한 더 나은 정보를 제공한다. 그래프 순회 접근 방식 또한 친근한 URL을 생성하는 경향이 있다. "/page/science"와 같은 더 짧은 URL은 기본적으로 "/page/science/physics"에 대한 더 짧은 형태이기 때문에 존재한다.

Ajax

[편집]

Ajax는 "비동기 자바스크립트 및 XML"의 약어로, 웹 애플리케이션을 만들기 위한 웹 개발 기술이다. 의도는 사용자가 변경을 요청할 때마다 전체 웹 페이지를 다시 로드할 필요가 없도록 백그라운드에서 서버와 소량의 데이터를 교환하여 웹 페이지가 더 반응적으로 느껴지도록 하는 것이다. 이는 웹 페이지의 상호 작용성, 속도, 유지 관리성 및 사용성을 높이기 위한 것이다.[26]

자바스크립트에서 Ajax 프로그래밍의 복잡성 때문에 Ajax 지원만을 다루는 수많은 Ajax 프레임워크가 있다. 일부 Ajax 프레임워크는 더 큰 프레임워크의 일부로 내장되기도 한다. 예를 들어, JQuery 자바스크립트 라이브러리는 루비 온 레일즈에 포함되어 있다.

"웹 2.0" 리치 웹 애플리케이션 개발에 대한 관심이 증가함에 따라 Ajax 및 자바스크립트에서 직접 프로그래밍하는 복잡성이 너무 분명해져서 컴파일러 기술이 개입하여 개발자가 자바, 파이썬, 루비와 같은 고급 언어로 코드를 작성할 수 있도록 했다. 이 컴파일러 중 첫 번째는 Morfik이었고, 이어서 구글 웹 툴킷이 나왔으며, 얼마 후 파이썬 및 루비용 포트인 Pyjs 및 RubyJS가 뒤를 이었다. 이러한 컴파일러와 관련 위젯 세트 라이브러리는 리치 미디어 Ajax 애플리케이션 개발을 데스크톱 애플리케이션 개발과 훨씬 더 유사하게 만든다.

웹 서비스

[편집]

일부 프레임워크는 웹 서비스를 생성하고 제공하기 위한 도구를 제공한다. 이러한 유틸리티는 웹 애플리케이션의 나머지 부분과 유사한 도구를 제공할 수 있다.[27]

웹 리소스

[편집]

많은 최신 웹 2.0 RESTful 프레임워크는 자원 기술 프레임워크(RDF)의 개념을 기반으로 하는 일종의 시맨틱 웹 온톨로지에서 리소스 컬렉션을 구축하기 위한 자원 지향 아키텍처 (ROA) 인프라를 제공한다.

같이 보기

[편집]

각주

[편집]
  1. ↑ “CGI: Common Gateway Interface”. 2009년 4월 9일에 원본 문서에서 보존된 문서.
  2. ↑ “CGI” (미국 영어). 《www.ibm.com》. 2021년 5월 7일에 확인함.
  3. ↑ Thomson, Kris (2003년 10월 29일). “Clarification on MVC= Pull and MVC Push”. 2007년 7월 29일에 확인함.
  4. ↑ Microsoft. “Three-tiered distribution”. 2011년 9월 19일에 확인함.
  5. ↑ Oracle. “clustering_concepts_10en” (PDF). 2011년 9월 19일에 확인함.
  6. ↑ Robert R. Perkoski. “Introduction to Web Development”. 2013년 11월 7일에 원본 문서에서 보존된 문서.
  7. ↑ IBM. “Using Client Access Express in a three tier environment”. 2011년 9월 19일에 확인함.
  8. ↑ Oracle. “Understanding the Three-Tier Architecture”. 2011년 9월 19일에 확인함.
  9. ↑ Microsoft. “Pragmatic Architecture: Layering”. 2011년 9월 19일에 확인함.
  10. ↑ Arokia. “3-Tier Web Architecture”. 2012년 7월 18일에 원본 문서에서 보존된 문서. 2011년 9월 19일에 확인함.
  11. ↑ “ASP.NET MVC Controller Best Practices”. 2011년 10월 11일에 원본 문서에서 보존된 문서. 2011년 9월 19일에 확인함.
  12. ↑ Jamis Buck. “Skinny Controller, Fat Model”. 2015년 5월 16일에 원본 문서에서 보존된 문서.
  13. ↑ “Getting Started With Web Frameworks” (영어). Wired Magazine. 2018년 4월 2일에 확인함.
  14. ↑ KLIMUSHYN, Mel (2015년 4월 6일). “Web Application Architecture – Client-Side vs. Server-Side”. 《Atomic Spin》. 2016년 3월 6일에 확인함.
  15. ↑ “AngularJS vs. Backbone.js vs. Ember.js” (미국 영어). 《www.airpair.com》. 2023년 3월 26일에 원본 문서에서 보존된 문서. 2016년 6월 4일에 확인함.
  16. 1 2 3 Uzayr, Sufyan bin; Cloud, Nicholas; Ambler, Tim (November 2019). 《JavaScript Frameworks for Modern Web Development: The Essential Frameworks, Libraries, and Tools to Learn Right Now》. Apress. ISBN 978-1484249949.
  17. 1 2 3 Rojas, Carlos (2020년 11월 13일). 《Building Native Web Components: Front-End Development with Polymer and Vue.js》. Apress. ISBN 978-1484259047.
  18. 1 2 3 《Hands-On JavaScript High Performance: Build faster web apps using Node.js, Svelte.js, and WebAssembly》. ISBN 978-1838821098.
  19. ↑ “Enhance”. 《깃허브》.
  20. ↑ “Astro framework”. 《깃허브》.
  21. ↑ “Fresh”. 《깃허브》.
  22. 1 2 Fowler, Martin. “bliki: InversionOfControl”. 《martinfowler.com》. 2016년 3월 6일에 확인함.
  23. ↑ Xue, Qiang. “Capital One Engineering – Philosophies that Shaped Successful Frameworks”. 《www.capitalone.io》. 2016년 3월 13일에 원본 문서에서 보존된 문서. 2016년 3월 6일에 확인함.
  24. 1 2 3 “Active Record Basics”. 《Ruby on Rails》. 2021년 3월 20일에 확인함. Object Relational Mapping, commonly referred to as its abbreviation ORM, is a technique that connects the rich objects of an application to tables in a relational database management system...Active Record automatically creates methods to allow an application to read and manipulate data stored within its tables.
  25. ↑ “Active Record Transactions”. 《Ruby on Rails》. 2021년 3월 20일에 확인함.
  26. ↑ “create site with ajax webplano”. 《webplano.com》. 2025년 11월 23일에 확인함.
  27. ↑ Maximilien, E. M. (2006). 〈Tutorial 4: Web Services on Rails: Using Ruby and Rails for Web Services Development and Mashups〉. 《2006 IEEE International Conference on Web Services (ICWS'06)》. xliii쪽. doi:10.1109/ICWS.2006.139. ISBN 0-7695-2669-1.
원본 주소 "https://ko.wikipedia.org/w/index.php?title=웹_프레임워크&oldid=41095392"