인프런 커뮤니티 질문&답변

deusfm님의 프로필 이미지

작성한 질문수

Slack 클론 코딩[실시간 채팅 with React]

로그인 페이지 무한 새로고침 현상

24.10.10 20:03 작성

·

57

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

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

2024. 10. 10. 21:25

어땬 페이지에서 어떤 걸 눌러 어떤 페이지로 이동할 때 해당 증상이 발생하나요?

dist 폴더 지우고 재시작 후에도 동일한가요?

deusfm님의 프로필 이미지
deusfm
질문자

2024. 10. 10. 21:43

.next 폴더는 없습니다

로컬에서 개발과 동일하게

백 npm run start:dev

프런트 npm run build후 npm run dev 후에

localhost:3090 접속했습니다

localhost:3090/login에서 무한 새로고침 현상입니다

 

deusfm님의 프로필 이미지
deusfm
질문자

2024. 10. 10. 21:47

네 혹시 몰라서 dist, node_modules 삭제 후에

npm i하고 다시해도 같은 현상입니다 ㅠㅠ

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

2024. 10. 10. 21:55

if (!error && userData) {

console.log('로그인됨', userData);

return <Redirect to="/workspace/sleact/channel/일반" />;

}

이 부분 있다면 빼보시겠어요?

deusfm님의 프로필 이미지
deusfm
질문자

2024. 10. 10. 22:07

네 주석처리 했는데 동일 현상입니다 ㅠㅠ

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

2024. 10. 11. 12:00

npm i 한 번 다시 해보시고 빌드해보세요. 네트워크 탭 켰을 때 빨간 것들이 많은지 확인해보세요.

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

2024. 10. 11. 12:00

아, 그리고 백엔드 서버 켜셨나요?

deusfm님의 프로필 이미지
deusfm
질문자

2024. 10. 11. 22:10

npm i 다시하니깐 정상 작동 됐습니다

감사합니다!

제가 다른 페이지 만들어볼려고 MUI 라이브러리 설치했다가 다시 지웠던

기억이 있는데 이것 때문에 그런 것 같습니다!!

0

인프런 AI 인턴님의 프로필 이미지

2024. 10. 10. 20:06

안녕하세요, 인프런 AI 인턴입니다.

로그인 페이지에서 무한 새로고침 문제가 발생한 것을 보니, 프론트엔드 코드에 무엇인가 루프가 형성되어 새로고침을 유발할 가능성이 높습니다. 이러한 문제는 보통 상태 관리 문제, 비동기 요청의 잘못된 처리, 혹은 라우팅 설정의 오류 때문에 발생할 수 있습니다. 다음은 동일한 문제에 대한 몇 가지 해결책을 찾을 수 있는 기존 답변입니다:

1. 무한 새로고침 문제 해결

Redux 상태 관리 로직에서 문제를 찾는 방법에 대한 도움을 받을 수 있습니다. useEffect 훅이나 비동기 요청에 무한 루프가 발생하는지 확인해보세요.

2. 패키지 간의 버전 충돌 확인

  • 익스프레스 버전과 react-router-dom 을 포함한 라우터 관련 패키지들이 무한 새로고침을 유발할 수 있습니다. 특히 react-router-dom의 버전과 history 사용 방법이 중요합니다. 다음 링크에서 유사한 문제 해결 방안을 확인할 수 있습니다:

무한 새로고침 방지 방법

3. 로그인 로직 검토

  • 로그인에 사용되는 API 호출과 상태 관리 로직을 재검토해보세요. API 요청이 성공적으로 처리되지 않거나 로그인 상태를 잘못 관리해서 페이지 리다이렉팅 로직이 잘못될 수 있습니다.

로그인 관련 참고 자료

위의 링크들을 살펴보시고 코드 특정 부분, 특히 API 호출, 리렌더링 조건(useEffect의 의존성 배열 등), 상태 관리 로직을 확인해보세요. 이러한 점검을 통해 무한 새로고침 문제를 해결할 수 있을 것입니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

deusfm님의 프로필 이미지

작성한 질문수

질문하기