기술 스택
MERN 스택에 대해 자세히 알아보기 전에 먼저 기술 스택이 무엇인지 빠르게 살펴보도록 하겠습니다. 기술 스택이란 웹 애플리케이션이나 모바일 애플리케이션, 이외의 유사한 애플리케이션을 구축하기 위해 선택하고 사용하는 기술의 집합을 말합니다. 좋은 기술 스택은 확장 가능하고 비용 효율적이어야 하는 동시에 원활한 사용자 경험을 제공할 수 있어야 합니다. 일반적인 기술 스택에는 프론트엔드, 백엔드, 데이터베이스가 포함되며 이를 풀스택이라고 합니다.
일반적으로 기본적인 프론트엔드나 사용자 인터페이스 기술은 HTML, CSS, JavaScript 등에서 동일하게 유지됩니다. 프로젝트 요구 사항에 따라 해당 UI 기술을 기반으로 구축된 React 또는 Angular 같은 라이브러리와 프레임워크를 사용할 수 있습니다.
백엔드는 애플리케이션 로직이 상주하는 서버로 구성됩니다. 애플리케이션 로직을 JavaScript, Java, Python과 같은 하나 이상의 프로그래밍 언어로 작성하거나 Django, Spring, Express.js 같은 프레임워크를 사용할 수 있습니다. 프로그램을 실행하려면 애플리케이션에 Node.js나 JRE(Java Runtime Environment)와 같은 런타임이 필요합니다.
데이터베이스는 모든 애플리케이션 관련 데이터가 저장되는 스토리지 허브를 말합니다. 데이터는 관계형 데이터베이스 시스템을 사용하는 테이블 구조에 저장할 수도 있고, 문서 구조, 그래프 구조 등과 같은 비관계형(NoSQL)을 사용할 수도 있습니다. 그리고 이에 따라 데이터베이스를 선택할 수 있습니다. 데이터베이스의 예로는 MongoDB, Oracle, MySQL 등이 있습니다.
MERN 스택이란 무엇인가요?
기술 스택은 맞춤형(개발자가 프로젝트 요구 사항에 따라 기술 선택)일 수도 있고 사전 구축(사용할 기술이 미리 결정된 경우)일 수도 있습니다.
MERN은 JavaScript 기술을 기반으로 사전 구축된 기술 스택입니다. MERN이라는 이름은 스택을 구성하는 4가지 핵심 기술 MongoDB, Express, React, Node의 첫 글자를 따서 붙여졌습니다.
- MongoDB — 문서 데이터베이스
- Express(.js) — Node.js 웹 프레임워크
- React(.js) — 클라이언트 사이드 JavaScript 프레임워크
- Node(.js) — 프리미어 JavaScript 웹 서버(런타임)
Express와 Node는 중간(애플리케이션) 계층을 구성합니다. Express.js는 서버 사이드 웹 프레임워크이며, Node.js는 인기 있고 강력한 JavaScript 서버 플랫폼입니다. 어떤 유형을 선택하든 ME(RVA)N은 JavaScript와 JSON 작업을 위한 이상적인 접근 방식입니다.
MERN 스택의 작동 원리
MERN 아키텍처를 사용하면 JavaScript와 JSON을 사용해 3계층 아키텍처(프론트엔드, 백엔드, 데이터베이스)를 간편하게 구축할 수 있습니다.
React.js 프론트엔드
MERN 스택의 최상위 계층에는 HTML로 동적 클라이언트 사이드 애플리케이션 개발을 지원하는 선언형 JavaScript 프레임워크인 React.js가 있습니다. React를 사용하면 간단한 구성 요소를 통해 복잡한 인터페이스를 구축하고, 이를 백엔드 서버의 데이터에 연결해 HTML로 렌더링할 수 있습니다.
React의 강점은 최소한의 코드 작성과 노력으로 상태성 데이터 기반 인터페이스를 처리한다는 것입니다. 또한, 양식, 오류 처리, 이벤트, 목록 등 다양한 영역에서 우수한 지원이 제공되는 등 최신 웹 프레임워크에서 기대할 수 있는 모든 기능을 갖추고 있습니다.
Express.js 및 Node.js 서버 계층
그 다음 단계는 Node.js 서버 내에서 실행되는 Express.js 서버 측 프레임워크입니다. Express.js는 '빠르고 제약이 없는 간결한 웹 프레임워크'로 알려져 있으며 실제로도 그러한 특징을 갖추고 있습니다. Express.js는 URL 라우팅(들어오는 URL을 서버 함수와 매칭)과 HTTP 요청 및 응답 처리에 강력한 모델을 제공합니다.
React.js 프론트엔드에서 XML HTTP 요청(XHR), GET 또는 POST를 생성해 애플리케이션을 구동하는 Express.js 함수에 연결할 수 있습니다. 그러면 이러한 기능이 MongoDB의 Node.js 드라이버를 사용해 MongoDB 데이터베이스의 데이터에 액세스하고 업데이트합니다.
MongoDB 데이터베이스 계층
애플리케이션이 데이터(사용자 프로필, 콘텐츠, 댓글, 업로드, 이벤트 등)를 저장하는 경우 React, Express, Node.js처럼 작업하기 쉬운 데이터베이스를 사용하는 것이 좋습니다.
바로 여기에서 MongoDB의 존재감이 빛을 발합니다. React.js 프론트엔드에서 생성된 JSON 문서를 Express.js 서버로 전송해 처리할 수 있고, (유효한 경우) 나중에 찾아볼 수 있도록 MongoDB에 바로 저장할 수 있기 때문입니다. 클라우드에서 개발 중이라면 MongoDB Atlas 사용을 고려하는 것이 좋습니다. MERN 스택을 맞춤형으로 설정하고 싶다면 계속해서 읽어보세요!
MERN 스택을 사용한 간단한 요청/응답의 예시
일반적인 HTTP 요청(클라이언트에서)은 4가지 작업(POST, GET, PUT, DELETE) 중 하나를 수행합니다. 각각의 작업은 4가지 데이터베이스 작업(각각 생성, 읽기, 업데이트, 삭제 - CRUD)에 상응합니다. 이러한 요청을 처리하기 위해 Express.js는 필요한 매개 변수를 저장하는 요청과 응답 객체를 제공합니다. HTTPrequest는 최종 사용자가 제공한 데이터를 저장하고 HTTP 응답은 데이터베이스에서 조회된 데이터를 저장합니다.
MongoDB Node.js 드라이버를 사용하면 몇 가지 간단한 단계를 통해 MongoDB 배포를 애플리케이션에 쉽게 연결할 수 있습니다.
MERN 스택의 가장 중요한 특징 중 하나는 모든 기술이 동일한 형식으로 데이터를 저장한다는 것입니다.
프론트엔드 레이어인 React는 데이터를 JavaScript 객체로 저장하고, 백엔드(애플리케이션) 레이어는 JavaScript 코드를 사용하며, 데이터 레이어인 MongoDB는 데이터를 BSON(Binary JavaScript ON) 형식으로 저장합니다. Express는 .json() 메서드를 사용해 JS와 JSON 간의 데이터를 변환합니다.
Node.js를 사용하면 개발자가 백엔드(서버 사이드) 애플리케이션 로직을 JavaScript로 작성할 수 있습니다. Node.js도 핵심 http 모듈을 제공하지만, Express에서 동일한 모듈을 작성하면 더 깔끔한 코드 환경을 구축할 수 있습니다. 또한, Express는 강력한 라우팅 기능을 제공해 올바른 엔드포인트에서 필요한 데이터를 가져올 수 있도록 합니다. 그래서 개발자가 라우팅을 위해 명시적인 코드를 작성할 필요가 없습니다.
코드가 처음부터 끝까지 동일한 언어(JavaScript)로 작성되기 때문에 레이어를 전환하는 과정에서 소요되는 시간이 크게 절약됩니다.
예를 들어, 고객(클라이언트)이 온라인 포털을 통해 본인의 휴대폰 번호를 업데이트하려고 한다고 가정해 보겠습니다. React .js를 사용해 구축된 프론트엔드에는 사용자가 휴대폰 번호를 입력할 수 있는 양식이 있습니다. React는 'useState' 훅을 사용해 고객이 입력한 휴대폰 번호를 요청 매개 변수로 설정합니다.
Express.js 코드는 http put 요청에서 휴대폰 번호를 가져와 애플리케이션의 데이터 모델 스키마에 매핑한 후 findByIdAndUpdate() 등의 메서드를 적용해 업데이트 작업을 수행합니다. 그러면 http 응답 객체를 통해 응답이 성공/실패 메시지와 함께 전송됩니다.
MERN 스택 튜토리얼 페이지에서 전체 예시를 확인할 수 있습니다.
MERN 스택 vs 풀스택 개발
MERN 스택은 기술 계층이 사전 정의된 풀스택의 한 유형입니다. 풀스택 개발자는 여러 기술에 능숙해야 하기 때문에 기술을 배우는 데 더 많은 노력을 쏟아야 하지만, MERN 스택 개발자는 해당하는 기술만 알면 됩니다. 아래에 설명된 대표적인 차이점을 살펴보면 프로젝트 요구 사항에 따라 맞춤형 풀스택과 MERN 스택 중에서 어떤 것을 선택해야 하는지 결정하는 데 도움이 될 겁니다.