[TIL/MERN stack] 2024/05/18

✅ MERN stack 개론

MERN stack은 <``M`ongoDB, `E`xpress.js, `R`eact.js, `N``ode.js>로 대표되는 네 가지 요소를 활용하여 웹 사이트를 개발하는 것을 의미한다. MERN stack에 대한 학습이 필요하다고 생각하게 된 배경은 다음과 같다.

1. 이제는 괄목할 만한 프로젝트를 반드시 만들어봐야 한다. 2. 그런데 혼자 공부를 하다 보니, 통신에 대한 개념이 전혀 잡혀있지 않았다. 3. 그냥 내가 백엔드도 만들고 DB도 관리하고 다 해봐야겠다. 4. Javascript로 이 모든 것을 할 수 있는 stack이 있다?

그리하여, 지나간 과거는 모두 잊고 풀스택 프로젝트를 만들어보겠다는 다짐을 해봤다며...

오늘은 개론 첫 시간이기에, 가볍게 각각의 기술에 대한 핵심 개념을 가볍게 정리하도록 하겠다.

✅ M: MongoDB

DB가 무엇인지부터 가볍게 정리해야겠다. DB(DataBase)는 말 그대로 데이터가 저장되는 장소이다. 이를테면, 종이에 식료품 목록을 쓰면 작은 단위의 아날로그 DB가 만들어지는 것이다. 여기서 DB는 종이이다.

오늘은 NoSQL과 같은 개념은 정리하지 않겠다. 다만, DB가 그 자체로 중요하지 않다는 점은 인지하고 넘어가야 한다.

CRUD(Create, Read, Update, Delete) 때문에 DB가 존재하는 것이다. 프론트엔드, 백엔드 상관없이 결국 데이터를 어떻게 파싱 할 것인지가 웹 개발의 핵심인데, CRUD를 수행하려면 일단 어딘가에 보관을 하고 있어야 되겠다.

바로 위 설명과 직접적으로 관계를 맺는 것이 바로 Express.js이다.

✅ E: Express.js

Express.js는 Node.js 환경에서 Javascript로 구동 가능한 백엔드 프레임워크다. 한마디로 Javascript로 서버를 만들고 싶을 때 사용하는 유용한 프레임워크라고 할 수 있겠다.

E알못 원민관이 파악한 바로는, Express.js의 핵심적인 장점에는 두 가지가 있다.

1. 단순하고 유연한 라우팅 시스템

const express = require('express');
const app = express();

app.get('/users', (req, res) => {
    res.send('User list');
});

app.post('/users', (req, res) => {
    res.send('Create user');
});

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

Express.js는 단순하면서도 유연한 라우팅 시스템을 제공한다. 개발자는 위 예제 코드와 같이, URL 경로와 HTTP 메서드(GET, POST, PUT, DELETE 등)를 이용해 쉽게 요청을 처리할 수 있다.

2. 풍부한 미들웨어 생태계

const express = require('express');
const bodyParser = require('body-parser');
const session = require('express-session');

const app = express();

app.use(bodyParser.json());
app.use(session({ secret: 'mysecret', resave: false, saveUninitialized: true }));

app.post('/login', (req, res) => {
    // 로그인 처리 로직
});

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

추가적으로 Express.js는 풍부한 미들웨어를 제공한다. 앞에서 언급한 유연한 라우팅 시스템을 통해 DB에 데이터 관련 요청을 했다면, 여러 가지 미들웨어를 통해 데이터를 다양하게 조작할 수 있게 된다.

✅ R: React.js

React.js는 굳이 정리해야 되나 싶지만, 빼면 섭섭해할 것 같아서 설명을 추가한다.

React.js는 facebook(현 meta)에서 개발한 오픈 소스 자바스크립트 라이브러리로, 사용자 인터페이스(UI)를 구축하기 위해 사용한다.

✅ N: Node.js

Node.js는 서버 측 자바스크립트 런타임이다. 런타임(Runtime)은 어떤 프로그램이 실행되는 동안의 동작 및 환경으로 정의된다.

타브 악보라는 것이 있다. 기타 '줄'을 기준으로 만들어진 악보 형태이다. 타브 악보를 하나의 언어, 즉 Javascript라고 비유한다면, 런타임은 기타라고 할 수 있다.

타브 악보(Javascript) 언어가 실행될 수 있는 환경인 기타가 바로 Node.js인 것이다.

앞에서 정리한 Express.js는 Node.js 런타임 위에서 동작하기 때문에 Node.js에 대한 명확한 이해는 필수불가결하다.

✅ MERN stack Development Flow

1. React.js / Vue.js / Angular.js와 같은 툴을 통해 UI를 제작한다.

2. User 홍길동 씨가 블로그 포스팅을 하면, Node.js 환경 위에서 구동하는 Express.js로 구축한 서버로 해당 request가 전달된다.

3. 서버에서는 MongoDB에 해당 포스팅을 추가한다.

4. 다시금 서버에서는 Frontend로 response를 전달한다.

5. 최종적으로 홍길동 씨는 블로그 포스팅이 잘 된 것을 확인하게 된다.

✅ 회고

최근에 친구와 피자 회동을 벌였다. "너는 하이브리드 인재일 수 있어."라는 말을 들었다. 하지만 펜싱에서, 기계의 센서보다 더 믿을만한 것은 찔린 사람이 드는 손이다. 나는 알고 있다. 이도 저도 아닌 toRL라는 것이 지금의 나에 대한 스스로의 냉정한 평가다.

통계학, 행정학, 프론트엔드, 심지어 개발조차도 이것저것. 그런데 자는 척하는 사람을 누가 깨울 수 있을까. 많은 말들이 잘 들리지 않았다. 하지만 지나온 시간에 후회는 없다. 이것저것 하면서 누구보다 넓은 '저 해상도 퍼즐의 상(像)'을 얻을 수 있었으니까.

누구보다 넓은 저 해상도 퍼즐의 상(像)을 얻었으니, 향후 반년 동안은, 자신 있는 부분의 퍼즐부터 구체화해나가는 뾰족함을 키워야겠다는 생각이 들었다.

그리고 드디어 '진짜' 만들고 싶은, 내가 날카로울 수 있다고 생각되는 서비스에 대한 영감이 떠올랐다. 많관부.