작성
·
122
0
안녕하세요 어느 날 갑자기 로그인 페이지가 무한 새로고침 현상이 발생 됩니다
백엔드 쪽에는 로그 /api/users 304로 새로고침마다 계속 응답해줘서 문제가 없는 것 같고
프런트쪽 문제인 것 같은데 개발자 도구를 볼 수 없을정도로 계속 새로고침 되서 당황스럽네요 ㅠㅠ
그래서 제로초님 깃허브 front/App/index.tsx, front/LogIn/index.tsx 코드 전체 붙여넣어도
동일 현상이 발생됩니다...
무언가 라이브러리 충돌이 있나 싶은데 package.json 코드입니다
{
"name": "artus-sleact-front",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "webpack serve --env development",
"build": "cross-env NODE_ENV=production webpack",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "ethan",
"license": "MIT",
"dependencies": {
"@emotion/babel-plugin": "^11.11.0",
"@emotion/react": "^11.11.4",
"@emotion/styled": "^11.11.5",
"@loadable/component": "^5.16.4",
"@pmmmwh/react-refresh-webpack-plugin": "^0.5.15",
"autosize": "^6.0.1",
"axios": "^1.7.2",
"cross-env": "^7.0.3",
"css-loader": "^7.1.2",
"dayjs": "^1.11.12",
"gravatar": "^1.8.2",
"react": "^17.0.2",
"react-custom-scrollbars": "^4.2.1",
"react-dom": "^17.0.2",
"react-mentions": "^4.4.10",
"react-refresh": "^0.14.2",
"react-router": "^5.3.4",
"react-router-dom": "^5.3.4",
"react-toastify": "^7.0.4",
"regexify-string": "^1.0.19",
"socket.io-client": "^4.7.5",
"style-loader": "^4.0.0",
"swr": "^2.2.5",
"ts-node": "^10.9.2",
"typescript": "^5.5.3",
"webpack-bundle-analyzer": "^4.10.2",
"webpack-cli": "^5.1.4"
},
"devDependencies": {
"@babel/core": "^7.24.7",
"@babel/preset-env": "^7.24.7",
"@babel/preset-react": "^7.24.7",
"@babel/preset-typescript": "^7.24.7",
"@types/autosize": "^4.0.3",
"@types/loadable__component": "^5.13.9",
"@types/node": "^20.14.9",
"@types/react-custom-scrollbars": "^4.0.13",
"@types/react-mentions": "^4.1.13",
"@types/react-router": "^5.1.20",
"@types/react-router-dom": "^5.3.3",
"@types/socket.io-client": "^1.4.35",
"@types/webpack": "^5.28.5",
"@types/webpack-bundle-analyzer": "^4.7.0",
"@types/webpack-dev-server": "^4.7.2",
"@types/gravatar": "^1.8.6",
"@types/react": "^17.0.80",
"@types/react-dom": "^17.0.25",
"babel-loader": "^9.1.3",
"eslint": "^8.57.0",
"eslint-config-prettier": "^9.1.0",
"eslint-config-react-app": "^7.0.1",
"eslint-plugin-flowtype": "^8.0.3",
"eslint-plugin-import": "^2.29.1",
"eslint-plugin-jsx-a11y": "^6.9.0",
"eslint-plugin-prettier": "^5.1.3",
"eslint-plugin-react": "^7.34.4",
"fork-ts-checker-webpack-plugin": "^9.0.2",
"prettier": "^3.3.2",
"webpack": "^5.92.1",
"webpack-dev-server": "^4.15.2"
}
}
답변 2
0
안녕하세요, 인프런 AI 인턴입니다.
로그인 페이지에서 무한 새로고침 문제가 발생한 것을 보니, 프론트엔드 코드에 무엇인가 루프가 형성되어 새로고침을 유발할 가능성이 높습니다. 이러한 문제는 보통 상태 관리 문제, 비동기 요청의 잘못된 처리, 혹은 라우팅 설정의 오류 때문에 발생할 수 있습니다. 다음은 동일한 문제에 대한 몇 가지 해결책을 찾을 수 있는 기존 답변입니다:
Redux 상태 관리 로직에서 문제를 찾는 방법에 대한 도움을 받을 수 있습니다. useEffect
훅이나 비동기 요청에 무한 루프가 발생하는지 확인해보세요.
react-router-dom
의 버전과 history
사용 방법이 중요합니다. 다음 링크에서 유사한 문제 해결 방안을 확인할 수 있습니다:위의 링크들을 살펴보시고 코드 특정 부분, 특히 API 호출, 리렌더링 조건(useEffect
의 의존성 배열 등), 상태 관리 로직을 확인해보세요. 이러한 점검을 통해 무한 새로고침 문제를 해결할 수 있을 것입니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
.next 폴더는 없습니다
로컬에서 개발과 동일하게
백 npm run start:dev
프런트 npm run build후 npm run dev 후에
localhost:3090 접속했습니다
localhost:3090/login에서 무한 새로고침 현상입니다