인프런 커뮤니티 질문&답변
로그인 페이지 무한 새로고침 현상
작성
·
502
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 인턴입니다.
로그인 페이지에서 무한 새로고침 문제가 발생한 것을 보니, 프론트엔드 코드에 무엇인가 루프가 형성되어 새로고침을 유발할 가능성이 높습니다. 이러한 문제는 보통 상태 관리 문제, 비동기 요청의 잘못된 처리, 혹은 라우팅 설정의 오류 때문에 발생할 수 있습니다. 다음은 동일한 문제에 대한 몇 가지 해결책을 찾을 수 있는 기존 답변입니다:
1. 무한 새로고침 문제 해결
Redux 상태 관리 로직에서 문제를 찾는 방법에 대한 도움을 받을 수 있습니다. useEffect 훅이나 비동기 요청에 무한 루프가 발생하는지 확인해보세요.
2. 패키지 간의 버전 충돌 확인
- 익스프레스 버전과 react-router-dom 을 포함한 라우터 관련 패키지들이 무한 새로고침을 유발할 수 있습니다. 특히
react-router-dom의 버전과history사용 방법이 중요합니다. 다음 링크에서 유사한 문제 해결 방안을 확인할 수 있습니다:
3. 로그인 로직 검토
- 로그인에 사용되는 API 호출과 상태 관리 로직을 재검토해보세요. API 요청이 성공적으로 처리되지 않거나 로그인 상태를 잘못 관리해서 페이지 리다이렉팅 로직이 잘못될 수 있습니다.
위의 링크들을 살펴보시고 코드 특정 부분, 특히 API 호출, 리렌더링 조건(useEffect의 의존성 배열 등), 상태 관리 로직을 확인해보세요. 이러한 점검을 통해 무한 새로고침 문제를 해결할 수 있을 것입니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.





.next 폴더는 없습니다
로컬에서 개발과 동일하게
백 npm run start:dev
프런트 npm run build후 npm run dev 후에
localhost:3090 접속했습니다
localhost:3090/login에서 무한 새로고침 현상입니다