[데브코스] Hello, Backend!(서버, HTTP, Node.js)

드디어 백엔드 파트 시작! 오늘은 백엔드의 구조와 Node.js, HTTP 템플릿 등 백엔드 입문을 위한 기초 개념을 배우고 코드를 작성해보았다.

🧮백엔드의 기본 구조

백엔드는 사용자에게 보이지 않는 서버 측 로직을 담당하는 웹 애플리케이션의 핵심 파트이다. 클라이언트-서버 아키텍처 관점에서 보면 백엔드는 크게 세 가지 주요 구성 요소로 이루어져 있다.

웹 서버, 웹 어플리케이션 서버, 데이터베이스

1. 웹 서버

클라이언트로부터 HTTP 요청을 받아서 처리

정적 리소스 처리: HTML, CSS, 이미지 파일과 같은 정적 콘텐츠를 직접 클라이언트에게 제공한다.
요청 라우팅: 동적 컨텐츠에 대한 요처을 웹 애플리케이션 서버로 전달한다.
로드 밸런싱: 여러 서버에 트래픽을 분산하여 시스템 안정성을 보장한다.
보안: SSL/TLS 암호화, 기본적인 보안 필터링을 제공한다.

대표적인 웹 서버로는 Apache, Nginx, IIS 등이 있다.

⭐ 웹 서버는 정적 페이지에 대한 처리와, 동적 요청을 웹 애플리케이션으로 전달하는 역할

2. 웹 어플리케이션 서버

실제 어플리케이션 로직이 실행되는 곳

동적 콘텐츠 생성: 사용자 요청에 따라 맞춤형 콘텐츠를 생성
비즈니스 로직 처리: 어플리케이션의 핵심 기능 구현
데이터 처리: 데이터베이스와의 통신을 통한 CRUD 연산
세션 관리: 사용자 인증 및 상태 유지

대표적인 웹 애플리케이션 서버로는 Tomcat, JBoss, WebLogic, Node.js 등이 있으며 프로그래밍 언어와 프레임워크에 따라 다양한 옵션이 존재한다.

⭐ 웹 애플리케이션 서버는 비즈니스 로직의 중심

3. 데이터베이스

데이터의 영구 저장소

데이터의 저장 및 검색, 트랜잭션 관리, 데이터 보안, 데이터 최적화 등을 수행한다. MySQL, PostgreSQL, MongoDB, Redis 등 다양한 유형의 데이터베이스가 존재한다.

실제 어플리케이션에서의 데이터 흐름

웹 어플리케이션에서 데이터는 다음과 같은 흐름으로 처리된다.

클라이언트가 HTTP 요청을 보냄
웹 서버가 요청을 받아 정적/동적 콘텐츠 여부 판단
동적 컨텐츠라면 웹 애플리케이션 서버로 요청 전달 -> 일단 웹 서버를 거친다!
웹 애플리케이션 서버는 비즈니스 로직 실행
필요 시 데이터베이스와 통신하여 데이터 조회/수정
처리 결과 웹 서버로 반환
웹 서버는 최종 응답을 클라이언트에 전송

이렇게 관심사를 분리하여 각 계층이 주어진 역할만 수행해 유지보수성, 확장성이 크게 향상된다.

🌿Node.js

서버 측에서 JavaScript를 실행할 수 있도록 해주는 런타임 환경

Node.js는 자바스크립트를 스크립트 언어 이상으로 프로그래밍 언어 역할을 할 수 있도록 지원하는 플랫폼이다.

Node.js의 특징

✅비동기 & 이벤트 기반

특정 작업(파일 읽기, API 호출 등)이 끝날 때까지 기다리지 않고, 다른 작업을 먼저 수행할 수 있다. Node.js는 비동기 이벤트 기반 모델을 사용하여 높은 성능을 제공한다.

✅싱글 스레드 & 논블로킹

Node.js는 싱글 스레드 모델을 사용하지만, 내부적으로는 논블로킹 I/O를 통해 여러 작업을 동시에 처리한다. 이에 높은 처리량을 유지할 수 있다.

❗하지만 CPU 집약적 작업(대규모 데이터 연산)예는 적합하지 않기에 이런 경우 워커 스레드나 분산 시스템을 사용해야 한다.

Node.js로 웹 서버 만들기

