[BE] 백엔드 기초 이해하기 : 웹 서버, WAS, HTTP 패킷, API, JSON,

안녕하세요! 오늘은 백엔드 기술 스택에 대한 전반적인 이해를 해보려고 합니다.

팀 프로젝트를 진행하면서, 그리고 앞으로 어떤 사이드 프로젝트를 진행하면서 백엔드는 결국 사용될 수 밖에 없습니다.

따라서 백엔드에 대한 전반적인 이해는 불가피합니다.

따라서 저는 백엔드에 대해 일정 수준 이상을 인지하고, 직접 활용할 수 있는 능력을 쌓으려고 해요.

https://youtu.be/M8E6vYAIuzQ?si=AAmfg5_vHCYVwPmu

백엔드의 핵심 : 유저에게 어떻게 데이터를 안정적으로 전달할 것인가

백엔드의 3요소

1. 웹 서버

초기 웹 서버는 특정 컴퓨터에 설치되어 어떤 파일을 보여달라는 요청이 오면 해당 파일을 그내로 보내줬음.

사용자와 시간에 따라 변화가 없는 정적(Static) 웹인 것.

대표적으로 nginx, Apache, Microsoft의 IIS, Caddy가 있다.

이들은 정적 파일을 제공.

2. WAS

웹이 대중화되면서 방문자 수, 사용자마다 다른 정보, 방명록 등을 원하길 바람.

요청에 따라 실시간으로 HTML 생성 불가.

동적인(Dynamic) 웹 페이지를 생성하기 위해 탄생.

새로운 HTML을 실시간으로 만들어내는 것.

특정 요청 -> 미리 약속된 프로그램을 실행 -> 결과물을 유저에게 전달

즉, 요청에 따라 코드(프로그램)를 실행하는 엔진이 WAS의 원형!

서버 : 단순한 파일 전달 -> 생각&연산&로직 처리 (진정한 백엔드의 시작)\

웹 서버 : 정적인 파일 반환, 웹 애플리케이션 서버 : 인자에 따라 동적인 페이지 반환

WAS : 자동차가 실제로 움직이게 하는 엔진 != BE Framework : 자동차를 만들기 위한 정교한 설계도와 부품 세트.

개발자가 BE Framework를 이용해 작성한 코드가 실제 서버에서 실행시켜주는 환경 그 자체

WAS 없이 BE Framework는 동작 불가능.

3. DB

🔍 HTTP 패킷

HTTP 패킷은 우리가 인터넷에서 웹사이트를 보거나 데이터를 주고받을 때 사용하는 **'데이터 배달 상자'**라고 이해하면 가장 쉽습니다.
엄밀히 말하면 네트워크 계층에 따라 '메시지', '세그먼트', '패킷' 등으로 용어가 나뉘지만, 보통 웹 개발 맥락에서 HTTP 패킷이라고 하면 **HTTP 요청(Request)**과 **응답(Response)**의 전체 데이터를 의미합니다.

1. HTTP 패킷의 구조

이 배달 상자는 크게 세 부분으로 나뉘어 있습니다.

① 시작 줄 (Start Line)

상자의 맨 윗부분입니다. 이 상자가 무엇을 하려는 건지 정체를 밝힙니다.

요청 시: "어떤 방식(GET/POST)으로, 어떤 주소(/index.html)에 보낸다"라는 정보가 담깁니다.
응답 시: "성공(200 OK)했다" 혹은 "찾을 수 없다(404 Not Found)" 같은 결과 상태가 담깁니다.

② 헤더 (Header)

상자에 붙은 상세 송장입니다. 본문(Body)에 대한 메타 정보가 들어있습니다.

내용: 데이터의 크기(Content-Length), 데이터의 종류(Content-Type: JSON인지 이미지인지), 보내는 브라우저 정보, 쿠키(Cookie) 등이 포함됩니다.

③ 바디 (Body)

상자 안에 든 실제 내용물입니다.

요청 시: 로그인할 때 입력한 아이디와 비밀번호, 게시글 내용 등.
응답 시: 웹사이트의 HTML 코드, 이미지 파일, JSON 데이터 등.
(참고: 단순히 페이지를 보여달라는 GET 요청은 바디가 비어있는 경우가 많습니다.)

