[2주차] - [9기] 타입스크립트로 함께하는 웹 풀 사이클 개발(React, Node.js) 10회차 - 8

쇼핑몰 프로젝트 : Tennis market project

 

main page

order List page

백엔드

 

 [목차]

•  백엔드의 구조
•  [예제로 배우는] Node.js의 이해
•  [예제로 배우는] 데이터베이스

 

백엔드의 구조

 

현대 웹 서비스의 백엔드는 보통 역할에 따라 여러 계층(layer) 으로 나뉘어 구성된다.
대표적인 구조가 바로 아래와 같은 3계층(3-Tier) 아키텍처이다.

 

클라이언트 → 웹 서버 → 웹 애플리케이션 서버 → 데이터베이스

 

각 구성 요소는 명확한 역할을 가지고 있으며, 요청(Request)과 응답(Response)을 주고받으며 동작한다.

 

 클라이언트(Client)

 

 역할

• 사용자가 직접 사용하는 환경
• 웹 브라우저(Chrome, Edge), 모바일 앱, Postman 등

 하는 일

• 서버에 요청(Request) 전송
  예) 페이지 요청, 로그인 요청, 데이터 조회 요청
• 서버로부터 응답(Response) 을 받아 화면에 표시

 클라이언트는 비즈니스 로직을 처리하지 않고,
“요청하고 결과를 보여주는 역할”만 담당한다.

 

 웹 서버(Web Server)

 

 대표 예시

• Nginx, Apache

 역할

• 클라이언트와 서버 사이의 첫 번째 관문
• 정적 자원 처리 및 요청 분배

 하는 일

• HTML, CSS, JS, 이미지 같은 정적 파일 제공
• 요청을 웹 애플리케이션 서버(WAS) 로 전달
• 로드 밸런싱, SSL 처리, 보안 설정

 웹 서버는 속도와 안정성에 초점이 맞춰져 있다.

 

 

 웹 애플리케이션 서버 (WAS)

 

 대표 예시

• Spring Boot(Tomcat), Node.js, Django, FastAPI

 역할

• 백엔드의 핵심
• 실제 서비스 로직 처리

 하는 일

• 요청 분석 (URL, 파라미터, 헤더)
• 비즈니스 로직 수행
  예) 로그인 검증, 권한 체크, 계산 처리
• 데이터베이스에 데이터 요청
• 처리 결과를 웹 서버로 응답

 

흔히 말하는 “백엔드 개발”은 이 영역을 개발하는 것을 의미한다.

 

데이터베이스(Database)

 

 대표 예시

• MySQL, MariaDB, PostgreSQL, Oracle

 역할

• 데이터의 영구 저장소

 하는 일

• 데이터 저장 (INSERT)
• 데이터 조회 (SELECT)
• 데이터 수정 (UPDATE
• 데이터 삭제 (DELETE)

 

* 데이터베이스는 직접 클라이언트와 통신하지 않고, 반드시 WAS를 통해서만 접근한다.

 

요청(Request) & 응답(Response) 흐름 정리

 

1. 클라이언트가 요청 전송
2. 웹 서버가 요청 수신
3. 웹 서버 → WAS로 요청 전달
4. WAS → 데이터베이스에 데이터 요청
5. 데이터베이스 → WAS에 결과 반환
6. WAS → 웹 서버에 응답 생성
7. 웹 서버 → 클라이언트에 응답 전달

 

왜 이렇게 구조를 나눌까?

 

 장점

• 유지보수 용이 (역할 분리)
• 확장성 증가 (서버별 분리 확장 가능)
• 보안 강화 (DB 직접 접근 차단)
• 성능 최적화 (정적/동적 처리 분리)

 

백엔드는 클라이언트, 웹 서버, 웹 애플리케이션 서버, 데이터베이스로 구성되며
각 계층은 역할을 분담해 요청과 응답을 효율적이고 안전하게 처리한다.

 

웹 서버(Web Server)는 정적 페이지에 대해 대응합니다.

동적 페이지에 대한 처리는 직접 처리하지 않고, 웹 어플리케이션 서버에게 전달합니다.

 

 

*정적 페이지란, 화면의 내용/데이터 등의 변동이 없는 페이지를 말합니다.

*동적 페이지란, 데이터 처리/연산을 통해 화면의 내용, 데이터가 변하는 페이지를 말합니다.

 

 

웹 어플리케이션 서버(Web Application Server)는 동적 페이지를 처리합니다.

필요한 데이터 연산을 위해 데이터베이스와 연결되어 있으며 데이터 조회/ 수정/ 삭제 에 대한 처리를 요청합니다.

 

*데이터베이스란, 데이터를 통합하여 효율적으로 관리하기 위한 데이터 집합체를 말합니다.

 

[예제로 배우는] Node.js의 이해

 

Node.js

 

 

 

Node.js란

 

Node.js는 자바스크립트를 스크립트 언어 이상으로 프로그래밍 언어 역할을 할 수 있도록 지원하는 플랫폼입니다.
즉, 우리는 Node.js를 이용해서 자바스크립트로 백엔드를 구현할 수 있습니다.

 

https://nodejs.org/ko/about

Node.js — Node.js®에 대하여

 

Node.js About(소개)

 

Node.js가 만들어둔 모듈을 우리가 활용하기만 하면된다.

 

require('') 프로토콜을 가지고 놀 수 있게 Node.js가 미리모듈로 만들어놓았고

이것을 우리가 사용하기 위해 부르는 함수이다.

 

let http = require('http');

 

http에 require 이라는 Node.js가 이미 만들어둔 모듈을 가져다 조립을 더 해서 완제품을 만들것이다.

 

Server 파헤치기

클라이언트가 요청을 보내고 → 웹 서버가 처리한 뒤 → 응답을 돌려주는 흐름

 

포트 번호(port number)

 

 

클라이언트와 서버가 대화를 하고 싶다면, 같은 주파수를 맞춰야만 해요.
마치 무전기 처럼요

 

HTTP 프로토콜 템플릿

 

 

Head에는,

1. 통신 상태가 어떤지 알려줘요.
   예를 들어,
   200 : 정상이다.
   404 : 클라이언트가 원하는 걸 못 찾겠다.
   500 : 서버가 이상하다.

우리는 이 숫자들을 HTTP (status) code 라고 부릅니다.

 

    2.응답이 어떤 형태인지 적어줘요. 예를 들어 html 이다.

 

 

내가 만든 server를 모듈처럼!

 

Node.js가 미리 만들어둔 모듈을 우리가 require('모듈 이름'); 이렇게 사용한 것 처럼,
우리가 만든 server도 모듈처럼 다른 javascript 파일에서 사용할 수 있습니다.

 

Uniform Resource Locator

 

인터넷 상에서 웹 페이지가 어디에 있는지 “위치”를 알려주는 주소입니다.
쉽게 말해서, 웹 페이지 주소라고 할 수 있습니다.

 

Server와 Router의 역할

 

Server : Request를 받습니다.
Router : Request의 URL에 따라 루트(route)를 정해줍니다. = 어디로 갈지 길만 정해줘요!

각 루트(route)에서 할 일은 그럼 누가 하나요?

 

 

URL 읽어내기 실습

 

 

url에 따라 다른콘솔찍기

 

url에 따라 프론트엔드에 다른 response 보내기 

 

실습완료