프로그래밍 허브

1. Next.js

Next.js는 React를 기반으로 한 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), API Routes 등의 기능을 지원하는 프레임워크입니다.
특히 SEO 최적화와 빠른 페이지 로딩을 위한 기능이 많이 제공됩니다.

주요 특징

• 파일 기반 라우팅: pages 폴더에 있는 파일을 기반으로 자동으로 라우팅 설정
• SSR/SSG 지원: 페이지를 서버에서 미리 렌더링해 보내거나, 빌드 시 정적으로 생성
• API Routes: 서버리스 함수처럼 API를 손쉽게 작성할 수 있음

Next.js 예제 코드

# Next.js 설치
npx create-next-app@latest my-next-app
cd my-next-app
npm run dev

pages/index.js

import React from 'react';

const Home = () => {
  return (
    <div>
      <h1>Welcome to Next.js!</h1>
    </div>
  );
}

export default Home;

2. Express.js

Express.js는 Node.js 기반의 간단하고 유연한 웹 서버 프레임워크입니다.
주로 API 서버를 구축하거나, RESTful API 및 미들웨어를 활용한 요청 처리에 적합합니다.

주요 특징

• 라우터 및 미들웨어: HTTP 요청을 처리하는 기본적인 기능 제공
• 유연성: 다양한 플러그인과 미들웨어를 통해 확장 가능
• 빠른 개발: 설정이 간단하고, 직관적인 코드 작성

Express.js 예제 코드

# Express 설치
npm init -y
npm install express

app.js

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

// 기본 라우팅
app.get('/', (req, res) => {
  res.send('Hello World from Express!');
});

// 서버 실행
app.listen(3000, () => {
  console.log('Server running on http://localhost:3000');
});

✅ Next.js vs Express.js — 요약

✅ 한 줄 요약

• Next.js: 서버 사이드 렌더링과 정적 사이트 생성이 필요한 React 기반 웹 애플리케이션
• Express.js: 간단한 API 서버와 HTTP 요청 처리에 최적화된 Node.js 프레임워크

**MCP(Model Context Protocol)**는 AI Agent가 외부 도구나 리소스(API, 데이터베이스, 크롤러 등)와 표준화된 방식으로 연결되도록 돕는 프로토콜이에요.
쉽게 말해, USB-C 포트처럼 LLM을 다양한 시스템과 연결하는 통로라고 볼 수 있죠.

이번에는 MCP 스타일로 JSON-RPC 통신을 흉내 내는 간단한 Node.js 예시 코드를 작성해봤습니다.
MCP가 어떻게 Host ↔ Client 간에 메시지를 주고받는지 이해하는 데 도움이 될 거예요.

✅ MCP 스타일 JSON-RPC 예제

예제 시나리오

• 사용자가 “2 + 3 계산해줘” 요청
• Host가 MathClient에게 계산 요청
• MathClient가 계산 후 결과 반환
• Host가 사용자에게 결과 전달

1. Math Client(Server 역할)

실제로는 MCP Client이지만, 네트워크 상에서 JSON-RPC Server로 동작하는 구조

// mathClient.js
import express from "express";
import bodyParser from "body-parser";

const app = express();
app.use(bodyParser.json());

app.post("/rpc", (req, res) => {
  const { method, params, id } = req.body;

  console.log("요청 받음:", method, params);

  if (method === "add") {
    const result = params.a + params.b;
    res.json({
      jsonrpc: "2.0",
      result,
      id,
    });
  } else {
    res.json({
      jsonrpc: "2.0",
      error: {
        code: -32601,
        message: "Method not found",
      },
      id,
    });
  }
});

app.listen(4000, () => {
  console.log("Math Client (Server) running on http://localhost:4000/rpc");
});

2. Host 역할

실제 MCP Host처럼 Client에게 JSON-RPC 메시지를 보내는 코드

// host.js
import axios from "axios";

async function callMathClient() {
  const payload = {
    jsonrpc: "2.0",
    method: "add",
    params: {
      a: 2,
      b: 3,
    },
    id: 1,
  };

  const response = await axios.post(
    "http://localhost:4000/rpc",
    payload,
    { headers: { "Content-Type": "application/json" } }
  );

  console.log("Math Client 응답:", response.data);
}

callMathClient();

실행 순서

1. Math Client 실행

node mathClient.js

2. Host 실행

node host.js

3. 출력 결과

Math Client 응답: { jsonrpc: '2.0', result: 5, id: 1 }

✅ MCP 스타일로 이해하기