2. 택배에 비유한 흐름

주문 (Request): 사용자가 브라우저 주소창에 URL을 입력하면, 브라우저가 "이 페이지 좀 보내줘"라는 요청 패킷을 만들어 서버로 보냅니다.
배송 (Response): 서버는 요청을 확인하고 HTML 데이터를 응답 패킷 상자에 담아 사용자 브라우저로 보냅니다.
수령: 브라우저가 응답 패킷의 바디를 열어 우리 눈에 보이는 예쁜 웹사이트로 그려냅니다.

3. 대조 개념: 패킷(Packet) vs 메시지(Message)

네트워크를 깊게 공부하다 보면 이 용어들이 헷갈릴 수 있습니다.

HTTP 메시지: 애플리케이션 계층(L7)에서 다루는 데이터의 단위입니다. (우리가 흔히 말하는 'HTTP 패킷'의 본래 이름)
TCP 세그먼트: 메시지가 너무 크면 전송을 위해 여러 조각으로 나눈 것입니다.
IP 패킷: 네트워크 계층(L3)에서 목적지 주소(IP)를 붙여 실제 전송되는 단위입니다.

정리하자면: HTTP 패킷은 웹에서 정보를 주고받는 표준화된 규격의 데이터 덩어리입니다.

🔍 크롬에서 HTTP 패킷 확인하기 (실습)

크롬 개발자 도구로 **HTTP 패킷의 민낯(?)**을 직접 확인하는 방법은 매우 간단합니다. 지금 바로 이 창에서 따라 해보세요.

개발자 도구 열기: 키보드에서 F12를 누르거나, 화면 오른쪽 마우스 클릭 후 **[검사]**를 선택하세요.
Network(네트워크) 탭 클릭: 상단 메뉴에서 Network 탭을 클릭합니다. (아무것도 안 보인다면 Ctrl + R 또는 F5로 새로고침을 하세요.)
항목 선택: 리스트에 뜨는 수많은 파일 중 하나(보통 가장 위의 문서 파일)를 클릭합니다.
패킷 뜯어보기: 우측에 나타나는 상세 창에서 다음 정보들을 확인해보세요.

Headers: '상자 송장'입니다. 요청 URL, 상태 코드(200 OK 등), 그리고 브라우저 정보가 담긴 Request Headers를 볼 수 있습니다.
Payload: '요청 내용물'입니다. 서버로 보낸 데이터가 있다면 여기서 확인 가능합니다.
Response / Preview: '응답 내용물'입니다. 서버가 나에게 보내준 실제 HTML 코드나 JSON 데이터를 볼 수 있습니다.

💡 패킷을 보면 알 수 있는 것들

개발자들은 이 패킷들을 관찰하며 이런 문제를 해결합니다.

로그인이 안 돼요: 패킷의 Payload를 보고 내가 아이디/비밀번호를 서버에 제대로 보냈는지 확인합니다.
데이터가 안 불러와져요: 서버가 보낸 Response 패킷에 데이터가 비어있진 않은지, 혹은 Status Code가 404나 500 에러는 아닌지 체크합니다.
보안 확인: 비밀번호 같은 민감한 정보가 암호화되지 않은 채 생으로 패킷에 담겨 전송되고 있지는 않은지 감시합니다.

⚠️ 주의할 점: HTTPS와 암호화

우리가 흔히 보는 주소창의 자물쇠 표시(HTTPS)는 이 패킷을 암호화했다는 뜻입니다. 중간에 누군가 패킷을 가로채도 내용을 읽을 수 없게 종이 상자를 강철 금고로 바꾼 셈이죠. 하지만 본인의 브라우저 개발자 도구에서는 금고가 열린 상태의 데이터를 볼 수 있는 것입니다.

🔍 대표적인 상태 코드의 의미?

상태 코드는 앞자리 숫자에 따라 의미가 명확히 나뉩니다.

2xx (Success): "잘 받았어!" (예: 200 OK, 201 Created)
3xx (Redirection): "그건 딴 데로 갔어, 여기로 가봐." (주소가 바뀌었을 때 발생)
4xx (Client Error): "네 잘못이야." (예: 404 Not Found - 주소 오타, 401 Unauthorized - 로그인을 안 함)
5xx (Server Error): "내 잘못이야..." (예: 500 Internal Server Error - 서버 코드가 터짐)

