맨위로가기

MEAN

"오늘의AI위키"는 AI 기술로 일관성 있고 체계적인 최신 지식을 제공하는 혁신 플랫폼입니다.
"오늘의AI위키"의 AI를 통해 더욱 풍부하고 폭넓은 지식 경험을 누리세요.
목차

1. 개요

MEAN은 MongoDB, Express.js, Angular (또는 다른 프론트엔드 프레임워크), Node.js의 앞 글자를 따서 만든 웹 개발 기술 스택이다. 2013년 MongoDB 개발자 발레리 카르포프가 처음 사용했으며, 각 구성 요소는 데이터베이스, 웹 애플리케이션 프레임워크, 프론트엔드 프레임워크, 애플리케이션 런타임의 역할을 담당한다. MEAN.io, MEAN.JS 등 구현체들이 존재한다.

더 읽어볼만한 페이지

  • 웹 프레임워크 - 드루팔
    드루팔은 드리스 바이테르트가 개발하여 2001년 공개된 PHP 기반의 오픈 소스 콘텐츠 관리 시스템으로, 모듈과 테마를 통해 기능 확장이 가능하며 다양한 기관에서 활용되고 활발한 커뮤니티를 가지고 있다.
  • 웹 프레임워크 - 실버스트라이프 CMS
    실버스트라이프 CMS는 PHP로 제작된 오픈 소스 콘텐츠 관리 시스템으로, 웹사이트 및 웹 애플리케이션을 개발하고 관리하는 데 사용되며, MVC 패턴과 Sapphire ORM 프레임워크를 활용하여 사용자 친화적이고 확장 가능한 플랫폼을 제공한다.
MEAN
식별
LAMP 스택 다이어그램
LAMP 스택 다이어그램
개요
종류솔루션 스택
기반소프트웨어 번들
스택 컴포넌트MongoDB
Express.js
AngularJS 또는 Angular
Node.js
설명클라이언트-서버 아키텍처를 구축하는 데 사용되는 JavaScript 기반의 자유-오픈 소스 소프트웨어 스택
상세 정보
MongoDBNoSQL 데이터베이스
Express.jsNode.js에서 실행되는 웹 애플리케이션 서버 프레임워크
AngularJS 또는 Angular프론트엔드 웹 프레임워크
Node.js서버 측 JavaScript 환경
변형
MERN 스택MongoDB, Express.js, React, Node.js
MEVN 스택MongoDB, Express.js, Vue.js, Node.js
MEAN.JSMEAN 스택의 풀 스택 JavaScript 오픈 소스 솔루션
장점
특징풀 스택 JavaScript
JavaScript와 JSON을 사용하여 데이터 전송
반응성이 뛰어나고 성능이 좋은 애플리케이션 개발 가능
클라우드 친화적인 아키텍처
기타
비교LAMP 스택과 비교됨

2. 구성 요소

MEAN 스택은 다음 네 가지 주요 기술로 구성된다.[22][23]



MEAN을 채택하면 서버 사이드부터 클라이언트 사이드까지 모든 구현 작업을 자바스크립트와 JSON만으로 완료할 수 있다. 따라서 웹 애플리케이션의 내부 처리 전 과정을 단일 언어로 작성할 수 있으며, 데이터베이스 입출력 시 데이터 변환도 할 필요가 없다. 또한 서버 역할을 하는 Node.js는 싱글 스레드, 논블로킹 I/O를 통해 메모리 절약과 빠른 속도로 작동한다. 따라서 개발 작업의 효율화와 서버 머신의 대폭적인 부하 감소를 실현할 수 있다.[14]

2. 1. MongoDB

MongoDB는 선택적 스키마를 가진 JSON과 유사한 BSON (이진 JSON) 문서를 사용하는 NoSQL 데이터베이스 프로그램이다.

MEAN 스택에서 데이터베이스의 역할은 MongoDB가 매우 흔하게 담당하는데, 이는 행/열 모델이 아닌 JSON과 유사한 문서를 사용하여 데이터와 상호 작용하기 때문에 스택의 다른 (JavaScript 기반) 구성 요소와 잘 통합되기 때문이다.[8] MEAN을 채택하면 서버 사이드부터 클라이언트 사이드까지 모든 구현 작업을 자바스크립트와 JSON만으로 완료할 수 있다. 따라서 웹 애플리케이션의 내부 처리 전 과정을 단일 언어로 작성할 수 있으며, 데이터베이스 입출력 시 데이터 변환도 할 필요가 없다. 또한 서버 역할을 하는 Node.js는 싱글 스레드, 논블로킹 I/O를 통해 메모리 절약과 빠른 속도로 작동한다. 따라서 개발 작업의 효율화와 서버 머신의 대폭적인 부하 감소를 실현할 수 있다.

