6.1 CRUD 소개
CRUD는 데이터에 대해 수행할 수 있는 네 가지 기본 작업의 머리글자를 딴 것입니다: 생성 (Create), 읽기 (Read), 업데이트 (Update) 및 삭제 (Delete). 이러한 작업은 데이터베이스 작업의 기본이며 대부분의 웹 애플리케이션의 기반입니다.
CRUD란?
- Create (생성): 생성 작업은 데이터베이스에 새로운 레코드를 추가하는 데 사용됩니다. 시스템에 새로운 데이터를 입력할 수 있습니다.
- Read (읽기): 읽기 작업은 데이터베이스에서 데이터를 꺼내는 데 사용됩니다. 사용자가 기존 정보를 조회하고 볼 수 있게 합니다.
- Update (업데이트): 업데이트 작업은 데이터베이스의 기존 레코드를 수정하는 데 사용됩니다. 데이터를 편집하고 수정할 수 있습니다.
- Delete (삭제): 삭제 작업은 데이터베이스에서 레코드를 삭제하는 데 사용됩니다. 불필요하거나 오래된 데이터를 삭제할 수 있습니다.
CRUD 작업을 위한 HTTP 메서드
웹 개발 맥락에서 CRUD 작업은 종종 API에 대한 HTTP 요청을 사용하여 수행됩니다. 다양한 HTTP 메서드는 다양한 CRUD 작업에 해당합니다:
- POST: 새로운 리소스를 생성하는 데 사용됩니다.
- GET: 리소스를 읽는 데 사용됩니다.
- PUT 및 PATCH: 기존 리소스를 업데이트하는 데 사용됩니다. PUT은 주로 리소스를 완전히 대체하는 데 쓰이고, PATCH는 부분 업데이트에 사용됩니다.
- DELETE: 리소스를 삭제하는 데 사용됩니다.
왜 CRUD 작업이 필요한가요?
CRUD 작업은 웹 애플리케이션에서 데이터 작업의 기초입니다. 사용자 계정 생성, 프로필 편집, 데이터 보기 및 레코드 삭제와 같은 기본 기능을 구현할 수 있게 합니다. 또한 클라이언트와 서버 간의 상호작용을 제공하여 데이터를 전송하고 명령을 전달할 수 있게 합니다.
CRUD 작업을 수행하기 위한 현대적 도구들
현대 웹 애플리케이션은 종종 API를 통해 CRUD 작업을 수행하기 위해 다양한 도구와 라이브러리를 사용합니다:
- Fetch API: 브라우저 내장 HTTP 요청 수행 방식으로, promise 기반입니다.
- Axios: 확장된 편리한 API를 제공하는 인기 있는 HTTP 요청 라이브러리입니다.
이러한 도구들은 개발자가 다양한 백엔드 API와의 간단한 통합을 제공하며, CRUD 작업을 쉽게 수행할 수 있게 도와줍니다.
6.2 Fetch 사용하기
Fetch를 사용하여 CRUD 작업을 수행하는 방법을 살펴봅시다.
생성 (Create):
JavaScript
const createData = async (data) => {
const response = await fetch('https://jsonplaceholder.typicode.com/posts', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
});
const result = await response.json();
console.log('Created:', result);
};
createData({ title: 'foo', body: 'bar', userId: 1 });
읽기 (Read):
JavaScript
const readData = async (id) => {
const response = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`);
const result = await response.json();
console.log('Read:', result);
};
readData(1);
업데이트 (Update):
JavaScript
const updateData = async (id, data) => {
const response = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`, {
method: 'PUT',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
});
const result = await response.json();
console.log('Updated:', result);
};
updateData(1, { title: 'foo', body: 'bar', userId: 1 });
삭제 (Delete):
JavaScript
const deleteData = async (id) => {
const response = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`, {
method: 'DELETE'
});
if (response.ok) {
console.log('Deleted:', id);
} else {
console.error('Failed to delete:', id);
}
};
deleteData(1);
6.3 Axios 사용하기
Axios를 사용하여 CRUD 작업을 수행하는 방법을 살펴봅시다.
생성 (Create):
JavaScript
const axios = require('axios');
const createData = async (data) => {
try {
const response = await axios.post('https://jsonplaceholder.typicode.com/posts', data);
console.log('Created:', response.data);
} catch (error) {
console.error('Error creating data:', error);
}
};
createData({ title: 'foo', body: 'bar', userId: 1 });
읽기 (Read):
JavaScript
const readData = async (id) => {
try {
const response = await axios.get(`https://jsonplaceholder.typicode.com/posts/${id}`);
console.log('Read:', response.data);
} catch (error) {
console.error('Error reading data:', error);
}
};
readData(1);
업데이트 (Update):
JavaScript
const updateData = async (id, data) => {
try {
const response = await axios.put(`https://jsonplaceholder.typicode.com/posts/${id}`, data);
console.log('Updated:', response.data);
} catch (error) {
console.error('Error updating data:', error);
}
};
updateData(1, { title: 'foo', body: 'bar', userId: 1 });
삭제 (Delete):
JavaScript
const deleteData = async (id) => {
try {
const response = await axios.delete(`https://jsonplaceholder.typicode.com/posts/${id}`);
if (response.status === 200) {
console.log('Deleted:', id);
}
} catch (error) {
console.error('Error deleting data:', error);
}
};
deleteData(1);
6.4 CRUD 사용 팁
API를 통해 CRUD 작업을 수행할 때의 팁:
- 에러 처리: HTTP 요청을 수행할 때 발생할 수 있는 에러를 항상 처리하세요.
try...catch블록이나catch메서드를 사용하여 에러를 처리하세요. - 데이터 검증: 서버에 데이터를 보내기 전에 데이터가 예상 형식에 부합하는지 확인하세요.
- 인증 및 권한 부여: 보호된 리소스를 사용할 때는 요청 헤더에 액세스 토큰을 추가하는 등 인증 및 권한 부여를 올바르게 처리하는지 확인하세요.
- 페이징 및 필터링: 대량의 데이터를 가져올 때는 쿼리 파라미터를 사용하여 페이징 및 필터링을 수행하세요.
- 캐싱: 자주 요청하는 데이터는 캐싱하여 성능을 향상시킬 수 있습니다.
GO TO FULL VERSION