🔍 직접 해보는 API 테스트 (Postman & Thunder Client)

개발자들은 브라우저 개발자 도구만으로는 한계가 있어, API를 직접 쏘고 응답 패킷을 분석하는 전문 도구를 사용합니다.

추천 도구 1: Postman (포스트맨)

전 세계 개발자들이 가장 많이 쓰는 도구입니다. 복잡한 요청도 저장해두고 계속 테스트할 수 있습니다.

💡 숙제(?) 겸 다음 단계

방금 했던 실습 주소 끝의 1을 999처럼 없는 숫자로 바꿔서 보내보세요. 아마 상태 코드가 404 Not Found로 바뀔 겁니다!
이 과정이 익숙해지면 직접 Node.js로 나만의 API 서버를 만들어서 내 컴퓨터로 패킷을 주고받을 수 있게 됩니다. Node.js로 간단한 'Hello World' 서버를 만드는 법을 알려드릴까요?

🔍 JSON?

**JSON(JavaScript Object Notation)**은 데이터를 주고받기 위해 만든 **'텍스트 형식의 데이터 규격'**입니다.
이름에 'JavaScript'가 들어가서 자바스크립트 전용이라고 생각할 수 있지만, 사실상 현대 모든 프로그래밍 언어(Python, Java, Go 등)에서 데이터를 주고받을 때 사용하는 세계 공통 언어라고 보시면 됩니다.

1. JSON이 어떻게 생겼나요?

JSON은 **키(Key)**와 **값(Value)**의 쌍으로 이루어져 있으며, 중괄호 { }를 사용합니다.

{
  "이름": "제미나이",
  "나이": 2,
  "직업": "AI 어시스턴트",
  "보유기술": ["데이터 분석", "코드 작성", "농담"],
  "상태": {
    "에너지": "충만",
    "기분": "행복"
  }
}

키(Key): 항상 큰따옴표(" ")로 감싼 문자열이어야 합니다. (예: "이름")
값(Value): 문자열, 숫자, 불리언(true/false), 배열([ ]), 또 다른 객체({ }) 등이 올 수 있습니다.

2. 왜 JSON을 쓰나요?

① 읽기 쉽습니다

사람이 눈으로 봐도 "이 데이터가 무엇을 의미하는지" 한눈에 알 수 있습니다.

② 가볍습니다

과거에 쓰던 XML이라는 방식보다 글자 수가 훨씬 적어서 데이터를 전송할 때 속도가 빠릅니다. (비유하자면, XML이 격식을 차린 '공문'이라면 JSON은 핵심만 적은 '메모'입니다.)

③ 기계가 해석하기 좋습니다

대부분의 언어에 JSON 텍스트를 프로그래밍 객체로 한 번에 바꿔주는 기능이 내장되어 있습니다.

3. 웹 개발에서의 JSON 흐름

우리가 지금까지 이야기했던 개념들을 JSON을 중심으로 연결하면 다음과 같습니다.

브라우저(React): "API 점원님, 1번 게시글 데이터 좀 주세요!" (HTTP 요청)
서버(Node.js): "알겠어, 데이터 찾아올게." (DB에서 데이터를 꺼냄)
데이터 변환: 서버가 찾은 데이터를 JSON 형태의 텍스트로 변환합니다.
전송: **HTTP 응답 패킷의 바디(Body)**에 이 JSON 텍스트를 담아 보냅니다.
화면 출력: 브라우저가 JSON을 받아서 예쁘게 꾸며 화면에 보여줍니다.

💡 요약

JSON은 데이터를 담는 **그릇(양식)**입니다.
API는 이 그릇을 옮기는 수단입니다.
HTTP는 그릇을 운반하는 규칙입니다.

아까 Thunder Client로 보셨던 그 결과값이 바로 이 JSON이었습니다

🔍 파싱(Parsing) / 역직렬화(Deserialization)

JSON 데이터에서 원하는 정보만 쏙쏙 골라내는 작업을 파싱(Parsing) 또는 **역직렬화(Deserialization)**라고 부릅니다. 자바스크립트에서는 이 작업이 매우 쉽습니다!
어떻게 하는지 단계별로 보여드릴게요.