node.js를 사용하면 간단한 코드만으로 웹 서버를 만들 수 있다.

1. http 모듈 가져오기

Node.js에서 HTTP 프로토콜을 다룰 수 있도록 내장 모듈인 http 모듈을 불러온다.

let http = require("http");

require(http)는 Node.js의 기본 내장 모듈을 가져온다.
http 모듈은 웹 서버를 만들거나 클라이언트 요청을 처리할 때 사용된다.

2. 서버 요청 처리 함수 만들기

function onRequest(request, response) {
  response.writeHead(200, { "Content-Type": "text/html" });
  response.write("Hello Node.js");
  response.end();
}

onRequest 함수는 클라이언트가 서버에 보냈을 때 실행되는 콜백 함수
request는 클라이언트가 보낸 요청 정보를 포함
response는 서버가 클라이언트에게 보낼 응답을 제어하는 객체
response.writeHead(...)은 응답 헤더를 설정. 200은 정상적인 요청을 의미하는 HTTP 상태코드이고,. Content-type은 text/html로 설정하여 브라우저가 HTML 문서로 인식하도록 하였다.
response.write(...)는 화면에 표시될 HTML 데이터를 전송한다.
response.end()는 응답을 종료해 클라이언트가 데이터를 받을 수 있게 한다

3. 서버 실행 및 요청 대기

http.createServer(onRequest).listen(8888);

http.createServer(onRequest)는 위에서 만든 onRequest 함수로 서버를 생성한다.
.listen은 서버가 8888번 포트에서 클라이언트 요청을 기다리도록 설정한다.

4. 서버 실행하기

터미널에서 명령어를 입력한다. 서버 실행 후, localhost:8888 로 접속하면 메시지가 출력된다.

node server.js

📜HTTP 템플릿

웹 서버와 클라이언트가 통신 할 때 정해진 양식

HTTP 헤더

1. 통신 상태

HTTP 상태 코드는 서버가 클라이언트 요청을 어떻게 처리했는지 나타낸다. 코드를 통해, 클라이언트는 요청 결과를 파악할 수 있다.

200 OK: 정상
301 Moved Permanently: 요청한 리소스가 영구적으로 이동됨
302 Found: 요청한 리소스가 일시적으로 이동됨
400 Bad Request: 잘못된 요청
401 Unauthorized: 인증 필요
403 Forbidden: 접근 금지
404 Not Found: 클라이언트가 요청한 리소스를 찾을 수 없음
500 Internal Server Error: 서버 내부 오류 발생
503 Service Unavailable: 서버가 일시적으로 사용할 수 없음

2. 응답 형태 작성

서버는 응답할 때 데이터가 어떤 형태인지 명시해야 한다. 대표적인 content-type은 다음 것들이 있다.

text/html
application/json
text/plain
image/png

예시)

HTTP/1.1 200 OK
Content-Type: text/html

HTTP 바디

HTTP 요청 본문(Request Body)

클라이언트가 서버로 데이터를 보낼 때, 요청 본문에 포함될 수 있다.

HTTP 응답 본문(Response Body)

HTTP 응답 본문에는 실제 데이터가 포함된다. 예를 들어 html 문서인 경우 다음과 같이 응답이 온다.

<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>

♻️모듈화

모듈화는 코드의 재사용성과 유지보수성을 높이는 중요한 개념

Node.js에서는 require와 import를 사용하여 모듈을 가져올 수 있고, 이를 통해 기능을 분리하고 효율적으로 관리할 수 있다.

위에서 작성한 server.js코드를 분리하여 모듈화 해보았다.

[index.js]

//index.js
let server = require("./server");

server.start();

[server.js]

//server.js
let http = require("http");

function start() {
  function onRequest(request, response) {
    response.writeHead(200, { "Content-Type": "text/html" });
    response.write("Hello Node.js");
    response.end();
  }
  http.createServer(onRequest).listen(8888);
}

exports.start = start;

이번에는 node server.js가 아니라 node index.js를 입력하여 서버를 실행해보았다. localhost:8888에 접속하면, 이전과 동일한 화면이 나온다.

모듈화의 장점

코드 재사용: 동일한 기능을 여러 곳에서 사용할 수 잇다.
유지보수 용이: 코드가 분리되어 있어 수정이 간편하다
협업 효율성 증가: 여러 개발자가 동시 업하기 용이하다.

