2024-10-30

CRUD란

CRUD는 데이터 관리를 위해 기본적으로 수행되는 네 가지 기능의 약자로, Create, Read, Update, Delete의 약자를 뜻합니다. 이 네 가지는 보통 HTML, CSS, JavaScript와 같은 프론트엔드와 데이터베이스가 연결된 백엔드에서 자주 사용되는 개념입니다.

1. Create (생성): 데이터를 새로 추가하는 기능입니다. 예를 들어, HTML에서 사용자가 양식을 작성하고 제출하면 새로운 데이터가 데이터베이스에 저장됩니다.

// Firebase와 같은 데이터베이스에 데이터를 추가하는 예제 
const data = { name: "John", age: 30 };
firebase.database().ref('users').push(data);

// jQuery를 사용해 form의 데이터를 서버로 전송
$('#createForm').submit(function(event) {
    event.preventDefault();
    const formData = $(this).serialize();
    $.post('/api/create', formData, function(response) {
        alert('Data created successfully');
    });
});

2. Read (읽기): 저장된 데이터를 읽어와 사용자에게 표시하는 기능입니다. 예를 들어, Firebase나 MySQL과 같은 데이터베이스에서 데이터를 가져와 HTML로 출력하는 방식입니다.

// 데이터를 Firebase에서 읽어오는 예제
firebase.database().ref('users').on('value', (snapshot) => {
    const data = snapshot.val();
    console.log(data);
});

// jQuery를 사용해 서버로부터 데이터 가져오기
$.get('/api/read', function(data) {
    $('#display').html(data);
});

3. Update (수정): 기존 데이터를 수정하는 기능입니다. 특정 데이터를 선택하여 수정할 수 있게 하고, 수정된 데이터를 데이터베이스에 반영하는 과정입니다.

// Firebase에서 특정 데이터 수정
const userId = "user123";
firebase.database().ref('users/' + userId).update({ age: 31 });

// jQuery로 서버에 수정된 데이터 전송
$('#updateForm').submit(function(event) {
    event.preventDefault();
    const formData = $(this).serialize();
    $.ajax({
        url: '/api/update',
        type: 'PUT',
        data: formData,
        success: function(response) {
            alert('Data updated successfully');
        }
    });
});

4. Delete (삭제): 데이터를 삭제하는 기능입니다. 특정 데이터를 선택하고 이를 제거해 데이터베이스에서 삭제하는 과정입니다.

// Firebase에서 데이터 삭제
const userId = "user123";
firebase.database().ref('users/' + userId).remove();

// jQuery를 사용해 데이터 삭제 요청 보내기
$('#deleteButton').click(function() {
    const userId = $(this).data('id');
    $.ajax({
        url: '/api/delete/' + userId,
        type: 'DELETE',
        success: function(response) {
            alert('Data deleted successfully');
        }
    });
});

HTML과 JavaScript, 그리고 Firebase 같은 백엔드 서비스를 사용하여 CRUD 기능을 구현할 수 있습니다. 이를 통해 웹 애플리케이션이 사용자와 상호작용하고, 데이터를 동적으로 처리할 수 있게 합니다.