서버와 클라이언트 간 데이터 전송

1. 도입 (왜 배워야 하는가)

웹 개발에서 클라이언트와 서버 간의 데이터 전송은 필수적인 요소입니다. 클라이언트(사용자의 브라우저)는 서버(웹 애플리케이션)로부터 데이터를 요청하고, 서버는 요청에 따라 데이터를 응답합니다. 이 과정이 원활하게 이루어지지 않으면 사용자 경험이 저하되고, 데이터의 일관성이 깨질 수 있습니다. 예를 들어, 쇼핑몰에서 사용자가 장바구니에 상품을 추가할 때, 이 정보가 서버에 제대로 전달되지 않으면 사용자는 장바구니에 무엇이 담겼는지 알 수 없게 됩니다. 따라서 이 토픽을 이해하고 활용하는 것은 현대 웹 애플리케이션 개발에 있어 매우 중요합니다.

2. 핵심 개념 설명

2.1 클라이언트

클라이언트는 사용자가 웹 페이지를 요청하는 주체입니다. 예를 들어, 웹 브라우저는 클라이언트 역할을 하며, 사용자가 입력한 정보를 서버에 요청합니다.

2.2 서버

서버는 클라이언트의 요청을 처리하고 데이터(HTML, JSON, 이미지 등)를 제공합니다. 서버는 클라이언트의 요청에 따라 적절한 응답을 반환해야 합니다.

2.3 HTTP 요청과 응답

HTTP(Hypertext Transfer Protocol)는 클라이언트와 서버 간의 통신을 위한 프로토콜입니다. 클라이언트는 서버에 요청을 보내고, 서버는 이에 대한 응답을 반환합니다.

3. 기본 코드 예제

가장 기본적인 클라이언트와 서버 간의 데이터 전송 예제를 보겠습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>데이터 전송 예제</title>
</head>
<body>
    <h1>서버와 데이터 전송</h1>
    <form id="dataForm">
        <label for="username">사용자 이름:</label>
        <input type="text" id="username" name="username" required>
        <button type="submit">전송</button>
    </form>
    <script>
        document.getElementById('dataForm').addEventListener('submit', function(event) {
            event.preventDefault(); // 폼 제출 기본 동작 방지
            const username = document.getElementById('username').value; // 입력된 사용자 이름 가져오기

            // AJAX 요청으로 데이터 전송
            fetch('https://example.com/api/submit', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json' // 데이터 형식 설정
                },
                body: JSON.stringify({ username: username }) // JSON 형태로 데이터 변환
            })
            .then(response => response.json()) // 응답을 JSON으로 변환
            .then(data => console.log(data)) // 데이터 출력
            .catch(error => console.error('Error:', error)); // 에러 처리
        });
    </script>
</body>
</html>

실행 결과

사용자가 입력한 사용자 이름이 서버로 전송됩니다. 서버는 이를 처리하고 응답을 반환합니다.

코드 동작 설명

1. <form> 요소가 제출되면 submit 이벤트가 발생합니다.
2. event.preventDefault()로 기본 폼 제출 동작을 방지합니다.
3. 사용자가 입력한 값을 가져옵니다.
4. fetch 함수를 사용하여 서버에 POST 요청을 보냅니다.
5. Content-Type 헤더를 설정하여 데이터 형식을 지정합니다.
6. 입력된 사용자 이름을 JSON 형태로 변환하여 요청 본문에 추가합니다.
7. 서버의 응답을 JSON으로 변환하고 콘솔에 출력합니다.
8. 오류가 발생할 경우 콘솔에 오류 메시지를 출력합니다.

4. 실전 활용 예제

4.1 쇼핑몰에서 장바구니 기능 구현

사용자가 상품을 장바구니에 추가할 때, 아래와 같은 방식으로 서버에 데이터를 전송할 수 있습니다.

<!-- 장바구니 추가 버튼 -->
<button id="addToCart" data-product-id="123">장바구니에 추가</button>

<script>
    document.getElementById('addToCart').addEventListener('click', function() {
        const productId = this.getAttribute('data-product-id');

        fetch('https://example.com/api/cart', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ productId: productId })
        })
        .then(response => response.json())
        .then(data => console.log(data))
        .catch(error => console.error('Error:', error));
    });
</script>

4.2 사용자 로그인 기능 구현

사용자가 로그인할 때 서버에 로그인 정보를 전송하는 예제입니다.

<form id="loginForm">
    <input type="text" name="username" placeholder="사용자 이름" required>
    <input type="password" name="password" placeholder="비밀번호" required>
    <button type="submit">로그인</button>
</form>

<script>
    document.getElementById('loginForm').addEventListener('submit', function(event) {
        event.preventDefault();
        const formData = new FormData(this);

        fetch('https://example.com/api/login', {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => console.log(data))
        .catch(error => console.error('Error:', error));
    });
</script>

5. 흔한 실수와 주의사항

5.1 잘못된 데이터 형식

잘못된 코드:

body: 'username=' + username // 잘못된 형식

올바른 코드:

body: JSON.stringify({ username: username }) // 올바른 JSON 형식

• 주의사항: 서버가 JSON 형식을 요구할 경우, 문자열로 전달하면 오류가 발생합니다.

5.2 CORS 문제

서버와 클라이언트가 다른 도메인에 있을 경우 Cross-Origin Resource Sharing(CORS) 문제가 발생할 수 있습니다. 서버에서 적절한 CORS 설정이 필요합니다.

5.3 비동기 처리 문제

비동기 요청을 처리할 때, 콜백의 순서가 예상과 달라질 수 있습니다. Promise를 사용하여 순서를 보장하는 것이 좋습니다.

6. 정리

• 클라이언트와 서버 간의 데이터 전송은 웹 개발의 핵심 요소입니다.
• HTTP 요청 및 응답의 구조를 이해하고, AJAX를 통해 비동기 처리를 활용할 수 있습니다.
• 서버와의 데이터 통신에서 JSON 형식을 사용하는 것이 표준입니다.

다음에 학습하면 좋은 주제

• RESTful API 설계 및 활용
• AJAX와 Fetch API의 심화
• WebSocket을 통한 실시간 데이터 통신