이전에는 XMLHttpRequest(XHR) 명령을 사용해서 불편했는데 이제 서버와의 통신을 ajax나 jquery 없이 fetch() 라는 명령어로 쉽게 사용할 수 있다.
fetch
브라우저에서 서버로 데이터를 주고받는 비동기 통신 기능(라이브러리 없이 순수 JS로 작동하는 최신 방식).
CRUD
데이터를 생성·조회·수정·삭제하는 서버·DB의 기본 동작 구조.
fetch 기반 서버 통신과 실전 CRUD 패턴 정리
과거에는 $.ajax에 의존해 서버와 통신했지만, 이제는 fetch가 모든 기능을 안정적으로 제공한다. 코드가 간결하고 확장성이 높으며, 별도 라이브러리 없이 사용 가능하다는 점에서 현재 웹 개발 흐름에 완전히 부합한다. 특히 PHP와 함께 사용하는 경우 구조가 더 단순해진다.
1. 기본 GET 요청
서버에서 데이터를 가져오는 가장 단순한 형태의 fetch 요청이다.
fetch('/data/list.php')
.then(res => res.json())
.then(data => {
console.log(data);
});
- 게시글 목록
- 알림 개수
- 환경설정 상태 조회
2. 기본 POST 요청
서버에 데이터를 보내야 하는 상황에서 가장 많이 사용하는 패턴이다.
fetch('/api/save.php', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ id: 1, title: 'sample' })
})
.then(res => res.text())
.then(result => {
console.log(result);
});
PHP에서는 다음처럼 받는다.
$raw = file_get_contents('php://input');
$data = json_decode($raw, true);
3. JSON 응답 처리
대부분의 API는 JSON 전달을 기본으로 삼는다. res.json()을 사용하여 객체 형태로 바로 사용할 수 있다.
fetch('/api/info.php')
.then(res => res.json())
.then(json => {
console.log(json.user);
});
4. 오류 처리
통신 실패나 서버 오류를 대비해 예외 처리가 필요하다. fetch는 네트워크 오류만 catch로 감지되므로 상태 체크가 중요하다.
fetch('/api/check.php')
.then(res => {
if (!res.ok) throw new Error('Server Error');
return res.json();
})
.then(data => console.log(data))
.catch(err => console.error(err));
5. PHP와 연동되는 실전 토글 버튼
UI 요소 클릭 → fetch 요청 → 결과 반영까지 실제 웹사이트에서 가장 자주 사용하는 패턴이다.
// JS
btn.addEventListener('click', () => {
const next = btn.dataset.state === '1' ? '0' : '1';
fetch(`/api/toggle.php?nm=${btn.dataset.nm}&val=${next}`)
.then(res => res.text())
.then(() => {
btn.dataset.state = next;
btn.classList.toggle('active');
});
});
6. 폼 데이터 전송 (multipart)
이미지 업로드나 파일 처리에는 FormData를 사용한다. JSON보다 유연하며 PHP의 $_FILES 처리와 자연스럽게 연결된다.
const fd = new FormData();
fd.append('title', 'sample');
fd.append('file', fileInput.files[0]);
fetch('/api/upload.php', {
method: 'POST',
body: fd
});
7. 실전 CRUD 패턴
게시글이나 데이터 관리 화면에서 자주 사용하는 서버 통신 패턴이다.
- 목록 조회: GET
- 상세 조회: GET + id
- 저장: POST(JSON)
- 삭제: POST(JSON)
예시: 삭제 요청
fetch('/api/delete.php', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ nm: 12 })
})
.then(res => res.text())
.then(result => {
if (result === 'OK') item.remove();
});
8. fetch를 사용하면 얻는 장점
fetch는 간결하고 일관된 API를 제공하며, 브라우저 환경에서도 성능이 뛰어나다. 특히 jQuery Ajax보다 코드 길이가 짧고 직관적이기 때문에 유지보수가 훨씬 편해진다.
- 추가 라이브러리 없이 사용 가능
- JSON 기반 처리 최적화
- 비동기 제어가 단순
- PHP와 자연스럽게 동작
이로써 jQuery Ajax가 사라지고 fetch가 웹 개발의 기본 도구가 된 이유를 명확하게 이해할 수 있다.
이번 5편을 끝으로 기본 시리즈는 완성된다. 필요하다면 심화편으로 코드 구조화, 모듈 설계, 실제 UI 컴포넌트 제작 등을 이어갈 수 있다.
