MEAN Stack 소개

작성자: Ian H
Date: 2020/01/01

MEAN stack(민 스택)은 Mongo DB, Express JS, Angular, Node JS 로 구성되어 있으며, 웹사이트 개발을 위한 개발 환경 구성입니다. 이 글에서는 MEAN Stack의 특징과 개별 구성에 대해 알아보겠습니다.

** 프로그램 개발 환경 구성에서 stack이라는 것은 많은 사람들이 해당 조합으로 개발을 많이 하여 널리 퍼지게 된 것으로 이 조합을 반드시 모두 사용해야하는 것은 아닙니다. 하지만 같이 썼을 때 좋은 점이 많으니까 널리 퍼졌겠죠?

** 지금 이 글을 읽고 계신 https://A-MEAN-blog.com 도 이 MEAN stack으로 만들어졌습니다.

MEAN Stack 구성의 특징

  1. 네가지 구성 모두 오픈소스로 무료로 사용가능합니다.
  2. 네가지 구성 모두 JavaScript(자바스크립트)를 기반으로 합니다.

JavaScript는 front-end 개발을 위해 창조된 언어였으므로 back-end는 Java, C# 등의 언어를 사용했지만, 이후 MongoDB, Node.js 등 JavaScript를 기반으로 한 back-end 개발 프로그램들이 나오면서 front-end와 back-end를 모두 한가지 언어로 작업할 수 있게 되었습니다.

개발자 입장에서는 한가지 언어만 익혀도 back-end, front-end 개발을 전부 할 수 있으니 좋고(물론 언어만 안다고 개발을 할 수 있는 것은 아닙니다만, 좀 더 쉽게 익힐 수 있겠죠), 기업 입장에서는 인력을 더 효율적으로 사용할 수 있습니다. 최근에는 스마트 폰 어플리케이션까지 JavaScript/HTML로 개발할 수 있으니(정확히는 Angular로 만든 웹사이트를 app으로 변환가능) JavaScript의 사용도는 계속해서 높아지고 있습니다.

다음으로 각각의 구성요소를 살펴봅시다.

Node JS

Node.js(노드 제이에스)는 JavaScript를 웹브라우저 밖에서 사용할 수 있게 해주는 프로그램입니다. JavaScript는 원래 웹브라우저용 스크립트 언어로 기획, 개발되었습니다. 보안을 위해 컴퓨터의 파일에 접근할 수 없다거나 하는 제한이 있고, 브라우저 제어를 위한 상당한 양의 기본 라이브러리가 포함되어 있죠.

node.js를 설치하면 터미널 프로그램(윈도우의 cmd, 맥OS의 terminal등)에서 JavaScript 코드를 바로 실행할 수 있습니다. 다른 언어처럼 파일을 조작할 수도 있으며, 브라우저 제어를 위한 라이브러리는 제거되었습니다.

MEAN Stack에서는 이 node.js와 JavaScript로 웹사이트용 서버를 만듭니다.

Express JS

Express JS(익스프레스 제이에스)는 웹사이트 개발을 위한 node.js용 framework입니다.

C#에 .Net이 있고, Java에 Spring이 있는 것 처럼 node.js에는 Express가 많이 사용되고 있습니다.

Mongo DB

Mongo DB(몽고 디비)는 대표적인 NoSQL, Non Relational Database 입니다.

고전적인 DB에서의 table, 행, 열의 개념이 없고, 하나의 데이터는 document라고 부르며, 이 document의 모움을 collection이라고 부릅니다. collection을 table로 볼 수 있고, document는 table상의 한 줄의 데이터로 볼 수는 있지만, document의 구조를 DB상에서 강제하지 않기 때문에 완전히 똑같지는 않습니다.

모든 document들은 JSON으로 저장이 되며 JavaScript에서의 object와 마찬가지로 고정된 형식이 없으며 항목의 추가 삭제가 자유롭고 DB에서 데이터의 조작은 JavaScript로 합니다. JavaScript Object를 DB로 아무 변환없이 저장할 수 있고, 그 모든 과정을 JavaScript로 할 수 있으니 가장 JavaScript 친화적인 DB라고 생각합니다.

