웹사이트에 서버 연결하는 방법: API로 브라우저와 서버 연결하기

웹사이트를 만들다 보면 브라우저에서 처리하는 것만으로는 해결하기 어려운 기능이 생깁니다.

사용자가 입력한 데이터를 저장하거나, 여러 사용자가 같은 데이터를 확인하거나, 로그인한 사용자의 정보를 불러오는 기능을 만들려면 데이터를 처리할 서버가 필요합니다.

문제는 서버를 추가한다고 해서 웹사이트 전체를 서버에서 동작시켜야 하는 것은 아니라는 점입니다. 필요한 기능에서만 서버를 거치도록 구조를 나눌 수 있고, 서버와 데이터베이스를 연결한 뒤 API를 통해 브라우저와 데이터를 주고받을 수도 있습니다.

저도 웹사이트와 웹게임을 개발하면서 브라우저에서만 처리하던 기능에 서버를 연결해야 하는 경우가 생겼고, 그 과정에서 브라우저와 서버가 어떻게 연결되어 데이터를 주고받는지 직접 구현하며 익힐 수 있었습니다.

이번 글에서는 웹사이트에 서버를 연결하면 어떤 구조로 동작하는지, 그리고 브라우저에서 보낸 요청을 서버가 어떻게 받아 처리하고 다시 결과를 전달하는지 실제 코드를 통해 알아보겠습니다.

🖥️ 웹사이트의 서버 구조는 어떻게 구성될까?

웹사이트의 모든 기능이 서버에서 실행되어야 하는 것은 아닙니다.

화면을 표시하고 사용자의 클릭을 처리하거나 현재 페이지에서 필요한 계산을 수행하는 작업은 브라우저에서 처리할 수 있습니다. 반면 페이지를 닫은 뒤에도 데이터를 보관하거나 여러 사용자가 같은 데이터를 사용해야 한다면 별도의 서버와 데이터 저장 공간이 필요합니다.

서버가 필요한 기능을 판단하는 기준은 이전 게시글인 🔗웹사이트에서 서버가 필요한 기능 구분하기에서 자세히 다뤘습니다.

그렇다면 서버가 필요한 기능을 웹사이트에 추가할 때는 어떤 구조로 연결해야 할까요? 먼저 브라우저와 서버가 어떻게 데이터를 주고받는지 이해할 필요가 있습니다.

웹사이트에서 데이터를 저장하거나 조회해야 할 때는 브라우저가 데이터베이스에 직접 접근하지 않습니다. 브라우저가 API로 요청을 보내면 서버 측 코드가 요청을 처리하고, 필요한 경우 데이터베이스에 데이터를 저장하거나 조회합니다. 처리된 결과는 다시 API를 통해 브라우저로 전달됩니다.

즉, 브라우저 → API → 서버 측 코드 → 데이터베이스의 흐름으로 데이터가 처리되고, 결과는 다시 브라우저로 전달되는 구조가 필요합니다.

🌐 브라우저와 서버는 API로 연결한다

앞에서 브라우저, API, 서버, 데이터베이스가 각각 어떤 역할을 하는지 살펴봤습니다. 실제로 웹사이트에 서버 기능을 연결하려면 브라우저에서 실행되는 코드와 서버 측 코드가 서로 데이터를 주고받을 수 있도록 연결해야 합니다.

이때 브라우저와 서버 사이의 연결을 담당하는 것이 API입니다. 브라우저에서 특정 작업을 서버에 요청하면 API를 통해 서버 측 코드가 요청을 전달받고, 처리 결과를 다시 브라우저에 전달합니다.

예를 들어 사용자가 입력한 데이터를 서버로 보내야 한다면 브라우저의 JavaScript가 API에 데이터를 전달하고, 서버 측 코드가 해당 요청을 처리합니다. 반대로 서버에서 데이터를 가져와야 한다면 브라우저가 API를 통해 데이터를 요청하고, 서버가 필요한 결과를 다시 전달합니다.

브라우저와 서버가 데이터를 주고받을 때는 무엇을 하려는지에 따라 요청하는 방식이 달라집니다. 웹사이트에서는 주로 GET과 POST를 사용합니다.

GET은 서버에 데이터를 요청할 때 사용하는 방식입니다. 예를 들어 저장된 게시글이나 사용자 목록처럼 서버에 있는 데이터를 가져올 때 사용합니다.

POST는 서버에 새로운 데이터를 전달하거나 특정 작업을 요청할 때 사용하는 방식입니다. 예를 들어 사용자가 작성한 댓글이나 게임 점수를 서버로 보내 저장할 때 사용할 수 있습니다.

따라서 같은 API 주소라도 어떤 방식으로 요청하느냐에 따라 서버에서 다른 작업을 처리하도록 만들 수 있습니다. GET 요청이 들어오면 데이터를 응답하고, POST 요청이 들어오면 전달받은 데이터를 처리하는 식입니다.

이제 이러한 요청이 실제 코드에서 어떻게 연결되는지 살펴보겠습니다.

⚙️ API는 실제 코드에서 어떻게 연결할까?

API를 실제로 연결하려면 브라우저에서 요청을 보내는 코드와 그 요청을 처리하는 서버 측 코드를 작성해야 합니다.

이 글에서는 실제 개발에 사용한 Cloudflare Pages Functions 환경을 기준으로 브라우저 코드와 서버 측 코드가 API를 통해 연결되는 과정을 살펴보겠습니다. 설명에 사용하는 파일명과 폴더 구조는 이해하기 쉽도록 단순화해 다음과 같이 구성하겠습니다.