🔗URL uniform resource locator

인터넷에서 웹 페이지가 어디 있는지 위치를 알려주는 주소

URL 구조

프로토콜://도메인:포트번호/경로?쿼리스트링#해시

//예시
https://example.com:8080/home?user=da&age=24#section1

구성 요소	설명	예제
프로토콜	사용되는 통신 방식	`https://`
도메인	서버의 주소	`example.com`
포트 번호	서버에서 사용되는 포트-기본값은 80(HTTP) 또는 443(HTTPS)	`:8080`
경로	요청하는 리소스의 위치	`\home`
쿼리 스트링	추가적인 요청 데이터 전달	`?user=da&age=24`
해시	문서 내 특정위치 지정(서버에는 전달되지 않음)	`#section1`

URL 주소 콘솔 출력하기

[server.js]

let http = require("http");
let url = require("url");
function start() {
  function onRequest(request, response) {
    let pathname = url.parse(request.url).pathname;
    console.log(`pathname: ${pathname}`);

    response.writeHead(200, { "Content-Type": "text/html" });
    response.write("Hello Node.js");
    response.end();
  }
  http.createServer(onRequest).listen(8888);
}

exports.start = start;

🚪라우터

클라이언트가 요청한 URL 경로를 분석하여 적절한 기능을 실행하는 역할

기존 코드를 라우터를 적용하여 리팩토링 해보았다.

index.js는 서버를 실행하는 역할
server.js는 HTTP 서버를 생성하고, 요청을 받을 때 라우터를 호출하는 역할
router.js는 요청된 URL 경로를 출력하는 라우터

[index.js]

//index.js
let server = require("./server");
let router = require("./router");

server.start(router.route);

server.js와 router.js를 가져온다.
server.start(router.route)를 호출해 서버를 실행하고, 라우터를 연결한다.

[server.js]

//server.js
let http = require("http");
let url = require("url");

function start(route) {
  function onRequest(request, response) {
    let pathname = url.parse(request.url).pathname;
    route(pathname);

    response.writeHead(200, { "Content-Type": "text/html" });
    response.write("Hello Node.js");
    response.end();
  }
  http.createServer(onRequest).listen(8888);
}

exports.start = start;

요청이 오면 URL을 분석해 pathname을 추출한 후, 라우터 함수를 호출한다.

[router.js]

//router.js
function route(pathname) {
  console.log(`pathname: ${pathname}`);
}

exports.route = route;

route함수는 요청된 URL 경로를 받아 url을 콘솔에 출력한다.
exports.route=route로 다른 파일에서도 사용할 수 있도록 모듈화한다.

url 요청->서버->라우터->응답의 흐름을 가진다.

라우터 활용 1. url에 따라 다른 콘솔 찍기

라우터를 확장하여 특정 URL 요청에 대해 각각 다른 응답을 줄 수 있다.

[requestHandler.js]
라우터가 각 루트를 분배해서 경로를 알려주면, 경로에 따라 수행해야 하는 작업을 알려준다.

let handle = {}; //key:value
handle["/"] = main;
handle["/login"] = login;

function main() {
  console.log("main");
}

function login() {
  console.log("login");
}

exports.handle = handle;

[server.js]

let http = require("http");
let url = require("url");

function start(route, handle) {
  function onRequest(request, response) {
    let pathname = url.parse(request.url).pathname;

    if (pathname === "/favicon.ico") {
      response.writeHead(204);
      response.end();
      return;
    }
    route(pathname, handle);

    response.writeHead(200, { "Content-Type": "text/html" });
    response.write("Hello Node.js");
    response.end();
  }
  http.createServer(onRequest).listen(8888);
}

exports.start = start;

[router.js]

function route(pathname, handle) {
  console.log(`pathname: ${pathname}`);
  handle[pathname]();
}

exports.route = route;

handle[pathname]()은 자바스크립트의 객체 속성 접근 방식과 함수 호출을 결합한 패턴이다.

객체로서의 handle은 빈 객체로 생성되고, 이 객체는 URL 경로를 key, 해당 경로를 처리할 함수를 value로 지정한다.
router.js에서 handle[pathname]()은 다음 동작을 수행한다.