2. 2. Express.js

Express는 Node.js를 위한 모듈형 웹 애플리케이션 프레임워크 패키지이다.[9]

Express는 인터넷에 직접 연결되는 웹 서버 역할을 할 수 있으며, SSL/TLS을 기본적으로 지원한다. 하지만 성능상의 이유로 Nginx, Apache와 같은 리버스 프록시와 함께 사용되는 경우가 많다.[10] MEAN을 채택하면 서버 사이드부터 클라이언트 사이드까지 모든 구현 작업을 자바스크립트와 JSON만으로 완료할 수 있다. 따라서 웹 애플리케이션의 내부 처리 전 과정을 단일 언어로 작성할 수 있으며, 데이터베이스 입출력 시 데이터 변환도 할 필요가 없다. 또한 서버 역할을 하는 Node.js는 싱글 스레드, 논블로킹 I/O를 통해 메모리 절약과 빠른 속도로 작동하여 개발 작업의 효율화와 서버 머신의 부하 감소를 실현할 수 있다.

2. 3. Angular (또는 다른 프론트엔드 프레임워크)

Angular는 구글에서 개발한 프론트엔드 웹 애플리케이션 프레임워크이다. 일반적으로 데이터는 Ajax 기술을 사용하여 가져오고 클라이언트 측에서 렌더링되지만, 스택이 일반적으로 완전히 자바스크립트 기반이므로, 일부 구현에서는 초기 페이지의 렌더링을 서버에 오프로드하여 초기 데이터를 사용자 브라우저에 로드하기 전에 미리 가져올 수 있는 서버 측 렌더링도 사용된다.[11]

MEAN 스택에서는 Angular 외에도 React, Vue.js, Ember.js 등 다른 자바스크립트 MVC 프레임워크를 사용할 수 있다. (MEEN 스택은 Ember.js를 활용한 예시이다.)[19]

2. 4. Node.js

Node.js는 MEAN 스택이 실행되는 애플리케이션 런타임이다.

"자바스크립트 어디에나" 패러다임을 나타내는 것으로 여겨지는 Node.js의 사용은[12], 해당 개념에 의존하는 MEAN 스택에 필수적이다. MEAN을 채택하면 서버 사이드부터 클라이언트 사이드까지 모든 구현 작업을 자바스크립트와 JSON만으로 완료할 수 있다. 따라서 웹 애플리케이션의 내부 처리 전 과정을 단일 언어로 작성할 수 있으며, 데이터베이스 입출력 시 데이터 변환도 할 필요가 없다. 또한 서버 역할을 하는 Node.js는 싱글 스레드, 논블로킹 I/O를 통해 메모리 절약과 빠른 속도로 작동한다. 따라서 개발 작업의 효율화와 서버 머신의 대폭적인 부하 감소를 실현할 수 있다.[14]

3. 역사

"MEAN"이라는 용어는 MongoDB 개발자인 발레리 카르포프(Valeri Karpov)가 만들었으며, 2013년 자신의 블로그 게시물에서 처음 사용했다.[22][14]

오스틴 앤더슨(Austin Anderson)은 링크드인의 MEAN 스택 그룹을 위해 MEAN 약어의 각 구성 요소 첫 글자를 조합한 로고를 최초로 만들었다.[21][15]

4. 구현

MEAN 스택 구현에는 MEAN.io와 MEAN.JS 두 가지가 있다. MEAN.io는 MEAN의 최초 프레임워크 중 하나로, 아모스 하비브(Amos Haviv)와 리노베이트(Linnovate)에 의해 만들어졌다. MEAN.JS는 리노베이트(Linnovate)에서 분리된 후 아모스 하비브(Amos Haviv)가 제작했으며[16], 커뮤니티에 의해 관리되고 있다[17][18].

4. 1. MEAN.io

MEAN의 최초 프레임워크 중 하나로, 아모스 하비브(Amos Haviv)와 리노베이트(Linnovate)에 의해 만들어졌다. MEAN.JS는 리노베이트에서 분리된 후 아모스 하비브(Amos Haviv)가 제작했으며[16], 커뮤니티에 의해 관리되고 있다[17][18]。