이 예제는 MCP의 작동 방식을 아주 단순화한 것이지만, 개념적으로는 똑같아요:

• 사용자 → “2+3 계산해줘”
• Host → 어떤 Client가 처리할지 판단 (Planner 역할)
• Math Client → 계산 수행
• Host → 사용자에게 결과 반환

MCP의 실제 동작

실제 MCP 환경에서는:

✅ JSON-RPC 규격 메시지 사용
✅ Tool마다 Client로 분리 → 재사용 가능
✅ Host가 Plan → Execute → Observe 루프 제어
✅ 멀티 Agent, 멀티 Tool 관리 가능

예)

• Weather API Client
• DB Query Client
• Web Browser Client
• Code Executor Client

이처럼 MCP는 LLM Agent 개발의 USB-C 포트 같은 표준 역할을 하며, AI가 더 넓은 세상과 연결될 수 있도록 돕고 있습니다. 🚀

✅ nvm (Node Version Manager) 설치

nvm 이란?

• 여러 버전의 Node.js를 손쉽게 설치·전환할 수 있는 도구
• Node.js 프로젝트마다 다른 버전 쓰는 경우 필수
• macOS, Linux, Windows 모두 사용 가능

✅ macOS / Linux 설치

터미널에서 아래 명령어 실행:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

설치 후 쉘 설정파일 추가:

• . bashrc
• . zshrc
• . profile

export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"

터미널 재시작 후 버전 확인:

nvm --version

✅ Windows 설치

Windows는 nvm-windows라는 별도 프로젝트를 사용

1. 아래 사이트 접속
   → nvm-windows Releases
2. nvm-setup.zip 파일 다운로드
3. 설치 마법사 실행

설치 후:

nvm list available

원하는 버전 설치:

nvm install 18.17.0
nvm use 18.17.0

✅ 비유

• nvm = “여러 버전의 Node.js 신발장”
• 프로젝트마다 딱 맞는 버전의 신발(노드 버전) 꺼내 신으면 된다!

✅ 얕은 복사 vs 깊은 복사

✅ 얕은 복사 (Shallow Copy)

• 객체나 배열을 복사할 때 주소(reference)만 복사
• 내부 값은 여전히 같은 메모리를 가리킴
• 복사본 수정 → 원본도 영향받음

예시

const original = { name: "Alice" };
const copy = original;

copy.name = "Bob";

console.log(original.name); // Bob

✅ 깊은 복사 (Deep Copy)

• 객체 내부 값까지 모두 새로 복사
• 복사본과 원본이 완전히 분리됨

깊은 복사 방법

JSON 방법 (간단하지만 한계 존재)

const original = { name: "Alice" };
const copy = JSON.parse(JSON.stringify(original));

copy.name = "Bob";

console.log(original.name); // Alice

• 단점:
  • 함수, undefined, Symbol은 복사 안됨

structuredClone (ES2021)

const original = { name: "Alice" };
const copy = structuredClone(original);

copy.name = "Bob";

console.log(original.name); // Alice

lodash cloneDeep

import cloneDeep from "lodash/cloneDeep";

const original = { name: "Alice" };
const copy = cloneDeep(original);

copy.name = "Bob";

console.log(original.name); // Alice

✅ 비유

• 얕은 복사 → “복사본도 같은 집 주소에 살고 있음”
• 깊은 복사 → “복사본은 새 집에 이사 간 것”

✅ 정리

• nvm은 Node.js 버전 관리 필수 도구
• Windows는 nvm-windows 설치 필요
• 얕은 복사(shallow copy)는 reference만 복사 → 원본과 연결
• 깊은 복사(deep copy)는 새로운 객체 생성 → 완전히 분리

Node.js 란?

• Node.js = 구글 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경
• 브라우저 밖에서도 자바스크립트를 실행할 수 있게 만들어줌
• 서버 개발, CLI 툴, 빌드 도구 등 범용적으로 활용 가능

NPM 이란?

• Node Package Manager의 약자
• Node.js 생태계의 패키지 관리 도구
• 필요한 라이브러리를 검색, 설치, 관리할 수 있음
• npm 공식 사이트 → https://www.npmjs.com/

✅ NPM 기본 사용법

1. 라이브러리 설치

프로젝트 로컬 설치

npm install 라이브러리이름

• 예:

npm install express

→ 설치된 라이브러리는 node_modules/ 폴더에 들어감

2. 특정 버전 설치

npm install 패키지명@버전

• 예:
•  

npm install express@4.18.1

3. 전역 설치

npm install -g 패키지명

