Colin's Blog
자바스크립트 서버와 클라이언트 간 데이터 교환

웹 개발에서 자바스크립트는 더욱 중요한 역할을 하고 있습니다. 클라이언트 사이드에서 사용자와 상호 작용하고 웹 페이지를 동적으로 제어하는 것 외에도, 서버 사이드에서도 자바스크립트를 사용해 데이터 교환을 할 수 있습니다. 이번 블로그 포스트에서는 자바스크립트를 사용하여 서버와 클라이언트 간 데이터를 교환하는 방법에 대해 알아보겠습니다.

AJAX를 통한 데이터 교환

AJAX(Asynchronous JavaScript and XML)는 자바스크립트를 사용하여 비동기적으로 서버와 데이터를 주고받는 기술입니다. 이를 활용하여 웹 페이지를 새로고침하지 않고도 서버와 데이터를 교환할 수 있습니다.

// 클라이언트 측 자바스크립트 코드
const xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/api/data', true);
xhr.onreadystatechange = function() {
    if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
        const response = JSON.parse(xhr.responseText);
        // 데이터 처리 로직 작성
    }
};
xhr.send();

위 코드는 클라이언트 측에서 AJAX를 사용하여 서버로부터 데이터를 가져오는 예시입니다. XMLHttpRequest 객체를 사용하여 GET 요청을 보내고, 응답을 받았을 때 onreadystatechange 이벤트를 통해 데이터를 처리하고 있습니다.

서버 측에서는 클라이언트로부터 받은 요청에 대한 응답을 보내주어야 합니다. 서버 사이드에서 사용되는 기술에 따라 다양한 방법이 있지만, 자바스크립트를 사용하여 서버를 구축하는 경우에는 Node.js와 Express를 주로 활용합니다.

// 서버 측 자바스크립트 코드 (Node.js와 Express 사용)
const express = require('express');
const app = express();

app.get('/api/data', (req, res) => {
    const data = {
        message: 'Hello, world!'
    };
    res.json(data);
});

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

위 코드는 Node.js와 Express를 사용하여 서버를 구축하는 예시입니다. /api/data 엔드포인트로 GET 요청이 들어오면 JSON 형식의 응답을 보내줍니다.

WebSocket을 통한 실시간 데이터 교환

AJAX는 클라이언트에서 서버로 데이터를 요청하고 응답을 받는 방식이므로, 서버로부터 데이터의 변경 여부를 주기적으로 확인해야 합니다. 실시간으로 데이터를 주고받으려면 WebSocket을 사용하는 것이 더 효과적입니다.

// 클라이언트 측 자바스크립트 코드
const socket = new WebSocket('ws://example.com/ws');

socket.onopen = function() {
    console.log('WebSocket connection open');
};

socket.onmessage = function(event) {
    const data = JSON.parse(event.data);
    // 데이터 처리 로직 작성
};

socket.onclose = function() {
    console.log('WebSocket connection closed');
};

위 코드는 클라이언트 측에서 WebSocket으로 서버와 실시간으로 데이터를 주고받는 예시입니다. WebSocket 객체를 생성하고 onmessage 이벤트를 통해 서버로부터 받은 데이터를 처리하고 있습니다.

서버 측에서는 클라이언트와 연결을 유지하며 데이터를 주고받기 위해 WebSocket 라이브러리를 사용해야 합니다. 자바스크립트 기반의 서버인 Node.js에서는 ws 모듈을 사용할 수 있습니다.

// 서버 측 자바스크립트 코드 (Node.js와 ws 모듈 사용)
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', (ws) => {
    console.log('WebSocket connection open');

    ws.on('message', (data) => {
        // 데이터 처리 로직 작성
        ws.send(data);
    });

    ws.on('close', () => {
        console.log('WebSocket connection closed');
    });
});

위 코드는 Node.js에서 ws 모듈을 사용하여 WebSocket 서버를 구축하는 예시입니다. 클라이언트와의 연결이 이루어지면 connection 이벤트가 발생하고, 연결을 유지하는 동안 message 이벤트로 클라이언트로부터 받은 데이터를 처리하고 있습니다.

결론

자바스크립트를 사용하여 서버와 클라이언트 간 데이터를 교환하는 방법은 다양합니다. AJAX를 통해 비동기적으로 데이터를 주고받는 방식과 WebSocket을 사용하여 실시간으로 데이터를 주고받는 방식이 대표적입니다. 사용하는 기술과 요구사항에 따라 적절한 방법을 선택하여 자바스크립트를 활용한 데이터 교환을 구현해보세요.

© 2018 Colin. All rights reserved.