2024.05.13 FrontEnd & BackEnd

▶ HTTP

웹에서 정보를 주고 받는데 쓰이는 특별한 언어나 규칙이다. HTTP는 사용자가 웹 브라우저를 사용해서 어떤 웹페이지를 열거나, 웹사이트에서 정보를 가져올 때 사용되는데, 여기서 중요한 개념은 클라이언트와 서버다. 클라이언트란 일반적으로 웹사용자를 말한다. 스스로가 웹 브라우저를 사용할 때 바로 그것이 클라이언트 역할을 한다. 서버는 웹사이트가 있는 컴퓨터를 의미하며, 클라이언트의 요청에 응답하는 역할을 한다.

넘어가 HTTP는 클라이언트와 서버 간에 정보를 주고 받을 때 사용되는 프로토콜이다. 프로토콜은 간단히 말해 어떻게 통신할지에 대한 규칙이다. HTTP는 클라이언트가 서버에게 요청을 보내는 방법과, 서버가 클라이언트에게 정보를 보내는 방법을 정의하고 있다.

이러한 요청과 응답은 주로 텍스트 기반으로 이루어진다. 예를 들어, 본인이 웹 브라우저에서 웹페이지를 열면, 브라우저는 해당 웹사이트의 서버에게 페이지를 요청하는 HTTP 요청을 보내고, 서버는 그 요청을 받아들여 해당하는 웹페이지를 HTML 형식으로 보내주는데, 이것이 HTTP 응답이다. 그러면 브라우저는 받은 HTML을 해석해서 네가 보는 웹페이지를 만들어내게 되는 것이다. 

(render, redirect, post request, 응답없음 등을 받으면 연결은 바로 끊긴다.)

 

 

▶ 미들웨어

중간에서 데이터나 정보가 흐르는데, 그 흐름을 관리하고 도와주는 역할을 수행한다.

이해를 돕기 위한 예시로,  본인이 편지를 쓰고 우체국에 보내는 상황을 생각하면 된다. 편지를 쓸 때, 종이에 내용을 적고, 봉투에 주소를 적는다. 그리고 우체국에 가서 우편물을 보내면, 우체국에서는 받는 사람의 주소를 보고 어디로 보낼지 결정하고, 우편 배달을 처리하는데, 이때 우체국이라는 것이 미들웨어의 역할이다.

컴퓨터 프로그램에서도 이런 역할을 하는 미들웨어가 있는 것이다. 예를 들어, 웹 개발에서는 클라이언트(웹 브라우저)와 서버 간의 통신을 관리하고, 데이터베이스와의 상호작용을 도와주는 미들웨어를 사용한다. 이것들은 프로그램의 여러 부분을 연결하고, 정보가 원활하게 이동하도록 해주는 역할을 한다.

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

// 미들웨어 함수 정의
function loggerMiddleware(req, res, next) {
    console.log(`[${new Date().toISOString()}] ${req.method} ${req.url}`);
    next(); // 다음 미들웨어로 요청을 전달
}

// 미들웨어 함수를 Express 앱에 등록
app.use(loggerMiddleware);

// 라우트 핸들러 정의
app.get('/', (req, res) => {
    res.send('안녕하세요!');
});

// 서버 시작
const port = 3000;
app.listen(port, () => {
    console.log(`서버가 http://localhost:${port} 에서 실행 중입니다.`);
});

위 코드는 Node.js와 Express 프레임워크를 사용한 간단한 미들웨어 예시이다. loggerMiddleware 함수는 요청이 들어올 때마다 실행되며, 현재 시간과 요청된 HTTP 메서드와 URL을 로그에 출력한다. 그리고 next()를 호출하여 요청을 다음 미들웨어로 전달한다. 이렇게 만든 미들웨어를 Express 애플리케이션에 등록하면, 해당 애플리케이션에 들어오는 모든 요청에 대해 로그를 기록할 수 있다.

 

 

▶ 쿠키와 세션

쿠키는 웹 브라우저에 저장되는 작은 데이터 조각이다. 이 데이터는 클라이언트 컴퓨터에 저장되어 있어서, 클라이언트가 서버에 다시 요청을 보낼 때마다 함께 전송된다. 이를 통해 웹사이트는 클라이언트의 정보를 기억하고, 로그인 상태를 유지하거나 사용자 설정을 저장할 수 있다.

세션은 서버 측에서 상태를 유지하는 방법이다. 클라이언트가 서버에 접속할 때 서버는 클라이언트에게 고유한 세션 식별자를 부여한다. 이 식별자는 클라이언트가 요청을 보낼 때마다 함께 전송된다. 서버는 이 식별자를 사용하여 클라이언트의 상태를 추적하고 유지한다. 아래는  Express를 사용한 간단한 예시다.

const express = require('express');
const cookieParser = require('cookie-parser');
const session = require('express-session');

const app = express();

app.use(cookieParser());
app.use(session({
    secret: 'mySecret', // 세션 암호화에 사용되는 비밀키
    resave: false,
    saveUninitialized: true
}));

// 루트 경로에 대한 요청 처리
app.get('/', (req, res) => {
    // 세션에 방문 횟수 정보를 저장
    if (req.session.views) {
        req.session.views++;
    } else {
        req.session.views = 1;
    }

    // 쿠키에 사용자 이름을 저장
    res.cookie('username', 'John', { maxAge: 900000, httpOnly: true });

    res.send(`방문 횟수: ${req.session.views}`);
});

// 서버 시작
const port = 3000;
app.listen(port, () => {
    console.log(`서버가 http://localhost:${port} 에서 실행 중입니다.`);
});