Angular

Angular(앵귤러)는 SPA(Single Page Application)을 만드는 front-end용 framework입니다. 즉, MEAN Stack에서 실제 웹사이트에서 노출이 되는 부분은 Angular로 만들어진 부분이지요. 구글에서 만들고 배포하고 있습니다.

참고로 Angular는 Angular JS와는 다른 framework입니다. 둘다 구글에서 만들었으나 Angular가 Angular JS의 후속판이고 거의 새로 만든 수준이며 하위 호환이 안되기 때문에 아예 이름을 바꾸었습니다. 용법등이 완전히 다르기 때문에 검색시에 주의합시다.

** 현재 항목(MEAN Stack)의 마지막 글입니다.

댓글

I
Ian H 2016.09.16
안녕하세요 A MEAN Blog의 운영자 Ian입니다.  강좌 중에 질문이나 지적, 응원, 건의 사항등 있으시면 답글로 남겨주세요^^ 모두 화이팅!
강
강민혁 2016.09.29
16/9/29 시작합니당!!!
I
Ian H 2016.10.02
@강민혁,
반갑습니다^^
비
비니 2016.10.10
여기서도 좋은 강의 기대하겠습니다. 미리 감사합니다.~~
I
Ian H 2016.10.12
@비니,
반갑습니다^^ 아직 많이 부족하지만 저도 열심히 하겠습니다.
오
오구 2016.10.11
20161011 공부해보겟습니다!
I
Ian H 2016.10.12
@오구,
반갑습니다^^ 잘 안되시는 부분 있으시면 질문남겨 주세요
B
Byungwook Simon Kim 2016.11.30
따라 배우기에 좋은 컨텐츠가 있는지 찾고 있었는데 하... 감사합니다 ㅋㅋㅋ 한 번 잘 따라해볼께요~
I
Ian H 2016.12.02
@Byungwook Simon Kim,
반갑습니다^^
박
박지윤 2016.12.02
와..진짜 설명 깔끔하네요!!  다따라해봐야겠어요~
I
Ian H 2016.12.02
@박지윤,
화이팅^^
고
고명국 2016.12.12
내용 감사합니다. 화이팅!!!
I
Ian H 2016.12.28
@고명국,
화이팅^^!
애
애드벌 2016.12.23
마침 NODE에 관한 튜토리얼을 찾고 있었는데, 강좌 감사합니다~
I
Ian H 2016.12.28
@애드벌,
도움이 되었으면 좋겠습니다!
박
박경호 2016.12.28
MEAN STACK 배워보고싶어서 왔습니다! 열심히 배워볼게요!
I
Ian H 2017.01.04
@박경호,
반갑습니다. 화이팅!
블
블랙죠 2017.01.09
블로그 강좌보고 열심히 하다가 이곳으로 왔습니다. 다시 차근 차근 배워 가도록 하겠습니다. 참 네이버 쪽지로 글을 드렸는데요.. 확인 좀 부탁 드리겠습니다. ^^
J
Jason 2017.01.23
Angular JS관심있어서 넘어왔는데, 지것 저것 잘 둘러보겠습니다 ㅎㅎ
I
Ian H 2017.02.17
@Jason,
아직 Angular 강의는 없다는게 함정이죠 ㅋㅋ Angular 2가 나와버리는 바람에.. 지금 이 시점에 Angular 1강의를 하는 것이 의미가 있나 싶고.. Angular 2는 아직 못배웠고...
권
권슬기 2017.01.25
이런 블로그가 있다니 MEAN 스택을 공부하고싶어서 서핑하다가 이런 좋은 곳을 발견했네요 감사히 보겠습니다
I
Ian H 2017.02.17
@권슬기,
반갑습니다. 화이팅^^
김
김민수 2017.03.03
이 블로그도 MEAN 스택인가요??
I
Ian H 2017.04.04
@김민수,
이 블로그도 MEAN 스택으로 만들어져 있습니다!
z
zzolain 2017.07.10
초보자도 이해할 수 있도록 쉽게 쓰여진 강의를 찾고 있었는데, 드디어 찾았네요. 소중한 강의 고맙습니다. 
I
Ian H 2017.07.10
@zzolain,
반갑습니다 도움이 되면 좋겠습니다^^
보
보들보들 2017.10.15
2017/10/15 시작합니다! 좋은 강의 정말 감사드립니다!!
I
Ian H 2017.10.15
@보들보들,
반갑습니다^^ 화이팅!
코
코조스 2017.10.22
기대되네요...열심히 해볼렵니다...감사합니다.
I
Ian H 2017.10.24
@코조스,
반갑습니다. 화이팅!
J
Jongyo Park 2017.11.08
2017/11/08 시작합니다. 열심히 만드신 강의 감사히 하나하나 차근차근 읽겠습니다.
I
Ian H 2017.11.08
@Jongyo Park,
반갑습니다. 화이팅^^
편
편의점알바1호 2017.12.08
감사합니다!! ㅎㅎㅎ 완전 완성도 높은 블로그라서 저같은 초보한테 너무 좋습니다 ㅎㅎ
I
Ian H 2017.12.08
@편의점알바1호,
반갑습니다^^
쵸
쵸비 2017.12.13
설명이 쉽게 되있어서 읽기 너무 편했습니다 감사합니다~^^
I
Ian H 2017.12.13
@쵸비,
감사합니다^^ 
H
Hyeseon Maeng 2018.01.09
설명을 너무 잘해주셔서 많은 도움이 되네요. 계속 읽어보려 합니다. 감사합니다!
I
Ian H 2018.01.09
@Hyeseon Maeng,
반갑습니다. 화이팅^^
쮸
쮸리맨 2018.02.12
angular2 에서 막히네요  공부할려니깐 버전도5까지나왔고 새로운거투성이고 mean 에서 a만 멀리 떨어진느낌을 받네요 ㅠㅠ mongo node express로 백엔드만들고 프론트만 다른 프레임 워크 써서 만들어도 상관없을까요? angular보다 다른게 좋다는사람이 많아서 ㅠ 
I
Ian H 2018.02.13
@쮸리맨,
안녕하세요~ Angular.js와 구별하기 위해 카테고리 이름은 Angular 2 이지만 강의 내용은 Angular 5까지 유효합니다!
그리고 MEN으로 REST API를 만들고 react라든가 vue라든가 다른 front end 프레임워크를 써도 됩니다^^
반대로 어떠한 방식으로든 REST API를 만들면 Angular를 써서 front end만 구성하실 수도 있습니다.
동
동통오 2018.05.21
MEAN stack 이란  apm   apche+ php +mysql 처럼 트렌드로 이해하면 될까요?  혹시 xapm 처럼 통합 설치 프로그램은 따로 있는지요?  시스템은 우분투:
I
Ian H 2018.05.21
@동통오,
맞습니다. stack이란 개발프로그램의 모움입니다. 통합설치프로그램은 없지만, 설치할 프로그램이 node.js랑 mongo DB밖에 없습니다(텍스트 에디터는 자신이 원하는 걸로 사용). 이 강좌에서는 온라인 mongo DB를 사용하기 때문에 node.js를 설치하시면 됩니다. 나머지 express나 angular 등등은 라이브러리로 node.js 명령어(정확히는 npm 명령어)를 통해 설치됩니다.
김
김진성 2018.08.07
저...........브라우저가 뭐예요???????????
I
Ian H 2018.08.07
@김진성,
인터넷 익스플로러, 크롬, 파이어폭스 같은 인터넷 서핑 프로그램이요
김
김강한 2018.09.04
원래 모바일쪽 프로그래밍을 하던 사람입니다. 웹 개발 관련 회사 면접을 본 후 이 블로그를 통해 공부 시작하려합니다. 글 올려 주셔서 감사합니다! 2018.9.4 시작합니다!
I
Ian H 2018.09.04
@김강한,
반갑습니다. 화이팅^^!
박
박수진 2018.09.15
대학교 다닐 때 여기서 본 강의로 공부를 했었는데 지금은 자바웹 개발자가 되어있네요. 다시 공부하러 들렀습니다. 항상 감사합니다!
I
Ian H 2018.09.17
@박수진,
와.. 졸업하시고 바로 취업되신거에요? 부럽고 축하드려요^^
김
김인수 2018.10.09
안녕하세요 맨파워코리아 헤드헌팅 본부 김인수입니다. 혹시 주변에 nodeJS 사용경력 5년이상이고 나이는 80년생이하신분 추천해 주실만한 사람은 없는지요? 포지션은 백엔드개발(NodeJS)이며 블럭체인 최고 회사입니다. 연봉은 1억~2억 가능하시고 연봉 및 처우조건은 아주 좋습니다.  제메일 주소로 답변 부탁 드립니다. 감사합니다. (김인수, [email protected])
하
하하 2018.10.19
안녕하세요 올려주신자료 너무 잘보고 있습니다! 혹시 앵큘러2로의 게시판구축에 대해서도 포스팅 하셨는지요? 제가 찾은바로는 앵귤러js 로만 있는것 같아서요.. 그리고 앵귤러가 릴리즈되었다면 mean에서의 의미도도 앵귤러2로 생각해야 할까요? 현재 노드와 앵귤러를사용해서 계시판을 만들어 볼려고 하는데 AngularJS 와 Angular2 중 어느것을 써야할지 고민이 됩니다.  감사합니다!
I
Ian H 2018.10.19
@하하,
안녕하세요, 제 블로그에는 Angular없이 MongoDB, Express, Node js로만 게시판을 만드는 강의와, MongoDB, Express, Node js, Angular로 사이트의 기본적인 기능(로그인, 회원가입 등)을 만드는 강의가 있고, AngularJS에 대한 강의는 없습니다. Angular로 게시판을 만드는 강의는 아직 없지만, 위 두가지를 활용하면 충분히 만들 수 있습니다. Angular 게시판 강의는 나중에 추가할게요 ㅠㅠ
지금은 MEAN스택이라고 하면 일단 Angular JS가 아닌 Angular를 뜻합니다. 요즘은 특별히 Angular JS를 써야 할 이유가 없다면 Angular를 사용하시면 됩니다!
-
-13 2019.11.15
열심히 한번 도전해보려고 합니다 !!! ㅎ
I
Ian H 2019.11.17
@-13,
반갑습니다^^
N
Nam Ah 2019.11.30
초보중의 초보인데, 친절한 설명덕분에 잘 배우고 있습니다. 여기서 배운 내용을 내부서버( 로컬 호스트)가 아니라 호스팅받은 공간에 ftp로 업로드하여 동일하게 적용이 가능한가요?
I
Ian H 2019.12.02
@Nam Ah,
node.js app은 서버에서 node.js 호스팅을 지원하는 서버에서만 작동합니다.  https://www.a-mean-blog.com/ko/blog/단편강좌/_/Node-js-사이트-Heroku-헤로쿠-로-인터넷에-올리기 게시물을 보면 heroku에 올릴 수 있는 방법을 설명하고 있습니다. 해당 게시물을 참고하여 다른 호스팅 서버에 올리시거나, 해당 호스팅 서버에 문의해 보세요^^
처
처음처럼 2020.01.28
문의드립니다. node.js도 디버깅 방법이 있을것 같은데 단편강좌 쪽으로 방법 좀 알려주세요.
I
Ian H 2020.01.29
@처음처럼,
안녕하세요! https://www.a-mean-blog.com/ko/blog/단편강좌/_/node-js-디버깅-방법 에 요청하신 강의를 올렸습니다. 소통해 주셔서 감사해요^^
K
Kairo 2020.02.04
안녕하세요 제가 ian h님의 블로그를 보며 공부중인 학생입니다. 제가 ian h 님의 블로그를 보면 node + mongodb를 사용하여   https://unsplash.com/ 이나 https://pixabay.com/ko/ 이러한 사진을 다운 받을 수 있는 사이트를 제작하고 있습니다. 조언을 구하고 싶습니다! 저런 사진을 다운 받는 사이트를 구현하려면 게시판 주소록말고 사진을 다운 받을 수 있는 코드나 방법을 얘기해주시면 감사하겠습니다!.  예를 들면 aws의 s3를 이용하여 사진들을 저장하고 코드로 다운로드 받는 코드를 작성하면 되나요? 감사합니다!!!  
I
Ian H 2020.02.05
@Kairo,
자신의 상황에 맞게 서버나 DB에 사진들을 직접 저장할 수도 있고, AWS S3같은 서드파티서비스를 사용해도 됩니다.
기본적으로 사진 업로드는 1. 이용자가 웹사이트의 form에 사진 첨부, from 제출(submit) 2. 서버에서, form에서 사진 data를 추출 3. 사진저장(서버/DB/서드파티API) 로 이루어집니다. 
각 과정 별로 방법을 찾아보시면 할 수 있으실 거에요.
K
Kairo 2020.02.06
@Ian H,
감사합니다!  각 과정별로 방법을 찾아보고 공부해보겠습니다!
K
Kairo 2020.02.10
ian h님 안녕하세요 저번에 조언을 구하고 답해주신 내용을 바탕으로 알아 보았습니다. 제가 만들고 싶은 것은 업로드의 기능 보다는 다운로드의 기능을 구현하고 싶습니다. s3에 업로드한 데이터를 다운받는 부분은 해보았습니다. s3에 photoname이라는 사진을 업로드 하였고 (ex localhost:3000/photoname.jpg)를 치면 사진이 다운받는 코드는 구글링을 하여 해보았습니다! (버킷에 한장의 사진이 들어있을 경우)  https://unsplash.com/ 이런 사이트를 제작하고 싶다고 말씀드렸는데 메인 페이지에 100장의 사진을 띄운다고 하였을때 어떻게 구현해야하는지 알 수 있을까요?(과정을 알려주셔도 감사합니다!) 새로고침할때마다 100장의 사진을 불러올 때< img src="#"> 이런식으로 구현하면 속도도 느리고 비용 어머어마하게 청구 될 것 같은데  혹시 조금이라도 알려주시면 정말 감사하겠습니다!
I
Ian H 2020.02.10
@Kairo,
안녕하세요^^ 일단 s3자체에 이미지에 대한 api가 있는지 한번 살펴보세요. 
저는 https://cloudinary.com 를 사용하고 있는데요,  https://res.cloudinary.com/demo/image/upload/w_150,h_100,c_scale/sample.gif  이런 식으로 이미지 크기를 조절할 수 있습니다. (w_150, h_100의 숫자를 바꾸면 이미지 크기가 바뀝니다)
이와 같이 서버에는 원본사진 1장만 저장되고 작은 이미지가 필요한 곳에는 작은 이미지를 생성해서 보여주니까 서버용량도 줄고 트래픽 사이즈도 줄죠. 이외에도 다양하게 사진을 url를 통해 변환할 수 있습니다. https://cloudinary.com/documentation/image_transformations 를 참고해보세요.
제가 s3를 써본적이 없어서 s3에는 이런 기능이 있는지 모르겠어요..
그리고 메인페이지에는 100장을 한번에 다 띄우지 마시고 화면을 채울만큼만 보여주고 https://unsplash.com 처럼 스크롤이 내려가면 사진을 더 불러오는 식으로 하면 트래픽을 더 줄일 수 있겠죠. 이런 기능은 node.js/express에서 하는게 아니라 자바스크립트로 만들어야 하는데.. 이왕 하시는거 Angular나 React를 공부하는 것을 추천드려요.
K
Kairo 2020.02.11
ian h님 정말정말 감사합니다!!!!!  ian h 님이 작성해주신 게시판,로그인 코드들 폴더안에 angular나 react를 메인페이지에만 추가 할 수있나요?
I
Ian H 2020.02.11
@Kairo,
angular는 불가능하구요, react는 아마 가능 할 듯합니다(제가 react를 써본적이 없어서 확답은 못드려요)
K
Kairo 2020.02.11
@Ian H,
넵 찾아보니 가능 할 것같습니다.  알려주셔서 감사합니다! angular가 가능했으면 ian h님의 블로그를 보고 했을텐데 아쉽습니다!
I
Ian H 2020.02.12
@Kairo,
괜찮습니다^^ 하시는 일 잘되시길 바랍니다!
특
특대갈비 2020.07.20
@Ian H, 조언을 얻고자 질문을 올립니다.  혹시 에브리타임처럼  대학교에 맞게 게시판을 불러오는 이런식의 구현은 어떤 방식으로 해야지 가능할까요...?
I
Ian H 2020.07.20
@특대갈비,
제 블로그의 게시판 강의처럼 게시판을 만드시되, 추가로 학교, 게시판 collection들이 필요하겠네요.
모든 게시판 document들은 학교 id를 저장해야 하고, 모든 게시물 document들은 게시판리스트 id를 저장해야합니다. 학교, 게시판 document는 별도의 관리자 페이지를 만들어 추가/수정하거나 아니면 DB를 직접 조작하여 추가/수정합니다
처음 사이트를 열면 학교 collection의 리스트를 보여줍니다. 여기에 검색기능을 넣습니다.
학교가 선택되면 해당 학교 id를 가진 게시판들의 리스트를 보여줍니다. 여기에 각각 게시판은 최신 글 몇 개를 노출합니다.
게시판이 선택되면 해당 게시판 id를 가진 게시물만 보여줍니다. 물론 이게시판에 글을 쓰면 그 게시물은 해당 게시판 id를 가지게 되겠지요.
I
Ian H 2020.07.28
@특대갈비,
감사합니다. 주변에 node.js 공부하고 싶어하는 분들 있으면 많이 퍼트려주세요^^; 보내주신 링크는 현재 접속이 안되네요. http://domain.dot.tk 로 redirect되며 502 Proxy 에러가 뜹니다. 확인해 보시고 다시 알려주세요!
특
특대갈비 2020.08.03
@Ian H,
죄송합니다 ㅠ 하루정도 쓰고, 도메인을 freenom 에서 사왔더니 터져가지고... www.ourneighborstory.com 도메인 돈주고 사니까 좋네요... 감사합니다. ㅠ
특
특대갈비 2020.08.03
@Ian H, 감사합니다 메세지를 보내고 싶었는데 기능이 없어서...  민블로그에 기반을 정말 많이해서 저희 프로젝트가 거의 마무리 되어 갑니다. 아직 유저는 없지만...ㅜㅜ  http://www.ourneighborstory.com/ 감사함을 전하고 싶어서 댓글 답니다. 많이 배웠습니다 감사합니다. 
I
Ian H 2020.08.03
@특대갈비,
잘 봤습니다. 동네별 게시판까지 생기면 좋은 사이트가 될 것같아요! 흥하시길 바랍니다^^
특
특대갈비 2020.08.04
@Ian H,
회원가입을 하지 않으시면 안보이실수 있는게 많아서,  관리자 페이지에서 각 오피스텔이라던지 관리실에서 사람을 인증할수 있는 기능과,  장터 게시판을 위해 메세지 시스템 까지 해놔봤습니다. 감사했습니다. ㅠ
I
Ian H 2020.08.04
@특대갈비,
회원가입시 실명과 실주소지를 수집하시던데, 개인적으로 처음 가입할 때는 인증 없이 일반회원으로 가입하고, 가입후 인증회원으로 승격할 수 있으면 좋겠어요. 일반회원은 인증회원이 쓸 수 있는 게시판의 읽기 기능만 있고, 글을 쓰려면 인증 할 수 있도록 하는 거죠. 그냥 건의 사항입니다^^;
-
-충한 2020.11.26
mean 이 이런의미였군요... ㅎㅎ 잘 보겠습니다 감사합니다!
I
Ian H 2020.11.28
@-충한,
넵 민스택이 메인 컨탠츠인 블로그입니다^^;
댓글쓰기

이 글에 댓글을 다시려면 SNS 계정으로 로그인하세요. 자세히 알아보기
UP