1. 마법의 도구: . (점 연산자)

자바스크립트 객체로 변환된 데이터는 마치 계층 구조를 가진 지도와 같습니다. 내가 원하는 경로를 .으로 따라가기만 하면 됩니다.
아까 우리가 받았던 데이터를 다시 가져와 볼까요?

const post = {
  "userId": 1,
  "id": 1,
  "title": "안녕, 세상아!",
  "body": "이것은 JSON 데이터의 내용입니다."
};

// 특정 데이터 골라내기
console.log(post.title); // 결과: "안녕, 세상아!"
console.log(post.userId); // 결과: 1

2. 데이터가 복잡할 때 (중첩 구조)

데이터가 상자 안에 또 상자가 있는 구조라면, 점을 계속 찍어서 들어갑니다.

const user = {
  "name": "홍길동",
  "address": {
    "city": "서울",
    "zipcode": "12345"
  }
};

console.log(user.address.city); // 결과: "서울"

3. 데이터가 여러 개일 때 (배열 구조)

게시글 목록처럼 데이터가 여러 개([ ])라면, 몇 번째 상자인지 번호(인덱스)를 알려줘야 합니다. (컴퓨터는 숫자를 0부터 셉니다!)

const posts = [
  { "id": 1, "title": "첫 번째 글" },
  { "id": 2, "title": "두 번째 글" }
];

console.log(posts[0].title); // 결과: "첫 번째 글"
console.log(posts[1].title); // 결과: "두 번째 글"

4. 실전! 브라우저에서 해보기 (연습)

지금 바로 이 창에서 F12를 눌러 Console 탭에 아래 코드를 복사해서 붙여넣고 엔터를 쳐보세요.
붙여넣기가 금지 되어 있다면

콘솔 입력창에 직접 allow pasting (붙여넣기 허용)이라고 타이핑합니다.

// 1. API로 데이터 가져오기
fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => response.json()) // 텍스트를 JSON 객체로 변환
  .then(data => {
    // 2. 여기서 'title'만 골라내서 출력!
    console.log("골라낸 제목:", data.title);
    alert("서버에서 가져온 제목: " + data.title);
  });

💡 정리하자면

JSON 텍스트가 서버에서 옵니다.
JSON.parse()나 .json()을 통해 자바스크립트 객체로 변신시킵니다.
**점(.)**을 찍어서 원하는 정보를 골라냅니다.
그 정보를 변수에 담아 화면(React 등)에 뿌려줍니다.

🔍 node.js 실습

축하합니다! 직접 코드를 실행해서 데이터를 받아온 그 순간이 개발자로 성장하는 가장 짜릿한 첫걸음이에요.
이제 남의 서버가 아니라, 내 컴퓨터를 서버로 만들어서(Node.js) 데이터를 내보내고, 그 데이터를 **화면(React)**에 띄우는 전체 흐름(Full-stack)을 아주 쉽게 가이드해 드릴게요.

1. Node.js로 내 컴퓨터를 서버로 만들기

먼저, 내 컴퓨터 안에 '점원(API)'을 한 명 고용해 봅시다. express라는 가장 유명한 도구를 사용할 거예요.

설치 및 코드 작성

폴더를 하나 만들고 터미널(Terminal)에서 아래 명령어를 칩니다. npm init -y (설정 파일 생성) npm install express (서버 도구 설치)
server.js 파일을 만들고 아래 코드를 복사해 넣으세요.

const express = require('express');
const cors = require('cors'); // 다른 사이트(React)에서 접속 허용해주는 도구
const app = express();

app.use(cors()); // 보안 빗장을 풀어줍니다 (아까 겪으신 CSP 에러 방지)

// 이것이 바로 나만의 JSON 데이터입니다!
const myData = {
  id: 1,
  title: "내 컴퓨터 서버에서 온 데이터",
  content: "Node.js로 만든 API 서버가 잘 작동하고 있네요!"
};

// API 경로 설정 (GET 방식)
app.get('/api/info', (req, res) => {
  res.json(myData); // 데이터를 JSON 형태로 보내줍니다.
});

app.listen(4000, () => console.log("서버가 4000번 포트에서 열렸어요!"));