handle 객체에서 pathname에 해당하는 속성을 찾음
찾은 함수를 즉시 호출

이슈1. 경로 예외처리

TypeError: handle[pathname] is not a function
at route (C:\Users\monic\OneDrive\바탕 화면\programmers\TennisShoppingMall\router.js:3:19)
at Server.onRequest (C:\Users\monic\OneDrive\바탕 화면\programmers\TennisShoppingMall\server.js:13:5)
at Server.emit (node:events:519:28)
at parserOnIncoming (node:_http_server:1140:12)
at HTTPParser.parserOnHeadersComplete (node:_http_common:119:17)

Node.js v20.16.0

이는 브라우저가 자동으로 요청하는 /favicon.ico 경로에 대한 예외 처리가 되지 않아서 발생하는 문제였다.
server.js에서 라우팅 전에, /favicon.ico 요청을 무시하도록 예외처리하여 문제를 해결하였다.

if (pathname === "/favicon.ico") {
response.writeHead(204);
response.end();
return;
}

라우터 활용 2. url에 따라 프론트엔드에 다른 response 보내기

url에 따라 브라우저에 다른 텍스트를 출력하도록 코드를 변경해보았다.

[requestHandler.js]

let handle = {}; //key:value
handle["/"] = main;
handle["/login"] = login;

function main(response) {
  console.log("main");
  response.writeHead(200, { "Content-Type": "text/html" });
  response.write("Main");
  response.end();
}

function login(response) {
  console.log("login");
  response.writeHead(200, { "Content-Type": "text/html" });
  response.write("Login Page");
  response.end();
}

exports.handle = handle;

server.js에 있던 response를 requestHandler로 이동하여, 호출되는 함수에 따라 각각 다른 텍스트를 출력한다.

[router.js]

function route(pathname, handle, response) {
  console.log(`pathname: ${pathname}`);

  if (typeof handle[pathname] === "function") {
    handle[pathname](response);
  } else {
    response.writeHead(404, { "Content-Type": "text/plain" });
    response.write("404 Not found");
    response.end();
  }
}

exports.route = route;

요청 경로에 대한 처리 함수가 존재하지 않는 경우, 404 페이지를 반환하도록 설정하였다. /favicon.ico 처럼 설정되지 않은 경로로 접속 시, 서버가 다운되지 않고 브라우저에 404 Not Found가 표시된다.

이슈2. 한글 깨짐

출력 텍스트를 한글로 설정하면 브라우저에서 깨져 보이는 문제가 있었다.

Content-Type 헤더에 문자 인코딩을 지정하지 않아서 발생하는 문제였다. main 함수와 login 함수에서 Content-Type 헤더에 charset을 추가해 브라우저가 UTF-8인코딩으로 한글을 제대로 출력할 수 있게 했다.

'🕊️프로그래머스 데브코스 > TIL' 카테고리의 다른 글

[데브코스] API와 REST API 제대로 이해하기 (0)	2025.04.05
[데브코스] 데이터베이스 시작하기(🐋Docker, MariaDB, SQL) (0)	2025.04.04
[데브코스] 웹 페이지에 생명 불어넣기(CSS, Javascript) (0)	2025.04.02
[데브코스] 웹 개발을 위한 첫 걸음(웹 구조, HTML) (0)	2025.04.01
[데브코스] Github으로 협업 시작하기(Branch, Pull Request) (1)	2025.03.31

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

[데브코스] Hello, Backend!(서버, HTTP, Node.js)

🧮백엔드의 기본 구조

웹 서버, 웹 어플리케이션 서버, 데이터베이스

실제 어플리케이션에서의 데이터 흐름

🌿Node.js

Node.js의 특징

Node.js로 웹 서버 만들기

📜HTTP 템플릿

HTTP 헤더

HTTP 바디

♻️모듈화

모듈화의 장점

🔗URL uniform resource locator

URL 구조

URL 주소 콘솔 출력하기

🚪라우터

라우터 활용 1. url에 따라 다른 콘솔 찍기

이슈1. 경로 예외처리

라우터 활용 2. url에 따라 프론트엔드에 다른 response 보내기

이슈2. 한글 깨짐

'🕊️프로그래머스 데브코스 > TIL' 카테고리의 다른 글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역