• CLI 툴(ex: nodemon, eslint)을 설치할 때 주로 사용
• 전역 설치된 패키지들은 시스템 어디서든 명령어로 실행 가능
• 관지라 권한(root 권한) 필요할 때도 있음 (특히 macOS, Linux)

4. nodemon 이란?

• Node.js 애플리케이션 개발 중 자동으로 서버 재시작해주는 툴
• 코드 변경 → 자동 감지 → 앱 재시작
• 개발자 필수템

nodemon 설치

로컬 설치:

npm install nodemon --save-dev

전역 설치:

npm install -g nodemon

nodemon 실행

nodemon index.js

✅ npm init

• 프로젝트의 package.json 파일을 생성
• 아래 명령어로 시작:

npm init

• 빠르게 생성하고 싶으면:

npm init -y

package.json 주요 요소

예:

json
{
  "name": "my-app",
  "version": "1.0.0",
  "description": "테스트 프로젝트",
  "main": "index.js",
  "scripts": {
    "start": "node index.js"
  },
  "dependencies": {
    "express": "^4.18.1"
  },
  "devDependencies": {
    "nodemon": "^3.0.0"
  }
}

• name: 프로젝트 이름
• version: 버전 (시맨틱 버저닝)
• description: 설명
• main: 진입 파일
• scripts:
  • 커맨드 단축어 등록
  • 예: 

npm run start

• • 또는 단축형:

npm start

• dependencies:
  • 실제 서비스에 필요한 패키지
• devDependencies:
  • 개발용 도구 (ex. nodemon, eslint)

package-lock.json

• 의존성 트리를 정확히 기록
• 설치된 패키지들의 버전 고정 역할
• 팀 프로젝트에서 동일한 환경 유지할 때 중요

✅ node_modules 관리

• node_modules는 설치된 라이브러리들의 모음
• 용량 큼 → 보통 Git에 올리지 않음
• . gitignore에 꼭 추가:
   

node_modules 재설치

• 다른 컴퓨터에서 프로젝트 복사했을 때:→ package.json 기반으로 다시 설치

npm install

버전 꼬임, 오류 해결

• 아래 두 폴더 삭제 후 다시 설치:

rm -rf node_modules
rm package-lock.json
npm install

✅ 시맨틱 버저닝 (Semantic Versioning)

패키지 버전은 보통 세 자리로 구성됨:

• major → 호환 깨질 정도의 큰 변화
• minor → 새로운 기능 추가 (기존과 호환)
• patch → 버그 수정

✅ 비유

^, ~ 기호 의미

• ^1.2.3 → major는 고정, minor/patch는 업그레이드 가능
• ~1.2.3 → major/minor 고정, patch만 업그레이드 가능

✅ 정리

• Node.js는 자바스크립트를 어디서든 돌릴 수 있게 해주는 환경
• NPM은 라이브러리 설치, 관리의 표준 도구
• package.json은 프로젝트의 설명서 + 설치 목록
• node_modules는 버전 꼬이면 지우고 재설치
• CLI 툴은 전역 설치, 라이브러리는 로컬 설치
• 시맨틱 버저닝은 버전 관리의 필수 규칙!

자바스크립트 모듈이 뭐야?

• 모듈(Module) = 코드를 여러 파일로 나눠서 관리하기 위한 기능
• 큰 프로젝트일수록 파일 분리가 필수
• ES6 이전 → 자바스크립트엔 공식 모듈 시스템이 없었음
• 지금은 대표적으로 CommonJS와 ES Module 두 가지가 많이 쓰임

✅ CommonJS

특징

• Node. js에서 사용하기 위해 만들어짐
• 동기적으로 동작 (require 시점에 파일 읽음)
• 파일마다 scope가 분리됨
• .js 확장자 생략 가능

CommonJS 코드 예제

math.js

const perfectSore = 100;

function sum(a, b) {
  return a + b;
}

function subtract(a, b) {
  return a - b;
}

module.exports = {
  perfectSore,
  sum,
  subtract,
};

index.js

const math = require('./math.js');

console.log('perfectSore', math.perfectSore);
console.log('sum', math.sum(10, 20));
console.log('subtract', math.subtract(10, 20));

실행 방법

• Node.js 환경에서 바로 실행 가능
• package.json 없어도 OK
• 예:

node commonjs/index.js

✅ ES Module (ESM)

특징

• ES6(ECMAScript 2015)에서 공식 표준으로 도입
• 비동기적으로 동작 가능
• 파일 간 의존 관계가 명확해짐
• 브라우저와 Node.js 둘 다 사용 가능 (Node.js에서는 설정 필요)
• Node.js에서는 package.json에 설정해야 함:

