본문으로 건너뛰기

TIL : 23-06-09

오늘 한 일​

  • 노른자 되기 대작전 프로젝트 배포

Trouble Shooting : 노른자 되기 대작전 프로젝트 배포​

[이슈]

  • Netlify를 통해 React 프로젝트를 배포하고자 하였으나
  • 아래의 두 문제 때문에 배포 실패를 겪음

Trouble Shooting 1 : basic build settings 설정​

4:12:18 PM: error Couldn't find a package.json file in "/opt/build/repo"
4:12:18 PM: "build.command" failed
4:12:18 PM: Command failed with exit code 1: yarn build
4:12:20 PM: Failed during stage 'building site': Build script returned non-zero exit code: 2

[문제]

  • 위 에러를 마주하였고 error Couldn't find a package.json file in "/opt/build/repo"를 해결하고자 함.
  • 처음 문제를 마주했을 때는, package.json 파일 경로 문제로 인식하고
    • yarn init, yarn, yarn build 해당 명령어들을 시도해보았음.

[해결]

  • basic build settings 설정 시
    • (변경 전) base directory는 빈칸, publish directory는 "/build"로 설정하였음.
      • 위와 같은 에러가 발생함.
    • (변경 후) base directory, build command, publish directory를 입력
      • base directory : noreunza
      • build command : yarn build
      • publish directory : build

[참고 레퍼런스][Netlify 배포 - 빌드 에러 해결방법](https://snakehips.tistory.com/entry/React-Netlify-%EB%B0%B0%ED%8F%AC-%EC%8B%A4%ED%8C%A8-%EB%B9%8C%EB%93%9C-%EC%97%90%EB%9F%AC-%ED%95%B4%EA%B2%B0%EB%B0%A9%EB%B2%95)

Trouble Shooting 2 : ESLint 오류​

4:25:42 PM: [eslint]
4:25:42 PM: src/components/Stage1/S1Content.jsx
4:25:42 PM:   Line 3:10:  'useEffect' is defined but never used  no-unused-vars
4:25:42 PM: src/components/Stage2/S2Content.jsx
4:25:42 PM:   Line 3:10:  'useEffect' is defined but never used  no-unused-vars
4:25:42 PM: src/components/Stage3/S3Content.jsx
4:25:42 PM:   Line 3:10:  'useEffect' is defined but never used  no-unused-vars
4:25:42 PM: src/components/Stage4/S4Content.jsx
4:25:42 PM:   Line 3:10:  'useEffect' is defined but never used  no-unused-vars
4:25:42 PM: src/components/common/Modal.jsx
4:25:42 PM:   Line 4:10:  'Link' is defined but never used  no-unused-vars
4:25:42 PM: error Command failed with exit code 1.

4:33:53 PM: [eslint]
4:33:53 PM: src/components/Stage1/S1Content.jsx
4:33:53 PM:   Line 3:10:  'useEffect' is defined but never used  no-unused-vars
4:33:53 PM: error Command failed with exit code 1.

[문제]

  • ESLint는 JavaScript 코드에서 잠재적인 문제를 감지하는 정적 분석 도구입임
  • 사용되지 않는 코드가 존재할 경우 ESLint에 의해 에러가 발생함.
    • 따라서 사용되지 않는 코드의 경우, 해당 코드를 제거하거나 사용하도록 수정해야 함.

[해결]

  • 위에 언급된 사용되지 않는 코드를 제거함.
  • 수정 후 yarn 명령어를 통해 다시 빌드함.