아하, 아주 흔하게 만나는 에러입니다! 당황하지 마세요. 에러 메시지의 핵심은 바로 이 부분입니다.
컴퓨터에 express는 설치했을지 모르지만, 제가 코드에 추가했던 **cors**라는 부품은 아직 설치되지 않아서 Node.js가 "나 이거 뭔지 몰라!"라고 외치는 상황입니다.

🛠️ 해결 방법

터미널(CMD 또는 VS Code 터미널)에서 아래 명령어를 입력하여 부족한 부품을 설치해 주세요.

npm install cors

설치가 끝난 후 다시 서버를 실행해 보세요.

node server.js

이제 **"서버가 4000번 포트에서 열렸어요!"**라는 메시지가 반갑게 맞이해 줄 겁니다.

🤔 왜 이런 일이 생기나요? (npm의 역할)

Node.js 개발을 할 때는 내가 직접 모든 코드를 짜지 않고, 남들이 만들어둔 유용한 도구(패키지)를 가져다 씁니다. 이때 **npm**이라는 도구가 그 부품들을 다운로드해 주는 역할을 하죠.

express: 서버를 만드는 핵심 엔진
cors: 보안상 다른 주소(React 등)에서 내 서버로 접속하는 걸 허락해 주는 보안 카드

우리가 npm install을 하면 프로젝트 폴더 안에 **node_modules**라는 폴더가 생기고 그 안에 부품들이 저장됩니다. Node.js는 실행될 때 그 폴더를 뒤져서 필요한 부품을 찾아오는 방식이에요.

💡 꿀팁: 에러 읽는 법

나중에 다른 에러가 나더라도 code: 'MODULE_NOT_FOUND'라는 문구가 보이면, **"아, 내가 npm install로 뭘 설치 안 했구나!"**라고 바로 눈치채시면 됩니다.
서버가 잘 켜졌나요? 잘 켜졌다면 브라우저 주소창에 http://localhost:4000/api/info를 입력해서 여러분의 첫 API 응답을 확인해 보세요!

터미널에 node server.js를 입력하면 서버가 실행됩니다. 이제 브라우저 주소창에 http://localhost:4000/api/info를 치면 내가 만든 데이터가 보일 거예요!

2. React에서 이 데이터를 가져와 화면에 그리기

이제 손님(React)이 점원(Node.js)에게 요리를 주문할 차례입니다.

React 코드 구조 (핵심)

React에서는 useEffect라는 기능을 사용해 "화면이 나타나자마자 데이터를 가져와라!"라고 명령합니다.

import React, { useState, useEffect } from 'react';

function App() {
  const [info, setInfo] = useState(null); // 데이터를 담을 바구니

  useEffect(() => {
    // 1. 내 서버에 주문하기
    fetch('http://localhost:4000/api/info')
      .then(res => res.json())
      .then(data => setInfo(data)); // 2. 받은 데이터를 바구니에 넣기
  }, []);

  if (!info) return <div>로딩 중...</div>;

  return (
    <div style={{ padding: '20px', border: '1px solid blue' }}>
      <h1>{info.title}</h1>
      <p>{info.content}</p>
    </div>
  );
}

export default App;

https://nodejs.org/ko/download

Node.js — Node.js® 다운로드

Node.js® is a free, open-source, cross-platform JavaScript runtime environment that lets developers create servers, web apps, command line tools and scripts.

nodejs.org

Node.js는 구글 크롬의 V8 JavaScript 엔진으로 빌드된 JavaScript 런타임 환경입니다.

본래 자바스크립트는 크롬이나 사파리 같은 웹 브라우저 안에서만 동작하는 언어였습니다.

하지만 Node.js는 이 자바스크립트를 브라우저가 아닌 운영체제(Windows, macOS 등) 위에서 직접 실행할 수 있게 해주는 실행 환경(Runtime)입니다.

용도: 주로 서버 사이드(Backend) 개발에 사용됩니다. (예: API 서버, 실시간 채팅, 스트리밍 서비스)
- = 이는 서버 사이드에서 JavaScript를 실행할 수 있는 환경을 제공합니다.
특징: 비동기 I/O와 이벤트 기반 모델을 사용하여 처리 속도가 매우 빠르고, 한 번에 많은 연결을 처리하는 데 강점이 있습니다.
- 비동기 I/O :
- 이벤트 기반 모델 :
- 예시 :
대조 개념: Python(Django), Java(Spring), Go 등이 서버 개발 분야에서 경쟁하거나 대조되는 개념입니다.

