[Front-End] Netlify build 에러 해결하기

'Netlify와 Github로 React 프로젝트 배포' 바로가기

 

이전에 포스팅했던 글에 이어서, build 하면서 생겼던 에러와 해결 방법에 대해 써보도록 하겠당.

에러는 Builds → Go to deploy details → Deploy log에서 자세히 확인 가능하다.

 

---

 

발생한 에러

1. babel-preset-react-app 경고

@babel/plugin-proposal-private-property-in-object 패키지를 종속성 선언 없이 가져와서 발생하는 문제.

아래 코드 실행 후, 해결

npm install @babel/plugin-proposal-private-property-in-object --save-dev

 

✨참고 : 

babel-preset-react-app, is importing the "@babel/plugin-proposal-private-property-in-object" package without declaring it in its

 

 

2. eslint 오류

eslint 오류들

2.1 "Link" is defined but never used ("링크"가 정의되었지만 사용되지 않음)

사용하지 않는 링크를 지우지 않아서 발생한 에러.

src/IssueListPage.js에서 사용하지 않는 링크를 제거하여 해결.

이 부분 삭제

 

2.2 "error" is assigned a value but never used ("에러"값이 할당되었지만 사용되지 않음)

말 그대로, 에러값을 할당해 줬으나 사용하지 않아서 에러 발생.

error 부분 삭제

 

2.3 React Hook useCallback has a missing dependency ( React Hook useCallback에 종속성이 없음)

에러난 코드

내 경우엔 issue.length에 종속성이 없어서 오류가 났다.

때문에, issue.length을 의존성 배열에 추가함으로써, 이 변수의 값이 변경될 때마다 useCallback이 새로운 함수를 반환하도록 만들어준다.

 

pageNumber는 이미 배열 안에 존재하여 값을 업데이트해 줄 필요가 없으므로 제거해 준다.

 

observer는 ref 객체라서 내용이 변해도 컴포넌트가 재생성되지 않으므로 의존성배열에 넣지 않아도 된다.

 

말한 대로 고쳐주면 아래 코드와 같다.

 

 

배포 완료 후 404 에러

위와 같은 과정들을 거친 후, 무사히 배포를 완료했다!👽

그런데, 다른 페이지 (issueListPage → issueDetailPage)로 이동하면 404 에러가 뜨는 상황 발생. 

 

일반적인 원인은 클라이언트 사이드 라우팅을 사용하면서, 서버가 URL 접근 시 해당 경로에 대한 HTML 파일을 제공하지 않기 때문이라고 한다.

Create React App을 사용하여 빌드된 React 프로젝트의 경우, 모든 라우트 요청은 index.html 파일로 리다이렉션 되어야 한다. 이를 설정하지 않으면 직접 /issuedetailpage 경로로 접근했을 때 서버가 해당 파일을 찾을 수 없어 404 오류를 반환하게 되는 것이다.

 

나는 프로젝트의 public/ 폴더 내에 _redirects 파일을 생성하고 아래 내용을 추가하여 해결했다.

/*    /index.html   200

 모든 요청을 index.html로 리다이렉션 하라는 의미다.

 

---

 

이렇게 해서, 무사히 프로젝트를 배포해 봤다.

개발 단계에서는 사용하지 않는 값들을 지워주지 않고 테스트해도 잘 구현됐기 때문에 그냥 뒀었는데,

배포 단계에서는 하나하나 에러가 나는 걸 보며 좀 더 깔끔하게 코드를 작성해야겠다고 느꼈다!

<배포한 프로젝트 바로가기>

Facebook Issues