404 Not Found & 403 Forbidden 페이지 작업
404 Not Found와 403 Forbidden은 웹 페이지 접속 시 꽤 흔하게 볼 수 있는 오류다.
404는 HTTP에서 파일을 찾지 못했을 때 나오는 오류 코드다. 404 오류는 서버를 찾지 못함을 의미하는 것이 아니라 서버는 찾았으나 해당 서버 내에서 파일을 찾지 못했을 때 리턴한다.
HTTP 오류 코드 중에서 가장 자주 보이는 코드이기 때문에 404 Not Found 페이지의 디자인에 공을 들이는 경우가 많다. 디자인 대회까지 열었을 정도라고 한다. 당장 구글에 '404 Not Found Design'이라고 검색하면 수천가지의 세련되고 독특한 디자인이 나온다.
403은 작동중인 서버에 클라이언트의 요청이 도달했으나, 서버가 클라이언트의 접근을 거부할 때 반환하는 HTTP 응답 코드이자 오류 코드이다.
이 에러는 서버 자체 또는 서버에 있는 파일에 접근할 권한이 없을 경우에 발생한다. 서버에는 외부 접근을 제어하기 위한 수많은 권한 설정이 있고, 서버에서 설정해 둔 권한과 맞지 않는 접속 요청이 들어오면 접근을 거부하고 접근거부 코드를 반환하는데, 이때 뜨는 것이 바로 403 Forbidden 에러다.
오류가 발생하면 열심히 만든 페이지 디자인이 사라지고 위와 같은 원시적인 디자인이 나오기 때문에 웹 페이지의 완성도를 높이기 위해 두 개의 컴포넌트를 추가로 만들었다. 404 페이지는 라우터에 지정되지 않은 url로 접속했을 때, 403페이지는 로그인이 필요한 페이지에 로그인 없이 접속했을 때 보이도록 했다.
<Routes>
// 로그인이 필요하지 않은 페이지
<Route path="/" element={<DashBoard />} />
...
// 로그인이 필요한 페이지
<Route path="/register" element={login ? <RegisterPage /> : <NotAuthorized />} />
...
// 404 처리
<Route path="/*" element={<NotFound />} />
</Routes>
따로 디자인 하기에는 내 미적 감각이... 조금 부족해서 antd에서 제공하는 컴포넌트를 가져왔다.