my-website/
├─ index.html
├─ app.js
└─ functions/
   └─ api/
      └─ data.js

index.html은 웹페이지를 구성하는 파일이고, app.js는 브라우저에서 실행되는 JavaScript 파일입니다.

functions/api/data.js는 서버에서 API 요청을 처리하는 코드가 들어가는 파일입니다. 이 구조에서는 파일 경로에 따라 /api/data라는 API 주소가 만들어지고, data.js에서 해당 요청을 처리하게 됩니다.

실제 프로젝트에서는 자신의 파일명과 폴더 구조에 맞춰 각 코드를 해당 파일에 작성하면 됩니다. 예제에 사용된 app.js, data.js, /api/data 역시 자신의 프로젝트 구조와 기능에 맞게 변경해서 사용할 수 있습니다.

📤 POST 요청으로 데이터 보내기

먼저 브라우저에서 서버로 데이터를 보내는 경우입니다.

브라우저에서 실행되는 app.js 파일에 서버로 데이터를 보내는 POST 요청을 작성합니다.

const response = await fetch('/api/data', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({
        name: 'Pixoas',
        value: 100
    })
});

fetch()는 지정한 주소로 HTTP 요청을 보내는 JavaScript 기능입니다.

여기서는 /api/data로 POST 요청을 보내고 있습니다. body에는 서버에서 처리할 데이터를 JSON 형태로 담았습니다.

이렇게 브라우저에서 요청을 보내면 서버에서는 /api/data의 POST 요청을 처리할 코드가 실행됩니다. 이 코드는 앞서 설명한 functions/api/data.js 파일에 작성합니다.

export async function onRequestPost(context) {
    const body = await context.request.json();

    console.log(body.name);
    console.log(body.value);

    return new Response(
        JSON.stringify({ success: true }),
        {
            headers: {
                'Content-Type': 'application/json'
            }
        }
    );
}

onRequestPost()는 POST 요청이 들어왔을 때 실행되는 서버 측 함수입니다.

context.request.json()을 사용하면 브라우저에서 body에 담아 보낸 JSON 데이터를 서버 측에서 가져올 수 있습니다. 여기서는 전달받은 name과 value를 확인한 뒤, success: true라는 결과를 JSON으로 다시 브라우저에 응답하고 있습니다.

따라서 app.js에서 /api/data로 POST 요청을 보내면 data.js의 onRequestPost()가 요청을 처리하고, 처리 결과가 다시 브라우저로 전달됩니다.

📥 GET 요청으로 데이터 가져오기

서버에 데이터를 가져올 때는 GET 요청을 사용할 수 있습니다.

이번에는 app.js 파일에서 서버에 데이터를 요청하는 코드를 작성합니다.

const response = await fetch('/api/data');
const data = await response.json();

console.log(data);

이번에는 데이터를 서버로 보내지 않고 /api/data에 데이터를 요청합니다.

서버 측에서는 onRequestGet()을 사용해 GET 요청을 처리할 수 있습니다. 이 코드는 앞서 사용한 functions/api/data.js 파일에 작성합니다.

export async function onRequestGet(context) {
    const data = {
        name: 'Pixoas',
        value: 100
    };

    return new Response(
        JSON.stringify(data),
        {
            headers: {
                'Content-Type': 'application/json'
            }
        }
    );
}

onRequestGet()은 GET 요청이 들어왔을 때 실행되는 서버 측 함수입니다.

서버는 data 객체를 JSON으로 변환해 브라우저에 응답하고, 브라우저에서는 response.json()을 사용해 전달받은 데이터를 사용할 수 있습니다.

지금까지 살펴본 내용을 정리하면, 브라우저에서 서버로 데이터를 전달할 때는 POST 요청을 사용하고, 서버에서 데이터를 받아올 때는 GET 요청을 사용할 수 있습니다. 브라우저의 JavaScript는 API를 통해 서버 측 코드에 요청을 보내고, 서버는 요청에 따라 필요한 데이터를 처리한 뒤 그 결과를 다시 브라우저에 전달합니다.

이 구조만으로도 브라우저와 서버가 데이터를 주고받는 API 통신은 구현할 수 있습니다. 다만 아직까지는 서버가 전달받은 데이터를 별도로 저장하지 않기 때문에, 서버에서 처리한 결과는 해당 요청에 대한 응답으로만 전달됩니다. 데이터를 계속 보관하거나 나중에 다시 조회하려면 데이터를 별도로 저장할 공간이 필요합니다.

🧭 API 연결 다음에는 무엇이 필요할까?

이번 글에서는 브라우저와 서버가 API를 통해 데이터를 주고받는 구조를 살펴보고, 이를 실제 코드로 연결하는 방법까지 구현해봤습니다.

하지만 아직까지는 서버가 별도로 데이터를 저장하지는 않습니다. 사용자가 보낸 데이터를 계속 보관하거나 나중에 다시 조회하려면 서버 측 코드에서 데이터베이스와 연결하고, 전달받은 데이터를 저장하거나 필요한 데이터를 조회하는 과정이 추가로 필요합니다.

다음 글에서는 이번 글에서 연결한 API에 데이터베이스를 연결하고, 데이터를 실제로 저장하고 조회하는 과정까지 구현해보겠습니다.