Node.js는 비동기 프로그래밍과 이벤트 기반 모델을 기반으로 동작하여 많은 요청을 동시에 처리하고, 대용량의 데이터를 효율적으로 처리할 수 있습니다.

Node.js는 단일 스레드 이벤트 루프를 사용하여 비동기식 I/O 작업을 처리합니다. 이는 논블로킹(non-blocking) 방식으로 동작하며, I/O 작업이 완료될 때까지 기다리지 않고 다른 작업을 처리할 수 있습니다. 이를 통해 다중 요청을 동시에 처리하고, 많은 클라이언트를 동시에 처리하는 데 용이합니다.

💡논블로킹(non-blocking)이란?

- "제어권" : 자신(함수)의 코드를 실행할 권리 같은 것. 제어권을 가진 함수는 자신의 코드를 끝까지 실행한 후, 자신을 호출한 함수에게 돌려준다.
- "결과값을 기다린다" : A 함수에서 B 함수를 호출했을 때, A 함수가 B 함수의 결과값을 기다리느냐의 여부를 의미한다.

블로킹과 논블로킹은 A함수가 B함수를 호출했을 때 제어권을 어떻게 처리하냐에 따라 달라집니다.

Node.js는 JavaScript 언어를 사용하여 프론트엔드와 백엔드를 동일한 언어로 개발할 수 있어 개발 생산성을 높입니다. 또한, Node.js는 모듈 생태계가 풍부하여 다양한 모듈을 사용하여 개발 속도를 향상시킬 수 있습니다. 이러한 특징들로 인해 Node.js는 높은 처리량과 확장성을 제공하는 동시에 개발자들에게 편리한 개발 환경을 제공합니다.

Node.js는 웹 애플리케이션 개발뿐만 아니라 네트워크 프로그래밍, 서버 사이드 스크립팅, API 서버 등 다양한 영역에서 활용됩니다. 이러한 이유로 Node.js는 현대적이고 효율적인 웹 개발을 위한 강력한 도구로 인정받고 있습니다.

Node.js를 웹 애플리케이션으로 사용하고 있는 회사와 프로젝트는 많이 있습니다. 몇 가지 대표적인 예시를 아래에 소개해드릴게요.

Netflix: Netflix는 Node.js를 사용하여 많은 규모의 웹 애플리케이션을 구축하고 운영하고 있습니다. Node.js의 비동기 프로그래밍 모델과 확장성 덕분에 Netflix는 수많은 동시 사용자 요청을 처리하고, 실시간 스트리밍 서비스를 제공할 수 있습니다.
LinkedIn: LinkedIn은 Node.js를 사용하여 실시간 업데이트와 실시간 알림 기능을 제공하는 웹 애플리케이션을 개발하고 있습니다. Node.js의 이벤트 기반 모델과 높은 처리량을 통해 LinkedIn은 사용자에게 실시간으로 업데이트된 정보를 제공할 수 있습니다.
Uber: Uber는 Node.js를 사용하여 실시간 위치 추적, 주문 처리, 요금 산정 등을 처리하는 웹 백엔드 시스템을 구축하고 있습니다. Node.js의 빠른 응답 속도와 확장성을 통해 Uber는 수많은 사용자 요청을 신속하게 처리하고, 실시간으로 운송 서비스를 관리할 수 있습니다.

Node.js를 선택한 이유는 회사마다 다를 수 있습니다. 일반적으로 Node.js는 JavaScript를 사용하여 프론트엔드와 백엔드를 동일한 언어로 개발할 수 있어 개발자들의 생산성을 높입니다. 또한, 비동기 프로그래밍과 이벤트 기반 모델을 통해 많은 요청을 동시에 처리하고, 높은 처리량과 확장성을 제공할 수 있습니다. 이러한 이유로 많은 회사들이 Node.js를 선택하여 효율적인 웹 애플리케이션을 구축하고 있습니다.

npx create-react-app my-portfolio
cd my-portfolio
npm install tailwindcss postcss autoprefixer