[javascript] Parcel에서 에러 페이지를 구현하는 방법은?

22 Nov 2023

javascript

src 폴더 내에 index.html 파일을 생성합니다.
index.html 파일에 에러 페이지를 위한 마크업을 작성합니다. 예를 들면:

<!DOCTYPE html>
<html>
<head>
  <title>Error Page</title>
  <link rel="stylesheet" href="error.css">
</head>
<body>
  <h1>An error occurred</h1>
  <p>Sorry, something went wrong.</p>
</body>
</html>

src 폴더 내에 error.css 파일을 생성합니다. 이 파일은 에러 페이지의 스타일을 정의합니다.
프로젝트 루트 폴더에 .parcelrc 파일을 생성하고, 다음 내용을 추가합니다:

{
  "extends": "@parcel/config-default",
  "transforms": {
    "parcel-plugin-error-page": {
      "path": "./src/index.html"
    }
  }
}

터미널에서 npm install --save-dev parcel-plugin-error-page 명령을 실행하여 parcel-plugin-error-page 플러그인을 프로젝트에 설치합니다.
이제 애플리케이션을 빌드할 때, 에러가 발생하면 자동으로 구현한 에러 페이지로 리디렉션됩니다.

더 자세한 사용법과 설정 방법은 Parcel 공식 문서를 참고하시기 바랍니다.