인프런 커뮤니티 질문&답변
작성한 질문수
npm run dev 무한 로딩 관련 질문입니다.
작성
·
376
0
안녕하세요 강사님
강사님의 내용을 주석으로 남기고 싶어서 내용을 작성하고 저장하여 실행하면 페이지 상태가 무한로딩을 합니다.
이전 시간에 test.tsx 파일을 만들고 _app.tsx 파일에서 header 태그를 생성하는 시간에도 이와 비슷하게 주석을 사용하여 기록하고 저장하여 프로젝트를 실행하면 똑같이 무한로딩을 하게 됩니다.
저와 비슷한 사례가 많이 없어 chatGPT에 질문하여 얻은 답변으로는 node 버전과 관련이 있다고 하여 현재 버전 v20.18.1에서 v18으로 낮추기도 했지만 달라지지 않아 다시 원래 버전으로 돌려 놓은 상태 입니다.
이번이 두번째로 주석만 사용하면 이렇게 나타나는 현상인지 아니면 다른 설정이 필요한 것인지 잘 모르겠습니다.
답변 2
1
안녕하세요 오재환님 이정환입니다.
우선 주석으로 인해 문제가 발생하는것은 일반적인 상황은 아니므로 문제의 원인이라고 짐작하기는 어려운 것 같습니다. 만약 문제가 있다면 .next 폴더에 있을 것 같은데요, 이럴 경우 AI 인턴의 안내대로 가동중인 Next.js 서버를 중단하신 뒤 .next 폴더를 제거하고 다시 npm run dev, npm run start 등으로 실행하시면 됩니다.
그런데 ... 그럼에도 어떠한 오류가 발생하는 것이 아닌, 무한 로딩이 발생하는 상황은 특이하네요 🤔
높은 확률로 현재 프로젝트의 설정 오류가 존재하는 것 같습니다 ㅠㅠ 그러나 지금 제공해주신 정보 만으로는 정확한 문제의 원인을 파악하기 어렵기 때문에, 현재 프로젝트를 Github나 Google Drive 등에 올려주시면 평일 오전 중으로 직접 다운로드 받아 확인해보겠습니다.
안녕하세요 강사님!
수업의 흐름을 끊고 싶지 않아서 Page Router 섹션을 모두 듣고 개발환경에서 무한로딩이 발생되어 중간중간 계속, .next 폴더를 삭제하고 다시 npm run dev 명령어를 통해 프로젝트를 실행하여 수강을 진행했습니다.
말씀하신 내용대로 프로젝트를 공유 드리기 위해 아래 링크 접속하여 확인해 주시면 감사하겠습니다.
ohjae45/oneBiteNextJsInfinityLoop: Next JS Infinity Loop
Ps. 무한로딩 외 빌드도 정상적으로 수행되지 않고 있습니다.. 이것 또한 .next 폴더를 삭제하고 다시 빌드하게 되면 되긴 합니다
감사합니다
안녕하세요 이정환입니다.
링크에서 코드 다운로드받아 직접 실행해 보았습니다만 동일한 문제를 재현하지 못했습니다 빌드도 정상적으로 수행되는데 정말 이상하네요 ...?
우선 다음 상황들을 먼저 체크해 보시면 좋을 것 같습니다.
혹시 WSL이나 기타 가상 환경에서 작업을 진행하고 계시다면 로컬 환경을 추천드립니다.
Next.js 프로젝트 경로에 한글이 포함되어 있다면 모두 영문으로 바꿔보시기 바랍니다.
그럼에도 안된다면 Next.js 프로젝트를 아예 새롭게 생성하시어 src 폴더만 옮기는 방식으로 초기화 해보시는걸 추천드립니다
위 방식대로 처리했음에도 동일한 문제가 계속 발생한다면 추가 답글 부탁드립니다!
1
안녕하세요, 인프런 AI 인턴입니다. 오재환님.
무한 로딩 문제는 여러 가지 요인에 의해 발생할 수 있는 복잡한 문제입니다. 특히, 개발 중인 환경에서 발생할 때는 프로젝트 설정이나 코드의 작은 실수도 큰 영향을 줄 수 있습니다. 주석을 작성한 뒤 무한 로딩 문제가 발생하는 경우, 몇 가지 가능성을 점검해 보시는 것이 좋습니다.
가능한 원인 및 해결책
주석 처리 오류: 주석의 형태나 위치가 잘못된 경우 오류를 발생시킬 수 있습니다. React JSX에서는
/* */와 같은 블록 주석 대신//를 사용하여 라인 주석을 사용하는 것이 더 안전합니다. 주석이 JSX 코드 내부에 영향을 미치지 않는지 확인해 주세요.Syntax Error: 주석을 삽입하는 과정에서 코드의 구조에 Syntax Error가 발생할 수 있습니다. 코드 편집기의 문제 탐지 기능을 사용해 보세요.
Next.js와 Babel 설정 문제: Next.js는 Babel을 사용하여 코드를 변환합니다. 만약
babel또는 관련 설정 파일이 잘못 구성되었다면, 무한 로딩 문제를 일으킬 수 있습니다. 이 경우 명령어npm run dev를 중단하고.next,node_modules,package-lock.json파일 및 폴더를 삭제한 후 다시npm install과npm run dev를 시도해 보세요.브라우저 캐시 문제: 브라우저의 캐시가 문제를 일으킬 수 있습니다. 캐시를 삭제하거나, 다른 브라우저나 시크릿 모드에서 확인해 보세요.
콘솔 로그 확인: 개발자 도구를 열고 콘솔 로그에 에러가 있는지 확인해 보세요. 에러 메시지는 문제를 해결하는데 유용한 힌트를 줄 수 있습니다.
이와 관련된 문제를 이미 해결한 기존의 질문과 답변을 아래 링크에서 찾아보실 수 있습니다:
위의 조언이 도움이 되길 바라며, 만약 문제가 지속된다면 프로젝트를 간소화하여 점진적으로 주석을 추가해보는 방법으로 원인을 좁혀나가시는 것도 하나의 전략입니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
인프런 AI 인턴의 내용대로 진행하여 정상적으로 작동됩니다.
추가로 이 다음 내용인 스타일링에서 scss사용도 가능한지 궁금하여 패키지를 설치하고 프로젝트를 실행하였을 때에도 동일한 문제로 무한 로딩에 걸렸습니다.
이후에 인프런 AI 인턴의 답변에 따라서 일부 파일을 삭제하고 재설치하여 정상적으로 페이지 로딩에 성공하고 scss 파일 또한 불러오는데 테스트를 진행했습니다.
리액트를 사용할때에는 이러한 문제를 겪어보질 않았었는데 이러한 문제를 사전에 방지하기 좋은 방법은 없는지 궁금합니다.
이 내용도 함께 답변 부탁드리겠습니다. 감사합니다
강사님
안녕하세요 강사님.
질문 드린 이후 잘 해결 되어 정상적으로 프로젝트가 작동 되고 있습니다. 고의로 문제를 일으키려 해도 무한로딩이 발생 되질 않습니다..ㅠ 만약 발생하게 된다면 해당 프로젝트를 말씀하신 공유 방식 중 하나를 택하여 공유해 드리겠습니다.
감사합니다.