1. 에러 페이지 만들기

학습 목표

1. HTTP 상태 코드별 에러 페이지 : 각 오류 상황에 맞는 페이지 제공

2. 에러 메시지 표시: 동적으로 오류 내용 전달하기

3. 사용자 경험 개선 : 시스템 오류를 사용자가 이해하기 쉽게 표현

4. 템플릿 재사용: 공통 레이아웃을 활용한 일관된 디자인

 

주요 상태 코드 정의

• 1XX: Informational(정보 제공)

-임시 응답으로 현재 클라이언트의 요청까지는 처리되었으니 계속 진행하라는 의미입니다. HTTP 1.1버전부터 추가되었습니다.

 

• 2XX: Success(성공)

-  클라이언트의 요청이 서버에서 성공적으로 처리되었다는 의미입니다.

• 3XX: Redirection(리다이렉션)

- 완전한 처리를 위해서 추가 동작이 필요한 경우입니다. 주로 서버의 주소 또는 요청한 URI의 웹 문서가 이동되었으니 그 주소로

다시 시도하라는 의미입니다.

• 4XX: Client Error(클라이언트 에러)

-  없는 페이지를 요청하는 등 클라이언트의 요청 메시지 내용이 잘못된 경우를 의미합니다.

• 5XX: Server Error(서버 에러)

- 서버 사정으로 메시지 처리에 문제가 발생한 경우입니다. 서버의 부하,DB 처리 과정 오류, 서버에서 인셉션이 발생하는 경우를 의미합니다.

 

HTTP 상태 코드의 의미

- 400 : 클라이언트의 잘못된 요청

- 401 : 인증이 필요한 상황

- 403 : 인증은 되었지만 권한이 없음

- 404: 요청한 리소스를 찾을 수 없음

- 500: 서버 내부 오류

 

400

{{> layout/header}}

    <div class="container my-3" >
        <h1>BadRequest 400</h1>
        <h4>동적으로 에러메세지 할당{{! msg}}</h4>
    </div>

{{> layout/footer}}

 

401

{{> layout/header}}

    <div class="container my-3" >
        <h1>Unauthorized 401</h1>
        <h4>동적으로 에러메세지 할당{{! msg}}</h4>
    </div>

{{> layout/footer}}

 

403

{{> layout/header}}

    <div class="container my-3" >
        <h1>Forbidden 403</h1>
        <h4>동적으로 에러메세지 할당{{! msg}}</h4>
    </div>

{{> layout/footer}}

 

404

{{> layout/header}}

    <div class="container my-3" >
        <h1>NotFound 404</h1>
        <h4>동적으로 에러메세지 할당{{! msg}}</h4>
    </div>

{{> layout/footer}}

 

500

{{> layout/header}}

    <div class="container my-3" >
        <h1>ServerError 500</h1>
        <h4>동적으로 에러메세지 할당{{! msg}}</h4>
    </div>

{{> layout/footer}}