{
  "type": "module"
}

ES Module 코드 예제

math.js

export const perfectSore = 100;

export function sum(a, b) {
  return a + b;
}

export function avege(a, b) {
  return (a + b) / 2;
}

export default {
  subtract(a, b) {
    return a - b;
  }
};

index.js

import { perfectSore, sum, avege } from './math.js';
import math from './math.js';

console.log('perfectSore', perfectSore);
console.log('sum', sum(10, 20));
console.log('avg', avege(10, 20));
console.log('subtract', math.subtract(10, 20));

import 문법 종류

• 개별 import

import { sum } from './math.js';

• default import

import math from './math.js';

• 모든 export 한 번에 가져오기

import * as math from './math.js';
console.log(math.sum(10, 20));

실행 방법

Node.js에서 ES Module 사용하려면:

• package.json 추가

{
  "type": "module"
}

• 실행:

node module/index.js

✅ CommonJS vs ES Module 비교

✅ 비유로 이해하기

• CommonJS → 즉석 전화: “전화해 보고 바로 대답 듣기” (동기적)
• ES Module → 메일: “보내놓고, 답 오면 처리” (비동기 가능)

✅ 정리

• 작은 파일로 나누고 import/export 하는 습관은 유지보수 필수
• Node.js에서는 CommonJS도 여전히 많이 쓰지만, 최신 프로젝트는 ES Module로 점점 이동
• 브라우저에서 모듈 쓸 땐 <script type="module"> 꼭 확인!

💡 백엔드란? – 보이지 않는 시스템의 핵심

백엔드는 사용자가 직접 보지는 않지만, 모든 웹/앱 서비스에서 핵심적인 역할을 하는 기술 영역입니다. 서버에서 요청을 받고, 데이터를 처리하고, 클라이언트에 다시 전달하는 전반적인 시스템 로직을 담당합니다.

🛠 어떤 일을 하나요? – 서버, 데이터베이스, API 설계

• 서버 구성: 사용자 요청 처리, 보안, 인증 등
• 데이터베이스 설계 및 연동: 정보 저장 및 관리 (SQL, NoSQL)
• API 개발: 프론트엔드와 통신하는 데이터 전달 구조 설계

🔧 사용하는 기술들 – Node.js, Python, Java, SQL 등

• Node.js: JavaScript 기반 서버 개발 환경
• Python (Django/FastAPI): 빠르고 효율적인 백엔드 구축
• Java/Spring: 대형 시스템에서 자주 쓰이는 정석 백엔드 프레임워크
• MySQL / PostgreSQL / MongoDB: 관계형·비관계형 데이터베이스
• Git / Docker / Postman: 협업 및 API 테스트 도구

🗺 백엔드 입문 로드맵 (2025년 기준)

1. 기본 개념 이해
- 클라이언트 vs 서버, HTTP, REST, JSON 등

2. 언어 선택 및 학습
- JavaScript (Node.js) or Python 추천

3. 프레임워크 익히기
- Express.js, FastAPI 등으로 라우팅, 미들웨어 구조 이해

4. 데이터베이스 연동
- MySQL 또는 MongoDB로 CRUD 구현

5. API 설계 및 테스트
- REST API 규칙, Postman으로 테스트

6. 인증 & 보안 기초
- JWT, 세션, 해싱, HTTPS 등

7. 배포 경험 쌓기
- Render, Railway, Vercel 등 무료 호스팅 활용

8. 미니 프로젝트 수행
- 유저 로그인/게시판/댓글 기능 구현

📚 추천 자료 & 공부법

• Node.js 공식 문서
• FastAPI 문서
• [W3Schools, MDN] – HTTP & REST 개념
• [Velog / Tistory] – 실전 경험 블로그 참고

🚀 나에게 맞는 진로 고민 + 포트폴리오 전략

• 데이터를 다루거나 논리 구조 설계에 흥미가 있다면 백엔드에 적합
• 실무에서는 협업을 위한 API 문서화, 테스트, 버전 관리가 중요
• 포트폴리오는 실전 기능 구현 중심 (예: 게시판, 채팅앱, REST API 서버)

✅ 마무리

백엔드는 단단한 시스템 구조를 만드는 매력적인 분야입니다. 처음엔 낯설 수 있지만, 한 단계씩 배워가며 프로젝트를 통해 성취감을 쌓아보세요. 이 로드맵을 따라가면 어느새 실전 프로젝트까지 도전할 수 있어요!