4. 2. MEAN.JS

MEAN.JS는 리노베이트(Linnovate)에서 분리된 후 아모스 하비브(Amos Haviv)가 제작했으며[16], 커뮤니티에 의해 관리되고 있다[17][18].

5. 관련 서적

Single page web application - JavaScript SPA using Node.js and MongoDB|싱글 페이지 웹 애플리케이션 - Node.js, MongoDB를 활용한 JavaScript SPA영어 (마이클 S. 미코스키, 오라일리 재팬, 2014/5/24)

참조

[1] 웹사이트 us-en_cloud_learn_mean-stack-explained https://www.ibm.com/[...] IBM Cloud Education 2019-05-09
[2] 서적 Write Modern Web Apps with the MEAN Stack: Mongo, Express, AngularJS, and Node.js https://books.google[...] Peachpit Press 2014-09-24
[3] 웹사이트 MERN Stack Explained https://www.mongodb.[...]
[4] 웹사이트 How to Use MERN Stack: A Complete Guide https://www.mongodb.[...]
[5] 웹사이트 LAMP vs MEAN, Deciding the right stack for your startup https://www.linkedin[...] 2020-02-16
[6] 웹사이트 The MEAN Stack: MongoDB, ExpressJS, Angular and Node.js http://blog.mongodb.[...] 2013-04-30
[7] 웹사이트 Mean Stack https://www.linkedin[...]
[8] 웹사이트 The most popular database for modern apps https://www.mongodb.[...] 2020-02-16
[9] 웹사이트 Express - Node.js web application framework https://expressjs.co[...] 2020-02-16
[10] 웹사이트 Why should I use a Reverse Proxy if Node.js is Production-Ready? https://medium.com/i[...] 2019-03-28
[11] 웹사이트 Features - Server Side Rendering {{!}} Next.js https://nexts.org/fe[...] 2020-02-16
[12] 웹사이트 JavaScript Everywhere and the Three Amigos (WebSphere: Into the wild BLUE yonder!) https://www.ibm.com/[...] 2013-11-14
[13] 웹사이트 Mean.io: The Friendly & Fun Javascript Fullstack for your next web application http://www.mean.io 2016-07-03
[14] 웹사이트 The MEAN Stack: MongoDB, ExpressJS, AngularJS and Node.js http://blog.mongodb.[...] 2016-07-03
[15] 웹사이트 Mean Stack https://www.linkedin[...] 2016-07-03
[16] 웹사이트 Forking out of an open-source conflict http://blog.meanjs.o[...] 2015-06-21
[17] 문서 MEAN.JS - Full-Stack JavaScript Using MongoDB, Express, AngularJS, and Node.js https://meanjs.org
[18] Github GitHub - meanjs/mean: MEAN.JS - Full-Stack JavaScript Using MongoDB, Express, AngularJS, and Node.js - https://github.com/m[...]
[19] Github GitHub - YunnuY/meen: Mongo-Ember-Express-Node full-stack javascript open-source solution https://github.com/Y[...]
[20] 웹인용 Mean.io: The Friendly & Fun Javascript Fullstack for your next web application http://www.mean.io 2019-07-06
[21] 웹인용 Mean Stack https://www.linkedin[...]
[22] 웹인용 The MEAN Stack: MongoDB, ExpressJS, AngularJS and Node.js http://blog.mongodb.[...] 2013-04-30
[23] 웹인용 Angular 2 and NodeJS - The Practical Guide to MEAN Stack 2.0 https://www.udemy.co[...] 2017-02-01


본 사이트는 AI가 위키백과와 뉴스 기사,정부 간행물,학술 논문등을 바탕으로 정보를 가공하여 제공하는 백과사전형 서비스입니다.
모든 문서는 AI에 의해 자동 생성되며, CC BY-SA 4.0 라이선스에 따라 이용할 수 있습니다.
하지만, 위키백과나 뉴스 기사 자체에 오류, 부정확한 정보, 또는 가짜 뉴스가 포함될 수 있으며, AI는 이러한 내용을 완벽하게 걸러내지 못할 수 있습니다.
따라서 제공되는 정보에 일부 오류나 편향이 있을 수 있으므로, 중요한 정보는 반드시 다른 출처를 통해 교차 검증하시기 바랍니다.

문의하기 : help@durumis.com