❓ HTTP 상태 코드
- HTTP 상태코드는 서버가 클라이언트(브라우저)의 요청에 대한 응답 상태를 나타내는 3자리 숫자를 말한다. 이 코드를 통해 요청이 성공했는지, 실패했는지, 추가 조치가 필요한지 등을 빠르게 파악할 수 있다. 따라서 서버와 클라이언트 간의 효율적인 커뮤니케이션 수단으로 활용된다.
▶ 기본 사용 예시
fetch('https://api.example.com/data')
.then(response => {
if (response.status === 200) {
return response.json();
} else if (response.status === 404) {
throw new Error('데이터를 찾을 수 없습니다');
} else if (response.status === 500) {
throw new Error('서버 오류가 발생했습니다');
}
})
.then(data => console.log(data))
.catch(error => console.error(error));❗ 사용이유
✅ 효율적인 디버깅
- 상태코드를 통해 문제 발생 시 원인을 빠르게 파악할 수 있다. 개발 과정에서 API 응답을 확인할 때 상태코드만으로도 대략적인 문제 상황을 유추할 수 있어 효율적이다.
✅ 사용자 경험 향상
- 적절한 상태코드를 기반으로 사용자에게 맞춤형 메시지를 제공할 수 있다. 예를 들어, 404 에러 시 "페이지를 찾을 수 없습니다"라는 안내를, 429 에러 시 "잠시 후 다시 시도해주세요"와 같은 메시지를 보여줄 수 있다. 상태 코드에 따라 적절한 UI를 구현하여 이탈률을 줄이고 사용자 경험을 개선할 수 있다.
💠 종류
1️⃣ 1xx (정보)
- 100 Continue: 서버가 요청의 일부를 받았으며 클라이언트가 계속해서 요청을 보내도 된다는 것을 나타낸다.
2️⃣ 2xx (성공)
- 200 OK: 요청이 성공적으로 처리되었음을 의미한다. GET 요청 시 데이터가 성공적으로 반환되었거나, POST 요청 시 데이터가 성공적으로 생성/수정되었을 때 사용된다.
- 201 Created: 새로운 리소스가 성공적으로 생성되었음을 나타낸다.
- 204 No Content: 요청은 성공했지만, 응답 본문에 보낼 내용이 없음을 나타낸다.
3️⃣ 3xx (리다이렉션)
- 301 Moved Permanently: 요청한 리소스가 영구적으로 새로운 URL로 이동했음을 나타낸다.
4️⃣ 4xx (클라이언트 오류)
- 400 Bad Request: 잘못된 요청을 나타낸다.
- 401 Unauthorized: 인증이 필요한 리소스에 인증되지 않은 사용자가 접근했음을 나타낸다.
- 403 Forbidden: 서버가 요청을 거부했음을 나타낸다.
- 404 Not Found: 요청한 리소스를 찾을 수 없음을 나타낸다.
5️⃣ 5xx (서버 오류)
- 500 Internal Server Error: 서버 내부 오류를 나타낸다.
- 502 Bad Gateway: 게이트웨이나 프록시 서버에서 잘못된 응답을 받았음을 나타낸다.
- 503 Service Unavailable: 서버가 일시적으로 과부하 상태이거나 유지보수 중임을 나타낸다.
HTTP 상태코드를 효과적으로 활용하려면 백엔드 개발자와의 소통이 중요하다. API 설계 단계에서 어떤 상황에 어떤 상태코드를 사용할지 명확히 정의하고, 이를 문서화하는 것이 좋다. 또한 Axios나 fetch API를 사용할 때 인터셉터를 활용하여 공통적인 상태코드 처리 로직을 구현하면 코드 중복을 줄이고 유지보수성을 높일 수 있다. 프론트엔드 개발자는 이 상태코드를 이해하고 ui를 적절히 설계함으로써 사용자의 경험을 향상시킬 수 있다.
참고
'Cs' 카테고리의 다른 글
| SSG 파헤치기(+ISR) (3) | 2025.04.14 |
|---|---|
| JWT access Token, 어디에 저장하는 것이 좋을까? (0) | 2025.03.28 |
| 5. 알고리즘 (0) | 2024.11.02 |
| 4. 자료구조 (0) | 2024.10.30 |
| 3. 데이터베이스 (0) | 2024.10.29 |